Vue | Vue.js基础 模版语法(二)

🖥️ Vue.js专栏：Vue.js 初级知识 | 模版语法(二)
🧑‍💼 个人简介：一个不甘平庸的平凡人🍬

✨ 个人主页：CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️

---

目录

一、v-for 列表渲染

列表渲染

v-for基本使用

二、v-for 渲染类型

v-for支持的类型

template元素

三、数组更新的检测

数组更新检测

四、v-for的key属性

v-for中的key是什么作用?

认识VNode

五、Vue的虚拟DOM

虚拟DOM

六、虚拟diff算法

---

一、v-for 列表渲染

列表渲染

从服务器拿到一组数据,并且需要对其进行渲染

        这个时候我们可以使用v-for来完成

        v-for类似于Js中的for循环 可以用于遍历一遍数据

v-for基本使用

v-for的基本格式是"item in 数组":

        数组通常来自 data或者 prop 也可以是其他方式

        item是我们给每项元素起的别名,这个别名可以自定义

遍历数组的时候经常需要拿到数组的索引

        需要索引 可以使用格式: "(item,index) in 数组"

        注意上面的顺序:数组元素项item是在前面的,索引项index是在后面的

JavaScript <!-- 1 电影列表进行渲染 --> <h2>电影列表</h2> <ul>     <li v-for="movie in movies">{{movie}}</li> </ul>

JavaScript  <!-- 2 电影列表同时有我们的索引 --> <ul>     <li v-for="(movie,index) in movies">{{index+1}}-{{movie}}</li> </ul>

JavaScript <!-- 3 遍历数组 复杂数据 -->         <h2>商品列表</h2>         <!-- 可以解构 -->         <div class="item" v-for="{id,name,price,desc} in products">             <h3 class="title">{{name}}</h3>             <span>价格:{{price}}</span>             <p>{{desc}}</p>         </div>

二、v-for 渲染类型

v-for支持的类型

v-for支持遍历对象,且支持有 一 二 三 个参数

        一个参数: "value in object";

        两个参数: "(value,key) in object"

        三个参数:"(value,key,index) in object"

V-for同时支持数字的遍历 每个item都是一个数字 也可以遍历其他的可迭代对象

JavaScript  <div id="app">     <!-- 1 遍历数组 -->     <!-- 2 遍历对象 -->     <ul>         <li v-for="(item,key,index) in info">{{item}}--{{key}}--{{index}}</li>     </ul>     <!-- 3 遍历字符串 -->     <ul>         <li v-for="item in message">{{item}}</li>     </ul>     <!-- 4 遍历数字 -->     <ul>         <!-- 显示1-10的数字 -->         <li v-for="item in 10">{{item}}</li>     </ul> </div>

template元素

类似于v-if 你可以使用template元素来循环渲染一段包含多个元素的内容

        使用template来对多个元素进行包裹 而不是使用div来完成

 

三、数组更新的检测

数组更新检测

Vue将被真挺的数组变更方法进行包裹,所以它们将触发视图更新

这些被包裹过的方法包括:

        push()  => 数组后添加元素

        pop()  => 从数组后删除元素

        shift()  => 删除第一个元素

        unshift()  =>头部添加元素

        splice()  => 操作数组利器

        sort()  => 排序

        resverse()  => 反转数组

四、v-for的key属性

v-for中的key是什么作用?

在使用v-for进行列表渲染时 通常会给元素或者组件绑定一个 key属性

这个key属性有什么作用?官方解释为:

        key属性主要用在Vue的虚拟DOM算法,在 新旧nodes对比时辨认VNodes

        如果 不使用key Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地 修改/复用相同类型元素的算法

        使用key时 它会基于key的变化 重新排列元素顺序 并且 移除/销毁key 不存在的元素

认识VNode

先来解释一下VNode的概念:

        目前,先理解HTML元素创建出来VNode

        VNode的全称是Virtual Node 也就是 虚拟节点

        事实上,无论是组件还是元素 最终在Vue表现出来的都是一个个VNode

        VNode的本质就是一个Js对象

五、Vue的虚拟DOM

虚拟DOM

如果我们不只是一个简单的div 而是一大堆的元素 那么它们应该会形成一个VNode Tree

六、虚拟diff算法

后续在单篇文章更新