05 【绑定样式 条件渲染 列表渲染】

1.绑定样式

1.1 class样式

写法 :class=xxx xxx可以是字符串、对象、数组。
所以分为三种写法:字符串写法、对象写法、数组写法。

1.1.1 字符串写法

字符串写法适用于: 类名不确定,要动态获取

<style>
	.normal{
      
      
        background-color: skyblue;
    }
</style>

<!-- 准备好一个容器-->
<div id="root">
    <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    <div class="basic" :class="mood" @click="changeMood">{
   
   {name}}</div>
</div>

<script>
	const vm = new Vue({
      
      
        el:'#root',
        data:{
      
      
            mood:'normal'
        }
    })
</script>

1.1.2 数组写法

数组写法适用于: 要绑定多个样式,个数不确定,.名字也不确定

<style>
    .lktest1{
      
      
        background-color: yellowgreen;
    }
    .lktest2{
      
      
        font-size: 30px;
        text-shadow:2px 2px 10px red;
    }
    .lktest3{
      
      
        border-radius: 20px;
    }
</style>

<!-- 准备好一个容器-->
<div id="root">
    <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
	<div class="basic" :class="classArr">{
   
   {name}}</div>
</div>

<script>
	const vm = new Vue({
      
      
        el:'#root',
        data:{
      
      
            classArr: ['lktest1','lktest2','lktest3']
       }
    })
</script>

1.1.3 对象写法

对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

<style>
    .lktest1{
      
      
        background-color: yellowgreen;
    }
    .lktest2{
      
      
        font-size: 30px;
        text-shadow:2px 2px 10px red;
    }
</style>

<!-- 准备好一个容器-->
<div id="root">
    <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
	<div class="basic" :class="classObj">{
   
   {name}}</div>
</div>

<script>
	const vm = new Vue({
      
      
        el:'#root',
        data:{
      
      
            classObj:{
      
      
                lktest1:false,
                lktest2:false,
			}
        }
    })
</script>

1.2 style样式

有两种写法，对象写法，数组写法

1.2.1 对象写法

<!-- 准备好一个容器-->
<div id="root">
    <!-- 绑定style样式--对象写法 -->
	<div class="basic" :style="styleObj">{
   
   {name}}</div>
</div>

<script>
	const vm = new Vue({
      
      
        el:'#root',
        data:{
      
      
            styleObj:{
      
      
                fontSize: '40px',
                color:'red',
			}
        }
    })
</script>

1.2.2 数组写法

<!-- 准备好一个容器-->
<div id="root">
    <!-- 绑定style样式--数组写法 -->
	<div class="basic" :style="styleArr">{
   
   {name}}</div>
</div>

<script>
	const vm = new Vue({
      
      
        el:'#root',
        data:{
      
      
            styleArr:[
                {
      
      
                    fontSize: '40px',
                    color:'blue',
                },
                {
      
      
                    backgroundColor:'gray'
                }
            ]
        }
    })
</script>

2. 条件渲染

2.1 v-if

• 写法:
  • v-if=“表达式”
  • v-else-if=“表达式”
  • v-else
• 适用于: 切换频率较低的场景,因为不展示的DOM元素直接被移除
• 特点: 因为不展示的DOM元素直接被移除
• 注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”
• template标签不影响结构，页面html中不会有此标签，但只能配合v-if，不能配合v-show

!-- 准备好一个容器-->
<div id="root">
    <!-- 使用v-if做条件渲染 -->
    <h2 v-if="false">欢迎来到{
   
   {name}}</h2>
    <h2 v-if="1 === 1">欢迎来到{
   
   {name}}</h2>
    
    
    <!-- v-else和v-else-if -->
    <div v-if="n === 1">Angular</div>
    <div v-else-if="n === 2">React</div>
    <div v-else-if="n === 3">Vue</div>
    <div v-else>哈哈</div>
    
    
    <!-- v-if与template的配合使用 -->
    <!-- 就不需要写好多个判断，写一个就行 -->
    <!-- 这里的思想就像事件代理的使用 -->
    <template v-if="n === 1">
        <h2>你好</h2>
        <h2>上海</h2>
        <h2>北京</h2>
    </template>
</div>

<script>
	const vm = new Vue({
      
      
        el:'#root',
        data:{
      
      
            styleArr:[
                {
      
      
                    fontSize: '40px',
                    color:'blue',
                },
                {
      
      
                    backgroundColor:'gray'
                }
            ]
        }
    })
</script>

2.2 v-show

• 写法：v-show=“表达式”
• 适用于: 切换频率较高的场景
• 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉(display:none)
• 备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到, v-if 是实打实地改变dom元素，v-show 是隐藏或显示dom元素

<!-- 准备好一个容器-->
<div id="root">
    <!-- 使用v-show做条件渲染 -->
    <h2 v-show="false">欢迎来到{
   
   {name}}</h2>
    <h2 v-show="1 === 1">欢迎来到{
   
   {name}}</h2>
</div>

3.列表渲染

3.1 v-for指令

• 用一展示列表数据
• 语法: v-for=(item, index) in xxx:key`=“yyy”，这里key可以是index，更好的是遍历对象的唯一标识,如果key写的是index，前面可以不写index也能用
• 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<title>基本列表</title>
<script type="text/javascript" src="../js/vue.js"></script>

<div id="root">
  <!-- 遍历数组 -->
  <h3>人员列表（遍历数组）</h3>
  <ul>
    <li v-for="(p,index) of persons" :key="index">{
   
   { p.name }}-{
   
   { p.age }}</li>
  </ul>

  <!-- 遍历对象 -->
  <h3>汽车信息（遍历对象）</h3>
  <ul>
    <li v-for="(value,k) of car" :key="k">{
   
   { value }}--{
   
   { k }}</li>
  </ul>

  <!-- 遍历字符串 -->
  <h3>测试遍历字符串（用得少）</h3>
  <ul>
    <li v-for="(char,index) of str" :key="index">{
   
   { char }}-{
   
   { index }}</li>
  </ul>

  <!-- 遍历指定次数 -->
  <h3>测试遍历指定次数（用得少）</h3>
  <ul>
    <li v-for="(number,index) of 5" :key="index">{
   
   { number }}--{
   
   { index }}</li>
  </ul>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false
  new Vue({
      
      
    el: '#root',
    data: {
      
      
      persons: [
        {
      
       id: '001', name: '张三', age: 18 },
        {
      
       id: '002', name: '李四', age: 19 },
        {
      
       id: '003', name: '王五', age: 20 }
      ],
      car: {
      
      
        name: '奥迪A8',
        price: '70万',
        color: '黑色'
      },
      str: 'hello'
    }
  })
</script>

3.2 key的作用与原理

1. vue中的key有什么作用？（key的内部原理)
   就是vue中的虚拟dom,vue会根据data中的数据生成虚拟dom,如果是第一次生成页面,就将虚拟dom转换为真实dom,在页面展示.
2. 虚拟dom有啥用？
   每次vm._data 中的数据更改，都会触发生成新的虚拟dom，新的虚拟dom会跟旧的虚拟dom进行比较，如果有相同的，在成真实dom时，这部分相同的就不需要重新生成，只需要将两者之间不同的dom转换成真实dom，再与原来的真实dom进行拼接。我的理解是虚拟dom就是起到了一个dom复用的作用，还有避免重复多余的操作，下文有详细解释。
3. 而key有啥用？
   key是虚拟dom的标识。
   先来点预备的知识：啥是真实 DOM？真实 DOM 和 虚拟 DOM 有啥区别？如何用代码展现真实 DOM 和 虚拟 DOM

真实DOM和其解析流程

这里参考超级英雄大佬：https://juejin.cn/post/6844903895467032589

webkit 渲染引擎工作流程图

所有的浏览器渲染引擎工作流程大致分为5步：创建 DOM 树 —> 创建 Style Rules -> 构建 Render 树 —> 布局 Layout -—> 绘制 Painting。

• 第一步，构建 DOM 树：当浏览器接收到来自服务器响应的HTML文档后，会遍历文档节点，生成DOM树。需要注意的是在DOM树生成的过程中有可能会被CSS和JS的加载执行阻塞，渲染阻塞下面会讲到。

• 第二步，生成样式表：用 CSS 分析器，分析 CSS 文件和元素上的 inline 样式，生成页面的样式表；

• 渲染阻塞：当浏览器遇到一个script标签时，DOM构建将暂停，直到脚本加载执行，然后继续构建DOM树。每次去执行Javascript脚本都会严重阻塞DOM树构建，如果JavaScript脚本还操作了CSSOM，而正好这个CSSOM没有下载和构建，那么浏览器甚至会延迟脚本执行和构建DOM，直到这个CSSOM的下载和构建。所以，script标签引入很重要，实际使用时可以遵循下面两个原则：

  • css优先：引入顺序上，css资源先于js资源

  • js后置：js代码放在底部，且js应尽量少影响DOM构建

    还有一个小知识：当解析html时，会把新来的元素插入dom树里，同时去查找css，然后把对应的样式规则应用到元素上，查找样式表是按照从右到左的顺序匹配的例如：div p {…}，会先寻找所有p标签并判断它的父标签是否为div之后才决定要不要采用这个样式渲染。所以平时写css尽量用class或者id，不要过度层叠

• 第三步，构建渲染树：通过DOM树和CSS规则我们可以构建渲染树。浏览器会从DOM树根节点开始遍历每个可见节点(注意是可见节点)对每个可见节点，找到其适配的CSS规则并应用。渲染树构建完后，每个节点都是可见节点并且都含有其内容和对应的规则的样式。这也是渲染树和DOM树最大的区别所在。渲染是用于显示，那些不可见的元素就不会在这棵树出现了。除此以外，display none的元素也不会被显示在这棵树里。visibility hidden的元素会出现在这棵树里。

• 第四步，渲染布局：布局阶段会从渲染树的根节点开始遍历，然后确定每个节点对象在页面上的确切大小与位置，布局阶段的输出是一个盒子模型，它会精确地捕获每个元素在屏幕内的确切位置与大小。

• 第五步，渲染树绘制：在绘制阶段，遍历渲染树，调用渲染器的paint()方法在屏幕上显示其内容。渲染树的绘制工作是由浏览器的UI后端组件完成的。

注意点：

1、DOM 树的构建是文档加载完成开始的？ 构建 DOM 树是一个渐进过程，为达到更好的用户体验，渲染引擎会尽快将内容显示在屏幕上，它不必等到整个 HTML 文档解析完成之后才开始构建 render 树和布局。

2、Render 树是 DOM 树和 CSS 样式表构建完毕后才开始构建的？ 这三个过程在实际进行的时候并不是完全独立的，而是会有交叉，会一边加载，一边解析，以及一边渲染。

3、CSS 的解析注意点？ CSS 的解析是从右往左逆向解析的，嵌套标签越多，解析越慢。

4、JS 操作真实 DOM 的代价？**传统DOM结构操作方式对性能的影响很大，原因是频繁操作DOM结构操作会引起页面的重排(reflow)和重绘(repaint)，浏览器不得不频繁地计算布局，重新排列和绘制页面元素，导致浏览器产生巨大的性能开销。直接操作真实DOM的性能特别差，我们可以来演示一遍。

<div id="app"></div>
<script>
    // 获取 DIV 元素
    let box = document.querySelector('#app');
    console.log(box);

    // 真实 DOM 操作
    console.time('a');
    for (let i = 0; i <= 10000; i++) {
      
      
        box.innerHTML = i;
    }
    console.timeEnd('a');

    // 虚拟 DOM 操作
    let num = 0;
    console.time('b');
    for (let i = 0; i <= 10000; i++) {
      
      
        num = i;
    }
    box.innerHTML = num;
    console.timeEnd('b');

</script>

3.3.1 虚拟DOM的好处

虚拟 DOM 就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有 10 次更新 DOM 的动作，虚拟 DOM 不会立即操作 DOM，而是将这 10 次更新的 diff 内容保存到本地一个 JS 对象中，最终将这个 JS 对象一次性 attch 到 DOM 树上，再进行后续操作，避免大量无谓的计算量。所以，用 JS 对象模拟 DOM 节点的好处是，页面的更新可以先全部反映在 JS 对象(虚拟 DOM )上，操作内存中的 JS 对象的速度显然要更快，等更新完成后，再将最终的 JS 对象映射成真实的 DOM，交由浏览器去绘制。

​ 虽然这一个虚拟 DOM 带来的一个优势，但并不是全部。虚拟 DOM 最大的优势在于抽象了原本的渲染过程，实现了跨平台的能力，而不仅仅局限于浏览器的 DOM，可以是安卓和 IOS 的原生组件，可以是近期很火热的小程序，也可以是各种GUI。

​ 回到最开始的问题，虚拟 DOM 到底是什么，说简单点，就是一个普通的 JavaScript 对象，包含了 tag、props、children 三个属性。

3.3.2 虚拟DOM中key的作用

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

• 旧虚拟DOM中找到了与新虚拟DOM相同的key：
  • ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
  • ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
• 旧虚拟DOM中未找到与新虚拟DOM相同的key
  • 创建新的真实DOM，随后渲染到到页面。

3.3.3 用index作为key可能会引发的问题

若对数据进行：逆序添加、逆序删除等破坏顺序操作：
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

案列

<!-- 准备好一个容器-->
<div id="root">
    <!-- 遍历数组 -->
    <h2>人员列表（遍历数组）</h2>
    <button @click.once="add">添加一个老刘</button>
    <ul>
        <li v-for="(p,index) of persons" :key="index">
            {
   
   {p.name}}-{
   
   {p.age}}
            <input type="text">
        </li>
    </ul>
</div>

<script type="text/javascript">
	Vue.config.productionTip = false

	new Vue({
      
      
		el: '#root',
		data: {
      
      
			persons: [
				{
      
       id: '001', name: '张三', age: 18 },
				{
      
       id: '002', name: '李四', age: 19 },
				{
      
       id: '003', name: '王五', age: 20 }
			]
		},
		methods: {
      
      
			add() {
      
      
				const p = {
      
       id: '004', name: '老刘', age: 40 }
				this.persons.unshift(p)
			}
		},
	});
</script>

解释

初始数据

persons: [
{ id: ‘001’, name: ‘张三’, age: 18 },
{ id: ‘002’, name: ‘李四’, age: 19 },
{ id: ‘003’, name: ‘王五’, age: 20 }
]

vue根据数据生成虚拟 DOM
初始虚拟 DOM

<li key='0'>张三-18<input type="text"></li>
<li key='1'>李四-19<input type="text"></li>
<li key='2'>王五-20<input type="text"></li>

将虚拟 DOM 转为 真实 DOM

this.persons.unshift({ id: '004', name: '老刘', age: 40 })
在 persons 数组最前面添加上 { id: ‘004’, name: ‘老刘’, age: 40 }
新数据：

persons: [
		{
    
     id: '004', name: '老刘', age: 40 },
		{
    
     id: '001', name: '张三', age: 18 },
		{
    
     id: '002', name: '李四', age: 19 },
		{
    
     id: '003', name: '王五', age: 20 }
]

vue根据数据生成虚拟 DOM
新虚拟 DOM

<li key='0'>老刘-30<input type="text"></li>
<li key='1'>张三-18<input type="text"></li>
<li key='3'>李四-19<input type="text"></li>
<li key='4'>王五-20<input type="text"></li>

将虚拟 DOM 转为 真实 DOM

因为老刘被插到第一个，重刷了 key 的值，vue Diff 算法 根据 key 的值 判断 虚拟DOM 全部发生了改变，然后全部重新生成新的 真实 DOM。实际上，张三，李四，王五并没有发生更改，是可以直接复用之前的真实 DOM，而因为 key 的错乱，导致要全部重新生成，造成了性能的浪费。
如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。

这回造成的就不是性能浪费了，会直接导致页面的错误

3.3.4 总结

• 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值
• 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的

3.3列表过滤

3.3.1 watch实现

<div id="root">
  <h2>人员列表</h2>
  <input type="text" placeholder="请输入名字" v-model="keyWord">
  <ul>
    <li v-for="(p,index) of filPersons" :key="p.id">
      {
   
   { p.name }}-{
   
   { p.age }}-{
   
   { p.sex }}
    </li>
  </ul>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false
  // 用 watch 实现 
   new Vue({
      
      
			el: '#root',
			data: {
      
      
				keyWord: '',
				persons: [
					{
      
       id: '001', name: '马冬梅', age: 19, sex: '女' },
					{
      
       id: '002', name: '周冬雨', age: 20, sex: '女' },
					{
      
       id: '003', name: '周杰伦', age: 21, sex: '男' },
					{
      
       id: '004', name: '温兆伦', age: 22, sex: '男' }
				],
				filPersons: []
			},
			watch: {
      
      
				keyWord: {
      
      
					immediate: true,
					handler(val) {
      
      
						this.filPersons = this.persons.filter((p) => {
      
      
							return p.name.indexOf(val) !== -1
						})
					}
				}
			}
		}) 
</script>

注意:indexOf对于空串的结果是0，这样上面代码初始过滤就是全部数据

3.3.2 computed实现

<div id="root">
  <h2>人员列表</h2>
  <input type="text" placeholder="请输入名字" v-model="keyWord">
  <ul>
    <li v-for="(p,index) of filPersons" :key="p.id">
      {
   
   { p.name }}-{
   
   { p.age }}-{
   
   { p.sex }}
    </li>
  </ul>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false
  // 用 computed 实现
  new Vue({
      
      
    el: '#root',
    data: {
      
      
      keyWord: '',
      persons: [
        {
      
       id: '001', name: '马冬梅', age: 19, sex: '女' },
        {
      
       id: '002', name: '周冬雨', age: 20, sex: '女' },
        {
      
       id: '003', name: '周杰伦', age: 21, sex: '男' },
        {
      
       id: '004', name: '温兆伦', age: 22, sex: '男' }
      ]
    },
    computed: {
      
      
      filPersons() {
      
      
        return this.persons.filter((p) => {
      
      
          return p.name.indexOf(this.keyWord) !== -1
        })
      }
    }
  }) 
</script>

3.4 列表排序

有时为了减少服务器压力，能在前端做的尽量在前端做。

<div id="root">
  <h2>人员列表</h2>
  <input type="text" placeholder="请输入名字" v-model="keyWord">
  <button @click="sortType = 2">年龄升序</button>
  <button @click="sortType = 1">年龄降序</button>
  <button @click="sortType = 0">原顺序</button>
  <ul>
    <li v-for="(p,index) of filPersons" :key="p.id">
      {
   
   {p.name}}-{
   
   {p.age}}-{
   
   {p.sex}}
      <input type="text">
    </li>
  </ul>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false
  new Vue({
      
      
    el: '#root',
    data: {
      
      
      keyWord: '',
      sortType: 0, // 0原顺序 1降序 2升序
      persons: [
        {
      
       id: '001', name: '马冬梅', age: 30, sex: '女' },
        {
      
       id: '002', name: '周冬雨', age: 31, sex: '女' },
        {
      
       id: '003', name: '周杰伦', age: 18, sex: '男' },
        {
      
       id: '004', name: '温兆伦', age: 19, sex: '男' }
      ]
    },
    computed: {
      
      
      filPersons() {
      
      
        const arr = this.persons.filter((p) => {
      
      
          return p.name.indexOf(this.keyWord) !== -1
        })
        //判断一下是否需要排序
        if (this.sortType) {
      
      
          arr.sort((p1, p2) => {
      
      
            return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
          })
        }
        return arr
      }
    }
  })
</script>