🚀
头像

默永


人生就像骑单车,想保持平衡就得往前走。

Vue - 指令

2023-01-14 17:52:30 323 💗 0 @默永

内置指令

常用的

v-bind:单向绑定解析表达式,可简写 :xxx

v-model:双向数据绑定

v-for:遍历数据 / 对象 / 字符串

v-on:绑定事件监听,可简写为@

v-if:条件渲染(动态控制节点是否存在)

v-else:条件渲染(动态控制节点是否存在)

v-show:条件渲染(动态控制节点是否展示) 

v-text指令

1. 作用:向其所在的节点中渲染文本内容。

2. 与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会。

v-html指令

1. 作用:向指定节点中渲染包含html结构的内容。

2. 与插值语法的区别

    v-html会替换掉节点中所有的内容,{{xx}}则不会。

    v-html可以识别html结构。

3. 严重注意:v-html有安全性问题!!!

    在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。

    一定要在可信的内容上使用v-html,永不要在用户提交的内容上!

v-cloak指令(没有值)

1. 本质是一个特殊属性,Vue示例创建完毕并接管容器后,会删掉v-cloak属性。

2. 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

<style>
  [v-cloak]{
    display: none;
  }
</style>
<h2 v-cloak></h2>

v-once指令(没有值)

1. v-once所在节点在初次动态渲染后,就是为静态内容。

2. 以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。

v-pre指令(没有值)

1. 跳过其所在节点的编译过程。

2. 可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。

自定义指令

示例:

<!-- 
  需求1:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍。
  需求2:定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点。
 -->
<!-- 准备好一个容器 -->
<div id="root">
    <h2>当前的n值是: <span v-text="n"></span> </h2>
    <h2>放大10倍后的n值是: <span v-big="n"></span> </h2>
    <button @click="n++">点我n+1</button>
    <hr/>
    <input type="text" v-fbind>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            n: 1
        },
        directives: {
            // big函数何时被调用?1.指令与元素成功绑定时。2.指定所在的模板会被重新解析时。
            big(element, binding) {
                element.innerText = binding.value * 10;
            },
            fbind: {
                // 指令与元素成功绑定时(以上来)
                bind(element, binding) {
                    element.value = binding.value;
                },
                // 指令所在元素**入页面时
                inserted(element, binding) {
                    element.focus();
                },
                // 指令所在的模板被重新解析时
                update(element, binding) {
                    element.value = binding.value;
                    element.focus();  
                }
            }
        }
    })
</script>

扩展Vue中的事件修饰符

1. prevent:阻止默认事件(常用)

2. stop:阻止事件冒泡(常用)

3. once:事件只触发一次(常用)

4. capture:使用事件的捕获模式

5. self:只有event.target是当前操作的元素时才触发事件

6. passive:事件的默认行为立即执行,无需等待事件回调执行完毕

<button @click.stop=""></button>
    目录导航