vue.js学习笔记2–编写todolist功能

一、todolist功能开发

先写布局框架

需要一个input框，一个提交按钮，一个显示列表。

首先确定基础组件：

<div id="root">
        <div>
            <input/>
            <button>提交</button>
        </div>
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            inputValue: 'hello',
        }
    })
</script>

input框设置双向绑定：

<input v-model="inputValue"/>

提交按钮添加点击事件：

<button @click="handleClick">提交</button>

methods: {
                handleClick: function () {
                    this.list.push(this.inputValue)
                    this.inputValue=''
                }
            }

点击事件使用push函数将input框中的inputValue赋给list数组，并将input框清空，list数组显示在列表：

<ul>
        <li v-for="(item,index) of list" :key="index">
            {{item}}
        </li>
</ul>

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TodoList</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <div>
            <input v-model="inputValue"/>
            <button @click="handleClick">提交</button>
            </div>
        <ul>
            <li v-for="(item,index) of list" :key="index">
                {{item}}
            </li>
            </ul>
        </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                inputValue: '',
                list:[]
            },
            methods: {
                handleClick: function () {
                    this.list.push(this.inputValue)
                    this.inputValue=''
                }
            }
        })
        </script>
</body>
</html>

二、todolist组件拆分

全局组件

当某部分比较庞大时可以拆分成组件，以todolist为例，拆分其ul标签下的li为组件，vue提供全局组件定义函数component，（vue的每个组件都是vue的实例）定义：
```
Vue.component('todo-item', {
            props:['content'],
            template:'<li>{{content}}</li>'
        })
```
组件使用：
```
<todo-item v-for="(item,index) of list" :key=" index" :content="item"></todo-item>
```
调用todo-item时用content传参，组件定义时使用props接收。
局部组件

vue定义局部组件，局部组件不可以直接在父组件里使用，如果想在其他的vue实例里使用的话必须使用components对局部组件进行注册。定义：
```
var TodoItem = {
            template:'<li>item</li>'
        }
```
在实例里注册后可以使用todo-list标签：
```
components: {
                'todo-item': TodoItem
            },
```

三、实现todolist的删除功能

增加删除功能前完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TodoList</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <div>
            <input v-model="inputValue"/>
            <button @click="handleClick">提交</button>
            </div>
        <ul>
            <todo-item v-for="(item,index) of list" 
                       :key=" index" 
                       :content="item"
              ></todo-item>
        </ul>
        </div>
    <script>
        Vue.component('todo-item', {
            props:['content'],
            template: '<li>{{content}}</li>'
        })
        new Vue({
            el: "#root",
            data: {
                inputValue: '',
                list:[]
            },
            methods: {
                handleClick: function () {
                    this.list.push(this.inputValue)
                    this.inputValue=''
                }
            }
        })
        </script>
</body>
</html>

给子组件添加点击事件

Vue.component('todo-item', {
            props:['content'],
            template: '<li @click="handleClick">{{content}}</li>',
            methods: {
                handleClick: function (){
                    this.$emit('delete',this.index)
                }
            }
        })

注：vue中$emit的用法

子组件可以使用$emit触发父组件的自定义事件

this.$emit('delete',this.index)

本例中该语句括号里的第一个参数是发送数据的名称，父组件接受时用这个名字接收，第二个参数是数据现在的位置。

父组件需要index属性传递数组的下表给子组件，并在父组件监听delete事件：

<todo-item v-for="(item,index) of list" 
                       :key=" index" 
                       :content="item"
                       :index="index"
                       @delete="handleDelete"></todo-item>

父组件监听到delete事件后执行handleDelete函数：

new Vue({
            el: "#root",
            data: {
                inputValue: '',
                list:[]
            },
            methods: {
                handleClick: function () {
                    this.list.push(this.inputValue)
                    this.inputValue=''
                },
                handleDelete: function (index) {
                    this.list.splice(index,1)
                }
            }
        })

实现删除功能后完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TodoList</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <div>
            <input v-model="inputValue"/>
            <button @click="handleClick">提交</button>
            </div>
        <ul>
            <todo-item v-for="(item,index) of list" 
                       :key=" index" 
                       :content="item"
                       :index="index"
                       @delete="handleDelete"></todo-item>
        </ul>
        </div>
    <script>
        Vue.component('todo-item', {
            props:['content'],
            template: '<li @click="handleClick">{{content}}</li>',
            methods: {
                handleClick: function (){
                    this.$emit('delete',this.index)
                }
            }
        })
        new Vue({
            el: "#root",
            data: {
                inputValue: '',
                list:[]
            },
            methods: {
                handleClick: function () {
                    this.list.push(this.inputValue)
                    this.inputValue=''
                },
                handleDelete: function (index) {
                    this.list.splice(index,1)
                }
            }
        })
        </script>
</body>
</html>

结果展示

vue.js学习笔记2--编写todolist功能

vue.js学习笔记2–编写todolist功能

一、todolist功能开发

二、todolist组件拆分

三、实现todolist的删除功能

猜你喜欢