Vue.js的核心学习笔记 - 第八章列表数据渲染的使用与方法
前言
数据渲染是Vue中最为核心的关键知识，今天来让大家学习一下在Vue中怎么进行列表数据渲染以及组件化渲染等渲染知识吧！
基础渲染
属性为：v-for
例：v-for="data in object" 类似Java或其他编程语言中的foreach语句，把Object对象内容赋值给了data。
示例代码
以下是遍历对象数组的实例Code：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js的核心学习笔记 - 第八章列表数据渲染的使用与方法</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- vue基础数据渲染 -->
<div class="vue_for_test">
<!-- 基础渲染 -->
<ul v-for="data in objArr">
<li>{{data.title}}</li>
<li>{{data.msg}}</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el: "#app",
data: {
flag: true,
objArr: [
{ id: "obj1", title: "obj1的标题", msg: "boj1的消息" },
{ id: "obj2", title: "obj2的标题", msg: "boj2的消息" },
{ id: "obj3", title: "obj3的标题",msg: "test"}
]
},
// 计算属性
computed: {
},
// 方法
methods: {
}
})
</script>
</html>
对象渲染
对象渲染就是从vue的动态data数据里面的对象进行一个遍历。
var vue = new Vue({
el: "#app",
data: {
objArr: [
{ id: "obj1", title: "obj1的标题", msg: "boj1的消息" },
{ id: "obj2", title: "obj2的标题", msg: "boj2的消息" },
{ id: "obj3", title: "obj3的标题",msg: "test"}
],
newObj: {
name: "黄天", age: 15
},
},
// 计算属性
computed: {
},
// 方法
methods: {
}
})
再次使用v-for进行遍历
示例代码
html中新增
<!-- 基础渲染对象 -->
<div class="vue_for_object">
<div v-for="data in newObj">
{{data}}
</div>
</div>
数字渲染
前面提到的都是数组和对象的遍历方法。
有人会问？能不能向JS的for语句或者while那样直接循环多少次呢？
答案是：当然可以
直接使用：v-for="变量名 in 次数"
例：v-for="data in 10"遍历10次
示例代码
在DOM中新增以下标签属性
<!-- 基础渲染数字 -->
<div class="vue_for_number">
<ul v-for="number in 5">
<li>{{number}}</li>
</ul>
</div>
template标签渲染
Vue还可以支持在 template标签进行渲染。
示例代码
DOM
<!-- template模板使用vfor -->
<div class="vue_arr_template">
<template v-for="data in objArr">
<h1>{{data.title}}</h1>
<p>{{data.msg}}</p>
</template>
</div>
概念
以下是列表渲染中比较重要知识点，有些伙伴可能遗漏了相关知识！
维护状态
维护状态指的是：Vue默认自带一套基础高性能的就地更新策略。
问：什么是就地更新策略呢？
答：就是Vue数据渲染时不管你是否修改了数据项位置，但是它始终会按照给定的动态数据渲染，数组换了位置也还是会按照修改前的方式进行渲染。
如果你的项目 需求 不需要使用该策略，那可以在相关元素上新增v-bind:key
v-bind:key
使用方法：v-bind:key="变量.属性标识
数组更新检测
数组更新方法
更新检测可以理解为：通过 JavaScript 提供的数组方法进行更改数组内容。
常用更新方法有：
- Array.pop()
- Array.push(object)
- Array.shift()
- Array.unshift()
- Array.splice(index,count,object ……)
更新方法demo
var vue = new Vue({
el: "#app",
data: {
flag: true,
objArr: [
{ id: "obj1", title: "obj1的标题", msg: "boj1的消息" },
{ id: "obj2", title: "obj2的标题", msg: "boj2的消息" },
{ id: "obj3", title: "obj3的标题",msg: "test"}
]
},
// 计算属性
computed: {
},
// 方法
methods: {
// Push数组方法
pushArray: function () {
this.objArr.push({ id: "title3", title: "push进去的Title", msg: "push方法" });
},
// pop移除最后一个数组
popArray: function () {
this.objArr.pop();
},
// shift移除首个数组
shiftArray: function () {
this.objArr.shift();
},
// unshift在开头插入元素
unshiftArray: function () {
var newObject = { id: "testUnshift", title: "在开头插入元素", msg: "unshift方法" };
this.objArr.unshift(newObject);
},
// splice在1位置新增2个元素并删除一个元素
spliceArray: function () {
var newObject = { id: "testSplice", title: "splice在1位置新增2个元素并删除一个元素", msg: "splice方法" };
var newObject2 = { id: "testSplice2", title: "splice2", msg: "splice方法test2" }
this.objArr.splice(1, 1, newObject, newObject2);
},
//sort排序数组
sortArray: function () {
this.objArr.sort();
console.log(this.objArr);
},
//reverse方法
reverseArray: function () {
this.objArr.reverse();
console.log(this.objArr);
}
}
})
温馨提示
替换数组
问，有一个动态数据数组了我干嘛还需要替换掉数组呢？
答：因为我们前面的所有数组操作全都面向于动态数组数据的，那此时我如果想，定义一个按照我自己规则的新数组，还不影响旧数组。
操作也很简单，创建一个计算属性，并通过filter的方式进行操作。
示例代码
数组对象替换成计算属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js的核心学习笔记 - 第八章列表数据渲染的使用与方法</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 替换数组概念 -> 新数组不影响旧数组 -->
<div class="vue_arr_replaceArr">
<!-- 计算属性渲染 -->
<div class="number_info">
<div v-for="number in evenNumber">
<p>number: {{number}}</p>
</div>
</div>
<!-- 校验 -->
<div class="valid_info">
<div v-for="data in valid" :key="data.id">
<p>{{data.title}}</p>
<p>{{data.msg}}</p>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el: "#app",
data: {
flag: true,
objArr: [
{ id: "obj1", title: "obj1的标题", msg: "boj1的消息" },
{ id: "obj2", title: "obj2的标题", msg: "boj2的消息" },
{ id: "obj3", title: "obj3的标题",msg: "test"}
],
newObj: {
name: "黄天", age: 15
},
numberArr: [5,2,6,7,8,9,10,12,22]
},
// 计算属性
computed: {
// 返回一个偶数的number计算属性
evenNumber: function(){
return this.numberArr.filter(function(numbers){
return numbers %2 ===0;
})
},
// 校验计算属性
valid: function(){
// 校验是否存于字符串test
return this.objArr.filter(function(obj){
return obj.msg !="test";
})
}
},
// 方法
methods: {
}
})
</script>
</html>
组件渲染温馨提示
v-if与v-for联合使用
在开发项目场景中，我们可能会相对同一个元素进行绑定if和for的双重属性进行操作，但是在Vue中，这是 极力不推荐 一起使用的，为什么会那么说呢？
根据 风格指南 官方文档 概要，可以了解到 v-for 的优先级要比 v-if 要高！
如果非要一起使用，尽量使用这种方式
示例代码
DOM
<div class="vue_for_ifTest2" v-if="flag">
<div v-for="data in objArr" >
<p>显示并渲染</p>
<p>{{data.title}}</p>
<p>{{data.msg}}</p>
</div>
</div>
组件渲染
组件渲染跟元素渲染方式一样，给予v-for属性即可！
若是想通过传递参数的方式给组件，请使用props或其他传递数据方式！
值得一提的是：在Vue中给组件提供了一个isAttribute，这样符合DOM元素规范，又可以把组件渲染进去。
示例代码
DOM
<!-- 组件化渲染 -->
<div class="vue_arr_component">
<ul>
<li
v-for="(data,index) in objArr"
:key="data.id"
is="todo-item"
:title="data.title">
</li>
</ul>
</div>
vue
// 注册组件
Vue.component('todo-item',{
template:
`
<li>
<p>{{title}}</p>
</li>
`,
props: ['title']
})
结束语
- 本人所有作品内容纯原创，转载需标明出处，否则必究！
- 对于Vue其他内容可以看看我的 序章
- 感谢你的观看，帮到你的请给我点赞谢谢！
- 若有不足之处，欢迎评论区指出！
