Simple Vue But Powerful JS

wujl596 发布于2019-08-21 10:35 / 2462人阅读

摘要：如果用户确实有输入，则将用户输入的部分作为的部分，通过新增一个，最后我们将再次设为空字符串，因为这样用户在提交或者按下回车之后，里的输入框才会重新变为空的。

在现在 Angular和React大行其道的JS世界，其实我更钟爱的是Vue.js。

本文并不是意在比较三者的好坏，而是用Vue来写一个Todo Web应用，没错，重复来造一下经典的轮子。

还是先来预览图

编写HTML代码

当然这个Todo的重点并不是重在HTML和CSS，所以过程中直接使用Bootstrap，于是我们在todo.html中直接写上代码：




    
    Tasks
    
    





    
        
            
                
            
            
        
        
        
            Tasks ({{ tasks.length }})

            
                
                    {{ task.body }}

编写js代码

再来就是最开始的app.js代码：

new Vue({

    el: "#tasks",

    data: {

        tasks: [{
            "body":"Fix the bug",
            "completed":false
        }],
        newTask: ""

    },
    methods: {

     }


});

以上的todo.js中是最基本的Vue组成部分，分为el， data 和methods三大部分。el是Vue绑定DOM元素的声明方式，在一帮的应用中，你可以直接用css选择器的语法来选择，比如你可以直接写：

el: "body"

这就是绑定了标签及其子元素。

data部分就是Vue的数据部分的声明，这里的tasks是一个数组，newTask我们声明为一个空字符串，因为newTask通过HTML中的v-model="newTask"进行了数据绑定，请注意，这是双向的：也就是说，一旦input里输入字符，newTask的值也会实时地变化。

methods部分自然就是我们的方法了，在HTML代码中的form表单里我们为表单提交的时候绑定了一个方法：

v-on="submit: addTask"

Vue默认通过v-on来为元素绑定事件，等号后面第一个为事件类型，第二个为触发的方法名称。你也可以绑定各种各样的事件，click ，dbclick等。但现在我们先来写addTask方法：

    methods: {
        addTask: function(e) {
            e.preventDefault();

            if ( ! this.newTask) return;

            this.tasks.push({
                body: this.newTask,
                completed: false
            });

            this.newTask = "";
        }
     }

方法自然是放在methods部分，声明方式跟js一样。addTask方法首先阻止了form表单的默认行为（提交到服务器），然后通过if ( ! this.newTask) return;判断用户是否在input中输入了内容，如果没有输入，则直接返回，不会添加新的task。如果用户确实有输入，则将用户输入的部分作为task的body部分，通过

this.tasks.push({   });

新增一个task，最后我们将newTask再次设为空字符串，因为这样用户在提交或者按下回车之后，input里的输入框才会重新变为空的。

v-repeat

一旦新增了一个task，我们可以通过v-repeat来将task输出到浏览器上：


    {{ task.body }}

这里v-repeat后面的语法可以用for ... in ...来理解，比如这里的就是for task in tasks

到这里，我们的简单的Todo App就完成了，这几行代码就可以实现添加task了，效果如开头的预览图。

先写到这里，明天再来实现task的编辑，删除等功能。

Happy Hacking

云服务器服务器托管 Powerful But Vue.js vue.js 属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85818.html

Simple Vue But Powerful JS Part 2

摘要：继上一篇搭建了这个的框架之后，我们轻松实现了为添加一个，这次需要实现的是对的编辑，删除，完成等功能。接受到之后，然后删除，。这是在前面一直都没有提及到的，现在终于要派上用场了。所以，为了实现这一功能，我们进而引入的部分。继上一篇搭建了这个Todo App的框架之后，我们轻松实现了为App添加一个task，这次需要实现的是对task的编辑，删除，完成等功能。如果你认真看完，你会发现：在...

nanchen2251 2019-08-21 10:35 评论0 收藏0
Awesome JavaScript

摘要： Awesome JavaScript A collection of awesome browser-side JavaScript libraries, resources and shiny things. Awesome JavaScript Package Managers Loaders Testing Frameworks QA Tools MVC Framew...

endless_road 2019-08-22 10:56 评论0 收藏0
Awesome Python

摘要：漢字拼音 Awesome Python A curated list of awesome Python frameworks, libraries and software. Inspired by awesome-php. Awesome Python Environment Management Package Management Package Repositorie...

fizz 2019-07-31 11:36 评论0 收藏0
Awesome Python II

摘要： Caching Libraries for caching data. Beaker - A library for caching and sessions for use with web applications and stand-alone Python scripts and applications. dogpile.cache - dogpile.cache...

lx1036 2019-07-31 11:36 评论0 收藏0
Android干货框架集锦，搭建项目必不可少

摘要：最佳解析最佳解析最佳解析是一个依赖注入框架，由谷歌开发，最早的版本由公司开发。在对的介绍中指出，即，这里的即数据结构中的有向无环图。也就是说，是一个基于有向无环图结构的依赖注入库，因此的使用过程中不能出现循环依赖。在开发过程中使用过很多优秀框架，比如网络的okhttp，图片的Fresco，注入的Gagger2等，都是非常优秀的框架。所以今天在此介绍下至今本人知道的一些比较流行主流且...

zhisheng 2019-08-06 13:17 评论0 收藏0