vue 點選的點有樣式 其他沒有樣式_【前端詞典】Vue 使用時常見的 5 個問題
技術標籤：vue 點選的點有樣式 其他沒有樣式
前言
今天分享 5 個你或許在使用 Vue 開發過程中也遇到的問題。
Vue 使用時常見的 5 個問題
自定義路徑別名
可能有些人注意到了，在 vue-cli 生成的模板中在匯入元件時使用了這樣的語法：
import Index from '@/components/Index'
這個 @ 是什麼東西？後來改配置檔案的時候發現這個是 webpack 的配置選項之一：路徑別名。
我們也可以在基礎配置檔案中新增自己的路徑別名，比如下面這個就把 ~ 設定為路徑 src/components 的別名：
// build/webpack.base.js
{
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'~': resolve('src/components')
}
}
}
然後我們匯入元件的時候就可以這樣寫：
// import YourComponent from '/src/components/YourComponent'
import YourComponent from '~/YourComponent'
既解決了路徑過長的麻煩，又解決了相對路徑的煩惱，方便很多吧!
CSS 作用域與模組
元件內樣式
通常，元件中 標籤裡的樣式是全域性的，在使用第三方 UI 庫(如：Element)時，全域性樣式很可能影響 UI 庫的樣式。
我們可以通過新增 scoped 屬性來使 style 中的樣式只作用於當前元件：
lang="less" scoped>
@import 'other.less';
.title {
font-size: 1.2rem;
}
在有 scoped 屬性的 style 標籤內匯入其他樣式，同樣會受限於作用域，變為元件內樣式。複用程度較高的樣式不建議這樣使用。
匯入樣式
相對於 style
scoped 屬性時的元件內樣式，有時候我們也需要新增一些全域性樣式。當然我們可以用沒有 scoped 屬性的 style 來寫全域性樣式。
但是相比較，更推薦下面這種寫法：
/* 單獨的全域性樣式檔案 */
/* style-global.less */
body {
font-size: 10px;
}
.title {
font-size: 1.4rem;
font-weight: bolder;
}
然後在入口檔案中匯入全域性樣式：
// src/main.js
import 'style-global.less'
v-for 的使用 tips
v-for 指令很強大，它不僅可以用來遍歷陣列、物件，甚至可以遍歷一個數字或字串。
基本語法就不講了，這裡講個小 tips：
索引值
在使用 v-for 根據物件或陣列生成 DOM 時，有時候需要知道當前的索引。我們可以這樣：
v-for='(item, key) in items' :key='key'> {{ key }} - {{ item }}
但是，在遍歷數字的時候需要注意，數字的 value 是從 1 開始，而 key 是從 0 開始：
v-for='(v, k) in 3' :key='k'> {{ k }}-{{ v }}
2.2.0+ 的版本里，當在元件中使用 v-for 時，key 現在是必須的。
vue 中 this 指向問題
method 不能使用箭頭函式
因為箭頭函式綁定了父級作用域的上下文，所以 this 將不會按照期望指向 Vue 例項。
const App = new Vue({
el: 'body',
methods: {
foo: () => {
console.log(this) // undefined
}
}
})
const App = new Vue({
el: 'body',
methods: {
foo () {
console.log(this) // Vue instance
}
}
})
method 中方法使用定時器需要使用箭頭函式
箭頭函式中的this指向是固定不變的，即是在定義函式時的指向 而普通函式中的this指向時變化的，即是在使用函式時的指向
箭頭函式程式碼：
methods: {
goPage: function (index) {
this.newPage = index
},
inv: function () {
this.invt = setInterval(() => {
this.goPage(this.nextPage)
console.log(this)
//此時的this指向是該vue元件，不管在哪使用，指向都是該vue元件
}, 1000)
}
}
普通函式的程式碼：
methods: {
goPage: function (index) {
this.newPage = index
},
inv: function () {
this.invt = setInterval(function () {
this.goPage(this.nextPage)
console.log(this)
//此時的this並不是該vue元件，而是指向window。
}, 1000)
}
}
setInterval() 與 setTimeout() 是 window 物件的函式，所以 this 會指向 window
一個 template 模板只能有一個可渲染的子元素
一個 下面只能有一個可渲染的子元素否則會報錯， 報錯如下：
即：
Title Balabala...
Balabala...
// 應該為
Title Balabala...
Balabala...
最後
這篇文章是我從筆記中抽離出來的，有些內容已經忘了出處。
如果你想進【大前端交流群】，關注公眾號點選“交流加群”新增機器人自動拉你入群。關注我第一時間接收最新干貨。
