VUE的基本語法(一)

因為Vue是一個構(gòu)造函數(shù) 所以使用的時候要通過new的方式進行使用
Vue這個構(gòu)造函數(shù)參數(shù)是一個配置項options,基本屬性如下
options:

el:掛載點
data:當(dāng)前Vue所需要的一些屬性 (當(dāng)前組件所需要的狀態(tài))

v-text:

    作用是用來渲染數(shù)據(jù)和執(zhí)行一些js語法

    底層原理為innerText,不會解析標(biāo)簽

    簡寫:{{}}

    v-text:在加載的時候不會出現(xiàn){{}}
    {{}}:在加載的時候會出現(xiàn){{}},可以用v-cloak解決

v-html:

    用來渲染數(shù)據(jù)和執(zhí)行一些js語法

     可以用來解析HTML標(biāo)簽

    簡寫:{{{}}}  僅限于Vue1.0   后期被廢除掉了 

v-show:

            值:布爾值  true顯示  false隱藏  
            通過display來控制元素的顯示和隱藏

v-if:

            值:布爾值  true顯示  false隱藏 
            通過刪除元素和創(chuàng)建元素控制元素的顯示和隱藏

v-if v-else-if v-else三者順序不能變,中間也不能有其他語句

    v-if/v-show二者之間的區(qū)別:
        1、v-if 有更高的切換開銷,而 v-show 有更高的初始渲染開銷。因此,如果需要非常頻繁地切換,則使用 v-show 較好;如果在運行時條件很少改變,則使用 v-if 較好

        2、使用場景
            頻繁切換的時候用v-show  例如選項卡
            登錄與非登錄頁面  VIP與非Vip
            權(quán)限頁面

v-for:

            數(shù)組  對象  字符串  數(shù)字

            語法:v-for="(值,下標(biāo)) in  需要遍歷的數(shù)據(jù)"

<p v-for="(item,index) in arr">{{item}} ------{{index}}</p>
<p v-for="(value,key) in obj">{{value}}----{{key}}</p>
<p v-for="(item,index) in str">{{item}}----{{index}}</p>
<p v-for="(item,index) in 10">{{item}}----{{index}}</p>

v-bind:

           語法:v-bind:屬性="值"

            簡寫:     :屬性="值"
            href
            src
            title
            style
            自定義屬性
            class

v-on:

            語法:  v-on:事件名稱="事件函數(shù)" 

        簡寫:@事件名稱="事件函數(shù)"


        methods中以對象形式存放Vue所需要的一些事件

        methods中如果需要訪問data中的屬性則通過this.屬性名稱即可

修飾符:

輔助一些事件  阻止事件冒泡  阻止瀏覽器的默認事件等等
            語法:  @事件名稱.修飾符 = "事件函數(shù)"
            一個事件后面可以跟多個修飾符  @事件名稱.修飾符.修飾符.修飾符.... = "事件函數(shù)"

            常見的修飾符:
                .stop:阻止事件冒泡
                .prevent:阻止瀏覽器默認行為
                .once:事件只處發(fā)一次
                .enter:回車

關(guān)于事件對象:

默認情況下如果事件函數(shù)不需要傳遞參數(shù)的時候可以不加() 然后可以將methods中的函數(shù)里通過e來獲取到事件對象

如果需要傳遞參數(shù)的時候我們需要給事件函數(shù)加上()
然后給這個函數(shù)傳遞一個$event參數(shù)
這樣就可以拿到事件對象了

v-model:


流程:當(dāng)輸入框的數(shù)據(jù)發(fā)送改變的時候就會修改data中相對應(yīng)的數(shù)據(jù)
當(dāng)data中的數(shù)據(jù)發(fā)生了改變一會視圖層也會跟隨著發(fā)生改變(數(shù)據(jù)驅(qū)動視圖)

使用的場景:只能在表單元素中進行使用     

computed:

 通過屬性計算而得來的屬性

 注意:
    1、computed內(nèi)部的函數(shù)名稱可以隨意編寫
    2、computed內(nèi)部的函數(shù)必須通過return的方式將結(jié)果進行返回,最好不要在內(nèi)部進行賦值操作
    3、雖然computed內(nèi)部是以函數(shù)的方式進行編寫,但是在調(diào)用的時候并不是一個函數(shù),所以不需要加()
    4、只要函數(shù)內(nèi)部所依賴的屬性發(fā)生了改變,那么這個函數(shù)就會自己調(diào)用
    5、如果函數(shù)內(nèi)部所依賴的屬性沒有發(fā)生改變的時候computed會從緩存中讀取結(jié)果


總結(jié):computed中的方法都是依賴于Vue中data里面的屬性,如果屬性發(fā)生了改變那么computed中所對應(yīng)的函數(shù)就會去執(zhí)行

使用的場景:當(dāng)多個屬性影響一個屬性的時候我們就需要用到computed(   購物車)

VUE的實例方法

vm.$on:事件綁定

        作用: 將事件綁定后放入事件隊列中
            參數(shù)1:事件名稱
            參數(shù)2:事件函數(shù)

vm.$emit:事件觸發(fā)

        作用:觸法事件隊列中的所有事件
            參數(shù)1:事件名稱
            參數(shù)2:需要傳遞的參數(shù)  選填

vm.$off:事件解綁

        作用:將事件隊列中的事件移除
            參數(shù)1:事件名稱
            參數(shù)2:需要解綁的事件函數(shù)  選填

vm.$once:事件綁定

        作用:該事件只觸發(fā)一次
            參數(shù)1:事件名稱
            參數(shù)2:事件函數(shù)

vm.$mount: 外部設(shè)置掛載點

vm.$forceUpdate強制更新

vm.$destroy卸載 斷開與Vue之間的聯(lián)系

vm.$nextTick獲取數(shù)據(jù)更新后最新的DOM結(jié)構(gòu)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容