Vue常用指令

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

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

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

  1. v-text:当于innerText
  2. v-html:相当于innerHTML
  3. 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>
  1. 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
  1. 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>
  1. v-bind:所以v-bind的作用是专门用于给"元素的属性"绑定数据的
	格式一:v-bind:属性名称="绑定的数据"
    <input type="text" v-bind:value="gender">
   格式二::属性名称="绑定的数据"
    <input type="text" :value="name">
  1. v-on:v-on指令专门用于给元素绑定监听事件
	<button v-on:click="myFn">vue监听事件2</button>
    <button @click="myFn">vue监听事件3</button>
  1. 按键修饰符:监听特定按键触发的事件
	 <input type="text" placeholder="监听键盘按下回车事件" @keyup.enter = "myFn">
    <input type="text" placeholder="自定义监听键盘事件:按下F2事件监听" @keyup.113 = "myFn">
    注意点:113是keyCode中按键F2的键码值
  1. 自定义全局指令:
vue.directive('自定义指令名称', {
    生命周期名称: function (el) {
        指令业务逻辑代码
    }
});
  1. 自定义局部指令:
directives: {
    // key: 指令名称
    // value: 对象
    'color': {
        bind: function (el, obj) {
            el.style.color = obj.value;
        }
    }
}
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页