传智黑马39期WEB前端教程-Vue基础-Vue指令-讲解v-cloak、v-text、v-html

讲解v-cloak、v-text、v-html

1.进入目录 demo，新建文件 2.html

<!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>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'123'
            }    
        });
    </script>
</body>
</html>

2.浏览器测试（不是用http）

3.在Visual Studio Code 中安装 express，Ctrl + Shift + p 打开工具列表，搜索出 Express:Host Current Workspace，点击启动Web服务器，重新在浏览器用http测试

4.进入目录 demo，修改文件 2.html，把 vue 路径放到下面

<!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>
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>
    </div>
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'123'
            }    
        });
    </script>
</body>
</html>

5.通过浏览器测试，发现如果网速很慢的时候，会先显示{{ msg }}，再显示具体内容，用户体验非常不好

6.进入目录 demo，修改文件 2.html，使用属性 v-cloak 

<!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-cloak] {
            display:none;
        }    
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用 v-cloak 能够解决插件表达式闪烁问题 -->
        <p v-cloak>{{ msg }}</p>
    </div>
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'123'
            }    
        });
    </script>
</body>
</html>

7.进入目录 demo，修改文件 2.html，使用属性 v-text 

<!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-cloak] {
            display:none;
        }    
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用 v-cloak 能够解决插件表达式闪烁问题 -->
        <p v-cloak>{{ msg }}</p>
        <h4 v-text="msg"></h4>
    </div>
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'123'
            }    
        });
    </script>
</body>
</html>

8.浏览器测试

9.插值表达式 和 v-text 的区别

默认 v-text 是没有闪烁问题
v-text 会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空

10.进入目录 demo，修改文件 2.html

<!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-cloak] {
            display:none;
        }    
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用 v-cloak 能够解决插件表达式闪烁问题 -->
        <p v-cloak>{{ msg }}</p>
        <h4 v-text="msg"></h4>
        <!-- 默认 v-text 是没有闪烁问题 -->
        <!-- v-text 会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空 -->
        
        <div>{{msg2}}</div>
    </div>
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'123',
                msg2:'<h1>哈哈，我是一个大大的H1,我大，我骄傲</h1>'
            }    
        });
    </script>
</body>
</html>

11.浏览器测试，发现h1标签无法解释，换成 v-text 不行

12.进入目录 demo，修改文件 2.html

<!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-cloak] {
            display:none;
        }    
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用 v-cloak 能够解决插件表达式闪烁问题 -->
        <p v-cloak>{{ msg }}</p>
        <h4 v-text="msg"></h4>
        <!-- 默认 v-text 是没有闪烁问题 -->
        <!-- v-text 会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空 -->
        
        <div>{{msg2}}</div>
        <div v-text="msg2"></div>
        <div v-html="msg2"></div>
    </div>
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'123',
                msg2:'<h1>哈哈，我是一个大大的H1,我大，我骄傲</h1>'
            }    
        });
    </script>
</body>
</html>

13.浏览器测试，可以了

 

posted on 2019-10-30 16:20  herisson_pan  阅读(21)  评论(0)    收藏  举报

导航