精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
Vue如何制作TodoList网页-创新互联
这篇文章主要为大家展示了“Vue如何制作Todo List网页”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue如何制作Todo List网页”这篇文章吧。
成都创新互联专注于企业
成都全网营销、网站重做改版、西青网站定制设计、自适应品牌网站建设、
H5技术、
商城系统网站开发、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为西青等各大城市提供网站开发制作服务。
具体内容如下
跟着老师学习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网页”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站建设公司行业资讯频道！
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
当前文章：Vue如何制作TodoList网页-创新互联
URL网址：http://cdkjz.cn/article/doedpg.html
