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 = ''
}
}
})