学习心得,
列表渲染,
PS:最后一个例子单独写到附录中了.
直接上代码了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
<style>
.divder{
border: 1px solid red;
}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<ul id="app-1-1">
<li v-for="content in liebiaos">{{content.name}}</li>
</ul>
<br>
<ul id="app-1-2">
<li v-for="(shuzubieming,shuzuxuhao) in liebiaos">
{{msg}} ---- {{shuzuxuhao}} ---- {{shuzubieming.name}}
</li>
</ul>
<hr>
<ul id="app-2-1" class="capp-2-1">
<li v-for="(value,key,index) in object">
{{msg}}---键值对::{{key}}---对象::{{value}}---索引::{{index}}
</li>
</ul>
<hr>
<ul id="app-3">
<li v-for="shuzubieming in liebiaos" v-bind:key="shuzubieming.id">
{{msg}}==={{shuzubieming.name}}==={{shuzubieming.id}}
</li>
</ul>
<hr>
<div id="app-4">
[{{liebiaos.msg}}]+[{{liebiaos.miss}}]+[{{liebiaos.sun}}]+[{{liebiaos.bbq}}]
</div>
<hr>
<ul id="app-5-1">
<li v-for="list in lists">{{list}}</li>
</ul>
<br>
<ul id="app-5-2">
<li v-for="list in even(nums)">{{list}}</li>
</ul>
<hr>
<!--一段取值范围的v-for-->
<div id="app-6">
<span v-for="n in 10">{{n}}</span>
</div>
<hr>
<ul id="app-7">
<template v-for="list in lists">
<li v-bind:key="list.id">{{list.name}}</li>
<li>{{list.id}}</li>
<li class="divder"></li>
</template>
</ul>
<hr>
<ul id="app-8-1">
<li v-for="list in lists" v-if="!list.tefalse">{{list.name}}</li>
</ul>
<hr>
<div id="app-8-2">
<ul v-if="lists.length == 4">
<li v-for="list in lists">
{{list.name}}
</li>
</ul>
<p v-else>{{fsmsg}}</p>
</div>
<hr>
<!--<my-component v-for="item in items" v-bind:key="item.id"></my-component>-->
<!--2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。-->
<!--任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。
为了把迭代数据传递到组件里，我们要用 props ：-->
<!--<my-component-->
<!--v-for="(item ,index) in items"-->
<!--v-bind:item="item"-->
<!--v-bind:index="index"-->
<!--v-bind:key="item.id"-->
<!--></my-component>-->
<!--不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。
明确组件数据的来源能够使组件在其他场合重复使用。-->
<script>
//用 v-for 把一个数组对应为一组元素
var app1 = new Vue({
el:"#app-1-1",
data:{
liebiaos:[
{name:"我是one"},
{name:"我是two"},
{name:"我是three"}
]
}
});
//在 v-for 块中，我们拥有对父作用域属性的完全访问权限。
// v-for 还支持一个可选的第二个参数为当前项的索引。
//你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：
// 例如 item in items 与 item of tiems 效果 是一样的的
var app2 = new Vue({
el:"#app-1-2",
data:{
msg:"我是想说的话~",
liebiaos:[
{name:"我是one"},
{name:"我是two"},
{name:"我是three"}
]
}
});
//一个对象的v-for
//在遍历对象时，是按 Object.keys() 的结果遍历，
// 但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
var app3 = new Vue({
el:"#app-2-1",
data:{
msg:"我是想说的话~",
object:{
firstName:"John",
lastName:"Doe",
age:"30"
}
}
});
//v-bind:key=""
var app4 = new Vue({
el:"#app-3",
data:{
msg:"我是想说的话~",
liebiaos:[
{name:"我是one",id:0},
{name:"我是two",id:1},
{name:"我是three",id:2}
]
}
});
//数组更新检测,
// 变异方法
// push(),在数组尾部,添加数据,app4.liebiaos.push({name:"我爱悦悦",id:3})
// pop(),删除数组最后一条数据
// shift(),删除数组第一条数据
// unshift(),在数组头部,添加数据,app4.liebiaos.unshift({name:"我爱悦悦",id:3})
// splice(),在数组指定位置,添加数据,app4.liebiaos.splice(1,0,{name:"我爱悦悦",id:3},{name:"我爱悦悦1",id:4})
// sort(),给数组排序,字母排序
// reverse(),颠倒数组的元素顺序
//例如:app4.liebiaos.push({name:"我爱悦悦",id:3})
//替换数组
//filter(),遍历数组,查询指定内容,并返回数组.
// 例如: app4.liebiaos.filter(function(shuzubieming){
// return shuzubieming.name.match(/我是three/)
// })
// concat(),用于连接两个或多个数组。
// 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
// 例如: app4.liebiaos.concat([{name:"我是four",id:3}],[{name:"我是five",id:4}])
// slice() ,从已有的数组中返回选定的元素。
// 例如: app4.liebiaos.slice(1,2)
//注意事项
//1.当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
// Vue.set
// Vue.set(example1.items, indexOfItem, newValue)
//参数解释:
// 1.相对应的数组:example1.items
// 2.数组中的索引位置:indexOfItem
// 3.数组中新插入的值:newValue
// Array.prototype.splice
// 例如: Vue.set(app4.liebiaos,2,{name:"我是新的",id:6})
// 参数解释:
// 1.截取数组开始的地方:
// 2.截取数组结束的地方:
// 3.数组中新插入的值:
//例如: app4.liebiaos.splice(0,2,{name:"我是新的1",id:3},{name:"我是新的2",id:4})
//2.当你修改数组的长度时，例如：vm.items.length = newLength
//example1.items.splice(newLength)
// 参数解释:
// 1.保留数组相对应的长度:newLength
//例如: app4.liebiaos.splice(2)
//对象更改检测注意事项
// 由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
// 例如:
// var vm = new Vue({
// data: {
// a: 1
// }
// })
// // `vm.a` 现在是响应式的
// vm.b = 2
// // `vm.b` 不是响应式的
var app5 = new Vue({
el:"#app-4",
data:{
liebiaos:{
msg:"123"
}
},
mounted : function() {
//添加单个属性
// Vue.set(app5.liebiaos,"miss","我是新刷新出来的数据~~");
// 或
// this.$set(this.liebiaos,"miss","我是新刷出来的数据~~");
//添加多个属性
this.liebiaos = Object.assign({},this.liebiaos,{
miss:"属性miss",
sun:"属性sun",
bbq:"属性bbq"
})
}
})
//对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。
// 但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。
// Vue.set(object, key, value)
// 参数解释
// 1.对象的名称:object
// 2.新添加的对象key:key
// 3.新添加对象的value:value
//例如:
//Vue.set(app5.liebiaos,"miss","我是新刷新出来的数据~~");
//mounted : function() {
//this.$set(this.liebiaos,"miss","我是新刷出来的数据~~");
//}
//如果需要给已有对象添加多个新属性
//例如:
//this.liebiaos = Object.assign({},this.liebiaos,{
//miss:"属性miss",
//sun:"属性sun",
//bbq:"属性bbq"
//})
//显示过滤/排序结果
//使用计算属性:computed
var app6 = new Vue({
el:"#app-5-1",
data:{
nums:[1,2,3,4,5]
},
computed:{
lists:function(){
return this.nums.filter(function(num){
return num % 2 === 0
})
}
}
});
//在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中)
// 你可以使用一个 method 方法：
var app7 = new Vue({
el:"#app-5-2",
data:{
nums:[1,2,3,4,5]
},
methods:{
even:function(nums){
return nums.filter(function(num){
return num % 2 === 0
})
}
}
});
//一段取值范围的v-for
var app8 = new Vue({
el:"#app-6"
});
//v-for on a <template>
var app9 = new Vue({
el:"#app-7",
data:{
lists:[
{name:"我是1",id:0},
{name:"我是2",id:1},
{name:"我是3",id:2}
]
}
});
//v-for with v-if
var app10 = new Vue({
el:"#app-8-1",
data:{
lists:[
{name:"我是1",tefalse:true},
{name:"我是2",tefalse:false},
{name:"我是3",tefalse:false},
{name:"我是4",tefalse:true}
]
}
})
//而如果你的目的是有条件地跳过循环的执行，
// 那么可以将 v-if 置于外层元素 (或 <template>)上。
var app11 = new Vue({
el:"#app-8-2",
data:{
fsmsg:"否定的数据就用这个代替啦~",
lists:[
{name:"我是1",tefalse:true},
{name:"我是2",tefalse:false},
{name:"我是3",tefalse:false},
{name:"我是4",tefalse:true}
]
}
})
//一个组件的v-for
// var app12 = new Vue({
// el:"#app-9",
// data:{
//
// }
// })
</script>
</body>
</html>
