Vue中常用指令的具体含义与用法
1.vue中的指令是指什么？在表现形式上，就是带有’v-'前缀的属性。v-属性名=‘具体表达式’。当表达式对应的值发生变化后，将响应式的作用于Dom，从而影响视图层。更为具体的说，指令结合属性作为暗号，框架会根据按照对应的不同的值来进行Dom操作的绑定。因此，帮我们在实际开发中做了减法。2.vue中常用的指令（1）v-textv-text=‘msg1’，msg1被定义在数据属性中，指明了具...
1.vue中的指令是指什么？
在表现形式上，就是带有’v-'前缀的属性。v-属性名=‘具体表达式’。当表达式对应的值发生变化后，将响应式的作用于Dom，从而影响视图层。更为具体的说，指令结合属性作为暗号，框架会根据按照对应的不同的值来进行Dom操作的绑定。因此，帮我们在实际开发中做了减法。
2.vue中常用的指令
（1）v-text
v-text=‘msg1’，msg1被定义在数据属性中，指明了具体的值。将具体的值展示在视图层，对应javascript中的innerText属性。同时，其作用又与模板语法{{具体的数据属性名}}类似。因此一般较为少用
（2）v-html
v-html=‘msg2’，msg2被定义在数据属性中，指明了具体的html内容。对应javascript中的innerHtml属性。
（3）v-if与v-else
v-html=‘msg3’，msg3被定义在数据属性中，若msg3对应的值为true，则使用v-if的盒子会显示在页面中；否则，该盒子不会显示在页面中。v-if控制了页面元素的显示与否。但是v-if是实实在在的控制页面中元素的存在与否，相当于对appendChild和removeChild的使用。如果要反复控制页面元素显示与否，则不建议使用v-if和v-else，因为会降低页面的性能。需要注意的是当使用了v-if=‘true’的元素显示的时候，则使用v-else的元素不会显示；当使用了v-if=‘false’的元素不显示时，则使用了v-else的元素会显示。
（4）v-show
v-show=‘msg4’,msg4被定义在数据属性中。与v-if在功能上类似，若msg4对应的值为true则所在元素会在页面上显示；否则，所在元素不显示于页面。但v-show与v-if的区别在于v-show是通过控制display:none/block来控制元素的显示与隐藏的。因此，v-show常用在页面元素需要频繁显示与隐藏的场景之下。
（5）v-bind
v-bind:标签属性 /自定义属性=‘msg5’，msg5被定义在数据属性中。v-bind被用来绑定元素的属性，即可以绑定标签自带的属性，也可以绑定自定义的属性。其对应的缩写形式为：标签属性 /自定义属性=‘msg5’。
（6）v-on
v-on:原生事件名=‘method1’，method1被定义在methods中。v-on被用来绑定事件。其缩写形式为：@原生事件名=‘method1’。
（7）v-for
v-for = ‘(item,index) in array1’ 或 v-for=’(value,key) in obj1’ 可以用来遍历数组和对象，并将数组和对象对应的值显示在视图层
3.vue中常用指令的具体使用
（1）详细代码如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue中的指令</title>
<style>
.box, .box2 {
width:200px;
height:200px;
background-color: red
}
.active {
background-color: green
}
</style>
</head>
<body>
<div id="app">{{msg1}}</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
// 数据属性可以用对象或函数的格式，在以后的开发中使用函数格式，这是因为函数形成闭包以防止数据泄露或污染
data:function() {
return {
msg1:'Vue学习',
msg2:'<p>向前看</p>',
msg3:true,
isGreen:false,
menuLists:[
{name:'张三', age:18},
{name:'王五', age:16}
],
person:{
name:'张三',
age:18
}
}
},
/*
1.开发过程中的View都在template中编写,而且在template中只能有一个根容器；
2.需要特别特别注意的是template中包含的内容不是用引号括起，而是` `，该符号输入法英文状态下能输出；
3.数据属性中的isGreen通过true和false控制active是否作为class。active:true时候active则作为当前标签的一个class；否则，active不作为当前标签的一个class。
*/
template:`
<div class="app">
<p v-text="msg1"></p>
<div v-html="msg2"></div>
<div v-if="msg3">v-if的使用</div>
<div v-else>v-else的使用</div>
<div class="box" v-bind:class="{active:!isGreen}">v-bind绑定原生属性</div>
<div v-bind:aaa="!isGreen">v-bind绑定自定义属性aaa</div>
<div class="box2" v-on:click="clickHander" v-bind:class="{active:!isGreen}">点击切换颜色 v-on:的使用</div>
<div>
<ul >
<li v-for= "(item,index) in menuLists">
<h5>{{item.name}}</h5>
<h5>{{item.age}}</h5>
</li>
</ul>
</div>
<div>
<ul >
<li v-for= "(value,key) in person">
<h5>{{key}}={{value}}</h5>
</li>
</ul>
</div>
</div>` ,
methods: {
clickHander:function(e) {
console.log(e) //输出的是mouseEvent
console.log(this) //输出的是实例化的vue对象
this.isGreen = ! this.isGreen //那么isGreen的值总是在true和false间切换，但是又因为active类名的存在是通过isGreen来控制。所以反复执行clickHander则盒子背景颜色在绿色和红色之间反复切换
}
}
})
</script>
</body>
</html>
（2）代码对应结果截图
当然，除了官网给出的指令外，我们还可以结合生命周期来自定义指令，但是一般在项目中应用不多。
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)