Vue 常用的指令都有哪些？并且有什么作用?

1、v-model 多用于表单元素实现双向数据绑定

    <input v-model="name" /> 
     // name 需要再data中定义,需要接收v-model传递过来的参数
     
   		data() {
 		   return {name:''}
  	   }

---

2、v-bind 动态绑定

作用： 及时对页面的数据进行更改

<!-- 完整语法 -->
<a v-bind:href="url"></a>


<!-- 缩写 -->
<a :href="url"></a>

	data() {
 		   return {url:'路径'}
  	   }

v-bind:class 三种绑定方法
1、对象型 ‘{red:isred}’
2、三元型 ‘isred?“red”:“blue”’
3、 数组型’[{red:“isred”},{blue:“isblue”}]’

v-bind和v-model的区别

v-bind是一个单向数据绑定，映射关系：Model->View,我们不需要进行额外的DOM操作，只需要进行Model的操作就可以实现视图的联动更新。

v-model是一个双向数据绑定，映射关系：View接受的数据,传给model,model的数据再传给view。把Model绑定到View的同时也将View绑定到Model上，这样就既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。所以，当我们用JavaScript代码更新Model时，View就会自动更新，反之，如果用户更新了View，Model的数据也自动被更新了。

---

3、v-for 动态渲染

格式：v-for=“字段名 in(of) 数组 json” 循环数组或 json, 需要注意从 vue2 开始取消了$index

list 数组数据
    <ul>
       <li v-for="item in list" :key="item.id" v-html="item.name" />
    </ul>

data

data() {
    return {
      list: [
        {id: 1,name: '小明'},
        {id: 2,name: '小红'},
        {id: 3,name: '小绿'},
      ]
    }
   }

v-for里的:key

1. 在写v-for的时候，都需要给元素加上一个key属性
2. key的主要作用就是来提高渲染性能的
3. key的属性可以避免数据渲染混乱的情况出现(如果元素中包含了临时数据的元素，如果不用key就会产生数据混乱)

---

4、v-show 显示内容

	 <div v-show="bool">我就是一个盒子</div>
     <div v-show="!bool">我就是两个盒子</div>
  		
  	 data() {
   		 return {
      		bool: true  // v-show 只会接收 布尔值(boolean)
   	   }
  }

---

5、v-if 显示与隐藏

<div id="app">
    <h1 v-if='yes'>Yes!</h1>
    <h1 v-if='no'>No!</h1>
</div>

<script>
	export default {
         data(){
            return {
          	    yes:true,
                no:false,
            }
        }
    }
</script>

v-else-if 必须和 v-if 连用 v-else 必须和 v-if 连用 不能单独使用 否则报错 模板编译错误

<div id="app">
    <h1 v-if='yes'>Yes!</h1>
    <h1 v-else>No!</h1>
</div>

v-if和v-show的区别

1.手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
4.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

---

6、v-on:click 给标签绑定函数

可以缩写为@，例如绑定一个点击函数 函数必须写在 methods 里面

<div class="app">
    <!--正常写法-->
    <button v-on:click="myclick">click me</button>
    <!--简写-->
    <button @click="myclick">click me</button>
</div>  

<script>
 methods: {
    myclick() {
      console.log('你点我了一下')
    }
  }
</script>

---

7、v-text和v-html、{{}} 解析文本

	<div id="app">
    <!--  
		注意:在指令中不要写插值语法  直接写对应的变量名称 
        在 v-text 中 赋值的时候不要在写 插值语法
		一般属性中不加 {{}}  直接写 对应 的数据名 
	-->
    <p v-text="msg"></p>
    <p v-text="html"></p>
    <p>
        <!-- Vue  中只有在标签的 内容中 才用插值语法 -->
        {{msg}}
    </p>
</div>
 
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js',
            html: "<span>html标签在渲染的时候被解析</span>"
        }
    });
 
</script>

总结

v-text和{{}}表达式渲染数据，不解析标签。
v-html不仅可以渲染数据，而且可以解析标签。　

---