Vue入门实战——备忘录

Vue入门实战——备忘录

1.创建一个Vue实例

可通过 var app = new Vue({}） 创建一个Vue实例，el:'#content' 进行绑定。

2.data

在data:{} 中创建一个inputText:' ',用来接受用户的输入，list:[] 来接受用户已创建的未完成事务。

（福利推荐：阿里云、腾讯云、华为云服务器最新限时优惠活动，云服务器1核2G仅88元/年、2核4G仅698元/3年，点击这里立即抢购>>>）

3.methods

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

4.html?userCode=wrvvs1rm部分

在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样式，即可完成。（此备忘录只基本功能，其他功能完善看个人需要）

你还在原价购买阿里云、腾讯云、华为云、天翼云产品？那就亏大啦！现在申请成为四大品牌云厂商VIP用户，可以3折优惠价购买云服务器等云产品，并且可享四大云服务商产品终身VIP优惠价，还等什么？赶紧点击下面对应链接免费申请VIP客户吧：

1、点击这里立即申请成为腾讯云VIP客户

2、点击这里立即注册成为天翼云VIP客户

3、点击这里立即申请成为华为云VIP客户

4、点击这里立享阿里云产品终身VIP优惠价

喜欢 (0)赏

[[email protected]]

分享 (0)