信阳商都茶苑,锤石一刀秒大龙,水溶性焊锡丝
vue学习完成todo list网页，供大家参考，具体内容如下
跟着老师学习vue，我喜欢清爽的界面，就自己改了样式，看起来还不错，以后就用来记录要做的事情，实用性还蛮强。
vue非常容易上手，运用到了双向绑定机制，即html里的dom元素与js里的vue实例进行双向绑定，只要vue实例中的代理数据改变，html中的实际数据就会跟着变，这和原生的js的命令驱动模式不同，它是数据驱动模式，通过数据的改变来控制dom的变化。什么意思呢？我们会在接下去的学习中慢慢实践。
todo list这个网页用到了很多vue的指令，在这里我贴出一部分代码，全部代码请戳我的github
以下是html部分
我要评论
<div class="main">
<h3 class="big-title">添加任务：</h3>
<input
placeholder="在此添加任务"
class="task-input"
type="text"
v-model="things"
@keyup.enter="addtodo"
/>
<ul class="task-count" v-show="list.length">
<li>
{{uncheckedlength}}个任务未完成</li>
<li class="action">
<a :class="{active: visibility == 'all'}" href="#all" rel="external nofollow" >所有任务</a>
<a :class="{active: visibility == 'unfinished'}"href="#unfinished" rel="external nofollow" >未完成任务</a>
<a :class="{active: visibility == 'finished'}"href="#finished" rel="external nofollow" >完成任务</a>
</li>
</ul>
<div class="tasks">
<span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
<ul class="todo-list">
<li class="todo" v-for="item in filteredlist" :class="{completed: item.ischecked,editing:item === edititem}" >
<div class="view">
<div class="word">
<input class="toggle" type="checkbox" v-model="item.ischecked" >
<label @dblclick="edittodo(item)">{{item.title}}</label>
</div>
<button class="destroy" type="text" @click="deletetodo(item)">×</button>
</div>
<input
v-focus="edititem === item"
class="edit"
type="text"
v-model="item.title"
@blur="edited"
@keyup.enter="edited"
@keyup.esc="cancel(item)"
/>
</li>
</ul>
</div>
</div>
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中文官网看，讲的很详细。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论