Vue.js含义
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。学此框架的原因是正学习微信小程序的开发，学习到一半了解到这语法和vue语法很像，学过vue学小程序会更容易。
Vue.js语法
1.挂载点、模板及实例
挂载点：el属性(#root)对应后面id(id=”root”)所对应的节点,div标签就是Vue实例的挂载点（因为实例中的el与div中的id对应）；
模版： 指的是挂载点内部，也可以写在实例里面template属性里面;
实例：Vue会结合模版和数据生成最终要展示的内容，然后把放在挂载点之中。
ps: 实例中el:”#root”表示Vue接管的是 上面
随意任何标签（注意：渲染出data中的数据）。
2.数据、事件和方法
如上述代码，v-on是一个事件，handleclick是一个函数方法且在实例中定义，表示一点击content的内容就把content变成world。
v-html = “数据名” 输出<标签> 和 文本v-text = “数据名” 输出纯文本 ,
标签也会转义为文本。v-html与v-text的区别是，v-html不会转义，而v-text会转译；
v-on:click=”handleClick”：通过v-on给元素绑定一个Click事件，事件触发方法。v-on:click的简写方法：@click。 @click=”方法名”
在当前标签中绑定一个点击事件,方法在methods中声明new Vue中的this是指这个 Vue实例 ,指它自己’’this.data.属性名’’ 指 “Vue
里的 data 里的 属性”。
3.Vue中的属性绑定和双向数据绑定
v-bind：属性绑定。缩写为冒号 : (:title)
v-model：双向数据绑定，随着数据的修改与之对应的也会修改。
4.Vue中的计算属性和侦听器
1.计算属性(computed:)：一个属性通过其他属性计算而来
好处：（只有它依赖的数据发生变化的时候，它才会重新计算；如果依赖的属性没有发生变化，它会利用以前计算结果的缓存来在页面上做显示）
2.侦听器(watch)：指的是监听某一个数字发生了变化，然后就在监听器里面做业务逻辑，侦听器watch：监测某一个数据或计算属性发生了变化，一旦这个数据发生了变化，就在该侦听器内写入业务逻辑。注：watch不仅可以监听vue实例的data内属性，而且可以监听计算computed下计算属性的变化
5.v-if,v-show,v-for指令
v-if：当对应data中的值show是true时显示，为false，则把这个标签就移除。
v-if 和 v-show 用处：
1.v-show 不会像 v-if 每次销毁再重新创建，v-show 性能相对v-if 高一些；
2.如果标签显示的频率不是那么大，只需要做一次显示或者隐藏，这时候用 v-if 是一个更好的选择。
所以：
v-if:具有选择性的指令，可以是页面显示隐藏。
v-show:加的隐藏
v-for：循环遍历，注意添加key的属性它的值的内容必须是完全不同的
Vue.js的组件
1.todoList功能开发
Vue是在操作数据、点击提交，将input的内容放进数组中，如果数组有内容，列标签会自动循环，将数据输出。JQ是操作DOM, 而Vue是操作数据。一句话来说: key值是为了虚拟dom的比对。展开来说: 页面上的标签都对应具体的虚拟dom对象(虚拟dom就是js对象), 循环中 ,如果没有唯一key , 页面上删除一条标签, 由于并不知道删除的是那一条! 所以要吧全部虚拟dom重新渲染, 如果知道key为x标签被删除掉, 只需要把渲染的dom为x的标签去掉即可!
2.todoList组件拆分
3.组件和实例的关系
每一个vue组件都是一个vue实例。实例的模板里使用一个小的组件。每一个组件也可以写methods，data。因此每一个组件都是一个Vue的实例。如果不定义模板，就会根据挂载点下面的DOM标签标签全部内容当做模板。
4.实现todoList的删除功能
父组件向子组件传值，通过属性的方式传递，子组件中通过props接收。在子组件中通过$emit触发父组件的自定义事件（this.$emit(‘delete’,this.index)），子组件中通过监听事件的触发（@delete=”handleDelete”）进行相应的业务逻辑处理。
在子组件的方法中，发布一个事件this.$emit( ‘ 事件名 ‘ , this.属性) this.属性：需要传递的参数
在子组件标签中绑定一个事件,触发父组件里的方法 <子组件标签 @事件名=”方法名” > <子组件标签 />
Vue-cli的简介与使用
一、首先是安装配置
注意：my-project是你自己的项目名称
【用脚手架工具创建项目】
1、npm install -global vue-cli 全局安装vue脚手架工具 vue-cli
2、vue init webpack my_project 创建一个基于webpack模版的新项目
3、cd my-project 进入到项目目录
4、npm run dev 运行项目
5、项目运行成功点击进入http://localhost:8080没出错即成功
二、其次解读项目中各个文件
