Vue的常用指令有哪些？

Vue官方提供的指令，常用的有10个，分别是：

1. v-model 

作用: 多用于表单元素实现双向数据绑定,也可实现父子组件传值,本质上是一个语法糖，底层原理是由@input事件+value实现的

   <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:'路径'}
}

3、v-for 动态渲染

v-for 指令基于一个数组来渲染一个列表。建议设置key值，并且保证每个key值是独一无二的；

arr 数组对象数据
    <ul>
       <li v-for="value in arr">
            <h3>id:{{value.id}}</h3>
            <h3>name:{{value.name}}</h3>
       </li>
    <ul>

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

4、v-show 显示内容

v-show的原理是动态为元素添加或移除 `display` 样式，来实现元素的显示和隐藏

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

 

 

5、v-if 显示与隐藏

v-if 的原理是动态的在DOM树上创建或移除元素，实现元素的显示和隐藏

<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-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 给标签绑定函数 

可以缩写为@，例如绑定一个点击函数 函数必须写在 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：可以把带有标签的字符串，渲染成真正的 HTML 内容！

以上就是Vue的常用指令！