Vue.js的点点滴滴（一）

一、Vue.js的概念

Vue.js是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。

文档：https://cn.vuejs.org/v2/guide/

二、Vue.js的环境安装与配置

下载安装node.js，下载地址：https://nodejs.org/en/download/。详细的安装过程可以参考：https://www.runoob.com/nodejs/nodejs-install-setup.html
安装淘宝镜像，地址：https://registry.npm.taobao.org cmd窗口，输入如下命令进行安装：npm install -g cnpm --registry=https://registry.npm.taobao.org
安装express，命令：cnpm install -g express
安装webpack，命令：cnpm install -g webpack
安装Vue，命令：cnpm install vue
安装Vue-cli，命令：cnpm install -g vue-cli

到此Vue.js所需的环境就已经搭建好了。

三、命令窗口创建第一个Vue实例

cmd命令切换到你项目所要在的目录文件中，执行命令Vue创建命令来创建你的第一个Vue实例。命令：vue init webpack vue-projectname，其中vue-projectname是你的项目名称。项目的整个创建过程如下图所示：
进入项目，启动运行项目，然后在浏览器中访问。启动命令：npm run dev，项目启动后，默认是8080端口，访问：http://localhost:8080/，将会看到：
这就是你的第一个Vue实例。

四、手动编写Vue实例

（1）引入Vue.js，两种方法：

方法一：

方法二：在浏览器上打开https://vuejs.org/js/vue.js网址，Ctrl+s保存为vue.js文件，在代码中引入即可

（2）编写第一个Vue实例，代码如下：




   Vue入门
  


{{msg}}

说明：

（1）每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

new Vue({

// 选项（el标签，data，methods, template, components, watch, computed）

})

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

（2）{{msg}} 是Vue.js的插值表达式，它的值对应Vue实例中data属性的key。

（3）el标签：在Vue.js的实例中，用于绑定dom，称为挂载点。

（3）编写第二个Vue实例，代码如下：




    Vue入门

说明：

(1) template: 在new Vue()实例中，用于定义模板，可以将挂载点的内容放到此处；

(2)data: 在new Vue()实例中，用于定义数据，数据可以是字符串，数字，数组列表等；

(3)在new Vue()实例中，还可以定义methods（方法）, components（组件）, watch（监听器）, computed（计算属性）等。

（4）编写第三个Vue实例，代码如下：




Vue入门



    
   
     {{msg}}--{{number}}
     
     
     
     

     
     {{msg}}

（5）编写第四个Vue实例，代码如下：




Vue-计算属性和监听器
   
   



   姓：
   名：
   您好！{{firstName}}{{lastName}},欢迎你来到Vue世界！
   您好！{{fullName}},欢迎你来到Vue世界！
   计数器：{{count}}

关于更多Vue.js的点点滴滴，后续会不断更新，感谢诸君的支持！