Vue2.js学习笔记-02(基本指令v-cloak、v-text、v-html、v-bind、v-on学习)

最新推荐文章于 2024-07-04 10:12:44 发布

笑笑是一个码农

最新推荐文章于 2024-07-04 10:12:44 发布

阅读量669

点赞数

分类专栏： Vue2 文章标签： vue2.js html css vue指令前端

本文链接：https://blog.csdn.net/u012430402/article/details/92087562

版权

Vue2 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、回顾

在vue的Hello World程序的学习中，页面获取值的表达式为“{{}}”，但这个插值表达式会存在一定的问题，当我们网速很慢的情况下，页面会优先渲染"{{ 数据所对应的key }}"，怎么看到这个效果呢，F12打开谷歌浏览器的开发者工具，按照下图把网络设置为3G

然后把如下代码放入到html文件中，在浏览器打开

<body>
    <div id="app-1">{{ msg }}</div>

    <script src="../js/vue2.6.10.js"></script>
    <script>
        //创建vue实例
        var vm1 = new Vue({
            el:"#app-1", 
            data:{      
                msg: "Hello Vue!"
            }
        });
    </script>
</body>

这样就可以看到，当页面在加载的时候，先渲染的是{{msg}}，一直等到页面数据加载完毕，页面上才会把msg替换为对应的data数据，我们设想一下，假如我们自己作为用户，看到这样的情况，是不是会吐槽这网站怎么这么垃圾！

二、Vue基本指令学习

1、v-cloak指令可以解决上述问题，代码如下：

<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>Vue基本指令</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id = "app">
        <!-- 给p标签添加v-cloak并且添加css样式 -->
        <p v-cloak>{{ msg }}</p> 
    </div>

    <script src="../js/vue2.6.10.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "哈哈哈"
            }
        })
    </script>

</body>
</html>

2、v-text指令也可以用来渲染数据，同样也可以解决回顾中的问题

<body>
    <div id = "app">
        <!-- 给p标签添加v-cloak并且添加css样式 -->
        <p v-cloak>{{ msg }}</p> 

        <!-- 使用v-text指令渲染数据 -->
        <span v-text="msg"></span> 
    </div>

    <script src="../js/vue2.6.10.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "哈哈哈"
            }
        })
    </script>
</body>

还有一种情况，如下

<body>
    <div id = "app">
        <!-- 给p标签添加v-cloak并且添加css样式 -->
        <!-- 插值表达式会把数据渲染在标签内容的中间，相当于占位符的性质 -->
        <p v-cloak>aaaaaa{{ msg }}aaaaa</p> 

        <!-- v-text会覆盖标签中的数据 -->
        <!-- 使用v-text指令渲染数据 -->
        <span v-text="msg">aaaaaaa</span> 
    </div>

    <script src="../js/vue2.6.10.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "哈哈哈"
            }
        })
    </script>
</body>

3、v-html指令可以用于渲染文本，html代码（插值表达式和v-text会将html代码作为普通文本渲染）

<body>
    <div id = "app">
        <!-- 给p标签添加v-cloak并且添加css样式 -->
        <!-- 插值表达式会把数据渲染在标签内容的中间，相当于占位符的性质 -->
        <p v-cloak>aaaaaa{{ msg }}aaaaa</p> 

        <!-- v-text会覆盖标签中的数据 -->
        <!-- 使用v-text指令渲染数据 -->
        <span v-text="msg">aaaaaaa</span> 
        <br>
        <!-- v-html渲染代码 -->
        <span v-html="htmlData"></span>
        <br>
        <!-- v-html渲染普通文本，同样也会覆盖标签中的内容 -->
        <span v-html="msg"></span>
    </div>

    <script src="../js/vue2.6.10.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "哈哈哈",
                htmlData:"<h3>我是html代码！</h3>"
            }
        })
    </script>
</body>

4、v-bind指令，可以把标签中的属性与vue实例属性进行绑定，并且与vue属性绑定后，其值可以是一个合法的JS表达式

<body>
    <div id = "app">
        <!-- 给p标签添加v-cloak并且添加css样式 -->
        <!-- 插值表达式会把数据渲染在标签内容的中间，相当于占位符的性质 -->
        <p v-cloak>aaaaaa{{ msg }}aaaaa</p> 

        <!-- v-text会覆盖标签中的数据 -->
        <!-- 使用v-text指令渲染数据 -->
        <span v-text="msg">aaaaaaa</span> 
        <br>
        <!-- v-html渲染代码 -->
        <span v-html="htmlData"></span>
        <br>
        <!-- v-html渲染普通文本，同样也会覆盖标签中的内容 -->
        <span v-html="msg">啊啊啊</span>
        <br>
        <!-- v--bind将alt属性与vue实例属性进行绑定 -->
        <img src="" v-bind:alt="imageName" />
        <br>
        <!-- v--bind将alt与vue属性绑定后，其值可以是一个合法的JS表达式 -->
        <img src="" v-bind:alt="imageName + '拼接字符串'" />
        <br>
        <!-- v--bind简写,只需要在想要绑定的属性前加一个冒号 -->
        <img src="" :alt="imageName + '简写方式绑定'" />
    </div>

    <script src="../js/vue2.6.10.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "哈哈哈",
                htmlData:"<h3>我是html代码！</h3>",
                imageName:"我是图片"
            }
        })
    </script>
</body>

5、v-on指令，绑定事件

<body>
    <div id = "app">
        <!-- 给p标签添加v-cloak并且添加css样式 -->
        <!-- 插值表达式会把数据渲染在标签内容的中间，相当于占位符的性质 -->
        <p v-cloak>aaaaaa{{ msg }}aaaaa</p> 

        <!-- v-text会覆盖标签中的数据 -->
        <!-- 使用v-text指令渲染数据 -->
        <span v-text="msg">aaaaaaa</span> 
        <br>
        <!-- v-html渲染代码 -->
        <span v-html="htmlData"></span>
        <br>
        <!-- v-html渲染普通文本，同样也会覆盖标签中的内容 -->
        <span v-html="msg">啊啊啊</span>
        <br>
        <!-- v--bind将alt属性与vue实例属性进行绑定 -->
        <img src="" v-bind:alt="imageName" />
        <br>
        <!-- v--bind将alt与vue属性绑定后，其值可以是一个合法的JS表达式 -->
        <img src="" v-bind:alt="imageName + '拼接字符串'" />
        <br>
        <!-- v--bind简写,只需要在想要绑定的属性前加一个冒号 -->
        <img src="" :alt="imageName + '简写方式绑定'" />
        <br>
        <!-- 使用v-on绑定点击事件 -->
        <!-- alert为vue实例中方法的名称 -->
        <input type="button" value="点我弹框" v-on:click="alert"/>
        <br>
        <!-- v-on简写方式,在事件名称前加“@” 符号 -->
        <input type="button" value="点我弹框" @click="alert"/>
    </div>

    <script src="../js/vue2.6.10.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "哈哈哈",
                htmlData:"<h3>我是html代码！</h3>",
                imageName:"我是图片"
            },
            methods: { //定义vue实例中的方法
                // alert: function(){
                //     alert("哈哈哈");
                // },
                alert(){
                    alert("哈哈哈");
                }
            },
        })
    </script>
</body>

笑笑是一个码农

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue2.js学习笔记-02(基本指令v-cloak、v-text、v-html、v-bind、v-on学习)

一、回顾在vue的Hello World程序的学习中，页面获取值的表达式为“{{}}”，但这个插值表达式会存在一定的问题，当我们网速很慢的情况下，页面会优先渲染"{{ 数据所对应的key }}"，怎么看到这个效果呢，F12打开谷歌浏览器的开发者工具，按照下图把网络设置为3G然后把如下代码放入到html文件中，在浏览器打开<body> <div id=...
复制链接

扫一扫

专栏目录