Vue如何制作TodoList网页-创新互联

这篇文章主要为大家展示了“Vue如何制作Todo List网页”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue如何制作Todo List网页”这篇文章吧。

成都创新互联专注于企业成都全网营销、网站重做改版、西青网站定制设计、自适应品牌网站建设、H5技术商城系统网站开发、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为西青等各大城市提供网站开发制作服务。

具体内容如下

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网页”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站建设公司行业资讯频道!

    另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


    新闻名称:Vue如何制作TodoList网页-创新互联
    分享网址:http://pwwzsj.com/article/doedpg.html

    其他资讯