Vue指令合集

这章我们认识一下Vue中的指令

什么是vue指令：相当于vue中的语法糖，其显著的是v-开头，响应式的影响DOM元素

指令分为自定义指令和vue自带指令

今天我们主要来说一下vue自带的指令

 v-text/v-html

这两个的区别不是很大，在这里我放在一块解释

v-text：

将data中的数据动态的渲染到页面上，这个指令是不解析HTML代码的，它会将你需要渲染的数据原样的输出到页面上

 

 可以看到v-text是原样将msg给输出了，并没有经过解析

 

v-html: 

将data中的数据动态的渲染到页面上，这个指令会解析HTML代码，它会把你要渲染的数据经过解析后渲染到页面上

 

 而v-html则是将msg中的h1标签解析了

  v-show/v-if

这两个都是控制节点显隐的，但本质上还是有区别的

v-show:

v-show="表达式"，根据表达式进行判断 它是给你这个节点设置display：none来控制显隐，也就是说为true正常显示，为false的话设置display：none样式，这个指令一般用于切换频繁的时候使用，因为它只需要添加或者删除这个display样式

 

 

  我们可以通过f12检查一下 ，发现为false的时候给p标签设置了display：none属性

 

 

isshow为true的时候正常显示

v-if/v-else-if/v-else: 

v-if="表达式"，同样根据表达式为true或者false，v-else-if和v-else的使用方法同上，如果这个指令如果是false的话是直接不渲染的,为true的时候正常渲染，所以这个不太适用于频繁切换，多适用于初次渲染大量数据的使用

 

 

 isshow为true的时候正常显示

 

 

 isshow为false的时候直接就不会渲染

   v-clock

v-clock:

这个指令主要是用来消除vue未加载时页面出现源代码的问题

 

 

 v-bind

v-bind:

这个指令是用于绑定属性的，我们常用来绑定class，这个指令可以缩写为 : (冒号)，

写法:  v-bind="{'你要绑定的样式名称','表达式'}"，这个写法是绑定对象的，还可以用来绑定数组v-bind="['样式名1','样式名2,'样式名3']"

 isshow为true的时候样式就会绑定上，那么样式中color：red也会添加到p标签中，为false的时候这个样式则不会绑定

v-on 

v-on:

这个指令是用来绑定事件的，可以简写为@，

用法@事件名="函数名"或者v-on:事件名="函数名"

 

 

 咱们使用这个指令是可以传参的，只需要在函数名后加上小括号，在下面methods中相对的函数小括号中写如用来接受参数的值即可(这个形参自定)

 

 

 v-model

v-model:

数据双向绑定，这个指令只用于表单属性，像我们常见的input、select、radio、checkbox

其原理我之前讲过，点击查看

用法: v-model="data中的某一个数据"

 

 

 视图跟你使用v-model绑定的msg是同步的

 v-once

v-once:

这个指令的作用是：首次渲染后，不再随数据的变化重新渲染，将被视为静态内容

 这次就分享这么多，还有几个指令我会放在后面讲

以上是本人的个人理解，如有不足 欢迎指正 谢谢