大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

Vue如何制作TodoList网页

这篇文章主要为大家展示了“Vue如何制作Todo List网页”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“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://dzwzjz.com/article/ppeosp.html

    其他资讯

    在线咨询
    服务热线
    服务热线:028-86922220
    TOP