Vue进阶属性
展示内容
表达式
- {{ object.a }}表达式
- {{ n + 1 }}可以写任何运算
- {{ fn(n) }}可以调用函数
- 如果值为 undefined 或者 null 就不显示
HTML内容
- 假设data.x值为< strong>hi< /strong>
- < div v-html="x">< /div>即可显示粗体的hi
我就是想{{ n }}
- < div v-pre>{{n}}< /div>
- v-pre不会对模版进行任何编译
绑定属性
绑定src
- < img v-bind:src="x" />
- 简写：< img :src="x">
绑定事件
v-on:事件名
- < button v-on:click="add">+1< /button>
- 点击之后，Vue会运行add()
- 缩写：< button @click="add">< /button>
.sync修饰符
directives指令
- 全局用Vue.directive('x',{...})
- 局部用options.direvtives
- 作用是减少DOM操作相关的重复代码
mixins混入
- 全局用Vue.mixin({...})
- 局部用options.mixins:[mixin1,mixin2]
- 作用是减少options里的重复
extends继承/扩展
- 全局用Vue.extend({...})
- 局部用options.extends:{...}
- 作用跟mixins差不多，只是形式不同
provide/inject提供和注入
- 祖先提供东西，后代注入东西
- 作用是大范围，隔N代共享信息
