郑州怎么做网站排名,怎样加入网站,怎样建网站平台,品牌logo设计在线生成Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 响应式渲染 - 待办事项简单实现 目录
待办事项简单实现
页面初始化
双向绑定的指令
增加留言列表设置
增加删除按钮
最后优化
总结 待办事项简单实现
页面初始化
对页面进行vue的引入、创建输入框和按钮及实例化V… Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 响应式渲染 - 待办事项简单实现 目录
待办事项简单实现
页面初始化
双向绑定的指令
增加留言列表设置
增加删除按钮
最后优化
总结 待办事项简单实现
页面初始化
对页面进行vue的引入、创建输入框和按钮及实例化Vue。
示例如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src../lib/vue.js/script
/head
body
div idboxinput typetext /buttonAdd/button
/div
scriptnew Vue({el: #box, // element})
/script
/body
/html 双向绑定的指令
使用v-model对input元素进行双向绑定并在按钮上设置点击事件。
V-model只能绑定在表单元素上。
示例如下
div idboxinput typetext v-modelmytext/button clickhandelAdd()Add/button
/div
scriptnew Vue({el: #box, // elementdata:{mytext:今日任务},methods:{handelAdd() {console.log(点击add按钮)}}})
/script 增加留言列表设置
设置ul元素用以渲染留言列表数据。
并在点击事件中对留言列表数据通过push方式增加。
示例如下
div idboxinput typetext v-modelmytext/button clickhandelAdd()Add/buttonulli v-foritem in datalist{{item}}/li/ul
/div
scriptnew Vue({el: #box, // elementdata:{mytext:今日任务,datalist:[第一件事, 第二件事, 第三件事]},methods:{handelAdd() {console.log(点击add按钮)this.datalist.push(this.mytext)}}})
/script
div idboxinput typetext v-modelmytext/button clickhandelAdd()Add/buttonulli v-foritem in datalist{{item}}/li/ul
/div
scriptnew Vue({el: #box, // elementdata:{mytext:今日任务,datalist:[第一件事, 第二件事, 第三件事]},methods:{handelAdd() {console.log(点击add按钮)this.datalist.push(this.mytext)}}})
/script
实现效果 增加删除按钮
在原来基础上增加删除已完成的事件或留言功能。
示例如下
li v-foritem in datalist{{item}}buttonDel/button
/li
按钮绑定删除事件
示例如下
li v-for(item, index) in datalist{{item}}button clickhandelDel(index)Del/button
/li
删除事件处理
示例如下
handelDel(index) {this.datalist.splice(index, 1)
} 最后优化
通过判断datalist显示和隐藏列表和提示。
示例如下
div idboxinput typetext v-modelmytext/button clickhandelAdd()Add/buttondiv v-show!datalist.length待办事项暂时没有了快添加吧/divul v-showdatalist.lengthli v-for(item, index) in datalist{{item}}button clickhandelDel(index)Del/button/li/ul
/div
scriptnew Vue({el: #box, // elementdata:{mytext:今日任务,datalist:[第一件事, 第二件事, 第三件事]},methods:{handelAdd() {console.log(点击add按钮)this.datalist.push(this.mytext)// 置空mytext内容this.mytext },handelDel(index) {this.datalist.splice(index, 1)}}})
/script
最终效果 总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 响应式渲染 - 待办事项简单实现
