vue常用指令和用法

1.v-text

设置标签的文本值内容；默然写法会替换全部内容，使用插值表达式{{}}可以替换指定内容；内部支持写表达式

<div id="app">
   <h2 v-text="message"></h2>
</div>
<script>
var app=new Vue({
 	el:"#app",
 	data:{
 		message:"message!"
 	}
})
</script>

2.v-html

设置标签的innerHTML；内容中有HTML结构会被解析成标签；v-text指令无论内容是什么，只会解析成文本；解析文本使用v-text,需要解析HTML结构使用v-html

<div id="app">
   <h2 v-html="content"></h2>
</div>
<script>
var app=new Vue({
 	el:"#app",
 	data:{
 		 content:"<a href='http://www.baidu.com'>百度</a>"
 	}
})
</script>

3.v-on

为元素绑定事件；指定可以简写为@；绑定的方法定义在methods属性中；方法内部可以通过this关键字可以访问定义在data中的数据；事件绑定的方法写成函数调用的形式，可以传入自定义参数；定义方法时需要定义形参来接收传入的实参；事件的后面跟上 .修饰符 可以对事件进行限制

<div id="app">
   <input type="button" value="v-on指令" v-on:click="doIt">
   <input type="button" value="v-on简写" @click="doIt">
   <input type="button" value="v-on双击" @dblclick="doIt">
</div>
<script>
var app=new Vue({
 	el:"#app",
 	 methods:{
 		 doIt:function(){  
              // 逻辑      
          },
 	}
})
</script>

4.v-show

根据表达式的真假，切换元素的显示和隐藏；指令后面的内容都会解析成布尔值

<div id="app">
    <img  v-show="true" src="地址" alt="">
    <img  v-show="isShow" src="地址" alt="">
</div>
<script>
var app=new Vue({
 	el:"#app",
 	data:{
 		isShow:false
 	}
})
</script>

5.v-if

根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）；表达式为true，元素存在于dom树中，为false，从dom树中移除；频繁的切换用v-show，反之用v-if，前者切换消耗小

<div id="app">
     <p v-if="isShow">P标签</p>
</div>
<script>
var app=new Vue({
 	el:"#app",
 	data:{
 		isShow:false
 	}
})
</script>

6.v-bind

设置元素的属性（比如：src，title，class）；完整写法：v-bind:属性名；简写：属性名；需要动态的增删class建议使用对象的方式

<div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!'" :class="isActive?'active':''" @click="Active">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!'" :class="{active:isActive}" @click="Active">
        <!-- class是否为active，取决于isActive是否为真，和三元表达式效果相同 -->
</div>
<script>
var app=new Vue({
 	el:"#app",
 	data:{
 	  	 imgSrc:"地址",
 		 imgTitle:"题目",
         isActive:false
 	},
 	 methods:{
        Active:function(){
            this.isActive=!this.isActive;
        }
   }
})
</script>

7.v-for

跟据数据生成列表结构；语法是( item,index ) in 数据；item 和 index 可以结合其他指令一起使用；数组长度的更新会同步到页面上,是响应式的

<div id="app">
    <ul>
         <li v-for="(item,index) in campus">
              {{index}}{{item}}
         </li>
    </ul>
    <h2 v-for="item in school1">
          {{item.name}}
    </h2>
</div>
<script>
var app=new Vue({
 	el:"#app",
 	data:{
 		 school1:[
              {name:"11111"},
              {mobile:"22222"}
         ],
          campus:["北京","上海","深圳","广州"]
 	}
})
</script>

8.v-model

获取和设置表单元素的值(双向数据绑定)；绑定的数据会和表单元素值相关联

<div id="app">
    <input type="text" v-model="message">
</div>
<script>
var app=new Vue({
 	el:"#app",
 	data:{
 		message:"message!"
 	}
})
</script>