028-86922220
关于创新互联
多方位宣传企业产品与服务 突出企业形象
Vue如何制作TodoList网页
这篇文章主要为大家展示了“Vue如何制作Todo List网页”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue如何制作Todo List网页”这篇文章吧。
成都创新互联公司是一家集网站建设,赤坎企业网站建设,赤坎品牌网站建设,网站定制,赤坎网站建设报价,网络营销,网络优化,赤坎网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
具体内容如下
跟着老师学习Vue，我喜欢清爽的界面，就自己改了样式，看起来还不错，以后就用来记录要做的事情，实用性还蛮强。
Vue非常容易上手，运用到了双向绑定机制，即HTML里的DOM元素与JS里的Vue实例进行双向绑定，只要Vue实例中的代理数据改变，HTML中的实际数据就会跟着变，这和原生的Js的命令驱动模式不同，它是数据驱动模式，通过数据的改变来控制DOM的变化。什么意思呢？我们会在接下去的学习中慢慢实践。
Todo List这个网页用到了很多Vue的指令，在这里我贴出一部分代码，全部代码请戳我的Github
以下是HTML部分
添加任务：
{{unCheckedLength}}个任务未完成
所有任务
未完成任务
完成任务
还没有添加任何任务
{{item.title}}
×
Vue实例部分
var vm = new Vue({
el: ".main",
data: {
list:list,
things:"",
editItem:"",
beforeTitle:"",
visibility:"all",
inputId:"",
},
watch:{
list:{
handler:function(){
store.save("todolist",this.list)
},
deep:true
}
},
computed:{
unCheckedLength(){
return this.list.filter(function(item){
return item.isChecked == false
}).length
},
filteredList(){
return filter[this.visibility] ? filter[this.visibility](this.list) : list
}
},
methods: {
addTodo(ev){
if(this.things !== ""){
var item = {
title:this.things,
isChecked:false,
}
this.list.push(item)
}
this.things = "";
},
deleteTodo(item){
var index = this.list.indexOf(item);
this.list.splice(index,1);
},
editTodo(item){
this.beforeTitle = item.title;
this.editItem = item
},
edited(item){
this.editItem = ""
},
cancel(item){
item.title = this.beforeTitle;
this.editItem = "";
this.beforeTitle = ""
}
},
directives:{
"focus":{
update(el,binding){
if(binding.value){
el.focus()
}
}
}
}
});这是一个基本的Vue实例，el是和DOM元素连接的挂载点，data是代理数据，在DOM的内容中如果要用到代理数据就用{{xxx}}表示，比如{{list}}，{{visibility}}，而当data中的代理数据出现在DOM标签里的时候就不需要用花括号。
new Vue({
el: ".main",
data: {
list:list,
things:"",
editItem:"",
beforeTitle:"",
visibility:"all",
inputId:"",
}
}）Vue要用大的方法都放在methods部分
methods: {
addTodo(ev){
if(this.things !== ""){
var item = {
title:this.things,
isChecked:false,
}
this.list.push(item)
}
this.things = "";
},
deleteTodo(item){
var index = this.list.indexOf(item);
this.list.splice(index,1);
},
editTodo(item){
this.beforeTitle = item.title;
this.editItem = item
},
edited(item){
this.editItem = ""
},
cancel(item){
item.title = this.beforeTitle;
this.editItem = "";
this.beforeTitle = ""
}
}还有计算属性
computed:{
unCheckedLength(){
return this.list.filter(function(item){
return item.isChecked == false
}).length
},
filteredList(){
return filter[this.visibility] ? filter[this.visibility](this.list) : list
}
}观察属性
watch:{
list:{
handler:function(){
store.save("todolist",this.list)
},
deep:true
}
}自定义属性
directives:{
"focus":{
update(el,binding){
if(binding.value){
el.focus()
}
}
}
}在HTML中要绑定这些数据，Vue也提供了一套指令：
v-bind绑定一个或多个特性，一般用于绑定class和style， v-on 绑定事件， v-show，v-if都是根据条件渲染元素，v-for是渲染列表…等等，我就不一一赘述了。可以去Vue中文官网看，讲的很详细。
以上是“Vue如何制作Todo List网页”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
网页名称：Vue如何制作TodoList网页
文章网址：http://kswsj.cn/article/ppeosp.html
