Vue 的內置指令

一、基本指令

1. v--cloak

一般與 display: none; 結合使用。
作用:解決初始化較慢時導致的頁面閃動。
原理v-cloak 使其在 Vue 實例渲染之后再進行渲染,改變了渲染順序。

2. v--once

作用:定義它的元素或組件只渲染一次,后續(xù)都不會再重新渲染。

二、條件渲染指令

1. v--if,v--else--if,v--else
  • 用法:
    v-ifv-else-if 后接的是等號,等號后必須是布爾值。
<p v-if="6<3">{{apple}}</p>
<p v-else-if="6<9">{{banana}}</p>
<p v-else>{{pear}}</p>
  • 弊端 :
    Vue 在渲染元素時,出于效率考慮,會盡可能地復用已有的元素而非重新渲染,因此會出現(xiàn)烏龍。(只會渲染變化的元素,即同一類元素會被復用,如 input
  • 解決方法:
    對不想使其復用的元素或標簽加(唯一的) key 值。
2. v--show

顯現(xiàn)與否取決于布爾值,只改變了 css 屬性 display

  • 用法:
<p v-show="9>3">我被渲染了</p>
3. v--if 和 v--show 的比較

是否刪除dom節(jié)點。

  • v--if:
    實時渲染:頁面顯示就渲染,不顯示則移除。
  • v--show:
    v--show 的元素永遠存在于頁面中,只是改變了 CSS 的 display 屬性。

三、列表渲染指令 v--for

當需要將一個數(shù)組遍歷或枚舉一個對象屬性循環(huán)顯示時,就會用到列表。

  1. 兩種使用場景:
    遍歷多個對象。
    遍歷一個對象的多個屬性。

  2. 用法:v-for 一定要寫在要遍歷的元素上,v-for 后接等號,類似于 item in items。遍歷多個對象遍歷的一定是數(shù)組。

(1)遍歷多個對象,vueMth 是自己定義的變量:

<ul>
    <li v-for="vueMth in vueMethods">{{vueMth.name}}</li>
</ul>

data: {
    vueMethods: [
        {name: '多思考'},  // 每個對象對應一個li
        {name: '多練習'},
        {name: '多使用'}
    ]
}

帶索引的寫法:括號里第一個變量代表 item,第二個變量代表 index:

<ul>
    <li v-for="(vueMth,index) in vueMethods">{{index}}---{{vueMth.name}}</li>
</ul>

(2)遍歷一個對象的多個屬性:

<span v-for="value in nvshen">{{value}}</span>

data: {
    nvshen: {
        girl2: '湯唯 ',
        girl1: '高圓圓 ',
        girl3: '朱茵 '
    }
}

拿到 value,key,index 的寫法,v-k-i 諧音外開:

<div v-for="(value,key,index) in nvshen">第{{index}}個,鍵是{{key}},{{value}}</div>

四、數(shù)組更新,過濾與排序

  1. 改變數(shù)組的一系列方法:
  • push():在末尾添加元素
  • pop():將數(shù)組的最后一個元素移除
  • shift():刪除數(shù)組的第一個元素
  • unshift():在數(shù)組的第一個元素位置添加一個元素(返回新數(shù)組的長度)
  • splice():可以刪除或者添加元素(返回刪除的元素,添加元素時返回空數(shù)組)
    (1)三個參數(shù):
    第一個參數(shù)表示開始操作的位置
    第二個參數(shù)表示要操作的長度
    第三個為可選參數(shù),添加時使用
    (2)用法
app.arr.splice(1,1) // 從第一個元素位置開始,刪除一個元素(即刪除第二個元素)
app.arr.splice(1,0,"eraser") // 從第一個元素位置開始,添加一個元素
app.arr.splice(1,0,"eraser","rule") // 從第一個元素位置開始,添加兩個元素
  • sort():排序
  • reverse():翻轉數(shù)組
  1. 兩種數(shù)組變動 Vue 檢測不到:
  • 改變數(shù)組的指定項:app.arr[0] = 'car'
  • 改變數(shù)組長度:app.arr.length = 1
  1. 解決方法:
  • set
    改變數(shù)組指定項: Vue.set(app.arr,index,"car")
  • splice
    改變數(shù)組長度:app.arr.splice(0)(從第0個位置開始,刪除所有項)

五、方法和事件

1. 基本用法

v--on 綁定的事件類似于原生的 onclick 等寫法。

methods:{
    handle:function (count) {
        count = count || 1;
        this.count += count;
    }
}

使用帶有參數(shù)的方法時,一定要在方法后面加括號 ()
如果方法中帶有參數(shù),但使用方法時沒有加括號,則默認傳原生事件對象 event。

2. 修飾符

在 Vue 中傳入 event 對象用 $event

  1. 監(jiān)聽單機事件
  • stop:阻止單擊事件向上冒泡(用于子元素)
  • prevent:提交事件并且不重載頁面
  • self:只是作用在元素本身而非子元素的時候調用(用于父元素)
  • once:只執(zhí)行一次的方法
  1. 監(jiān)聽鍵盤事件
  • 指定的 keyCode:<input @keyup.13 ="submitMe">
  • Vue.js 還為我們提供了 .enter.tab.delete 等快捷用法
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 主要還是自己看的,所有內容來自官方文檔。 介紹 Vue.js 是什么 Vue (讀音 /vju?/,類似于 vie...
    Leonzai閱讀 3,381評論 0 25
  • Vue 實例 屬性和方法 每個 Vue 實例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,244評論 0 6
  • 一、了解Vue.js 1.1.1 Vue.js是什么? 簡單小巧、漸進式、功能強大的技術棧 1.1.2 為什么學習...
    蔡華鵬閱讀 3,382評論 0 3
  • Vue官方文檔以下內容作為本人日常學習使用,不作為參考 一、Vue環(huán)境搭建以及vue-cli的使用 Vue多頁面應...
    好一只帥鹵蛋閱讀 770評論 0 1
  • vue概述 在官方文檔中,有一句話對Vue的定位說的很明確:Vue.js 的核心是一個允許采用簡潔的模板語法來聲明...
    li4065閱讀 7,275評論 0 25