vue 新学习 04 css样式绑定，渲染，key的重要意义（diff算法）

万zp

已于 2023-08-07 16:51:10 修改

阅读量533

点赞数

分类专栏： vue前端文章标签： vue.js 学习 css

于 2023-08-02 16:48:18 首次发布

本文链接：https://blog.csdn.net/qq_38757863/article/details/132063436

版权

vue前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

原文链接：https://blog.csdn.net/qq_39055970/article/details/106308347和
http://t.csdn.cn/vGF94

之前的html文件如何去绑定css样式？
01.首先在html文件中，在<head>标签中，用<style>中去写样式，通过html标签(每一个标签都有这样子的属性)中的class或者是id属性来完成<style>中的描绘的样式的用。
例子：
先去写样式<style>,.basic就是用class选择器（此处的意思是class属性值是basic），id选择器是#
在这里插入图片描述
同时用多个样式，就是一起用，只是用空格来隔开。

这个是传统的在html文件中用css样式。

那么如何在vue中去绑定样式？
用class或者id来获取样式：
01.首先css样式还是要去写的，也就是还需要在头部标签head中去写，这边不改变。
在这里插入图片描述

02.在vue实例中的data中key值去写字段。这里的字段就是<style>中的写的class类选择器的名字。例如：data中的自定义的key 值是（mood）
在这里插入图片描述

03.在html标签中去用v-bind来绑定mood字段
在这里插入图片描述
04.此外可以用一个事件来完成样式名称的改变。

class属性的进一步的优化（数组包装，对象包装），这里的修改字段在浏览器中去完成的。

结果：
在这里插入图片描述

用标签的style属性来完成
之前的html文件中标签用style属性，直接写样式。
例如：

在这里插入图片描述
在vue中，由于style是一个内部存在多个键值对的一个属性。一般就把style的许多字段写在一个对象（在data中）。

多个style
在这里插入图片描述

渲染：
这里的渲染就是把数据添加到视图层上去。主要用以下的几个指令，v-show，v-if组块，v-for（其中的v-for是循环语句，经常和<ul>中的<li>一起联合工作，要用到数组）。

v-show：

1、原理
v-show指令是根据条件显示DOM元素的指令，可以用来动态控制DOM元素的显示和隐藏。v-show后面跟的是判断条件，不管初始条件是什么，元素总是会被渲染。

语法：

v-show="判断变量"

当v-show值为false时，绑定DOM的 display:none
当v-show值为true时，绑定DOM会移除display:none ，此时并不是把display变为block，而是保持元素style的原始性，也就是说，不管初始条件是什么，元素总是会被渲染。

从实现效果可以看出DOM元素始终是存在的，v-show只是利用元素的display属性控制着元素的显示隐藏。


<body>
    <div id="app">
        <div v-show="flag" style="text-align: center;">
            v-show只是用来控制display的属性值
        </div>
    </div>
 
    <script>
        var vm = new Vue({
            el:'#app',
            data: {
                flag: true
            }
        })
    </script>
</body>

在这里插入图片描述

v-if指令：
原理
看到 v-if ，我们可以想到if…else条件判断语句，没错，Vue中还提供了 v-else 指令和 v-else-if 指令，学会v-if指令其他两个指令也就会了。

这样我们再来理解 v-if 指令，就是根据表达式值的真假来销毁或者重建一个我们绑定的DOM元素。

从实现效果可以看出flag值为false时DOM元素被删除。
在这里插入图片描述

<body>
    <div id="app">
        <div v-if="flag" style="text-align: center;">
            v-if指令显示文本
        </div>
    </div>
 
    <script>
        var vm = new Vue({
            el:'#app',
            data: {
                flag: true
            }
        })
    </script>
</body>

v-show指令设置隐藏是给绑定的DOM元素添加CSS样式：display:none，但是DOM元素仍然存在；
v-if指令设置隐藏是将DOM元素整个删除，此时DOM元素不再存在。

v-for指令：动态的遍历数据，并且渲染到页面中。循环模式。
v-for的四种使用方式：

1、数组

在Vue中使用v-for遍历数组时v-for最常见的一种使用方式。
（1）先在data中定义数组

arr: [1, 2, 3, 4, 5],

（2）在标签中遍历

<p v-for="(item,index) in arr">元素：{{item}}，元素在数组中的下标：{{index}}</p>

2、在对象数组
对象数组，其实说到底也是数组，使用方式上和数组一模一样。
（1）先在data中定义数组

objArr: [{
		id: 1,
        name: "Q"
    },
    {
        id: 2,
        name: "W"
    },
    {
        id: 3,
        name: "E"
    },
    {
        id: 4,
        name: "R"
    },
],

（2）在标签中遍历

<p v-for="(item,key) in objArr" :key="item.id">
id:{{item.id}}--------name:{{item.name}}</p>

3、对象
对象不同于数组，遍历的大多数是关键字和值，即key和val，虽然对象也有索引值，但是一般都用不到。
（1）先在data中定义对象

 obj: {
  	 id: "100",
     name: "qwer",
     sex: "male"
 }

（2）在标签内遍历

<p v-for="(val,key,i) in obj">值：{{val}},键：{{key}}，索引：{{i}}</p>

在这里插入图片描述
key的重要意义：
其中v-for有一个关键字key，这个是v-for顺利执行的关键。
key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；
如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；
而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；

详细来说，我们知道，vue实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。

那么Diff算法是什么呢？
（1）当页面的数据发生变化时，Diff算法只会在发生改变的地方比较同一层级的节点（html标签）（其他保持原来的部分不变）。
（2）如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点的子节点了。
（3）如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。
在这里插入图片描述

举个例子
我们往一个列表里面插入一条数据：
Diff算法默认执行的是这样子：

在这里插入图片描述
c和d来说它们事实上并不需要有任何的改动；但是因为我们的c被f所使用了，所有后续所有的内容都要一次进行改动，并且最后进行新增；这样子的话效率就很慢了，这时需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

有key的diff算法:
第一步的操作是从头开始进行遍历、比较：
a和b是一致的会继续进行比较；
c和f因为key不一致，所以就会break跳出循环；
在这里插入图片描述

第二步的操作是从尾部开始进行遍历、比较：
在这里插入图片描述

第三步是如果旧节点遍历完毕，但是依然有新的节点，那么就新增节点：（新增操作）在这里插入图片描述

第四步是如果新的节点遍历完毕，但是依然有旧的节点，那么就移除旧节点：（删除操作）在这里插入图片描述

万zp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 新学习 04 css样式绑定，渲染，key的重要意义（diff算法）

.basic就是用class选择器（此处的意思是class属性值是basic），id选择器是#中去写样式，通过html标签(每一个标签都有这样子的属性)中的class或者是id属性来完成。class属性的进一步的优化（数组包装，对象包装），这里的修改字段在浏览器中去完成的。01.首先css样式还是要去写的，也就是还需要在头部标签head中去写，这边不改变。中的写的class类选择器的名字。之前的html文件中标签用style属性，直接写样式。这个是传统的在html文件中用css样式。中的描绘的样式的用。
复制链接

扫一扫