溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1. 動態屬性名：可使用表達式來設置動態屬性名或方法名：
<!-- 屬性name -->
<a :[name]="url"> ... </a>
<!-- 計算屬性sss和s -->
<img :[sss]="/img/test.png"/>
<!-- 方法change1和change2 -->
<img :[change1()]="change2()"/>
data: {
name: 'href',
sss: 'src'
}
注意：要避免空格和引號等，且需要小寫，可使用計算屬性來應對復雜表達式，都需要使用[]
2. computed/methods/watch
computed可使用get/set
computed: {
top() {
return 'top'
},
name: {
get () {
return this.name
},
set (val) {
this.name = val
}
}
}
computed可緩存，但不可傳參，會根據data中的屬性變化而變化，即是根據響應式依賴來變化，而Date不是響應式依賴，即不會變化；method則每次都會進行計算，但可傳參。
watch用于處理異步或開銷較大的操作，如輸入搜索時。
3. style綁定
<!-- 屬性名可加引號也可不加，屬性小駝峰 --> <div :>樣式3</div>
data: {
isActive: true,
activeClass: 'active'
}
<!-- 使用數組時變量和字符串需要通過引號來區分 -->
<div :class="[isActive ? activeClass : '', 'errorClass']"></div>
<!-- 使用對象時類名不加引號可表示變量也可表示字符串 -->
<div :class="[{ active: isActive }, 'errorClass']"></div>
4. v-if條件渲染
可使用template包裹元素，template會被當成不可見的包裹元素
<template v-if="ok"> <h2>Title</h2> <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重復利用不想被重復利用的元素，如下的input如果不添加key，則vue會重復使用key，進而input的value值在切換后還會被保留，因為vue僅僅替換了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是組件的銷毀和重建，如果初始條件為false，則什么都不做，直到變為真，所以切換開銷高，運行條件很少改變時適用
v-show是display:none和block之間的CSS切換，基于渲染，不管初始條件如何都會渲染，所以初始渲染開銷高，切換頻率高時適用
7. v-for
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
8. v-for和v-if
v-for優先級更高，所以v-if會重復運行于每個v-for循環中，所以盡量不要一起使用，可先使用計算屬性對數據進行過濾再遍歷。
9. 更改響應式數據
// 不要直接Object.assign(this.items, {age: 18}
this.items = Object.assign({}, this.items, {
age: 18,
favoriteColor: 'Vue Green'
})
10. 事件修飾符
<div :scroll.passive="onScroll">...</div>
11. v-model
選擇框
<!-- 單選框時，picked為字符串 "a"，不是布爾值 --> <input type="radio" value="a" v-model="picked"> <!-- 多選框時，toggle默認值設為字符串或布爾值時得到布爾值，設為數組時得到的是value值--> <input type="checkbox" value="b" v-model="toggle"> <!-- 當選中第一個選項時，selected為字符串value的值 "abc" --> <select v-model="selected"> <option value="abc">ABC</option> </select>
修飾符.lazy：在change時而非input時更新 <input v-model.lazy="msg" >
注：change事件是在input失去焦點時觸發，即用于單選、多選框和選擇框，而input事件是在value值變化時觸發，但腳本改變value值時不會觸發，即用于text和textarea
修飾符.number：輸入值轉為數值
修飾符.trim：過濾收尾空白字符
12. Prop
使用v-bind="obj"會將對象的每個屬性都作為一個獨立的prop傳入進去，所以接受時也需要逐個屬性接收。
<test v-bind="obj"></test>
props雖然是單向數據流，但對于引用類型，子組件還是可以改變父組件的狀態。
props會在組件實例創建之前進行驗證，所以實例的屬性再default或validator中是不可用的。
13. 自定義事件
自定義事件需要注意事件名為小寫或-分隔，因為$emit('BaseEvent')雖然事件名不會變，但在html中該事件名會被轉化為小寫，不會監聽到。
14. slot
具名插槽
<base-layout> <template v-slot:header> <h2>Here might be a page title</h2> </template> <!-- 默認插槽也可不用加上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>
<!-- 父級組件通過自定義名稱訪問子級作用域 -->
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
<!-- 支持縮寫和解構 -->
<current-user>
<template #default="{ user = { firstName: Gust } }">
{{ user.firstName }}
</template>
</current-user>
15. 組件通信
// 父或祖先級
provide: function () {
return {
getMap: this.getMap
}
}
// 后代級
inject: ['getMap']
16. scope
scoped 屬性會自動添加一個唯一的屬性 (比如 data-v-21e5b78) 為組件內 CSS 指定作用域，編譯的時候 .list-container:hover 會被編譯成類似 .list-container[data-v-21e5b78]:hover
17. 路由
區分：this.$router指路由器，this.$route指當前路由
通配符：捕獲所有路由或 404 Not found路由
// 含通配符的路由都要放在最后，因為優先級由定義順序決定
{
// 會匹配所有路徑
path: '*'
}
{
// 會匹配以 `/user-` 開頭的任意路徑
path: '/user-*'
}
當使用一個通配符時，$route.params內會自動添加一個名為 pathMatch 參數。它包含了 URL 通過通配符被匹配的部分：
// 給出一個路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 給出一個路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'
點擊 <router-link :to="..."> 等同于調用 router.push(...)方法，因為<router-link>會在內部調用該方法，進而在history棧添加一個新的記錄
使用了push時，如果提供的path不完整，則params會被忽略，需要提供路由的 name 或手寫完整的帶有參數的 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可設置名字，如果router-view沒有設置名字，那么默認為 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：可將路由參數設置為組件屬性
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
// 通過布爾值設置
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
// 對于包含命名視圖的路由，你必須分別為每個命名視圖添加 `props` 選項：
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
// 通過函數設置query
// URL /search?q=vue 會將 {name: 'vue'} 作為屬性傳遞給 SearchUser 組件
const router = new VueRouter({
routes: [
{ path: '/search', component: SearchUser, props: (route) => ({ name: route.query.q }) }
]
})
beforeRouteEnter：可使用beforeRouteEnter來提前獲取接口數據，同時需要在next后才能訪問到實例：
beforeRouteEnter(to, from, next) {
axios('/text.json').then(res => {
next(vm => {
vm.datas = res
})
})
}
路由設置有參數時，如果跳轉頁面后再通過返回鍵返回時，路由會保留有參數，如果通過push跳轉返回，則不會保留該參數，這在第三方調用模塊傳參時需要注意。
18. loader
Vue Loader編譯單文件的template塊時，會將所有遇到的URL資源轉為webpack模塊請求：
// <img src="../image.png">將會被編譯成為：
createElement('img', {
attrs: {
src: require('../image.png') // 現在這是一個模塊的請求了
}
})
資源URL轉換規則
以上所述是小編給大家介紹的Vue細節詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
