vue常用指令

使用比较多的

1. v-model 指令，用于表单输入。
2. v-on 指令，用于事件绑定。
3. v-bind 指令，用于动态绑定一个值和传入变量。
4. v-once 指令，事件只能用一次，无论点击几次，执行一次之后都不会再执行。
5. v-html 指令，会将 span 的内容替换成 rawHtml 的属性值，直接作为 HTML 代码解析。
6. v-for 指令，与 HTML 标签结合使用，用于数据的遍历摆放。
7. v-if 指令，用来进行条件判断的，直接操作 dom。
8. v-else 指令，用来进行条件判断的，与 v-if 指令连用，意义为条件不成立时执行。
9. v-show 指令，根据真假切换元素的显示状态。

1. 插值操作

主要用于控制标签体的内容

        1. v-once

        vue 使用的是响应式编程范式，即在页面中展示的数据，可以通过直接修改变量响应式地来修改（比如在后端给前端响应数据要展示在页面上的话，就可以直接修改 data 中的值，从而改变页面上展示的数据。在后端响应之前，前端开发人员在编写页面的时候，可以先定义一些假数据方便测试）。

        通过 v-once 指令只显示一次 可以让数据在展示之后，不能再被修改。

        2. v-for

        通过 v-for 指令后跟随对应的表达式可以循环遍历 data 中的数组元素展示

        3. v-html

        当需要将 data 中数据内的标签解析之后再在页面中展示时，则需要使用 v-html 指令（可能后端返回的数据中就是带标签的，这时候一般就

需要将其解析）

        4. v-text

类似于 Mustache 表达式的效果，将数据原样展示在页面中。

与 Mustache 表达式不同的是，v-text 指令不会与标签体内容进行拼接，而是将其全部覆盖。

        5. v-pre

v-pre 指令可以使标签体中的内容原样展示，不会被解析。

        6. v-cloak

相当于一个属性，这个属性在 vue 解析之前是存在的，vue 解析之后会自动移除这个属性。（用途之一是在页面加载时，可能会出现

2. 动态绑定

主要用于控制标签的属性值

1. v-bind

        当想要给某个属性动态绑定值（data 中的数据）时，就在那个属性前加上 v-bind 指令。可直

        接简写为 :（语法糖）。

        在使用了 v-bind 指令的属性中，如果使用的是键值对方式，值如果使用引号引起来了的话，

        则会被当做字符串直接解析（解析之后会去除引号），如果没有使用引号，则会被当做变

        量，去 data 中找是否有这个变量，如果有再将值赋给这个变量。

2. 基本属性绑定        

        直接在属性前加上 v-bind 指令，再将 data 中所需的变量名写在值的位置即可

3. class 属性绑定

        可以用来进行样式控制，在 class 属性中通过键值对方式来进行样式控制（通过布尔值来控制

        class 属性中是否加入某个样式），在一个标签中可以写多个 class 属性（一个用来写一定需

        要的样式，另一个可以用来动态控制样式），vue 解析时会合并 class 属性。

4. 样式绑定

        与 class 属性绑定类似，也是通过键值对的方式来进行动态的样式控制（当服务器作出响应需

        要对某个组件的某个样式进行动态的改变）。在使用了 ==v-bind== 指令的属性中，如果使用

        的是键值对方式，值如果使用引号引起来了的话，则会被当做字符串直接解析（解析之后会

        去除引号），如果没有使用引号，则会被当做变量，去 data 中找是否有这个变量，如果有再

        将值赋给这个变量，否则会报错。

3. 事件监听

1. v-on

        在对应的事件类型前加上 v-on 指令用于绑定对应的事件监听器。

        可简写为 @（语法糖）

2. 参数传递

        1. 如果事件监听方法定义不要求参数，则调用事件监听方法时，可以省略括号。

        2. 如果事件监听方法定义要求一个参数，而调用方法时省略了括号，则会获取到浏览器产生

        的 event（当前事件）对象，并将其传递给方法；

        如果调用时加了括号，但是没有传递实参，则相当于传递了一个 undefined 类型的参数；如

        果调用时加了括号，且传递了实参，则会直接获

        取传递的参数（如果参数加了引号，则直接传递的当前数据，如果没有加引号，则会将其当

        做一个变量，去 data 中找是否有该变量，如果有，则传递该变量的值，如果没有，则还是相

        当于传递了一个 undefined 类型的参数）；

        3 .如果事件监听方法定义要求多个参数，而调用方法时省略了括号，则会把 event 对象赋值

        给第一个参数，后续参数全为 undefined 类型；而如果需要手动地获取 event 对象，则需要

        在调用方法时，通过 $event 来获取。

3. 按键监听

        一般通过 @keyup 来监听按键（松开按键的时候触发）。默认点击任何按键都会触发，可通

        过按键监听修饰符来指定按键触发。

4. 修饰符

        1. **.stop：**阻止事件冒泡（如：在 div 中有一个 button，div 与 button 都有点击事件，点击

         button 会同时触发 div 的点击事件）。

        2. **.prevent：**阻止默认事件（如：在 form 中，提交按钮点击就会自动提交表单）。

        3. 按键监听修饰符：可指定按键监听触发按键。

        4. **.once：**只触发一次回调（该事件值触发一次）。

4. 条件判断

1. v-if 可通过 v-if 指令的值来判断页面是否要渲染该内容（true 则渲染，false 则不渲染）

2. v-else 如果不满足 v-if 的条件，则会渲染有 v-else 指令的内容（任何情况下，二者只能显

        示其一）。

3. v-else-if v-else-if 指令可以用来配合 v-if、v-else 指令使用处理一些复杂的逻辑（不常用，

        可以用计算属性替代）

4. v-show

        v-show 指令类似于一个指令，当其值为 true 时，才会显示内容，否则不显示。

        v-show 与 v-if 的区别：

        v-if 当条件为 false 时，会直接删除掉该标签及其标签体，为 true 时，再创建；

        而 v-show 则是当条件为 false 时，会给元素添加一个行内样式：display:none，为 true 时，

        去除该样式。

        如果只切换一次的话（显示/隐藏），就使用 v-if（条件为 false，就不会渲染页面）；如果多

        次切换的话，就使用 v-show，不会频繁地创建删除，效率较高。

5. 循环遍历

1. v-for 遍历数组

        值 in 数组名：获取数组中的元素值；

        (值,索引) in 数组名：获取数组中元素值及其索引。

2. v-for 循环遍历对象

        值 in 对象名：获取对象中的值；

        (值,键) in 对象名：获取对象中的键及值（值在前，键在后）;

        (值,键,索引) in 对象名：获取对象中的键值对及其索引。

6. 双向绑定

1. v-model

        将表单项中要展示的数据与 data 中的数据进行绑定，如果修改 data 中被绑定的数据，则展

        示的数据也会改变，相应的，如果修改表单项中展示的数据，也会直接修改 data 中的数据。

2. 修饰符

                1. **.lazy：**如果没有加 .lazy 修饰符，修改数据是实时变化的，而在加了 .lazy 之后，

                修改数据之后需要敲回车，或者表单项失去焦点才会加载数据        

                2. **.number：**使用 v-model 指令绑定的变量会被默认当成字符串类型，如果需要使用

                 number 类型，则可以给指令加上 .number 修饰符。

                3. **.trim：**使用该修饰符会自动去除绑定值首尾的空格。