Vue.js指令详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Cookie__C/article/details/105849718

为什么使用Vue指令?

就是要实现JS与HTML的分离
HTML的结构应该定义在HTML文件中，而不是散落在JS代码中
JS代码仅仅是通过Model去控制View,而不是定义View。

一、条件渲染指令

v-if指令条件渲染指令
它根据表达式的true/false来删除或添加元素
语法:
v-if="expression’
expression 是一个返回bool值:

true:显示
false:元素删除转换为注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	<!-- 引入vue.js -->	
	<script src="js/vue.js"></script>	
	
	
	</head>
	<body>
		
		<div id = "app">
			<input type="button" value="显示" @click="show" />
			<p v-if="showP">能够被控制显示还是不显示的p标签</p>
			<p v-if="num1">如果{{num1}}是0不显示</p>
		    <p v-if="num2">如果{{num2}}是1显示</p>
		    <p v-if="num2 > 15">如果{{num2}} > 15显示</p>
			<p v-if="num2 > 3">如果{{num2}} > 3显示</p>
			<p v-if="str1"> 如果' {{str1}}' 是空字符串不显示</p>
			<p v-if="str2"> 如果'{{str2}}'是空字符串不显示</p>
			<p v-if="str2. indexof('c') > 0">8.含有有c，显示</p>
			<p v-if="nan"> NaN</p>
			<p v-if="obj1">null</p>
			<p v-if="obj2" >undefined</p>
		</div>
		   






	<script type="text/javascript">
		//model
		var m = {
			showP:false,
			num1:0,
			num2:1,
			str1:'',
			str2:'abc',
			nan:NaN,
			obj1:null,
			obj2:undefined
			
		}
		
		//viewmodel
		var vm = new Vue({
			el:'#app',
			data:m,
			methods: {
				show:function(){
					this.showP = true;
					
				}
			}
		});	
	</script>
	</body>
</html>

v-show指令条件渲染指令
它根据表达式的true/false来显示或隐藏元素
语法:
v-show=“expression”
和v-if指令不同的，使用v-show指令元素始终会在DOM上，通过修改style属性的显示与隐藏

true: display:block
false: display:none

v-else指令条件渲染指令
指令必须跟一个v-if或v-show元素后否则不能够被识别

二、列表渲染指令

v-for列表渲染指令

v-for可以用来渲染数组
v-for可以用来渲染JSON

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>	
	<!-- 引入vue.js -->	
	<script src="js/vue.js"></script>	
	</head>
	<body>	
		<div id = "app">
		<!-- 	<ul>
				<li>{{array[0]}}</li>
				<li>{{array[1]}}</li>
				<li>{{array[2]}}</li>
				<li>{{array[3]}}</li>
			</ul> -->	
			<ul>
				<!-- 一般的循环 -->
				<li v-for="val in array">{{val}}</li>
				<!-- 有下标的数组 -->
				<li v-for="(val,index) in array">{{index}},{{val}}</li>
				<!-- 带有key的循环json -->
				<li v-for="(val,key) in json">{{key}},{{val}}</li>
				<li v-for="(val,key,index) in json">{{key}},{{val}},{{index}}</li>
			</ul>	
		</div>	
        <script type="text/javascript">	 
		 var m = {
			 array:['beijing','shanghai','hangzhou','tianjin'],
			 json:{
				 first:'beijing',
				 second:'shanghai',
				 third:'tianjin',
				 fourth:'hangzhou'
			 }
		 } 
		 var vm = new Vue({
			 el:'#app',
			 data:m,
			 methods:{			 
			 }
		 });
     </script>
	</body>
</html>

三、表单与v-model

v-model：用于将控件与model双向绑定

input控件与model数据的双向绑定：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>	
	<!-- 引入vue.js -->	
	<script src="js/vue.js"></script>	
	</head>
	<body>	
		<div id = "app">
<!-- 		<input type="text" value="helloworld" /> -->
		<input type="text" v-model="theValue" />
		<p>{{theValue}}</p>
		</div>	
        <script type="text/javascript">	 
		 var m = {
			 theValue:'helloworld',
		 } 
		 var vm = new Vue({
			 el:'#app',
			 data:m,
			 methods:{			 
			 }
		 });
     </script>
	</body>
</html>

基于Bootstrap 3,实现一个输入用户名和留言的控件，用Vue指令实现响应命令。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>example</title>	
	<!-- 引入vue.js -->	
	<script src="js/vue.js"></script>	
	<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css" />
	<script src="jquery/dist/jquery.js"></script>
	<script src="bootstrap/dist/js/bootstrap.js"></script>
	</head>
	<body>	
		<div class="container">
			<div class="row">
				<div class="form-horizontal">
					<div class="form-group">
						<label for="username" class="col-sm-2 control-label">用户名：</label>
						<div class="col-sm-8">
							<input type="text" id="username"  class="form-control" v-model="username" />
						</div>
					</div>
					<div class="form-group">
						<label for="comment" class="col-sm-2 control-label">备注：</label>
						<div class="col-sm-8">
							<input type="text" id="comment"  class="form-control" v-model="comment"/>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-8 text-center">
							<input type="button"  value="添加" class="btn btn-primary" @click="addUser" />
						    <input type="reset" value="取消" class="btn btn-danger" @click="cancleUser"/>
						</div>
					</div>
				</div>
			</div>
			<hr />
			<table class="table table-bordered table-hover">
				<thead>
				<th class="text-center">ID</th>
				<th class="text-center">用户名</th>
			    <th class="text-center">备注</th>
				<th class="text-center">操作</th>
				</thead>
				<tbody>
					<tr v-show="userList.length==0">
						<td colspan="4" class="text-center text-danger" >
							暂时没有数据
						</td>
					</tr>
					
					<tr class="text-center" v-for="(item,index) in userList">
						<td>{{index+1}}</td>
						<td>{{item.username}}</td>
						<td>{{item.comment}}</td>
						<td>
							<input type="butten" value="删除"  class="btn btn-danger btn-group-sm" @click="deleteUser(index)" />
						</td>
					</tr>
				</tbody>	
			</table>
		</div>	
		
	
		
        <script type="text/javascript">	 
		
		// 1.需要用户名，备注，缓存的数组。
		// 2. username, comment绑 定到input控件
		// 3.通过v-show来控制“暂时没有数据”的显示
		// 4.将usersList的内容用v- for循环显示
		// 5.点击添加按钮，可以将用户名，备注中的信息加入table
		//    5.1.点击添加按钮，把数据添加到usersList
		//       检验username是否是空字符串;
		//       把数据添加到usersList里; 
		//       成功的添加后，username和comment要设定为空。
		//     5.2. table根据usersList更新(这步不需要我们做什么，因为再步骤4已经实现了)
		// 6.删除，点击对应项的删除按钮，把对应数据从usersList, 然后table根据usersList更新
		//   6.1.删除
		//   删除操作数组splice;
		//   确认对话框
		//   6.2. table根据usersList更新(这步不需要我们做什么，因为再步骤4已经实现了)

		 var m = {
			 username:'',
			 comment:'',
			 userList:[]
			 
			 //为了对步骤四进行验证，缺省数据
			 /* userList:[
				 {
					 username:'lalala',
					 comment:'hahaah'
				 },
				 {
					 username:'hello',
					 comment:'world'
				 }
			 ] */
			 
		 } 
		 var vm = new Vue({
			 el:'.container',
			 data:m,
			 methods:{		
				 addUser:function(){
					 console.log(this.username,this.comment);
					 if(this.username!=''){
						 this.userList.push({
							 username:this.username,
							 comment:this.comment
						 })
					 }
					 this.username = '';
					 this.comment = '';	 
				 },
				 deleteUser(index){
					 
					 var t = confirm('确认删除?');
					 if(t){
						 this.userList.splice(index,1);
					 }		 
				 },
				 cancleUser(){
					 this.username = '';
					 this.comment = '';
					 }
		     }
		 });
     </script>
	</body>
</html>

四、v-bind指令:

v-bind后面连接一个HTML属性，用来控制元素的属性值
语法: v-bind:arguments=“expression’

v-bind:src

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		
		<div id="app">
			
			<img v-bind:src="imgUrl" />
			<!-- 简写 -->
			<img :src="imgUrl" />
			
		</div>
		
		
		<script type="text/javascript">
			var m = {
				imgUrl:'image/OMGUVV51%5B125%25%7B8MG7D2%60AA.png',
			};
			
			
			var vm = new Vue({
				el:'#app',
				data:m,
				methods:{
					
				}
				
			});		
		</script>	
	</body>
</html>

v-bind:class

字符串
数组
JSON

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		div.red{
			width: 500px;
			height: 500px;
			background-color: red;
		}
		div.hasBorder{
			border: 5px solid #000000;
		}
	</style>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		
		<div id="app">
		     <input type= "button" value="添加边框" @click="func" />
		     <!--1. v-bind来控制class 字符串：麻烦以及原始，不推荐-->
			 <!-- <div :class="divclassStr"></div> -->
			 <!-- 2.v-bind来控制class 字符串数组 可用-->
			 <!-- <div :class="divclassArray"></div> -->
			 <!--3.v-bind来控制class JSON 可用  -->
			 <div :class="{red: isRed,hasBorder: hasBorder}"></div>
			 
		</div>
		
		
		<script type="text/javascript">
			var m = {
				divclassStr:'red',
				divclassArray:['red'],
				isRed:true,
				hasBorder:false
			};
			
			
			var vm = new Vue({
				el:'#app',
				data:m,
				methods:{
					//1.
					/* func(){
						if(this.divclassStr.indexOf('hasBorder') < 0){
							this.divclassStr = this.divclassStr + ' hasBorder';
						}
					} */
					
					//2.
					/* func(){
						if(this.divclassArray.indexOf('hasBorder') < 0){
							this.divclassArray.push('hasBorder');
						}
						
						} */
						
					//3.
					func(){
						this.hasBorder = true;
						
					}
				}
				
			});		
		</script>	
	</body>
</html>

v-bind:style

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		div.red{
			width: 500px;
			height: 500px;
			background-color: red;
		}
		div.hasBorder{
			border: 5px solid #000000;
		}
	</style>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		
		<div id="app">
		     <input type= "button" value="添加边框" @click="func" />

			 <!-- 1. v-bind来控制style 字符串 不推荐-->
			<!-- <div class="red" :style="borderstyleStr"></div> -->
			 <!-- 2.. v-bind来控制style JSON 可用-->
			 <div class="red" :style="{borderWidth: borderWidthStr,borderStyle: borderStyleStr,borderColor: borderColorStr}"></div>
			 
			 
		</div>
		
		
		<script type="text/javascript">
			var m = {
				//1.
				borderstyleStr: '',
				borderWidthStr: '',
				borderColorStr: '',
				borderStyleStr: ''
			};
			
			
			var vm = new Vue({
				el:'#app',
				data:m,
				methods:{
					//1.
					/* func(){
						this.borderstyleStr = 'border: 5px solid #000';	
					} */
					//2.
					func(){
						this.borderWidthStr = '5px';
						this.borderStyleStr = 'solid';
						this.borderColorStr = '#000';
					}
				}
				
			});		
		</script>	
	</body>
</html>