(六)Vue的列表渲染及组件渲染
Vue的列表渲染
注：其实使用的还是相关的vue的指令进行相应的数据绑定和渲染 在前边写过一个博客来说指令的相关内容但是写的不细，就是写了相应的使用方法，在此要提到之前遇到的一个问题 就是前端拿到返回数据进行数据渲染·列表展示的时候，之前就是直接解析出数组直接在DOM上边写一个v-for 进行数据渲染达到数据展示的效果，但是其实这样是不合适的 ，vue的初衷就是使用单页面应用，更多的使用js来完成更多的功能 所以尽量让相应的耦合度低一些，创建一个组件，将数据配置好，js渲染完成之后直接扔上去 显示出来 这样就是没有直接在DOM上进行操作，想想是不是这个道理
(一)列表渲染
1.1使用v-for把一个数组对应为一组元素
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
data() {
return{
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
}
1.2 在V-for中，可以直接访问所有的父作用区域的值 举例表示 同时在渲染是显示索引数值
Such as：
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
data(){
return{
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
}
这里的v-for语法 使用of或者in都可以
(在v-for里面使用对象)
举例：
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
data: {
return{
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
}
直接获取对象的名字也可以
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>
一样也有索引
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
区别不大 咋说呢 渲染数据都可以 其实在写的时候多发散下思维 很多就想明白了 不能只跟着他的语法走 这样就被禁住了 慢慢想其实他们做这个框架也是有一定的道理的 肯定也是很多东西去写的是不 不存在很多弊端的
数据更新及相关检测
记住一一句话只要数据变了 视图就会响应
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
替换数组 筛查数组
filter()、concat() 和 slice()
//在这里面是改变数组了 进行修改 所以直接去替换掉就可以了
举例子
<li v-for="n in evenNumbers">{{ n }}</li>
data(){
return{
numbers: [ 1, 2, 3, 4, 5 ]
}
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
然后你还可以自己直接写吗 对吧 反正就是这些东西了 你自己怎么用都行
嵌套循环进行筛查显示
<ul v-for="set in sets">
<li v-for="n in even(set)">{{ n }}</li>
</ul>
data: {
sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}
拓展 ： v-for 直接数据循环 反正就是这些东西学习的时候看一遍 在具体使用到的时候 接的起来 然后回来看看 就记住了 以后多总结一下 就变成你自己的东西了
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
template是使用 v-for
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
注意：
组件使用v-for
使用自定义组件使用
<my-component v-for="item in items" :key="item.id"></my-component>
任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 prop
<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 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。
组件使用 重要 举例 举例
<div id="todo-list-example">
<form v-on:submit.prevent="addNewTodo">
<label for="new-todo">Add a todo</label>
<input
v-model="newTodoText"
id="new-todo"
placeholder="E.g. Feed the cat"
>
<button>Add</button>
</form>
<ul>
<li
is="todo-item"
v-for="(todo, index) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"
></li>
</ul>
</div>
注意这里的 is="todo-item" attribute。这种做法在使用 DOM 模板时是十分必要的，因为在 <ul> 元素内只有 <li> 元素会被看作有效内容。这样做实现的效果与 <todo-item> 相同，但是可以避开一些潜在的浏览器解析错误
vue的官方实例
Vue.component('todo-item', {
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">Remove</button>\
</li>\
',
props: ['title']
})
new Vue({
el: '#todo-list-example',
data: {
newTodoText: '',
todos: [
{
id: 1,
title: 'Do the dishes',
},
{
id: 2,
title: 'Take out the trash',
},
{
id: 3,
title: 'Mow the lawn'
}
],
nextTodoId: 4
},
methods: {
addNewTodo: function () {
this.todos.push({
id: this.nextTodoId++,
title: this.newTodoText
})
this.newTodoText = ''
}
}
})
