Vue入门

丹&d

已于 2022-05-10 18:52:55 修改

阅读量442

点赞数 1

文章标签： vue.js javascript 前端

于 2022-05-10 18:48:25 首次发布

本文链接：https://blog.youkuaiyun.com/sdrfsef/article/details/124693650

版权

本文介绍了Vue的数据渲染，包括差值表达式、v-text和v-html指令，并对比了它们的优缺点。接着讲解了条件渲染的v-if和v-show，分析了两者在初次渲染和切换时的性能差异及适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.1 数据渲染的几种方式与对比

2.3 v-if 与 v-show 的对比

3.v-for渲染数组和对象

1.1 数据渲染的几种方式与对比

1.差值表达式: {{ 变量或者表达式 }}

双大括号里边可以写变量名和简单的表达式

例如 : {{name}} {{ num++ }} {{ num<10? "0"+num : num }}


<body>
<!--准备一个容器 #app-->
<div id="app">
    <h1>姓名:{{username}}</h1>
    <h1>年龄:{{age}}</h1>
</div>
<script>
    // 1. 创建Vue实例对象,配置参数(指定容器,数据)
    new Vue({
        el:'#app', // 指定Vue为哪个容器服务
        data:{     // 配置数据
            username:'小张同学',
            age:23
        }
    })
</script>
</body>

2.指令,以v-开头的特殊属性

v-text : v-text = "表达式", 此处的表达式同上,一般是变量,也可以是简单表达式

v-text 就相当于 JavaScript中的innerText,只能解析纯文本,不能解析标签

<body>
<div id="app">
    <h1 v-text="username"></h1>
<!--    页面上直接显示h2标签与内容-->
    <h2 v-text="message"></h2>
</div>

<script>
    // v-text 只能渲染纯文本,不能渲染标签
        new Vue({
            el:'#app',
            data:{
                username:'张三',
                message:'<h2>能不能正常显示呢?</h2>'
            }
        })
</script>
</body>

3.v-html : v-html = "表达式",此处的表达式同上,一般是变量,也可以是简单表达式

v-html 就相当于 JavaScript中的innerHTML,既可以解析文本,也可以解析标签

<body>
<div id="app">
    <h1 v-html="username"></h1>
    <h2 v-html="message"></h2>
</div>

<script>
    // v-html 不仅能渲染纯文本,还可以渲染标签
        new Vue({
            el:'#app',
            data:{
                username:'张三',
                message:'<h2>内容正常显示</h2>'
            }
        })
</script>
</body>

以上渲染数据大致分为两类 : 插值表达式和指令

插值表达式和指令的对比

插值语法 :

写法简单,不需要依附于某个标签,可以直接使用,

动态数据和静态数据可以写在一起,灵活性高

可能出现插值闪烁问题, 可以使用 v-cloak 解决这个问题

指令 v-text 与 v- html :

不存在插值闪烁问题,没有接收到数据就不显示,收据接收完毕,渲染页面

写法较麻烦,因为也相当于一种属性,必须搭配标签使用

使用指令渲染数据,指令中的数据会直接替换掉标签体中写的内容,操作不灵活,

v-text,不能渲染标签

插值闪烁 : 当我们从后端请求的数据因为网络或者某种原因延迟,页面中会显示插值表达式的语法,数据接收完毕后,页面渲染完成,这种现象称之为插值闪烁.也就是说,当数据没拿到的时候,我们会在页面上看到类似这种 {{username}}

v-cloak 指令(没有值):

本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉 v-cloak 属性
使用css 的display:none 配合v-cloak 可以解决插值闪烁的问题

以下是用一个定时器模拟网络响应数据延迟,当不使用v-cloak时,大家可以看一下效果,会出现插值闪烁,使用了v-cloak,完美解决这个问题

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../public/vue.min.js"></script>
    <style>
    /*利用属性选择器,选中标签,设置样式*/
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <h1 v-cloak>{{username}}</h1>
</div>
<script>
    /* 插值表达式会出现插值闪烁
    *  插值闪烁: 当请求的数据延迟,拿到数据之前页面上会出现插值表达式的语法
    *  解决办法 v-cloak + css设置[display:none]
    * */
    setTimeout(function () {
        new Vue({
            el:'#app',
            data:{
                username:'张三'
            }
        })
    },3000)

</script>
</body>

2.条件渲染

2.1 v-if

v-if 满足条件时,渲染数据,与JavaScript中的if条件判断类似,同样也有 v-else-if 和 v-else

<body>
<div id="app">
    <h1 style="color:green" v-if="bool">条件成立,显示</h1>
    <h1 style="color:red" v-else>条件不成立,显示</h1>
</div>
<script>
    /*
    *  v-if="条件" v-else-if="条件" v-else后不需加条件
    * v-else-if 和 v-else 所在标签必须在v-if所在标签之后使用,中间不能被打断,添加其他标签
    * */
    new Vue({
        el:'#app',
        data:{
            bool:false
        }
    })
</script>
</body>

2.2 v-show

类似于jQuery中的show()

<body>
<div id="app">
    <h1 style="color:green" v-show="bool">条件成立,显示</h1>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            bool:true
        }
    })
</script>
</body>

2.3 v-if 与 v-show 的对比

切换时:

v-if : 如果条件成立,创建该标签,条件不成立,则销毁该标签[直接操作DOM元素,切换时,不断的创建与销毁],所以,v-if有更高的切换开销
v-show : 如果条件成立,则通过css属性,显示该标签,如果条件不成立,则隐藏该标签[条件切换时,不会移除和添加DOM,只是通过css属性, 控制标签的显示与隐藏]

初次渲染时: