VUE 指令 v-cloak

Yasar.l

已于 2023-02-12 19:46:32 修改

阅读量255

点赞数

分类专栏：前端开发文章标签： vue.js javascript 前端

于 2020-04-14 18:04:35 首次发布

本文链接：https://blog.csdn.net/qq_42114233/article/details/105517210

版权

前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue练习</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div>{{msg}}</div>
</div>
<script type="text/javascript">
    var vm=new Vue({
            el:'#app',
            data:{
                msg: 'Hello Vue'
            }
        }
    )
</script>
</body>
</html>

首先我们先实例化一个VUE，

基本格式如下：
var vm = new Vue({
  // 选项
})

在上面的例子中，我们可以看到实例化的VUE中有个el,el就是DOM元素中的id，例子中id为app.

里面还有个data，data用于定义属性，实例中有个属性msg。

然后我们{{ }} 用于输出对象属性。

以上代码会出现一个问题

插件表达式会出现一个“闪动”的问题

解决的方案是加个指令 v-cloak

v-cloak原理：就是先隐藏，替换好值后再显示。

v-cloak的使用步骤：

1.提供样式

[v-cloak]{ display: none; }

2.在插值表达式的标签中添加 v-cloak

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue练习</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-cloak>{{msg}}</div>
</div>
<script type="text/javascript">
    var vm=new Vue({
            el:'#app',
            data:{
                msg: 'Hello Vue'
            }
        }
    )
</script>

</body>
</html>

一个初学者记录学习的日常

Yasar.l

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE 指令 v-cloak

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue练习</title> <script type="text/javascript" src="js/vue.js"></script&gt...
复制链接

扫一扫

专栏目录