vue指令概览

大纲

1、什么是vue指令
2、向指令中传入参数
3、指令中带入修饰符
4、指令的缩写
5、常见的vue指令
5.1、v-model双向绑定数据
5.2、v-for循环
5.3、v-if 元素的存在与否
5.4、v-else 搭配v-if使用
5.5、v-else-if搭配v-if使用
5.6、v-bind 属性绑定
5.7、v-style 通过v-bind实现style的绑定
5.8、v-class 通过v-bind实现class的绑定
5.9、v-on 事件绑定
5.10、v-text 读取文本
5.11、v-html 读取html标签
5.12、v-once 只渲染一次
5.13、v-pre 把标签内部的元素原位输出
5.14、v-show 是否显示

1、什么是vue指令

指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

现在你看到我了

2、向指令中传入参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

...



...

3、指令中带入修饰符

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

...

4、指令的缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写。

...


...




...


...

它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于特性名来说都是合法字符，在所有支持 Vue.js 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。

5、常见的vue指令

5.1、v-model双向绑定数据

{{msg}} 

5.2、v-for循环

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
v-for="item of items" v-bind:key="items.key"
如果没有绑定key值在严格模式下可能会有问题,需要让每一个item有自己的单独的key值区分列表中的不同项，并且这个key值要唯一，例如下列不能用age当做key值，应该用name当做key值

    

        {{item.name}}
        {{item.age}}
    

items: [
    {'name': 'xiaohong1', 'age': 12},
    {'name': 'xiaohong2', 'age': 12},
    {'name': 'xiaohong3', 'age': 12},
    {'name': 'xiaohong4', 'age': 12}
]

5.3、v-if 元素的存在与否

控制元素的存在与否，当传入v-if的值是true的时候则v-if绑定的DOM存在（切记这里说的是存在与否而不是显示与否）

condition: true


    存在或不存在：v-if

    存在

    不存在

    v-else/v-else-if配合v-if使用

5.4、v-else 搭配v-if使用

使用 v-else 指令来表示 v-if 的“else 块”
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

  Now you see me


  Now you don't

5.5、v-else-if搭配v-if使用

2.1.0 新增
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

  A


  B


  C


  Not A/B/C

5.6、v-bind 属性绑定

通过v-bind可以动态绑定标签上的属性的值，如input的value/name等属性的值

name: 'bindName'

5.7、v-style 通过v-bind实现style的绑定

vue中没有专门style的绑定，但是可以通过v-bind实现类似于v-style的绑定。
···
绑定color:red样式
···

5.8、v-class 通过v-bind实现class的绑定

vue中没有专门class的绑定，但是可以通过v-bind实现类似于v-class的绑定。

.text {
  color: coral;
}
绑定title样式

5.9、v-on 事件绑定

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的
因此 v-on 还可以接收一个需要调用的方法名称

点击我输出日志
methods: {
    clickMe () {
        console.log('click click click')
    }
}

5.10、v-text 读取文本

会将变量中的内容以文本的形式输出，哪怕内容中含有html标签，也不会解析，而是以文本的形式输出。
如:someHtml: '我是一些html斜体字' 得到的结果就是：我是一些html斜体字

someText: '我是一些文本'

5.11、v-html 读取html标签

会将变量中的内容读取出来，会解析内容中的html标签

someHtml: '我是一些html斜体字'

5.12、v-once 只渲染一次

v-once 进入页面时,只渲染一次,不再进行渲染:我只渲染一次
如果如下绑定在事件中，那么这个事件只会执行一次，而且是在渲染的时候自动帮我们执行了这个事件，之后的点击效果就失效了。

我是只渲染一次的点击事件

5.13、v-pre 把标签内部的元素原位输出

不会解析somePreText内的东西，直接原样输出{{soemPreText}}

{{soemPreText}}

5.14、v-show 是否显示

控制dom是否显示，即显示或隐藏
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
注意，v-show 不支持