Vue初学02-几个常用指令

最新推荐文章于 2024-07-07 12:02:12 发布

置顶周达

最新推荐文章于 2024-07-07 12:02:12 发布

阅读量183

点赞数 1

分类专栏： vue 文章标签： vue指令

本文链接：https://blog.csdn.net/gis_zhouda/article/details/104755200

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1.v-once

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
           <p v-once>This will never change:{{message}}</p>
    </div>

    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                message:"hello vue!"
            }
        });
    </script>

</body>
</html>

2.v-html

将内容按html插入，相当于更新innerHTML属性，建议在可信内容上使用，容易导致XSS攻击。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../js/vue.js"></script>
</head>
<body>

      <div id="test">
          <p v-html="url"></p>
      </div>

    <script>
         const vue = new Vue({
             el:"#test",
             data:{
                 message:"hello vue!",
                 url:"<a href='https://www.w3school.com.cn/'>w3school</a>"
             }
         });
    </script>
</body>
</html>

效果如下：

3.v-text

更新元素的 textContent ，与{{Mustache}}效果类似，但是v-text无法实现textContent的拼接，如果要在textContent拼接其他内容要用{{Mustache}}。如,<p>开始学习vue {{message}}</p>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
           <p v-text="message"></p>
           <p>{{message}}</p>
    </div>

    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                message:"hello vue!"
            }
        });
    </script>

</body>
</html>

效果如下：

4.v-cloak

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

意思是，如果关联实例的代码没有执行完成，Mustache 标签的变量可能还没赋值就出现在界面上，效果不好，为了避免这种情况。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../js/vue.js"></script>
      <style>
        [v-cloak] {
            display: none;
           }
      </style>
</head>
<body>
    <div id="app" v-cloak>
           <p>{{message}}</p>
    </div>

    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                message:"hello vue!"
            }
        });
    </script>

</body>
</html>

周达

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue初学02-几个常用指令

1.v-once只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。2.v-html将内容按html插入，相当于更新innerHTML属性，建议在可信内容上使用，容易导致XSS攻击。3.v-text更新元素的textContent，与{{Mustache}}效果类似4.v-cloak这个指令保持在元素上直到关联实例结束编译。
复制链接

扫一扫