模板语法（文本插值、属性绑定、JS表达式、过滤器、指令）
Vue实例（viewModal(属性+函数)、生命周期）
计算属性和监听器 (computed(get,set) 与 watch)
样式绑定（对象绑定、数组绑定、内联绑定）
条件绑定（v-if v-show）
列表渲染 (v-for、:key、数组监测、过滤/排序)
事件处理 (监听、修饰符、key修饰符)
表单输入绑定（text、checkbox、radio、select）
一、模板语法
文本插值
- 使用 `{{ }} / <span v-text="msg"></span>` 绑定数据 - `{{ }}` 纯文本绑定，单向，随vm变化而变化 - `<span v-once>{{ msg }}</span>` 纯文本，单次，不跟随vm变化 - `<span v-html="msg"></span>` 不转义html标签，绑定html
属性绑定
- 使用 `v-bind` 指令绑定数据至标签属性 - `<a v-bind:id="msgId"></a> 简写 <a :id="msgId"></a>`
模板中的JS
支持表达式执行，但不支持多个表达式、语句和控制流的执行
属性绑定和绑定的数据都支持JS表达式
//加减乘除、三元运算、方法调用 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div> //错误用法 <!-- 这是语句，不是表达式 --> {{ var a = 1 }} <!-- 流控制也不会生效，请使用三元表达式 --> {{ if (ok) { return message } }}
过滤器
- 使用 `|` 对原始值进行处理 - 用于属性绑定与 `{{ }}` - `{{ msg | capitalize }} <a :id="msgId | formatId"></a>` - 可以串联 `{{ msg | filterA | filterB }}` - 可以接收参数 `{{ msg | filterA(arg1, arg2) }}`
指令
- 带有 `v-` 前缀的特殊属性 - 当其表达式的值改变时相应地将某些行为应用到 DOM 上 - `v-bind/v-for/v-html/v-on/v-if/...` - `v-bind` 缩写 `<a v-bind:href="url" ></a><a :href="url" ></a>` - `v-on` 缩写 `<a v-on:click="doSomething"></a><a @click="doSomething"></a>`
注册过滤器
//全局注册 Vue.filters('capitalize',value=>{ if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) //局部注册 filters: { capitalize: function (value, arg1) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } //使用 <span>{{msg | capitalize(arg1) }}
注意
注册过滤器时，如果需要传递参数，必须从第二个参数开始，第一个参数为当前绑定的数据
过滤器一般用于简单的文本格式化，如果是对多个状态数据，或是复杂的数据处理应该使用计算属性
注册指令
//全局注册 // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() } }) //局部注册 directives: { focus: { // 指令的定义--- } } //使用 <input v-focus />
二、Vue实例
Vue 实例，实则也就是 ViewModel（数据 + 函数），都是通过构造函数 Vue 创建
var vm = new Vue({ name:'root', // 数据 data: { a: 1 } / Function, // data类型根实例为Object，组件中为Function props:[]/{}, // 设置父组件传递给子组件的数据限制 computed:{}, // 计算属性 watch:{}, // 监控属性 methods:{}, // 事件操作 // 资源 directives:{}, // 内部指令 filters:{}, // 内部过滤器 components:{}, // 内部组件 // 生命周期：实例创建 => 编译挂载 => 组件更新 => 销毁 beforeCreate(){ console.log('beforeCreate ==> 实例创建') }, created(){ // 可以操作data, 但未生成DOM（未挂载）发起异步请求，初始化组件状态数据 data console.log('created ==> 实例创建完成，属性已绑定') }, beforeMount(){ console.log('beforeMount ==> 模板编译/挂载之前') }, mounted(){ // 已生成DOM到document中，可访问this.$el属性 console.log('mounted ==> 模板编译/挂载之后') }, beforeUpdate(){ console.log('beforeUpdate ==> 组件更新之前') }, updated(){ // 操作DOM $('#box1') console.log('updated ==> 组件更新之后') }, activated(){ // 操作DOM $('#box1') console.log('activated ==> 组件被激活时（for keep-alive组件）') }, deactivated(){ console.log('deactivated ==> 组件被移除时（for keep-alive组件）') }, beforeDestroy(){ // 解除事件绑定，销毁非Vue组件实例等 如：this.$off('event1') select2.destory() console.log('beforeDestroy ==> 组件销毁之前') }, destroyed(){ console.log('destroyed ==> 组件销毁之后') } })
三、计算属性与监听器
computed
任何复杂逻辑，都应当使用计算属性
可以像绑定普通属性一样在模板中绑定计算属性
声明式地创建依赖关系，计算属性的 getter 是干净无副作用的，因此也是易于测试和理解的。