Vue中常用指令的具体含义与用法

最新推荐文章于 2023-11-29 17:21:34 发布

张小囧！冲呀！

最新推荐文章于 2023-11-29 17:21:34 发布

阅读量2.5k

点赞数 1

分类专栏： vue 文章标签： vue javascript html js

本文链接：https://blog.csdn.net/zhangxiaojiong_zh/article/details/105940117

版权

vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

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
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Vue中常用指令的具体含义与用法

1.vue中的指令是指什么？在表现形式上，就是带有’v-'前缀的属性。v-属性名=‘具体表达式’。当表达式对应的值发生变化后，将响应式的作用于Dom，从而影响视图层。更为具体的说，指令结合属性作为暗号，框架会根据按照对应的不同的值来进行Dom操作的绑定。因此，帮我们在实际开发中做了减法。2.vue中常用的指令（1）v-textv-text=‘msg1’，msg1被定义在数据属性中，指明了具...
复制链接

扫一扫