零基础入门Vue之拘元遣将——其他常用指令&自定义指令

回首

零基础入门Vue之梦开始的地方------插值语法 我记录了v-bind、v-on、v-model的学习

零基础入门Vue之To be or not to be------条件渲染 我记录了v-if、v-else-if、v-else、v-show的学习

零基础入门Vue之影分身之术------列表渲染&渲染原理浅析 我记录了v-for的学习

为了推进我的Vue的学习,本篇将一次性介绍其他常用指令,并且记录如何 自定义指令

其他常用指令

在Vue中,除了已学过的八个指令之外,还有另外五个比较常用的指令

v-text 文本绑定指令

更新元素的 textContent。如果要更新部分的 textContent,需要使用 {{ Mustache }} 插值。

假设有如下数据:

javascript 复制代码
new Vue({
    el:"#root",
    data(){
        return {
            msg:"Hello world"
        }
    }
})

那么html除了使用插值语法来显示msg内容之外,还可以这样子写:

html 复制代码
<div id="root">
    <span v-text="msg"></span>
</div>

v-html 富文本绑定指令

更新元素的 innerHTML。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来替代

如果是v-text,仅仅只会当作文本解析,但如果我掏出了v-html,那么我所写的内容将会作为html来解析

javascript 复制代码
new Vue({
    el:"#root",
    data(){
        return {
            msg:"<h1>Hello worldM</h1>"
        }
    }
})

此时,使用v-html会自动解析<h1>这个标签

html 复制代码
<div id="root">
    <span v-html="msg"></span>
</div>

警告:为了预防xss的攻击,千万不要在输入类元素或者具有提交类元素上使用v-html,请在可信任的元素上使用v-html

v-pre 阻止渲染指令

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

假设dom节点中,有些元素不需要渲染的,即可给这个节点打上v-pre指令,用法如下:

html 复制代码
  <div id="root">
      <span v-pre>这样子写:{{data里面的属性}} 标识Vue的插值语法</span>
  </div>

span标签里面的内容不会被Vue进行解析,这个指令可以提高渲染效率

v-cloak 渲染前标识指令

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

当给标签打上v-cloak时,未被解析的标签,会存在这个属性,当标签被解析时,这个属性消失,因此可以配合css这么用:

css 复制代码
[v-cloak] {
  display: none;
}
html 复制代码
<div id="root">
    <span v-html="msg" v-cloak></span>
</div>

当页面未被解析时,span标签没被显示,只有当页面被解析完成时,span标签才会出现

此指令可以语法网络卡顿时,未被解析的内容率先显示到页面上

v-once 指令

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能

这个指令,使得节点只被解析一次,后续的数据修改,此指令都不会有任何变化

html 复制代码
<div id="root">
    <span v-text="msg" v-once></span>
</div>

Vue 自定义指令

在创建Vue配置项中,directives配置项,允许使用的人注册自定义指令

其中自定义指令可分为:

  • 全局指令
  • 局部指令

局部指令

javascript 复制代码
new Vue({
    el:"#root",
    directives:{
        orderName:{
            bind(el,binding,vnode,oldVnode){}, //指令第一次绑定到元素时调用
            inserted(el,binding,vnode,oldVnode){}, //绑定元素插入父节点调用
            update(el,binding,vnode,oldVnode){}, //当前模板更新前调用(可能不是当前节点的更新)
            componentUpdated(el,binding,vnode,oldVnode){}, //当前模板更新后调用(可能不是当前节点的更新)
            unbind(el,binding,vnode,oldVnode){} //指令解绑时调用
        },

    }
});
html 复制代码
<div id="root">
    <!-- 注意虽然js里采用了驼峰命名,但标签使用时请用-连接每个单词 -->
    <span v-order-name="1+1">hello</span>
</div>

参数详解 如下(详情请查看官网):

  • el:当前绑定节点
  • binding:当前指令的绑定信息
  • vnode:当前虚拟节点
  • oldVnode:上一个虚拟节点

举个例子:假设我想创建一个v-big,指令使得绑定标签的文本放大到45px

代码如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <!-- 注意虽然js里采用了驼峰命名,但标签使用时请用-连接每个单词 -->
        <span v-order-name>hello</span>
    </div>
</body>
<script>
    new Vue({
        el:"#root",
        directives:{
            orderName:{
                bind(el,binding,vnode,oldVnode){
                    el.style.fontSize = '45px';
                }
            },
        }
    });
</script>
</html>

改进:如果我希望,这个大小由我自己定义,而不是写死

代码如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <!-- 注意虽然js里采用了驼峰命名,但标签使用时请用-连接每个单词 -->
        <span v-order-name="'45px'">hello</span>
    </div>
</body>
<script>
    new Vue({
        el:"#root",
        directives:{
            orderName:{
                bind(el,binding,vnode,oldVnode){
                    el.style.fontSize = binding.value;
                }
            },
        }
    });
</script>
</html>

更多的请参考官方例子:简介

全局指令

在Vue上一小节时,directives配置项配置出来的节点只允许当前Vue实例使用,当涉及到一个自定义指令给多个Vue实例/组件去使用,就该引入全局指令了

在Vue对象上有一个静态方法:directive

允许用户设置全局指令,并且能在多个实例中通用

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root1">
        <!-- 注意虽然js里采用了驼峰命名,但标签使用时请用-连接每个单词 -->
        <span v-order-name="'45px'">hello</span>
    </div>
    <div id="root2">
        <!-- 注意虽然js里采用了驼峰命名,但标签使用时请用-连接每个单词 -->
        <span v-order-name="'78px'">hello</span>
    </div>
</body>
<script>
    Vue.directive("orderName",{
        bind(el,binding,vnode,oldVnode){
            el.style.fontSize = binding.value;
        }
    });

    new Vue({
        el:"#root1",
    });

    new Vue({
        el:"#root2",
    });
</script>
</html>

其配置项与局部指令雷同,再次不过多赘述

指令简写形式

如果你不关注自定义的指令执行时机的话,你可以直接写成如下形式:

javascript 复制代码
new Vue({
    el:"#root",
    directives:{
        orderName(){},
    }
});

此时,执行实际,与binding一样

The End

本篇完~~~