理理Vue細(xì)節(jié)（推薦）

更新時(shí)間：2019年04月16日 09:01:25 作者：陳煜侖

這篇文章主要介紹了Vue細(xì)節(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1. 動(dòng)態(tài)屬性名：可使用表達(dá)式來(lái)設(shè)置動(dòng)態(tài)屬性名或方法名：

<!-- 屬性name -->
<a :[name]="url"> ... </a>
<!-- 計(jì)算屬性sss和s -->
<img :[sss]="/img/test.png"/> 
<!-- 方法change1和change2 -->
<img :[change1()]="change2()"/>

data: {
  name: 'href',
  sss: 'src'
}

注意：要避免空格和引號(hào)等，且需要小寫(xiě)，可使用計(jì)算屬性來(lái)應(yīng)對(duì)復(fù)雜表達(dá)式，都需要使用[]

2. computed/methods/watch

computed可使用get/set

 computed: {
    top() {
      return 'top'
    },
    name: {
      get () {
        return this.name
      },
      set (val) {
        this.name = val
      }
    }
  }

computed可緩存，但不可傳參，會(huì)根據(jù)data中的屬性變化而變化，即是根據(jù)響應(yīng)式依賴(lài)來(lái)變化，而Date不是響應(yīng)式依賴(lài)，即不會(huì)變化；method則每次都會(huì)進(jìn)行計(jì)算，但可傳參。

watch用于處理異步或開(kāi)銷(xiāo)較大的操作，如輸入搜索時(shí)。

3. style綁定

直接對(duì)象或變量對(duì)象
計(jì)算屬性
直接style或style對(duì)象

<!-- 屬性名可加引號(hào)也可不加，屬性小駝峰 -->
<div :style="{ 'color': 'red', fontSize: fontSize + 'px' }">樣式3</div>

數(shù)組結(jié)合三目/數(shù)組結(jié)合對(duì)象

data: {
 isActive: true,
 activeClass: 'active'
}
<!-- 使用數(shù)組時(shí)變量和字符串需要通過(guò)引號(hào)來(lái)區(qū)分 -->
<div :class="[isActive ? activeClass : '', 'errorClass']"></div>
<!-- 使用對(duì)象時(shí)類(lèi)名不加引號(hào)可表示變量也可表示字符串 -->
<div :class="[{ active: isActive }, 'errorClass']"></div>

4. v-if條件渲染

可使用template包裹元素，template會(huì)被當(dāng)成不可見(jiàn)的包裹元素

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

多條件判斷

<div v-if="type === 'A'">
 A
</div>
<div v-else-if="type === 'B'">
 B
</div>
<div v-else-if="type === 'C'">
 C
</div>
<div v-else>
 Not A/B/C
</div>

5. key

添加key防止vue重復(fù)利用不想被重復(fù)利用的元素，如下的input如果不添加key，則vue會(huì)重復(fù)使用key，進(jìn)而input的value值在切換后還會(huì)被保留，因?yàn)関ue僅僅替換了placeholder

<template v-if="loginType === 'username'">
 <label>Username</label>
 <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
 <label>Email</label>
 <input placeholder="Enter your email address" key="email-input">
</template>

6. v-if和v-show

v-if是組件的銷(xiāo)毀和重建，如果初始條件為false，則什么都不做，直到變?yōu)檎?，所以切換開(kāi)銷(xiāo)高，運(yùn)行條件很少改變時(shí)適用
v-show是display:none和block之間的CSS切換，基于渲染，不管初始條件如何都會(huì)渲染，所以初始渲染開(kāi)銷(xiāo)高，切換頻率高時(shí)適用

7. v-for

可使用in或者of
也可遍歷對(duì)象：v-for="(value, key, index) in obj"
可根據(jù)template渲染多個(gè)組合元素：

<ul>
 <template v-for="item in items">
  <li>{{ item.msg }}</li>
  <li class="divider"></li>
 </template>
</ul>

8. v-for和v-if

v-for優(yōu)先級(jí)更高，所以v-if會(huì)重復(fù)運(yùn)行于每個(gè)v-for循環(huán)中，所以盡量不要一起使用，可先使用計(jì)算屬性對(duì)數(shù)據(jù)進(jìn)行過(guò)濾再遍歷。

9. 更改響應(yīng)式數(shù)據(jù)

Vue.set(object, key, value)
this.$set(object, key, value)
this.items.splice(index, 1, newValue)
批量添加屬性：

// 不要直接Object.assign(this.items, {age: 18}
this.items = Object.assign({}, this.items, {
 age: 18,
 favoriteColor: 'Vue Green'
})

10. 事件修飾符

.passive：滾動(dòng)的默認(rèn)事件會(huì)立即出發(fā)，即告訴瀏覽器不想阻止默認(rèn)事件的觸發(fā)，可提升移動(dòng)端性能

<div :scroll.passive="onScroll">...</div>

.capture：添加事件監(jiān)聽(tīng)器時(shí)使用事件捕獲模式，即元素自身觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理
.self：只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù)，即事件不是從內(nèi)部元素觸發(fā)的
.once：點(diǎn)擊事件只會(huì)觸發(fā)一次
鍵盤(pán)修飾符：<input v-on:keyup.enter="submit">

11. v-model

選擇框

<!-- 單選框時(shí)，picked為字符串 "a"，不是布爾值 -->
<input type="radio" value="a" v-model="picked">

<!-- 多選框時(shí)，toggle默認(rèn)值設(shè)為字符串或布爾值時(shí)得到布爾值，設(shè)為數(shù)組時(shí)得到的是value值-->
<input type="checkbox" value="b" v-model="toggle">

<!-- 當(dāng)選中第一個(gè)選項(xiàng)時(shí)，selected為字符串value的值 "abc" -->
<select v-model="selected">
 <option value="abc">ABC</option>
</select>

修飾符.lazy：在change時(shí)而非input時(shí)更新 <input v-model.lazy="msg" >

注：change事件是在input失去焦點(diǎn)時(shí)觸發(fā)，即用于單選、多選框和選擇框，而input事件是在value值變化時(shí)觸發(fā)，但腳本改變value值時(shí)不會(huì)觸發(fā)，即用于text和textarea

修飾符.number：輸入值轉(zhuǎn)為數(shù)值

修飾符.trim：過(guò)濾收尾空白字符

12. Prop

使用v-bind="obj"會(huì)將對(duì)象的每個(gè)屬性都作為一個(gè)獨(dú)立的prop傳入進(jìn)去，所以接受時(shí)也需要逐個(gè)屬性接收。

<test v-bind="obj"></test>

props雖然是單向數(shù)據(jù)流，但對(duì)于引用類(lèi)型，子組件還是可以改變父組件的狀態(tài)。

props會(huì)在組件實(shí)例創(chuàng)建之前進(jìn)行驗(yàn)證，所以實(shí)例的屬性再default或validator中是不可用的。

13. 自定義事件

自定義事件需要注意事件名為小寫(xiě)或-分隔，因?yàn)?emit('BaseEvent')雖然事件名不會(huì)變，但在html中該事件名會(huì)被轉(zhuǎn)化為小寫(xiě)，不會(huì)監(jiān)聽(tīng)到。

14. slot

具名插槽

<base-layout>
 <template v-slot:header>
  <h1>Here might be a page title</h1>
 </template>
<!-- 默認(rèn)插槽也可不用加上template和v-slot -->
 <template v-slot:default>
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
 </template>
 <template v-slot:footer>
  <p>Here's some contact info</p>
 </template>
</base-layout>

作用域插槽

<!-- current-user組件 -->
<span>
 <slot :user="user">
  {{ user.lastName }}
 </slot>
</span>

<!-- 父級(jí)組件通過(guò)自定義名稱(chēng)訪問(wèn)子級(jí)作用域 -->
<current-user>
 <template v-slot:default="slotProps">
  {{ slotProps.user.firstName }}
 </template>
</current-user>

<!-- 支持縮寫(xiě)和解構(gòu) -->
<current-user>
 <template #default="{ user = { firstName: Gust } }">
  {{ user.firstName }}
 </template>
</current-user>

15. 組件通信

vuex/eventBus
prop/$emit
$children/$parent
provide/inject
$refs

// 父或祖先級(jí)
provide: function () {
 return {
  getMap: this.getMap
 }
}

// 后代級(jí)
inject: ['getMap']

16. scope

scoped 屬性會(huì)自動(dòng)添加一個(gè)唯一的屬性 (比如 data-v-21e5b78) 為組件內(nèi) CSS 指定作用域，編譯的時(shí)候 .list-container:hover 會(huì)被編譯成類(lèi)似 .list-container[data-v-21e5b78]:hover

17. 路由

區(qū)分：this.$router指路由器，this.$route指當(dāng)前路由

通配符：捕獲所有路由或 404 Not found路由

 // 含通配符的路由都要放在最后，因?yàn)閮?yōu)先級(jí)由定義順序決定
{
 // 會(huì)匹配所有路徑
 path: '*'
}
{
 // 會(huì)匹配以 `/user-` 開(kāi)頭的任意路徑
 path: '/user-*'
}

當(dāng)使用一個(gè)通配符時(shí)，$route.params內(nèi)會(huì)自動(dòng)添加一個(gè)名為 pathMatch 參數(shù)。它包含了 URL 通過(guò)通配符被匹配的部分：

// 給出一個(gè)路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 給出一個(gè)路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

點(diǎn)擊 <router-link :to="..."> 等同于調(diào)用 router.push(...)方法，因?yàn)?lt;router-link>會(huì)在內(nèi)部調(diào)用該方法，進(jìn)而在history棧添加一個(gè)新的記錄

使用了push時(shí)，如果提供的path不完整，則params會(huì)被忽略，需要提供路由的 name 或手寫(xiě)完整的帶有參數(shù)的 path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` })     // -> /user/123
// 這里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

router.push/router.replace/router.go 效仿于 window.history.pushState/window.history.replaceState/window.history.go

命名視圖：router-view可設(shè)置名字，如果router-view沒(méi)有設(shè)置名字，那么默認(rèn)為 default

<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>

const router = new VueRouter({
 routes: [
  {
   path: '/',
   components: {
    default: Foo,
    a: Bar,
    b: Baz
   } 
  }
 ]
})

路由使用props：可將路由參數(shù)設(shè)置為組件屬性

const User = {
 props: ['id'],
 template: '<div>User {{ id }}</div>'
}
// 通過(guò)布爾值設(shè)置
const router = new VueRouter({
 routes: [
  { path: '/user/:id', component: User, props: true },

  // 對(duì)于包含命名視圖的路由，你必須分別為每個(gè)命名視圖添加 `props` 選項(xiàng)：
  {
   path: '/user/:id',
   components: { default: User, sidebar: Sidebar },
   props: { default: true, sidebar: false }
  }
 ]
})

// 通過(guò)函數(shù)設(shè)置query 
// URL /search?q=vue 會(huì)將 {name: 'vue'} 作為屬性傳遞給 SearchUser 組件
const router = new VueRouter({
 routes: [
  { path: '/search', component: SearchUser, props: (route) => ({ name: route.query.q }) }
 ]
})

beforeRouteEnter：可使用beforeRouteEnter來(lái)提前獲取接口數(shù)據(jù)，同時(shí)需要在next后才能訪問(wèn)到實(shí)例：

beforeRouteEnter(to, from, next) {
 axios('/text.json').then(res => {
  next(vm => {
   vm.datas = res
  })
 })
}

路由設(shè)置有參數(shù)時(shí)，如果跳轉(zhuǎn)頁(yè)面后再通過(guò)返回鍵返回時(shí)，路由會(huì)保留有參數(shù)，如果通過(guò)push跳轉(zhuǎn)返回，則不會(huì)保留該參數(shù)，這在第三方調(diào)用模塊傳參時(shí)需要注意。

18. loader

Vue Loader編譯單文件的template塊時(shí)，會(huì)將所有遇到的URL資源轉(zhuǎn)為webpack模塊請(qǐng)求：

// <img src="../image.png">將會(huì)被編譯成為：
createElement('img', {
 attrs: {
  src: require('../image.png') // 現(xiàn)在這是一個(gè)模塊的請(qǐng)求了
 }
})

資源URL轉(zhuǎn)換規(guī)則

如果是絕對(duì)路徑，例如 /images/foo.png)，則會(huì)原樣保留。
如果路徑以.開(kāi)頭，將會(huì)被看作相對(duì)的模塊依賴(lài)，并按照你的本地文件系統(tǒng)上的目錄結(jié)構(gòu)進(jìn)行解析。
如果路徑以~開(kāi)頭，其后的部分將會(huì)被看作模塊依賴(lài)。
如果路徑以 @ 開(kāi)頭，也會(huì)被看作模塊依賴(lài)。

以上所述是小編給大家介紹的Vue細(xì)節(jié)詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: