Vue入门实战——备忘录

1.创建一个Vue实例

可通过

var app = new Vue({}）

创建一个Vue实例，

el:'#content'

进行绑定。

2.data

在

data:{}

中创建一个

inputText:' ',

用来接受用户的输入，

list:[]

来接受用户已创建的未完成事务。

3.methods

methods:{}

中创建一个add()函数来添加用户输入的事项，del()函数来删除用户已添加的事项（表示已完成或添加错了）。

4.html部分

在html中创建一个input标签，添加属性v-model="inputText"用于数据的双向绑定，用户的输入可同时被inputText接受到，并可创建一个i标签添加v-on:click="add"来绑定点击添加事项函数。另外创建一个div标签来显示用户已添加的事务，通过添加属性v-for="(item,index) in list"，并在子元素中通过{{item.text}}即可显示用户已添加到list中的事务，同时可创建另一个子元素通过添加v-on:click="del(index)"绑定点击删除事项函数，并传入参数index来判断需要删除的是哪一项事务。

5.函数代码介绍

两个函数代码都极其简单。

• add:function():只需利用push()将inputText加入list中即可——this.list.push({text: this.inputText });
• del:function(e):只需删除list中index对应事务即可——this.$delete(this.list,e);

6.项目截图

利用上面的运作方式，简单地写下css样式，即可完成。（此备忘录只基本功能，其他功能完善看个人需要）