VUE指令篇_不常用指令

最新推荐文章于 2024-05-24 22:35:01 发布

桃花扇J

最新推荐文章于 2024-05-24 22:35:01 发布

阅读量273

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44584442/article/details/107440804

版权

Vue 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

标题没错，就是几个不常用指令，T_T，先来说一下什么是指令，vue的指令是指以 v- 为前缀，具有特殊含义、拥有特殊功能的特性，可以直接使用data中的数据

1.v-pre

v-pre的作用是跳过这个元素和它的子元素的编译过程。可以用来显示原始的Mustache(插值表达式)标签，跳过大量没有指令的节点会加快编译

<div id="app">
    <div>{{ name }}</div>
    <div v-pre>{{ age }}</div>
</div>

const vm = new Vue({
    el: '#app',
    data:{
        name: 'jwh',
        age: 18
    }
});

【结果】

2.v-cloak

v-cloak 指令保持在元素上直到关联实例结束编译，与 css 的 display 属性结合使用可以解决闪烁问题，即隐藏未编译的 mustache 标签，直到实例准备完毕。

闪烁问题：对于这个问题由于JavaScript去操作DOM，都会等待DOM加载完成（DOM ready）。对于vuejs、angularjs这些会在DOM ready完会才回去解析html view Template，所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现。（这里引用了马优晨的博文，原文点击这里），下图就是页面闪烁的过程

v-cloak解决的代码如下

[v-cloak] {
    display: none;
}

<div id="app">
    <div v-cloak>{{ name }}</div>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        name: 'jwh',
    }
});

【结果】

3.v-once

v-once可以使元素只渲染一次，随后的重新渲染，元素及其所以子节点将被视为静态内容并跳过。这可以用于优化性能。

<div id="app">
    <div v-once>
        <div>{{ name }}</div>
        <div>{{ age }}</div>
    </div>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        name: 'jwh',
        age: 18
    }
});

【结果】可以看到修改name值后，该元素并没有重新渲染

4.v-text

v-text 的作用是更新textContent，与 {{ }} 不同的是，v-text 替换元素中所有的文本，而 mustache 只替换自己，不清空元素内容，举个栗子

<div id="app">
    <div>my name is {{ name }}</div>
    <!-- 以上代码渲染为 my name is jwh -->
    <div v-text='name'>my name is </div>
    <!-- 以上代码渲染为 jwh -->
</div>

const vm = new Vue({
    el: '#app',
    data:{
        name: 'jwh',
    }
});

【结果】

【注】v-text的优先级高于 {{ }}

textContent 与innerText 比较

设置文本替换时，两者都会把指定节点下的所有子节点也一并替换掉
textContent 会获取所有元素的内容，包括 <script> 和 <style> 元素，而 innerText 不会
innerText 受 css 样式的影响，并且不会返回隐藏元素的文本，而 textContent 会
由于 innerText 受 css 样式影响，它会触发重排（reflow），但 textContent 不会
innerText 不是标准制定出来的 API，而是 IE 引入的，所以对 IE 支持更友好；textContent 虽然作为标准方法但是只支持 IE8+ 以上的浏览器，在最新的浏览器中，两个都可以使用
综上，Vue 这里使用 textContent 是从性能的角度考虑的

5.v-html

v-html 的作用是更新元素的 innerHTML

【注】内容按普通 HTML 插入，不会作为 Vue 模板进入编译，在网站上动态渲染任意 HTML 是非常威胁的，因为容易导致XSS攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上，举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <input type="text" />
    <button>点击</button>
    <div id="app">
        <div v-html="msg"></div>
    </div>
</body>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg: 'hellow beauty'
        }
    });
    const oInput = document.getElementsByTagName('input')[0];
    const oButton = document.getElementsByTagName('button')[0];
    let msg = null;
    oButton.onclick = function () {
        vm.msg = oInput.value
    }
</script>
</html>

【结果】当我们在输入框输入一个input标签时，div中会出现一个输入框，我们是不希望发生这种情况的

桃花扇J

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE指令篇_不常用指令

标题没错，就是几个不常用指令，T_T，先来说一下什么是指令，vue的指令是指以 v- 为前缀，具有特殊含义、拥有特殊功能的特性，可以直接使用data中的数据1.v-prev-pre的作用是跳过这个元素和它的子元素的编译过程。可以用来显示原始的Mustache(插值表达式)标签，跳过大量没有指令的节点会加快编译<div id="app"> <div>{{ name }}</div> <div v-pre>{{ age }}</
复制链接

扫一扫

专栏目录