v-cloak v-text v-html v-bind v-on的基本使用

最新推荐文章于 2022-11-22 11:00:52 发布

Kaaaakaki

最新推荐文章于 2022-11-22 11:00:52 发布

阅读量160

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/Kaaaakaki/article/details/113177113

版权

vue.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

v-cloak 写在html元素标签头中解决插值表达式加载时闪烁问题（没有加载到vue.js会直接显示插值表达式{{msg}}
）需要在 style 标签中设置[v-cloak] {display:none}
v-text 写在html元素标签头中 vue.js加载成功后可以直接设置元素的text内容并且会覆盖原来的内容
v-html 写在html元素标签头中可以解析html标签如在定义vue实例写在data中的包含了html标签使用v-html可以解析html标签而其他就只会单纯把html标签显示为字符串
v-bind 绑定属性写在html元素内部属性的前面如 input v-bind:title=“一个在实例vue对象时定义的data中的属性名” 可缩写为：
v-on 绑定事件 v-on:click=“一个在实例vue对象时定义的方法名” 可缩写为@

v-cloak

先在扩展中安装express插件
ctrl+ shift+ p
选择第一项
可以看到控制台 server started
在这里插入图片描述选择文件点击右键 copy relative path 在浏览器地址栏中输入 localhost+相对地址即可访问

当把导包这一句移到view部分之后按照加载顺序会先显示 {{msg}} 加载到导包这一句后执行后面的语句才会显示 data中的内容 ’ lalala’
在这里插入图片描述
右键检查元素选择network 把 online调成 slow3G 即可观察到

先加载html时页面显示如下

vue.js加载完成后才显示 data内容

为了避免在网速不好的时候出现这种情况造成用户体验感差使用v-cloak解决插值表达式闪烁的问题

   <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--使用v-cloak能够解决插值表达式闪烁的问题-->
        <p v-cloak>{{msg}}</p>
    </div>

v-text v-html v-bind v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>

    <!--1.插值表达式
        2. v-cloak
        3. v-text
        4. v-html-->


    <div id="app">
        <!--使用v-cloak能够解决插值表达式闪烁的问题  需要在style标签中设置display:none-->
        <p v-cloak>{{msg}}</p>
        <p v-text="msg"></p><!-- v-text  标签本身就可以解决闪烁问题-->
        <div v-html="msg2"></div><!--只有使用v-html才能解析html标签  其他只会单纯显示文本字符串 不会解析-->
        <!-- v-bind  提供用于绑定属性的指令 指令可以写属性变量名称  如下面的mytitle  也可以写js表达式
            如  mytitle + '12345'
        v-bind还可以省略  只写一个冒号 -->

        <!-- v-on  绑定事件的指令   可缩写为@-->
        <input type="button" value="按钮" v-bind:title="mytitle" v-on:click="show">
        <input type="button" value="按钮" v-bind:title="mytitle" @click="show">
        <!--新版本不需要在 methods中定义好像也可以-->
        <input type="button" value="按钮"  :title="mytitle + '12345'" v-on:click="alert('baby i am coming')">
    </div>

    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'lalala',
                msg2:'<h1>我是一个html标签H1</h1>',
                mytitle:'这是我们自己定义的一个titile'
            },
            methods:{//定义了当前vue实例所有可用的方法
            show:function(){
                alert('baby i am coming')
            }

            }
        })
    </script>
</body>
</html>