vue-11 vue内置指令总结

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

Mr.菜园子

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

阅读量119

点赞数

分类专栏： Vue 文章标签： vue vue.js vue-cli3

本文链接：https://blog.csdn.net/qq_34479912/article/details/114379227

版权

Vue 专栏收录该内容

22 篇文章 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 忽略文章编译提

高性能。

v-text

等价于 {{}} 用于显示内容，但区别在于:

{{}} 会造成闪烁问题， v-text 不会闪烁

如果还想用 {{}} 又不想有闪烁问题，则使用 v-cloak 来处理
v-cloak

如果想用 {{}} 又不想有闪烁问题，则使用 v-cloak 来处理，步骤如下：

1. 在被 Vue 管理的模板入口节点上作用 v-cloak 指令

1. 添加一个属性选择器 [v-cloak] 的 CSS 隐藏样式： [v-cloak] {display: none;}

原理：默认一开始被 Vue 管理的模板是隐藏着的，当 Vue 解析处理完 DOM 模板之后，会自动把这个样式去

除，然后就显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <!-- 1、{{}} 会造成闪烁现象，v-text不会 -->
        <!-- 2、{{}} 若还想使用，又不想有闪烁效果，使用v-cloak处理 -->
        <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,Cyz"
            }
        })
    </script>
</body>
</html>

git源码地址：https://gitee.com/cyzgw/vue_demo.git

Mr.菜园子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue-11 vue内置指令总结

参考：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 用于绑定元...
复制链接

扫一扫