国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

手挽手帶你學VUE：一檔 VUE簡介以及常用內部指令

go4it / 1312人閱讀

摘要：這樣，我們用寫的就寫好了。真的假的大家可以看到，這些在插值表達式內的表達式直接返回了運行完成的結果，值得一提的是，差值表達式內的規則和標簽內的規則是類似的。

視頻教程

由于思否不能插入視頻，視頻請大家移步，http://www.henrongyi.top

什么是VUE

VUE是一套用于構建用戶界面的漸進式框架,VUE并不是一個真正意義上的mvvm框架,它更傾向是一種數據驅動框架.所以我們在學習VUE之前,無論你是傳統JS開發者,還是后端開發人員,都需要把思維進行一次轉化,在VUE里,數據就是一切,你所看見的所有東西,都是數據.

VUE基礎入門 
在我們日常的開發中,我們經常會使用VUE-CLI腳手架來搭建VUE項目,但是如果我們學習VUE,最好不要直接上手腳手架,這樣對于你在VUE的進階上會增加難度,我們現在采用傳統的引入js的方法來開始VUE的講解
開始HelloWord

國際慣例，在學習一個新的東西之前，一定要先開始一個HelloWord，這里我們先從官網引入vue的js文件。

這兩個JS文件對應了我們的不同環境，學習過程中我們將選擇上面的JS文件來進行學習。




    
    
    
    Document


    

       {{message}}

這樣，我們用VUE寫的Hello Word 就寫好了。

核心基礎 模板語法 數據綁定

上面代碼中我們用了 {{message}}這樣一個東西，這是什么呢？我們管這兩個大括號叫插值表達式，插值表達式內部可以是簡單的JS表達式，這里的{{message}}則被替換為了data內的message的數據。我們接下來舉例一下簡單的JS表達式。




    
    
    
    Document


    

       {{message}}
       {{1 + 1}}
       {{isTrue?"真的":"假的"}}
       {{message.split("").reverse().join("")}}

大家可以看到，這些在插值表達式內的JS表達式直接返回了運行完成的結果，值得一提的是，差值表達式內的規則和script標簽內的規則是類似的。

接下來就是VUE的精髓，雙向數據綁定。
v-model這個指令是vue中用來進行雙向數據綁定的重要指令。大家需要注意，只有在表單元素中才可以使用v-model。并且v-model把dom中的value和vue實例中的data綁定到了一起。兩者的變化會相互影響。




    
    
    
    Document


    

        
       {{message}}

上述代碼中，我們改變input中的value值，會發現，message數據也在同時發生著變化。

常用指令 v-if v-show v-for 
v-if v-else 根據表達式的值的真假條件渲染元素。
v-show 和v-if 差不多 但是 v-show會渲染dom只是隱藏掉了，而v-if則連dom都不會渲染，當滿足條件的時候，dom才會出現。

在我們日常開發中，很多時候想要隱藏掉某些東西，只有在特定條件下才渲染出來，這里我們舉個例子，模擬一下管理員權限。




    
    
    
    Document


    

        
        
原來你是尊貴的管理員大大??！

    

    
告訴我你是誰

    
 v-for顧名思義就是循環，循環渲染我們需要的東西



    
    
    
    Document


    

        
    
            
  • {{item.name}}
    •

這樣我們通過v-for 渲染出了一個列表。

數據綁定和事件綁定

v-bind數據綁定
v-bind我們稱之為數據綁定，我們想要在標簽內使用我們data中的數據怎么辦？通過v-bin就可以實現。我們下面來看例子。v-bind:xxxx可以簡寫為:xxxx




    
    
    
    Document
    


    

        

            我是v-bind影響的數據
        

        

            我是v-bind影響的數據

v-on事件綁定

我們可以通過v-on來綁定事件，同樣v-on可以簡寫為@，這里還需要提到在VUE示例中注冊事件的地方，methods
方法我們都寫在這個里面，廢話不說，上代碼。




    
    
    
    Document
    


    

        {{num}}
總結

現在這些是VUE中最簡單的指令部分,學會他們,你已經基本可以寫簡單的VUE頁面了,但是距離真正在工作中使用還有距離,這是VUE的第一步,看完視頻后多多熟悉API ,敲敲代碼.祝你早日步入高級前端的行列.

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100664.html

相關文章

  • 手挽手帶你學VUE：一檔 VUE簡介以及常用內部指令

    摘要：這樣，我們用寫的就寫好了。真的假的大家可以看到，這些在插值表達式內的表達式直接返回了運行完成的結果，值得一提的是，差值表達式內的規則和標簽內的規則是類似的。 視頻教程 由于思否不能插入視頻，視頻請大家移步，http://www.henrongyi.top 什么是VUE VUE是一套用于構建用戶界面的漸進式框架,VUE并不是一個真正意義上的mvvm框架,它更傾向是一種數據驅動框架.所以我...

    不知名網友 評論0 收藏0

  • 手挽手帶你學VUE：二檔 組件開發以及常用全局api

    摘要：我們想要在中做到子傳參給父，那我們的父組件就要像子組件伸出小偷之手。所在組件的更新時調用，但是可能發生在其子更新之前。指令所在組件的及其子全部更新后調用。 視頻教程 由于思否不支持視頻鏈接 視頻請移步 http://www.henrongyi.top 你能學到什么 二檔視頻當然要比一檔視頻難一點，如果前面的內容還沒有消化完畢的話，還是建議大家繼續消化前面的內容，然后再看接下來的部分。...

    fredshare 評論0 收藏0

  • 手挽手帶你學VUE：二檔 組件開發以及常用全局api

    摘要：我們想要在中做到子傳參給父，那我們的父組件就要像子組件伸出小偷之手。所在組件的更新時調用，但是可能發生在其子更新之前。指令所在組件的及其子全部更新后調用。 視頻教程 由于思否不支持視頻鏈接 視頻請移步 http://www.henrongyi.top 你能學到什么 二檔視頻當然要比一檔視頻難一點，如果前面的內容還沒有消化完畢的話，還是建議大家繼續消化前面的內容，然后再看接下來的部分。...

    Pink 評論0 收藏0

  • 手挽手帶你學React：一檔 React環境搭建，語法規則，基礎使用

    摘要：當屬性是一個回調函數時，函數接收底層元素或類實例取決于元素的類型作為參數。 手挽手帶你學React入門第一期,帶你熟悉React的語法規則,消除對JSX的恐懼感,由于現在開發中都是使用ES6語法開發React，所以這次也使用ES6的模式進行教學，如果大家對ES6不熟悉的話,先去看看class相關內容吧，這里我也慢慢帶大家一步一步學會React。 視頻教程 視頻教程可移步我的個人博客：h...

    BicycleWarrior 評論0 收藏0

  • 手挽手帶你學VUE：三檔 VUE構造期內常用屬性

    摘要：視頻教程由于思否不支持視頻外鏈視頻請移步你能學到什么手挽手帶你學入門三檔構造器內部的各種屬性的使用，，，，這四個屬性，在工作中會經常用到。在構造器的外部我們也可以通過實例來調用方法。 視頻教程 由于思否不支持視頻外鏈 視頻請移步 http://www.henrongyi.top 你能學到什么 手挽手帶你學VUE入門三檔,VUE構造器內部的各種屬性的使用，methods，compute...

    wslongchen 評論0 收藏0

發表評論

0條評論

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