问题一，首先我们的知道列表渲染是什么？
核心—就是其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的长度。
菜鸟爬行中…
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
