内置指令 v-开头的特殊属性联系html模板与javascript数据模型

v-text:

用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题 （如果数据中有HTML标签会将html标签一并输出 ）

注意：此处为单向绑定，数据对象上的值改变，差值会发生变化；但是当插值发生变化并不会影响数据对象的值

​

v-html与{{}}

用法和v-text 相似 但是它可以将HTML片段填充到标签中

可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上

它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析输出。

{{}}只能写一行表达式不能写复杂js如 if

​

属性渲染 v-bind

使用方法：v-bind：属性名="属性值"

条件渲染v-if与v-else-if和v-else

指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。

 v-show

他与v-if有相同的功能：

v-for

用于遍历数组对象

 同时他还有表示范围的一种写法

 实例：快看看吧

 事件渲染

vue为v-on提供了事件修饰符，通过点(.)表示的指令后缀来调用修饰符。

computed

computed 选项定义计算属性。
计算属性类似于 methods 选项中的函数。

比较：

计算属性：会进行缓存，只在相关响应式依赖发生改变的时候才会重新求值。函数：每次都会执行函数体进行计算。

需求：输入数学与英语的分数，采用 methods 与 computed 分别计算出总得分。

实例：

 watch

定义：监听数据的变化，执行回调函数

 实例: