一套用于构建用户界面的渐进式框架, 核心库只关注视图层，易于上手，便于与第三方库或现有项目整合，且轻量。
声明式渲染使用插值表达式，基于 MVVM 来动态的影响页面与变量
# 页面上键入插值表达式 <div> {{ message }} # View 角色 </div> # 然后，进行 ViewModle 数据绑定。是 VM 角色 var app = new Vue({ # 新建 Vue 实例 el: '#app', # 通过ID选择器，来接管 div 区域 data: { message: 'Hello Vue!' # 是 Model 角色 } }) 双向绑定使用 v-modle 指令实现双向绑定
可以在一个 app 块中绑定多个变量，在赋值的时候使用逗号隔开。这样就渐渐的相当于 angula.js 使用 ng-app 声明在 body上占地为王一样
var app = new Vue({ el:'#app', data:{ flag:true, user:"张三" } });并且可以在浏览器调试页，使用 app.变量名 = 值 ，替换变量的值。
条件与循环 条件：v-if="变量名";当变量的值为 true 时，显示被 v-if 指令所在标签包裹的HTML内容。当值为 false 删除其所在html标签
<div> <span v-if="flag"> 你能看见我吗？ </span> </div> var app3 = new Vue({ el:'#app-3', data:{ flag:true } }); 隐藏：v-show = "变量名"；当变量的值为 false 时，为DOM的HTML标签添加CSS属性： style="display: none;"
因此：对于经常需要进行显示/隐藏切换的DOM标签，使用 v-show 性能更加优异
循环：v-for="临时变量 in 变量" <div> <ur v-for="user in users"> <li>{{user.name}}---{{user.age}} </li> </ur> </div> var app = new Vue({ el:'#app', data:{ users:[ {"name":"张三","age":23}, # JSON格式定义对象 {"name":"李四","age":24}, {"name":"王五","age":25}, {"name":"赵六","age":26} ] } });在调试页中可以使用 app.users.push({"name":"xxx","age":23}) 动态添加数据
定义一个唯一的字段作为 key ，可以提高遍历效率
在遍历时以如下方式使用 index
<ur v-for="(user, index) in users":key="index"> <li>{{index + 1}} {{user.name}}---{{user.age}}</li> </ur> 处理用户输入 组件化组件：页面上的某一部分，当一个网页非常大时，可以将该网页的内容拆分成几个部分，便于维护
定义组件定义全局组件
Vue.component('todo-item', { # 通过 Vue.component('组件名'，{组件内容}) 定义组件 template : "<li>Item</li>" # 通过 template 属性定义组件的内容 }); <ul> <todo-item></todo-item> <!-- 在页面以标签的方式使用组件 --> </ul>定义局部组件
// 定义局部组件 var TodoList = { template : "<li>Item</li>" }; // 注册局部组件 new Vue({ el: '#app', components : { "todo-item" : TodoList # 仍然在页面使用 todo-item 这个名字来使用组件 }) 利用组件实现 todolist <ul> <!-- 在使用组件的时候，可以进行传值，使用 : 变量名 = “值” --> <todo-item v-for="(content, index) in list" :key="index" :content="content" ></todo-item> </ul> // 全局组件 Vue.component('todo-item', { props : ['content'], # 用来接收传过来的值 template: "<li>{{content}}</li>" # 使用插值表达式来显示值 }); 组件和实例的关系一个组件也是一个实例
组件里面也可以写：methods / data / computed 属性
任何Vue项目都是由 n 个实例构成的
对于根实例，虽然没有显式的定义 template 模板属性，但是Vue会根据 el 属性，去找挂载点，将挂载点里面的全部内容作为模板
组件之间的交互父子组件之间的交互
父组件向子组件传递数据：
使用 : 属性名 = “值” 的方式传递，子组件 使用 props : ["属性名1"， "属性名2"] 的方式接收
子组件向父组件传递数据：
使用 : this.$emit("消息名"， 参数) 的方式来发送消息，在父组件的模板中使用 @消息名 = “函数名” 的方式来接收消息并处理。
具体的使用见练习2.
挂载点、模板、实例挂载点： el 属性绑定的DOM标签。用来声明Vue的作用域。不包含标签内部的变量
模板： 挂载点内部的HTML内容统称为模板。模板的定义方式有两种：
直接定义在挂载点所在的标签体内
在 Vue 实例里使用 template 定义：
var app = new Vue({ el:'#app', # 模板内容会覆盖原本挂载点里面的内容，请注意 template:"<h1>Hello {{msg}}</h1>", # 定义模板时，需要用标签来包装内容，否则无法识别 data:{ msg:"Hello World" } });实例：创建的 Vue 对象
使用 安装Vue.js 不支持IE8及以下版本，因为他使用了IE８不支持的 ECMAScript5 的特性。
引入核心库 <!-- 开发环境下引入完成包，生产环境引 min.js 包 --> <script src="http://www.likecs.com/vue.js"></script> 指令以 v- 作为前缀，vue指令会在渲染的DOM上应用特殊的响应行为。
v-text绑定DOM标签内的text文本内容。如果内容中存在HTML标签，会被原样展示
v-html绑定DOM标签内HTML内容
v-on:click = "functionName"绑定单击事件。注意：单击调用的方法只写方法名，不写小括号
在实例中定义 methods 对象，对象内部可以定义方法