學(xué)習(xí)心得,
列表渲染,
直接上代碼了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染單獨(dú)實(shí)例</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--下面是一個簡單的 todo list 的完整例子：-->
<div id="todo-list-example">
<input
v-model="newTodoText"
v-on:keyup.enter="addNewTodo"
v-bind:placeholder="plholder"
>
<ul>
<li
is="todo-item"
v-for="(todo, index) in todos"
v-bind:key="todo.id"
v-bind:title="todo.name"
v-on:remove = "removemod(index)"
></li>
</ul>
</div>
<!--<!–注意這里的 is="todo-item" 屬性莽鸭。-->
<!--<em" 屬性吗伤。--用 DOM 模板時是十分必要的，因?yàn)樵?<ul> 元素內(nèi)只有 <li> 元素會被看作有效內(nèi)容硫眨。–>-->
<!--這樣做實(shí)現(xiàn)的效果與 <todo-item> 相同足淆，但是可以避開一些潛在的瀏覽器解析錯誤。-->
<!--查看 DOM 模板解析說明 來了解更多信息礁阁。–>-->
<script>
//首先,注冊一個組件
// todo-item 組件現(xiàn)在接受一個
// "prop"巧号，類似于一個自定義屬性,props通信用的,
// 相當(dāng)于只接受title信號.接到后開始遍歷template模板
// 這個屬性名為 todo。
// is="todo-item" 為了避免瀏覽器潛在BUG,給合法的標(biāo)簽獨(dú)立命名,
// 以便于Vue.component中注冊的 todo-item 組件 進(jìn)行模板加載
//$emit(調(diào)用函數(shù)名,[參數(shù)1,參數(shù)2]) vue的特有用法
Vue.component('todo-item',{
template:'<li>' +
'{{title}}' +
'<button v-on:click="$emit(\'remove\')">(刪除)X</button>' +
'</li>',
props:['title']
});
var app1 = new Vue({
el:"#todo-list-example",
data:{
newTodoText: "",
nextTodoId: 4,
plholder:"Add a todo(添加一個todo)",
todos:[
{
id: 0,
name: "我是one"
},
{
id: 1,
name: "我是two"
},
{
id: 2,
name: "我是three"
},
{
id: 3,
name: "我是four"
}
]
},
methods:{
//向todos數(shù)組中添加數(shù)據(jù)
addNewTodo:function(){
this.todos.push({
id: this.nextTodoId++,
name:this.newTodoText
});
this.newTodoText = ""
},
removemod:function(index){
this.todos.splice(index,1);
nextTodoId = this.nextTodoId--;
}
}
})
</script>
</body>
</html>
