Vue制作Todo List网页

Vue制作Todo List网页

vue学习完成Todo List网页，供大家参考，具体内容如下

跟着老师学习Vue，我喜欢清爽的界面，就自己改了样式，看起来还不错，以后就用来记录要做的事情，实用性还蛮强。

Vue非常容易上手，运用到了双向绑定机制，即HTML里的DOM元素与js里的Vue实例进行双向绑定，只要Vue实例中的代理数据改变，HTML中的实际数据就会跟着变，这和原生的Js的命令驱动模式不同，它是数据驱动模式，通过数据的改变来控制DOM的变化。什么意思呢？我们会在接下去的学习中慢慢实践。

Todo List这个网页用到了很多Vue的指令，在这里我贴出一部分代码，全部代码请戳我的github

以下是Hhttp://TML部分

placeholder="在此添加任务"

class="task-input"

type="text"

v-model="things"

@keyup.enter="addTodo"

/>

{{unCheckedLength}}个任务未完成

所有任务

未完成任务

完成任务

还没有添加任何任务

{{item.title}}

v-focus="editItem === item"

class="edit"

type="text"

v-model="item.title"

@blur="edited"

@keyup.enter="edited"

@keyup.esc="cancel(item)"

/>

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.iPtojgxqCsindexOf(item);

this.list.splice(index,1);

},

editTodo(item){

this.beforeTitle = http://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中文官网看，讲的很详细。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。