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

資訊專欄INFORMATION COLUMN

手挽手帶你學(xué)VUE：一檔 VUE簡介以及常用內(nèi)部指令

go4it / 1327人閱讀

摘要：這樣，我們用寫的就寫好了。真的假的大家可以看到，這些在插值表達(dá)式內(nèi)的表達(dá)式直接返回了運(yùn)行完成的結(jié)果，值得一提的是，差值表達(dá)式內(nèi)的規(guī)則和標(biāo)簽內(nèi)的規(guī)則是類似的。

視頻教程

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

什么是VUE

VUE是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,VUE并不是一個真正意義上的mvvm框架,它更傾向是一種數(shù)據(jù)驅(qū)動框架.所以我們在學(xué)習(xí)VUE之前,無論你是傳統(tǒng)JS開發(fā)者,還是后端開發(fā)人員,都需要把思維進(jìn)行一次轉(zhuǎn)化,在VUE里,數(shù)據(jù)就是一切,你所看見的所有東西,都是數(shù)據(jù).

VUE基礎(chǔ)入門 
在我們?nèi)粘５拈_發(fā)中,我們經(jīng)常會使用VUE-CLI腳手架來搭建VUE項(xiàng)目,但是如果我們學(xué)習(xí)VUE,最好不要直接上手腳手架,這樣對于你在VUE的進(jìn)階上會增加難度,我們現(xiàn)在采用傳統(tǒng)的引入js的方法來開始VUE的講解
開始HelloWord

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

這兩個JS文件對應(yīng)了我們的不同環(huán)境，學(xué)習(xí)過程中我們將選擇上面的JS文件來進(jìn)行學(xué)習(xí)。




    
    
    
    Document


    

       {{message}}

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

核心基礎(chǔ) 模板語法 數(shù)據(jù)綁定

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




    
    
    
    Document


    

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

大家可以看到，這些在插值表達(dá)式內(nèi)的JS表達(dá)式直接返回了運(yùn)行完成的結(jié)果，值得一提的是，差值表達(dá)式內(nèi)的規(guī)則和script標(biāo)簽內(nèi)的規(guī)則是類似的。

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




    
    
    
    Document


    

        
       {{message}}

上述代碼中，我們改變input中的value值，會發(fā)現(xiàn)，message數(shù)據(jù)也在同時發(fā)生著變化。

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

在我們?nèi)粘ｉ_發(fā)中，很多時候想要隱藏掉某些東西，只有在特定條件下才渲染出來，這里我們舉個例子，模擬一下管理員權(quán)限。




    
    
    
    Document


    

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

    

    
告訴我你是誰

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



    
    
    
    Document


    

        
    
            
  • {{item.name}}
    •

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

數(shù)據(jù)綁定和事件綁定

v-bind數(shù)據(jù)綁定
v-bind我們稱之為數(shù)據(jù)綁定，我們想要在標(biāo)簽內(nèi)使用我們data中的數(shù)據(jù)怎么辦？通過v-bin就可以實(shí)現(xiàn)。我們下面來看例子。v-bind:xxxx可以簡寫為:xxxx




    
    
    
    Document
    


    

        

            我是v-bind影響的數(shù)據(jù)
        

        

            我是v-bind影響的數(shù)據(jù)

v-on事件綁定

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




    
    
    
    Document
    


    

        {{num}}
總結(jié)

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

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

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

相關(guān)文章

  • 手挽手帶你學(xué)VUE：一檔 VUE簡介以及常用內(nèi)部指令

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

    不知名網(wǎng)友 評論0 收藏0

  • 手挽手帶你學(xué)VUE：二檔 組件開發(fā)以及常用全局api

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

    fredshare 評論0 收藏0

  • 手挽手帶你學(xué)VUE：二檔 組件開發(fā)以及常用全局api

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

    Pink 評論0 收藏0

  • 手挽手帶你學(xué)React：一檔 React環(huán)境搭建，語法規(guī)則，基礎(chǔ)使用

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

    BicycleWarrior 評論0 收藏0

  • 手挽手帶你學(xué)VUE：三檔 VUE構(gòu)造期內(nèi)常用屬性

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

    wslongchen 評論0 收藏0

發(fā)表評論

0條評論

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