Vue常用指令

指令：即Vue内部提供的自定义属性，其封装了Vue内部实现的一些功能。

1. v-once：界面不跟数据变化，只渲染一次。
   v-cloak：数据渲染后自动显示元素。 [v-cloak]:{display: none}默认先隐藏未渲染的界面等到生成HTML渲染之后再重新显示。

Vue数据绑定过程：
1.会先将未绑定数据的界面展示给用户
2.然后再根据模型中的数据和控制的区域生成绑定数据之后的HTML代码
3最后再将绑定数据之后的HTML渲染到界面上

2. v-text：当于innerText
3. v-html：相当于innerHTML
4. v-if：条件渲染: 如果v-if取值是true就渲染元素,如果不是就不渲染元素

<div id="app">
    <p v-if="score >= 80">优秀</p>
   <p v-else-if="score >= 60">良好</p>
   <p v-else>差</p>
   </div>
   <script>
   let vue = new Vue({
       el:"#app",
       data:{//v-if从模型中获取数据
           show:true,
           hidden:false,
           age:18,
           score:60
       }
   });
</script>

5. v-show:v-show和v-if的能够一样都是条件渲染, 取值为true就显示, 取值为false就不显示

v-if和v-show区别

• v-if: 只要取值为false就不会创建元素
• v-show: 哪怕取值为false也会创建元素,只是如果取值是false会设置元素的display为none。
  所以: 如果企业开发中需要频繁切换元素显示隐藏, 那么推荐使用v-show, 否则使用v-if

6. v-for:相当于JS中的for in循环, 可以根据数据多次渲染元素

<div id="app">
    <ul>
        <!--遍历数组-->
        <li v-for="(value, index) in list">数组：{{index}}_{{value}}</li>
        <!--遍历字符串-->
        <li v-for="(value, index) in 'asdf'">字符串：{{index}}_{{value}}</li>
        <!--遍历数字-->
        <li v-for="(value, index) in 4">数字：{{index}}_{{value}}</li>
        <!--遍历对象-->
        <li v-for="(value, key) in obj">对象：{{key}}_{{value}}</li>
    </ul>
</div>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            list:["123", "张世坤", "束带结发", "sd"],
            obj:{
                name:"jdf",
                age:"33",
                gender:"man",
                class:"sdf"
            }
        }
    });
</script>

7. v-bind:所以v-bind的作用是专门用于给"元素的属性"绑定数据的

	格式一：v-bind:属性名称="绑定的数据"
    <input type="text" v-bind:value="gender">
   格式二：:属性名称="绑定的数据"
    <input type="text" :value="name">

8. v-on:v-on指令专门用于给元素绑定监听事件

	<button v-on:click="myFn">vue监听事件2</button>
    <button @click="myFn">vue监听事件3</button>

9. 按键修饰符：监听特定按键触发的事件

	 <input type="text" placeholder="监听键盘按下回车事件" @keyup.enter = "myFn">
    <input type="text" placeholder="自定义监听键盘事件：按下F2事件监听" @keyup.113 = "myFn">
    注意点：113是keyCode中按键F2的键码值

10. 自定义全局指令：

vue.directive('自定义指令名称', {
    生命周期名称: function (el) {
        指令业务逻辑代码
    }
});

11. 自定义局部指令：

directives: {
    // key: 指令名称
    // value: 对象
    'color': {
        bind: function (el, obj) {
            el.style.color = obj.value;
        }
    }
}