学习心得,
列表渲染,
直接上代码了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染单独实例</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 模板时是十分必要的，因为在 <ul> 元素内只有 <li> 元素会被看作有效内容。–>-->
<!--这样做实现的效果与 <todo-item> 相同，但是可以避开一些潜在的浏览器解析错误。-->
<!--查看 DOM 模板解析说明 来了解更多信息。–>-->
<script>
//首先,注册一个组件
// todo-item 组件现在接受一个
// "prop"，类似于一个自定义属性,props通信用的,
// 相当于只接受title信号.接到后开始遍历template模板
// 这个属性名为 todo。
// is="todo-item" 为了避免浏览器潜在BUG,给合法的标签独立命名,
// 以便于Vue.component中注册的 todo-item 组件 进行模板加载
//$emit(调用函数名,[参数1,参数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数组中添加数据
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>
网友评论