vue常用指令列表

v-once

默认情况下, vue事件是可以重复触发的,但是在特定的情况下, 我们只想要事件执行一次.所以就有了v-once

<div id="app">
    <input type="text" placeholder="请输入数据" v-model="name">
    <p v-once>{{ name }} <span>我会进行一次渲染</span></p>
    <p>{{ name }} <span>我会进行多次渲染</span></p>
</div>
    
<script>
    new Vue({
        el: "#app",
        data:({
             name:"张三",
        })
    })
</script>

v-cloak

vue如果渲染的时候使用的是{{data}}进行渲染的话,在网络不好的情况,会显示{{data}},这样子的用户体验并不好,所以就有了 v-cloak 这个指令

<style>
    [v-cloak] {
    /* v-cloak 必须配合这个style 进行隐藏 */
        display: none;
    }
</style>

<div id="app">
    <p v-cloak>{{ name }} <span>如果网络差,我则不会显示</span></p>
    <p>{{ name }} <span>无论网络状态如何 ,我都会显示</span></p>
</div>

<script src="vue.js"></script>

<script>
    new Vue({
        el: "#app",
        data: ({
            name: "张三",
        })
    })
</script>

v-text and v-html

v-text 等同于 innerText
v-html 等同于 innerHTML

<div id="app">
    <!-- 数据插值 : 把数据插入到指定位置 ,并且不会覆盖原有的内容 -->
    <p>{{name}}</p>
    <p>+++++n{{name}}+++++</p>
    <!-- 数据插值 : 不会解析HMTL标签 -->
    <p>{{span}}</p>
    <!-- v-text 直接渲染数据, 并且会覆盖原有的数据 -->
    <p v-text="name"></p>
    <p v-text="name">++++++++++</p>
    <!-- v-text 不会渲染 HTML 标签 -->
    <p v-text="span"></p>
    <!-- v-html 会覆盖原有数据, 并且可以渲染数据和html标签 -->
    <p v-html="name">+++++++++</p>
    <p v-html="span">+++++++++</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: ({
            name: "张三",
            span: "<span> 我是span标签 </span>"
        })
    })
</script>

v-if and v-else-if and v-else

<div id="app">
    <!-- v-if 如果为假, 则压根不会创建元素  -->
    <input type="text" v-model="age">
    <!-- v-if 会接收数据模型中的数据 , 判断是否是真 ,为真就显示  -->
    <p v-if="show">我会显示</p>
    <p v-if="hidden">我不会显示</p>
    <p>------</p>
    <!-- v-if 可以接收行内表达式 -->
    <p v-if="age >= 18">成年人</p>
    <p v-if="age < 18">未成年</p>
    <!-- 也可以接收直接传值 -->
    <p v-if="true">我会显示</p>
    <p v-if="false">我会显示</p>
    <!-- v-if 也可以搭配 v-else 和 v-else-if 进行使用  -->
    <!-- v-else-if如果不需要, 也是可以省略的 , 但是需要主要注意的是 ,else必须紧跟if后面 -->
    <input type="text" v-model="abc">
    <p v-if="abc === 'a'">a</p>
    <p v-else-if="abc === 'b'">b</p>
    <p v-else-if="abc === 'c'">c</p>
    <p v-else>not abc</p>
</div>

<script>
    new Vue({
        el: "#app",
        data: ({
            show: true,
            hidden: false,
            age: 18,
            abc: "a"
        })
    })
</script>

v-show

<div id="app">
    <!-- v-show 和 v-if 特性相同, 而不同之处则是它无论条件是否成立 ,都会创建元素, 控制display,而v-if则会动态创建元素与否 -->
    <p v-show="show">我会显示</p>
    <p v-show="hidden">我不会显示</p>

    <p v-show="true">我会显示</p>
    <p v-show="false">我不会显示</p>

    <input type="text" v-model="age">
    <p v-show="age >= 18">我会显示</p>
    <p v-show="age < 18">我不会显示</p>
</div>

<script>
    new Vue({
        el: "#app",
        data: ({
            show: true,
            hidden: false,
            age: 18
        })
    })
</script>

v-model

<div id="app">
    <input placeholder="请输入数据" type="text" v-model="name">
    <p>{{ name }}</p>
</div>


<script>
    new Vue({
        el: "#app",
        data: ({
            name: "张三",
        })
    })
</script>

v-for

<div id="app">
    <!-- 单属性 -->
    <!-- <li v-for="value in list">{{value}}</li> -->
    <ul>
        <!-- 遍历数组 -->
        <li v-for="(value,index) in listArr">{{index}}---{{value}}</li>
    </ul>
    <ul>
        <!-- 遍历对象 -->
        <li v-for="(value,key) in listObj">{{key}} --- {{value}}</li>
    </ul>
    <ul>
        <!-- 遍历字符 -->
        <li v-for="(value,index) in 'abcdefghijklmn'">{{index}}---{{value}}</li>
    </ul>
    <ul>
        <!-- 遍历数字 -->
        <li v-for="(value,index) in 10">{{index}}---{{value}}</li>
    </ul>
</div>


<!-- v-for 相当于 js 中的 for in 循环 -->
<!-- v-for 可以循环遍历   数组 / 对象 / 字符 / 数字 -->
<script>
    new Vue({
        el: "#app",
        data: ({
            listArr: ["张三", "李四", "王五", "赵六"],
            listObj: {
                name: "张三",
                age: "18",
                sex: "男"
            }
        })
    })
</script>

v-bind

<div id="app">
    <!-- value 绑定 -->
    <input type="text" v-bind:value="name">
    <input :value="name" type="text">
    <input :value="age + 10 " type="text">
</div>
<!-- v-bind 可以给元素的属性动态绑定数据 -->
<!-- v-bind 取值特点: 只要是一个合法的 js 表达式即可 -->
<!-- v-bind 可以简写为   :    -->
<script>
    new Vue({
        el: "#app",
        data: ({
            name: "张三",
            age: 18,
        })
    })
</script>

v-bind绑定类名

    <style>
        .size {
            font-size: 25px;
            font-weight: bold;
        }

        .color {
            color: red;
        }

        .active {
            background: skyblue;
        }
    </style>

<div id="app">
    <!--v-bind 动态绑定类名 -->
    <p :class="['size','color','active']">我是段落</p>
    <!--v-bind 按需加载类名-->
    <p :class="['size','color', flag ? 'active' : '' ]">按需加载active</p>
    <!--v-bind 对象方式按需加载-->
    <p :class="['size','color',{active:false}]">对象当时按需加载</p>
    <!--v-bind 获取data中的对象进行加载-->
    <p :class="obj">获取data中的对象</p>
</div>

<!--
应用场景
1. 从服务器端获取样式返回给前端控制界面
2. 按需加载类名
3. v-bind 无论绑定什么 ,一切都是为了动态控制
-->


<script>
    new Vue({
        el: "#app",
        data: ({
            flag: true,
            obj: {
                size: true,
                color: true,
                active: false
            }
        })
    })
</script>

v-bind绑定样式

<div id="app">
    <!--动态绑定 style-->
    <!--注意点 : key和value最好都用引号包裹起来, 否则 如果 key 带有 - 会导致无效 -->
    <p :style="{color:'red'}">我是段落1</p>
    <p :style="{'color':'red'}">我是段落2</p>
    <!--带 - 的 key -->
    <!--第一种方式, 用引号包裹住 key -->
    <p :style="{'font-size':'50px'}">我是段落3</p>
    <!--第二种方式,  把 key 转换为驼峰 -->
    <p :style="{fontSize :'50px'}">我是段落4</p>

    <!--
    总结上两点 :
        key 值可以不用 引号包裹起来, 但是 如果遇到带 - 的key 就必须转换为 驼峰命名法
        value 值必须用引号包裹起来, 无论怎么写的情况下,都需要
    -->

    <!--从model中引入-->
    <p :style="obj">我是段落5</p>

    <!--从model中引入多个对象-->
    <p :style="[obj,obj1]">我是段落6</p>

</div>

<script>
    new Vue({
        el: "#app",
        data: ({
            obj: {
                'color': 'red',
                'font-size': '50px',
                'font-width': '700'
            },
            obj1: {
                'background': 'skyblue'
            }
        })
    })
</script>

v-on

<div id="app">
    <!--v-on 基础使用-->
    <!--click是事件名称 ，后面必须是 函数名称，函数名称的（）可写可不写-->
    <button v-on:click="myFn()">我是按钮</button>
    <!--v-on简写 -->
    <button @click="myFn()">我是按钮</button>

</div>
<script>
    new Vue({
        el: "#app",
        data: ({}),
        //methods钩子 , vue 中所以需要执行的方法 ,都写在 methods 中
        methods: {
            myFn() {
                alert("123");
            }
        }
    })
</script>

v-on事件修饰符

    <style>
        .a {
            width: 300px;
            height: 300px;
            background: red;
        }

        .b {
            width: 200px;
            height: 200px;
            background: blue;
        }

        .c {
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>

<div id="app">
    <!--
    .once - 只触发一次回调。
    .prevent - 调用 event.preventDefault()。
    .stop - 调用 event.stopPropagation()。
    .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
    .capture - 添加事件侦听器时使用 capture 模式。
    -->

    <!--默认可以重复执行-->
    <button @click="myFn">可以重复执行</button>
    <!-- .once 让函数只执行一次 -->
    <button @click.once="myFn">只执行一次</button>
    <!-- a标签默认事件会跳转 -->
    <a @click="myFn" href="https://www.baidu.com">我是有默认事件的</a>
    <!-- .prevent 阻止默认事件 -->
    <a @click.prevent="myFn" href="https://www.baidu.com">我的默认事件被阻止了</a>

    <hr>

    <!--嵌套关系默认是会有冒泡事件-->
    <div @click="myFnA" class="a">
        <div @click="myFnB" class="b">
            <div @click="myFnC" class="c"></div>
        </div>
    </div>

    <hr>

    <!--阻止冒泡事件 -->
    <div @click.stop="myFnA" class="a">
        <div @click.stop="myFnB" class="b">
            <div @click.stop="myFnC" class="c"></div>
        </div>
    </div>

    <hr>

    <!--让鼠标只有点击在他本来的元素的时候 ,才触发事件, 阻止冒泡和捕获-->
    <div @click.self="myFnA" class="a">     <!-- 只添加了给A  ,所以冒泡不会给到 A-->
        <div @click="myFnB" class="b">
            <div @click="myFnC" class="c"></div>
        </div>
    </div>

    <hr>
    <!--把默认的事件冒泡事件改变为 事件捕获-->
    <div @click.capture="myFnA" class="a">
        <div @click.capture="myFnB" class="b">
            <div @click.capture="myFnC" class="c"></div>
        </div>
    </div>

</div>

<script src="vue.js"></script>

<script>
    new Vue({
        el: "#app",
        data: ({}),
        methods: {
            myFn() {
                alert("123");
            },
            myFnA() {
                console.log("A");
            },
            myFnB() {
                console.log("B");
            },
            myFnC() {
                console.log("C");
            },
        }
    })
</script>

v-on按键修饰符

<div id="app">
    <!--
    vue 提供了很多默认的按键修饰符
    .enter
    .tab
    .delete (捕获“删除”和“退格”键)
    .esc
    .space
    .up
    .down
    .left
    .right
    -->
    <!--使用按键修饰符进行触发事件-->
    <input @keyup.enter="myFn" type="text" value="按enter键触发">
    <!--使用任意按键触发事件-->
    <input @keyup="myFn" type="text" value="按任意键触发">
    <!--自定义按键触发事件  例如 F2-->
    <!--格式:   keyup.keyCode码       -->
    <input @keyup.113="myFn" type="text" value="按F2触发事件">
    <!--但是直接写  keyCode码 并不好识别是按了什么按键, 所以可以使用别名代替-->
    <input @keyup.f2="myFn" type="text" value="按F2触发事件">
    <!--按键组合修饰符-->
    <!-- Alt + C -->
    <input @keyup.ctrl.c="clear" value="按 Ctrl + C 触发事件">
</div>

<script>

    //定义全局 按键修饰符 别名
    Vue.config.keyCodes.f2 = 113;
    Vue.config.keyCodes.c = 67;

    new Vue({
        el: "#app",
        data: ({
            name: "张三"
        }),
        methods: {
            myFn() {
                alert(this.name);
            },
            clear() {
                alert("不允许复制");
            }
        }
    })
</script>

v-on注意点

<div id="app">
    <!--
    1.使用v-on的时候 , 调用函数名称后面的 () 可写, 可不写 ,但是如果要传递参数,则必须写
    -->
    <button @click="myFn">我没有写()</button>
    <button @click="myFn()">我写了()</button>
    <!--
    2. 使用v-on传参数的格式
    -->
    <button @click="param('李四')">点击我 , 会传参李四</button>
    <!--传递原生事件对象 -->
    <button @click="event('李四',$event)">点击我 , 会传递李四和原生事件对象</button>

    <!--
    3.在 vue 中想使用data 中的数据, 必须加上 this .
    -->
</div>
<script>
    new Vue({
        el: "#app",
        data: ({
            name: "张三"
        }),
        methods: {
            myFn() {
                alert(this.name);
            },
            param(name) {
                alert(name);
            },
            event(name, event) {
                console.log(name);
                console.log(event);
            }

        }
    })
</script>

自定义全局指令

<div id="app">
    <p v-color="'red'">我是段落</p>
    <input type="text" v-focus value="页面渲染后聚焦">
    <div v-wh="200"></div>
    <p v-demo="{text:'我是一个文本',color:'blue'}"></p>
</div>

<script>
    /*
    自定义指令格式:
    Vue.directive('名称',{回调函数})

   directive接收两个参数
   第一个参数 : 名称 (不需要加 v-)
   第二个参数 : 业务逻辑回调函数
    */
    /*
    生命周期钩子
    bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
    */

    Vue.directive('color', {
        //el代表所绑定的元素
        bind: function (el, obj) {
            // el.style.color = "red";
            el.style.color = obj.value;
        }
    });

    Vue.directive('wh', {
        //    binding 代表传进来的参数
        bind: function (el, binding) {
            el.style.width = binding.value + "px";
            el.style.height = binding.value + "px";
            el.style.background = "red"
        }
    });

    Vue.directive('focus', {
        inserted: function (el) {
            el.focus();
        }
    });

    Vue.directive('demo', {
        bind: function (el, binding) {
            el.innerHTML = binding.value.text;
            el.style.color = binding.value.color;
        }
    });

    new Vue({
        el: "#app",
        data: {},
        methods: {}
    })
</script>

自定义局部指令

<div id="app">
    <p v-color="'red'">我是段落</p>
</div>

<script>
    new Vue({
        el: "#app",
        data: {},
        methods: {},
        directives: {
            'color': {
                bind: function (el, obj) {
                    el.style.color = obj.value;
                }
            }
        }
    })
</script>