Simple Vue But Powerful JS

wujl596 發布于2019-08-21 10:35 / 2702人閱讀

摘要：如果用戶確實有輸入，則將用戶輸入的部分作為的部分，通過新增一個，最后我們將再次設為空字符串，因為這樣用戶在提交或者按下回車之后，里的輸入框才會重新變為空的。

在現在 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

GPU云服務器云服務器 Powerful But Vue.js vue.js 屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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