问题一,首先我们的知道列表渲染是什么?
核心—就是其v-for指令。
问题二,v-for指令所针对的目标对象为数组,对象,还有数组对象混合时,区别是什莫呢?
针对数组: 语法:v-for = (item, index) in items;
item:每次遍历的数据项的值;index:每次遍历的数据项的索引下标。
针对对象: 语法: v-for = (value, name, index) in obj;
value:每次遍历的数据项的属性值;name:每次遍历的数据项的属性名;index:每次遍历的数据项的属性索引下标。
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表渲染--对象</title>
<style type="text/css">
.arr, .obj, .mixture {
width: 400px;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="v_forTarget">
<div class="arr" style="border: 2px solid red;">
<h4>目标为数组</h4>
<li v-for="(item, index) in arr">索引:{{ index }} - 值:{{ item }}</li>
</div>
<div class="obj" style="border: 2px solid royalblue;">
<h4>目标为对象</h4>
<li v-for="(value, name, index) in obj">属性名:{{ name }} - 值:{{ value }} - 索引:{{ index }}</li>
</div>
<div class="mixture" style="border: 2px solid deeppink;">
<h4>目标为数组对象混合</h4>
<li v-for="(item, index) in mixture">索引:{{ index }} - 值:{{ item.message }}
</li>
</div>
</div>
</body>
<script src="js/vue2.0.js"></script>
<script type="text/javascript">
let arr, obj, mixture;
arr = ['1', '2', '3'];
obj = {
username: 'burningSnow',
lover: 'fullCitySnow',
time: 'doubleYear'
};
mixture = [
{message: 'burningSnow'},
{message: 'fullCitySnow'},
{message: 'doubleYear'}
];
//v-for目标不同时
const v_forTarget = new Vue({
el: '#v_forTarget',
data: {
arr: arr,
obj: obj,
mixture: mixture
}
})
</script>
</html>
ps:关于Vue中对象属性枚举遍历显示顺序是按照Object.keys()【属性名ACALL累加码值大小排序的】来显示得
问题三,那关于v-for的“就地复用”策略,怎末理解呢?
那首先我们的了解什么是Vue的“就地复用”策略。
当Vue对某一元素进行第一次渲染后,发现感觉此元素是可以复用的【现如今认知水平,认为是否判定为可复用元素的标准为是否与响应式数据存在依赖,若没有,则认为可复用元素】,则即使对其位置进行更改,Vue的视图层还是会选择复用第一次渲染的元素,来提高性能。
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表渲染--就地复用</title>
</head>
<body>
<div id="v_forReuse">
<!--
* 当你在input框内填写数据【非v-for情况下】
*你会发现不管你怎末点击切换按钮,貌似是切换了【前面标识发生改变了】
*但是其实input框是没有发生任何变化,框还是那个输入框,这就是Vue的
*"就地复用"策略。
-->
<h4>非v-for"就地复用"演示</h4>
<template v-if="key">
<label>getName:</label>
<input />
</template>
<template v-else>
<label>setName:</label>
<input />
</template>
<button @click="key=!key">toggle</button>
<h4>v-for"就地复用"演示</h4>
<div v-for="(item, index) in arr">
{{ item }}<input />
<button @click="toBottom" :data-index = "index">下移</button>
</div>
</div>
</body>
<script src="js/vue2.0.js"></script>
<script type="text/javascript">
let arr;
arr = ['1', '2', '3'];
//v-for中的"就地复用"
const v_forReuse = new Vue({
el: '#v_forReuse',
data: {
key: true,
arr: arr
},
methods: {
toBottom: function(e) {
let targetIndex, changeData;
targetIndex = parseInt(e.target.dataset.index);
try{
if(targetIndex == (this.arr.length - 1)) throw e;
changeData = this.arr[targetIndex];
this.arr.splice(targetIndex, 1, this.arr[targetIndex + 1]);
this.arr.splice((targetIndex + 1), 1, changeData);
}
catch(e) {
changeData = this.arr[targetIndex];
this.arr.splice(targetIndex, 1, this.arr[0]);
this.arr.splice(0, 1, changeData);
}
}
}
})
</script>
</html>
ps:解决“就地复用”问题,可以在标签上添加key
特性,注意key
值需得是唯一值
问题四,欸,我看见上述代码是用Array原型prototype上的方法splice(),为什么要这么做呢?为什么不能用arr.[index] = xxx;
来代替,直接明了呢?
首先我们知道的是Vue可以实现响应式数据,对,没错。
Vue是 能利用this.name = xxx;
够检测数据变化,但是只是针对根级数据data对象属性值本身变化,而其内部数据的变化用上述方式是检测不到的。
所以,Vue为数组和对象设置解决相关问题的方法。
数组:
变异数组方式【自行官网查询即可】
Vue实例方法,Vue.set(arr, index, value);
对象:
Vue实例方法,Vue.set(obj, protypeName, value);
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表渲染---响应式数据</title>
</head>
<body>
<div id="app">
<!-- 目标对象为数组时,关于对data根级数据修改响应情况 -->
<template v-for='(item, index) in arr'>
{{index}}: <span>{{item}}</sapn><br />
</template>
<input v-for='item in eventArr' data-type="arr" type="button" @click="toggle" :value='item' /><br />
<!-- 目标对象为数组时,关于对data根级数据修改响应情况 -->
<template v-for='(value, name) in obj'>
{{name}}: <span>{{value}}</sapn><br />
</template>
<input v-for='item in eventArr' data-type="obj" type="button" @click="toggle" :value='item' /><br />
</div>
</body>
<script src="js/vue2.0.js"></script>
<script type="text/javascript">
let obj, arr, eventArr;
obj = {
username: 'burningSnow',
age: '21'
};
arr = ['burningSnow', '21'];
//多列事件数组
eventArr = ['arrToggle1', 'arrToggle2', 'arrToggle3', 'arrToggle4', 'recover'];
const vm = new Vue({
el: '#app',
data: {
obj: obj,
arr: arr,
eventArr: eventArr
},
methods: {
arrToggle1: function(e) {
e.target.dataset.type == 'arr' ? this.arr = ['燃情雪', '21'] : this.obj = {
username: '燃情雪',
age: '21'
};
},
arrToggle2: function(e) {
e.target.dataset.type == 'arr' ? this.arr[0] = '燃情雪' : this.obj.username = '燃情雪';
},
arrToggle3: function(e) {
e.target.dataset.type == 'arr' ? this.arr.splice(0, 1, '燃情雪') : null;
},
arrToggle4: function(e) {
e.target.dataset.type == 'arr' ? Vue.set(this.arr, 0, '燃情雪') : Vue.set(this.obj, 'username', '燃情雪');
},
recover: function(e) {
e.target.dataset.type == 'arr' ? this.arr = ['burningSnow', '21'] : this.obj = {
username: 'burningSnow',
age: '21'
};
},
//事件总控制函数
toggle: function(e) {
let key = e.target.value;
key == 'arrToggle1' ? this.arrToggle1(e) : null;
key == 'arrToggle2' ? this.arrToggle2(e) : null;
key == 'arrToggle3' ? this.arrToggle3(e) : null;
key == 'arrToggle4' ? this.arrToggle4(e) : null;
key == 'recover' ? this.recover(e) : null;
}
}
})
</script>
</html>
问题五,上面讲的是根级数据的修改,那如果我想在data对象外添加或则删除根级数据,怎末添加呢?
首先得表明一点:Vue是 不能检测根级数据data对象属性的添加或删除。
那怎末弄呢?
我们可以把需要添加的数据放在一个根级数据对象或则数组里面,也可以放在computed计算属性中,同样甚至可以放在methods里面。
其他的就不累述了,官方文档上都有。
ps:有时你可能需要为已有对象赋予多个新属性,比如使用 Object.assign()
或 _.extend()
。
扩展—splice()和set()方法的强大之处。
增
splice(index, 0, value);
set(arr/obj, index/protypeNmae, value);注意,此处的index需大于arr的长度,protypeNmae为你想增添的属性名。
删
splice(index, 1, ‘’ ‘’);
set(arr/obj, index/protypeNmae, ‘’ ‘’);注意,此处的index需小于arr的长度。
改
splice(index, 1, value);
set(arr/obj, index/protypeNmae, value);注意,此处的index需小于arr的长度。
菜鸟爬行中…