vue常用指令简介

(1)v-text:是元素的innerText，只能在双标签中使用
(2)v-html:是元素的innerHTML,不能包含{{xxx}}
(3)v-if:元素是否插入或者移除
(4)v-show:元素是否显示或者隐藏
(5)v-model:双向数据绑定
(6)v-bind:单项数据绑定

注：innerText和innerHTML解释：
<span id='span_id'><p>这是文本内容</p></span>
document.getElementById('span_id').innerText;//这是文本内容
document.getElementById('span_id').innerHTML;//<p>这是文本内容</p>

document.getElementById('span_id').innerText=“<p>这是文本内容</p>”;//<p>这是文本内容</p>
document.getElementById('span_id').innerHTML=“<p>这是文本内容</p>”;//这是文本内容

(7)v-bind的用法：v-bind:属性名=“表达式”；
        简写方式---：属性名=“表达式”
        例子：<span v-bind:class="变量?red;green">文本内容</span>
(8)v-on的用法：v-on:属性名=“表达式||函数名”；
        简写方式----@属性名=“表达式||函数名”
        例子：<button v-on:click="change()">请点击</button>;
              <button @click="change">请点击</button>--函数没有参数可以省略();
        注意：change()是vue中定义的methods中的方法。

(9)v-for的使用：
        *可以使用操作数组(item,index)
        *可以使用操作对象(value,key,index)
           

<div>
	<ul>
		<li v-for="stu in stus">					
			stu:{{stu}}
		</li>
		<li v-for="(stu,index) in stus">				
			index:{{index}}	
			stu:{{stu}}
		</li>
		<li v-for="(stu,index) in stus" :key="index">				
			index:{{index}}	
			stu:{{stu}}
		</li>
	</ul>

	<ul>
		<li v-for="(val,key) in person" >						
			value:{{value}}	
			key:{{key}}	
		</li>
		<li v-for="(val,key,index) in person" :key="index">		
			value:{{value}}	
			key:{{key}}	
			index:{{index}}
		</li>
	</ul>
</div>
<script>
	export default{
		data(){
			return{
				stus:[{name:'li',age:20},{name:'wang',age:30}],
				person:{name:'zhang',sex:'男'}
			}
		}
	}
</script>