Vue的指令语法

指令的作用：当表达式的值发生改变时，将其产生的连带影响，响应式地作用于 DOM。

1.v-html：可以在标签内写入内容 （在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。）

2.v-text：用法和v-html一样

3.v-show：是通过修改元素的css样式的display属性来达到显示和隐藏的

     语法格式：v-show='表达式'：（不需要参数，但需要表达式）

     作用：'表达式'的执行结果需要时一个布尔类型的数据 ture/false

     如果一个元素频繁的显示和隐藏建议时用v-show 而不建议使用v-ifv-if:

4.v-if：

  语法格式：v-if='表达式'：（不需要参数，但需要表达式）

           作用：'表达式'的执行结果需要时一个布尔类型的数据 ture/false

           ture时：这个指令所在的标签，会被喧染到浏览器中。

           false时：这个指令所在的标签，不会被喧染到浏览器中。

5.v-for：

                v-for要写在循环项上

                v-for的语法格式： v-for="(变量名，index) in/of 数组名"

                                              变量名代表了 数组中的每一个元素

6.v-on:

语法格式：

    v-on:事件名=“表达式”

        例如：

        v-on:click="表达式"表示当发生鼠标单击事件是发生之后，执行的表达式

        v-on:keydown=“表达式”表示发生键盘按下事件后，执行表达式

   在vue中，所有事件所关联的回调函数，需要在vue实例的配置项methods中进行定义

        在methods中可以定义多个回调函数

        在函数中 ：function可以省略

        v-on 的简写形式：@事件名=“表达式”

  vue 在调用回调函数的时候，会自动给回调函数传递一个对像，这个对象是：当前发生事件的对象在绑定回调函数的时候，可以在回调函数的参数上使用$event占位符，vue框架看到$event占位符后会自动将当前事件以对象的形式传递过去

7.v-once:（不需要参数也不需要表达式）

           只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

8.v-bind：

         1.在编译的时候v-bind后面"参数名"会被编译为html标签的 "属性名"

         2.表达式会关联data，当data发生改变时，表达式的执行结果会发生改变。所有连带产生动态效果

9.v-model:

      v-model 和 v-bind 的区别：

         1.都可以完成数据的绑定

         2.v-bind是单向的数据绑定  data==>视图

         3.v-model是双向绑定 data<==>视图

         4.v-bind可以在任何标签内使用 v-model只能使用在表单类的元素上