[TOC]
todolist功能开发
- 代码 2
<body>
<div id="app">
<div>
<input v-model="newItem" />
<button @click="handleClick">提交</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<hr/>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
newItem: '',
list: ["text1", "text2"]
},
methods: {
handleClick: function () {
this.list.push(this.newItem);
this.newItem = '';//数据新增后，让输入框处于空
}
}
})
</script>
每次点击提交，就将输入框中的内容添加到列表上进行显示。
用到了数据的双向绑定、事件绑定、v-for指令等知识
todolist组件拆分
组件的定义
- 定义组件
Vue.component("todo-item",{
template:"<li>item</li>"
})
- 使用组件
<todo-item></todo-item>
使用Vue.component定义的组件，称为全局组件。定义后可以在任意地方使用。
如果要定义局部组件
<script>
var TodoItem = {
template:"<li>item</li>"
}
var app = new Vue({
el: '#app',
comments:{
'todo-item':TodoItem//局部组件的注册
},
data: {
newItem: '',
list: ["text1", "text2"]
},
methods: {
handleClick: function () {
this.list.push(this.newItem);
this.newItem = '';
}
}
})
</script>
局部组件在定义后，需要在使用的Vue实例中进行声明
组件化后的todolist
- 代码 2-1
<body>
<div id="app">
<div>
<input v-model="newItem" />
<button @click="handleClick">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
</ul>
</div>
<hr/>
</body>
<script>
Vue.component("todo-item",{
props:["content"],//接收外部参数名
template:"<li>{{content}}</li>"
})
var app = new Vue({
el: '#app',
data: {
newItem: '',
list: ["text1", "text2"]
},
methods: {
handleClick: function () {
this.list.push(this.newItem);
this.newItem = '';
}
}
})
</script>
点击提交后，item的值以content为名传递给了组件，组件再通过{{content}}获取值
也就是说，父组件通过属性的形式，向子组件传递值。
目前为止，我们把<li>标签拆成了组件进行管理
组件与实例的关系
每一个Vue组件，就是一个Vue实例
在一个Vue项目中，都是有很多个Vue实例组成的。
如果一个Vue实例没有定义模板，那么挂载点下的所有内容会被当做模板
实现todolist的删除功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello</title>
<script src="../vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<input v-model="newItem" />
<button @click="handleClick">提交</button>
</div>
<ul>
<!-- 父组件监听子组件的delete事件 -->
<todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="handleDelete"></todo-item>
</ul>
</div>
<hr/>
</body>
<script>
Vue.component("todo-item", {
props: ["content", "index"],//接收外部参数名
template: "<li @click='handleClick'>{{content}}</li>",
methods: {
handleClick: function () {
this.$emit("delete", this.index);//向外触发delete事件
}
}
})
var app = new Vue({
el: '#app',
data: {
newItem: '',
list: ["text1", "text2"]
},
methods: {
handleClick: function () {
this.list.push(this.newItem);
this.newItem = '';
},
handleDelete:function(index){
this.list.splice(index,1);//删除一条数据
}
}
})
</script>
</html>
实现了点击列表后，删除数据的功能
网友评论