成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Simple Vue But Powerful JS

wujl596 / 2710人閱讀

摘要：如果用戶確實有輸入，則將用戶輸入的部分作為的部分，通過新增一個，最后我們將再次設(shè)為空字符串，因為這樣用戶在提交或者按下回車之后，里的輸入框才會重新變?yōu)榭盏摹?/p>

在現(xiàn)在 Angular和React大行其道的JS世界，其實我更鐘愛的是Vue.js。

本文并不是意在比較三者的好壞，而是用Vue來寫一個Todo Web應(yīng)用，沒錯，重復(fù)來造一下經(jīng)典的輪子。

還是先來預(yù)覽圖

編寫HTML代碼

當然這個Todo的重點并不是重在HTML和CSS，所以過程中直接使用Bootstrap，于是我們在todo.html中直接寫上代碼：




    
    Tasks
    
    






    

        

            

                
            

            
        

        
        

            
Tasks ({{ tasks.length }})


            
    
                
  1. 
                    {{ task.body }}
                
    2.
編寫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元素的聲明方式，在一幫的應(yīng)用中，你可以直接用css選擇器的語法來選擇，比如你可以直接寫：

el: "body"

這就是綁定了標簽及其子元素。

data部分就是Vue的數(shù)據(jù)部分的聲明，這里的tasks是一個數(shù)組，newTask我們聲明為一個空字符串，因為newTask通過HTML中的v-model="newTask"進行了數(shù)據(jù)綁定，請注意，這是雙向的：也就是說，一旦input里輸入字符，newTask的值也會實時地變化。

methods部分自然就是我們的方法了，在HTML代碼中的form表單里我們?yōu)楸韱翁峤坏臅r候綁定了一個方法：

v-on="submit: addTask"

Vue默認通過v-on來為元素綁定事件，等號后面第一個為事件類型，第二個為觸發(fā)的方法名稱。你也可以綁定各種各樣的事件，click ，dbclick等。但現(xiàn)在我們先來寫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表單的默認行為（提交到服務(wù)器），然后通過if ( ! this.newTask) return;判斷用戶是否在input中輸入了內(nèi)容，如果沒有輸入，則直接返回，不會添加新的task。如果用戶確實有輸入，則將用戶輸入的部分作為task的body部分，通過

this.tasks.push({   });

新增一個task，最后我們將newTask再次設(shè)為空字符串，因為這樣用戶在提交或者按下回車之后，input里的輸入框才會重新變?yōu)榭盏摹?/p> v-repeat

一旦新增了一個task，我們可以通過v-repeat來將task輸出到瀏覽器上：

  • 
    {{ task.body }}

    •

    這里v-repeat后面的語法可以用for ... in ...來理解，比如這里的就是for task in tasks

    到這里，我們的簡單的Todo App就完成了，這幾行代碼就可以實現(xiàn)添加task了，效果如開頭的預(yù)覽圖。

    先寫到這里，明天再來實現(xiàn)task的編輯，刪除等功能。

    Happy Hacking

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85818.html

    相關(guān)文章

    • Simple Vue But Powerful JS Part 2

      摘要：繼上一篇搭建了這個的框架之后，我們輕松實現(xiàn)了為添加一個，這次需要實現(xiàn)的是對的編輯，刪除，完成等功能。接受到之后，然后刪除，。這是在前面一直都沒有提及到的，現(xiàn)在終于要派上用場了。所以，為了實現(xiàn)這一功能，我們進而引入的部分。 繼上一篇搭建了這個Todo App的框架之后，我們輕松實現(xiàn)了為App添加一個task，這次需要實現(xiàn)的是對task的編輯，刪除，完成等功能。如果你認真看完，你會發(fā)現(xiàn)：在...

      nanchen2251 評論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 評論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 評論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 評論0 收藏0

    • Android干貨框架集錦，搭建項目必不可少

      摘要：最佳解析最佳解析最佳解析是一個依賴注入框架，由谷歌開發(fā)，最早的版本由公司開發(fā)。在對的介紹中指出，即，這里的即數(shù)據(jù)結(jié)構(gòu)中的有向無環(huán)圖。也就是說，是一個基于有向無環(huán)圖結(jié)構(gòu)的依賴注入庫，因此的使用過程中不能出現(xiàn)循環(huán)依賴。 在開發(fā)過程中使用過很多優(yōu)秀框架，比如網(wǎng)絡(luò)的okhttp，圖片的Fresco，注入的Gagger2等，都是非常優(yōu)秀的框架。 所以今天在此介紹下至今本人知道的一些比較流行主流且...

      zhisheng 評論0 收藏0

    發(fā)表評論

    0條評論

    wujl596

    男|高級講師

    TA的文章

    閱讀更多
    最新活動
    閱讀需要支付1元查看
    <