Vue.js常用指令介绍跟举例应用

什么是vue.js指令？
指令是带有v-前缀的特殊属性。
vue.js指令的用途？
在表达式的值改变时，将某些行为应用到DOM上。
官方文档：https://cn.vuejs.org/v2/api/#指令

指令介绍
v-show：控制一个元素的display属性显示或者隐藏
v-on：为html元素绑定事件监听
v-model：将用户的输入同步到视图上,用在checkbox上时true为选择，false为取消选择，必须绑定到表单上
v-for：遍历data中数据，并在页面进行数据显示
v-bind：绑定HTML元素的属性
v-text：更新元素的textContent
v-if：根据表达式结果控制一个元素显示或者移除
v-else：为 v-if 或者 v-else-if 添加“else 块”
v-cloak：保持在元素上直到关联实例结束编译。防止界面出现{{}}等问题
v-pre：不编译这个元素和它的子元素，加快整体编译速度
v-once：只编译一次
v-html：只显示v-html绑定的元素

举例应用
v-show
语法： v-show = ‘表达式’

根据表达式结果的真假，确定是否显示当前元素
true表示显示该元素；false表示隐藏该元素；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div" v-show='false' style="width: 100px;height: 100px;background-color: gold;"></div>
		<div id="div2" v-show='true' style="width: 100px;height: 100px;background-color: red;"></div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:div
	});
	var vm2 = new Vue({
		el:div2
	});
</script>

v-on
语法： v-on:事件名称= ‘’函数名称()’
简写： @事件名称= ‘’函数名称()’
注：函数定义在methods配置项目中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div">
			<div  v-show='bol' style="width: 100px;height: 100px;background-color: gold;"></div>		
				<button v-on:click='fn()'>v-on</button>
				<button @click='fn()'>v-on</button>
			<h1>{{ bol }}</h1>
		</div>		
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:div,
		data:{
			bol:'true'
		},
		methods:{
			fn: function (){
				this.bol = !this.bol
			}
		}
	});		
</script>

v-model
语法：v-model = ‘变量’
注：v-model指令必须绑定在表单元素上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div">
			<input type="text" v-model='msg'/>
			<h1>{{ msg }}</h1>
			<input type="checkbox" v-model='bol1'/>{{ bol1 }}
			<input type="checkbox" v-model='bol2'/>{{ bol2 }}	
		</div>		
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:div,
		data:{
			msg:'leition',
			bol1:true,
			bol2:false
		}
	});		
</script>

v-for
语法： v-for =’ (值，键) in 数组’

值表示每次遍历得到的元素
键表示值的索引，可选参数
无需键的时候语法为 v-for =‘值 in 数组’

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div">
			<ul>
				<li v-for='(v,k) in arr'>{{ k +'---'}}{{ v }}</li>
				<li v-for='v, in arr'>{{ v }}</li>
			</ul>
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el: '#div',
		data: {
			arr: ['a','b','c']
		}
	})
</script>

v-bind
语法： v-bind:属性名 = ‘表达式’

绑定一个属性：<img v-bind:src=‘myUrl’ /》
绑定多个属性：<img v-bind:src=’{src:myUrl,title:msg}’ /》

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.bgcolor{
				background-color: red;
			}
			.textcolor{
				color: orange;
			}
		</style>
	</head>
	<body>
		<div id="div">
		<!--单个样式，为真则使用red样式,为假则不使用--> 
			<button v-bind:class = '{bgcolor: true}'>button</button>
			<button v-bind:class = '{bgcolor: flase}'>button</button>
		<!--多个样式，为真则使用red样式,为假则不使用--> 
			<button v-bind:class = '{bgcolor: true,textcolor:true}'>button</button>
			<button v-bind:class = '{bgcolor: flase,textcolor:true}'>button</button>
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el: '#div',		
	})
</script>

v-text
语法：v-text = ‘变量’

<html>
	<head>
		<title></title>
		<meta charset="UTF-8"/>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div">
			<p v-text='msg'></p>
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#div',
		data:{
			msg:'今天天气不错哟'
		}
	})
</script>

v-if
语法 v-if = ‘表达式’

表达式结果为true，表示显示这个元素
表达式结果为false，表示移除这个元素

<html>
	<head>
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<div id="div">
			<p v-if = true>今天天气不错</p>
			<p v-if = false>今天天气不错</p>
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#div'
	})
</script>

v-else和v-else-if
语法 v-else = ‘表达式’

前一兄弟元素必须有 v-if 或 v-else-if
为 v-if 或者 v-else-if 添加“else 块”/“else if块”

<html>
	<head>
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<div id="div">
			<p v-if = false>今天天气不错</p>
			<p v-else = true>今天有暴雨</p>
		</div>
		<div id="div2">
			<p v-if = false>今天天气不错</p>
			<p v-else-if = true>今天有雪</p>
			<p v-else = true>今天有暴雨</p>
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#div'
	})
	var vm2 = new Vue({
		el:'#div2'
	})
</script>

v-cloak
不需要表达式,直接添加在容器上。

<html>
	<head>
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<meta charset="UTF-8"/>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="div" v-cloak>
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#div'
	})
</script>

v-pre
不需要表达式,跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<html>
	<head>
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<div id="div">
			<p v-pre>{{ msg }}</p>
			<p>{{ msg }}</p>
		</div>		
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#div',
		data:{
			msg:'今天天气不错哟'
		}
	})
</script>

v-once
不需要表达式，只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<html>
	<head>
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<div id="div">
			<p v-once>{{ msg }}</p>
			<p>{{ msg }}</p>
			<input type="text" v-model="msg">
		</div>		
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#div',
		data:{
			msg:'今天天气不错哟'
		}
	})
</script>

v-html
语法：v-html = ‘元素’
更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

<html>
	<head>
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<div id="div">
			<p v-html="msg">{{ msg }}msg</p>
			<p>{{ msg }}msg</p>
			<input type="text" v-model="msg">
		</div>		
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#div',
		data:{
			msg:'今天天气不错哟'
		}
	})
</script>

指令练习地址：https://blog.csdn.net/qq_39383675/article/category/8256374

Vue.js常用指令介绍跟举例应用

猜你喜欢