Vue 内置指令总结

最新推荐文章于 2023-06-05 21:49:57 发布

_MadD

最新推荐文章于 2023-06-05 21:49:57 发布

阅读量181

点赞数

分类专栏： # vue基础知识文章标签： vue

本文链接：https://blog.csdn.net/weixin_45849112/article/details/108503926

版权

vue基础知识专栏收录该内容

18 篇文章 0 订阅

订阅专栏

参考：https://cn.vuejs.org/v2/api/#指令
v-html 内容按普通 HTML 插入，可防止 XSS 攻击
v-show 根据表达式的真假值，切换元素的 display CSS 属性来显示隐藏元素
v-if 根据表达式的真假值，来渲染元素
v-else 前面必须有 v-if 或 v-else-if
v-else-if 前面必须有 v-if 或 v-else-if
v-for 遍历的数组或对象
v-on 绑定事件监听器
v-bind 用于绑定元素属性
v-model 在表单控件或者组件上创建双向绑定
v-once 一次性插值，当后面数据更新后视图数据不会更新
v-pre 可以用来显示原始插入值标签 {{}} 。并跳过这个元素和它的子元素的编译过程。加快编译。
例如：网页中的一篇文章，文章内容不需要被 Vue 管理渲染，则可以在此元素上添加 v-pre 忽略文章编译提
高性能。
在 vue-02-过渡&动画和指令目录下创建页面： 03-Vue内置指令.html

<span v-pre>{{ this will not be compiled }}</span> 

浏览页面显示内容：并没有识别{{}} 
{{ this will not be compiled }}

v-text
等价于 {{}} 用于显示内容，但区别在于:
{{}} 会造成闪烁问题， v-text 不会闪烁
如果还想用 {{}} 又不想有闪烁问题，则使用 v-cloak 来处理
v-cloak
如果想用 {{}} 又不想有闪烁问题，则使用 v-cloak 来处理，步骤如下：

在被 Vue 管理的模板入口节点上作用 v-cloak 指令
添加一个属性选择器 [v-cloak] 的CSS 隐藏样式： [v-cloak] {display: none;}
原理：默认一开始被 Vue 管理的模板是隐藏着的，当 Vue 解析处理完 DOM 模板之后，会自动把这个样式去
除，然后就显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 将带有 v-clock 属性的标签隐藏 */
        [v-clock] {
            display: none
        }
    </style>
</head>
<body>
    <div id="app" v-clock>
        <!-- v-pre
        1. 用于显示双大括号{{}}
        2. 跳过这个元素和它的子元素的编译过程，这样可以提高性能。 -->
        <span v-pre>{{你好，梦学谷！}}</span>

        <!-- 使用双大括号，会有双括号 {{}} 闪烁出来。
        可以通过 v-text进行解决闪烁问题
            
        如果我就需要使有双大括号，又不想让它有{{}} 闪烁出来
        -->
        <h3>{{message}}</h3>
        <h3>{{message}}</h3>
        <h3>{{message}}</h3>
        <h3 v-text="message"></h3>
        <h3 v-text="message"></h3>
        <h3 v-text="message"></h3>

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'hello mxg.....'
            }
        })
    </script>
</body>
</html>