Vue常用指令

• v-text:替换元素文本内容

  <p v-text="">HelloWorld</p>

• v-html:替换元素内容，包含标签

• <p v-html="">HelloWorld</p>

• v-bind:绑定属性指令   简写   :

• <img v-bind:src="url"  :title="title"/>

• v-on:绑定事件指令    简写    @click

• <input type="button" value="换一张" v-on:click="changeImg"/>
        methods:{  //所有方法
  				   changeImg(){
  					  this.index++;
  					  this.url=this.imgs[this.index%this.imgs.length];
  				   }
  		}
  

事件修饰符:（事件冒泡机制，从内往外捕获）

.capture ：阻止捕获 (从外往内捕获)

.stop ：阻止冒泡

.prevent :阻止默认行为

.once :只触发一次

.self - 只监听触发该元素的事件

<a href="http://www.baidu.com" @click.prevent.once="changeImg">换一张</a>

@click.prevent:替换原来的事件，例如a标签的超链接功能，让它失效

• v-model:实现表单元素双向数据绑定指令

<div id="app">
			用户名：<input type="text" v-model="uname" name="uname" /><br/>
		    <input type="checkbox" v-model="isChecked" name="all" @change="checkAll"/>全选<br/>
			<input type="checkbox" v-model="likes" @change="selectAll" name="likes" value="敲代码"/>敲代码<br/>
			<input type="checkbox" v-model="likes" @change="selectAll" name="likes" value="游戏"/>游戏<br/>
			<input type="checkbox" v-model="likes" @change="selectAll" name="likes" value="逛街"/>逛街<br/>
			<input type="checkbox" v-model="likes" @change="selectAll" name="likes" value="电影"/>电影<br/>
			
			<hr/>
<p>{{uname}}--{{isChecked}}--{{likes}}</p>
		</div>
		<script>
			var vm=new Vue({
				el:'#app',
				data:{
					uname:'小张',
					likes:['敲代码'],
					isChecked:false
				},
				methods:{
					checkAll(){
						if(this.isChecked){
							this.likes=['敲代码','逛街','游戏','电影'];
						}else{
							this.likes=[];
						}
					},
					selectAll(){
						if(this.likes.length==4){
							this.isChecked=true;
						}else{
							this.isChecked=false;
						}
					}
				}
			});
		</script>

• {{}}:插值表达式
• v-bind 实现Class样式绑定:
  • v-bind:class后面指定样式对象

  • <img v-bind:class="{c1:isC1}" src="img/tx.jpg" />
    data:{
    	isC1: true
    }
    

  • v-bind:class后面指定样式对象名

  • <img v-bind:class="classObject" src="img/tx.jpg" />
          data:{					
    classObject:{c1:true,c2:false}
    		}
    

  • v-bind:class 后面指定样式数组

  •      <img v-bind:class="[c1,'c2']" src="img/tx.jpg" />
          data:{	
    		c1:'c1'
    	  }
    

  • v-if v-else-if v-else v-show条件指令

    作用：控制元素的显示和隐藏

  •  v-if 和v-else指令

  • <img v-if="flag" src="img/12.jpg" />
    	  <img v-else src="img/13.jpg" />
    	  data:{
    		 flag:true
    	  }	
         特点：通过创建和删除元素实现元素显示和隐藏
    

     v-show 指令

  • <img v-show="flag" src="img/12.jpg" width="160px" height="120px"/>
    <img v-show="!flag" src="img/13.jpg" width="160px"height="120px"/>
    data:{
    		 flag:true
    	  }	
    特点：通过元素的display样式值实现元素显示和隐藏
    

•   v-for 循环指令
  • 迭代次数，i从1开始

  • <li v-for="i in count">{{i}}</li>
    data:{
    		count:3  //迭代次数
    }
    

•        遍历普通数组

• <li v-for="(value,index) in arr">{{index}}--{{value}}</li>
  arr:[10,20,30,40] 
  

       
•  遍历对象

• <li v-for="(value,key,index) in user">{{index}}--{{key}}--{{value}}</li>
  user:{uid:1001,uname:'大福',age:38}
  

• 遍历对象数组
•  

  <li v-for="(user,index) in users">
  					{{index}}--{{user.uid}}--{{user.uname}}--{{user.age}}
  	  </li>
       users:[{uid:1001,uname:'大福',age:18},
  			{uid:1002,uname:'中福',age:28},
  			{uid:1003,uname:'超福',age:38}]
  

• 如果使用v-for出现问题，必须绑定唯一的string/数值类型key属性 

• <tr v-for="user in users" :key="user.id">