成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

go4it / 1386人閱讀

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

視頻教程

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

什么是VUE

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

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

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

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




    
    
    
    Document


    

       {{message}}

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

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

上面代碼中我們用了 {{message}}這樣一個(gè)東西，這是什么呢？我們管這兩個(gè)大括號(hào)叫插值表達(dá)式，插值表達(dá)式內(nèi)部可以是簡(jiǎn)單的JS表達(dá)式，這里的{{message}}則被替換為了data內(nèi)的message的數(shù)據(jù)。我們接下來(lái)舉例一下簡(jiǎn)單的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ī)則是類似的。

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




    
    
    
    Document


    

        
       {{message}}

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

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

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




    
    
    
    Document


    

        
        
原來(lái)你是尊貴的管理員大大啊！

    

    
告訴我你是誰(shuí)

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



    
    
    
    Document


    

        
    
            
  • {{item.name}}
    •

這樣我們通過(guò)v-for 渲染出了一個(gè)列表。

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

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




    
    
    
    Document
    


    

        

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

        

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

v-on事件綁定

我們可以通過(guò)v-on來(lái)綁定事件，同樣v-on可以簡(jiǎn)寫為@，這里還需要提到在VUE示例中注冊(cè)事件的地方，methods
方法我們都寫在這個(gè)里面，廢話不說(shuō)，上代碼。




    
    
    
    Document
    


    

        {{num}}
總結(jié)

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/100664.html

相關(guān)文章

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

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

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

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

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

    fredshare 評(píng)論0 收藏0

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

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

    Pink 評(píng)論0 收藏0

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

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

    BicycleWarrior 評(píng)論0 收藏0

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

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

    wslongchen 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<