1.css 局部樣式
- vue 中style樣式添加scoped屬性表示它的樣式只作用于當(dāng)前組件，樣式私有化占卧。
- 但是當(dāng)前組件的根組件會(huì)受到父組件樣式的影響遗菠。（比如父組件有個(gè).box{background:red}, 如果子組件即當(dāng)前組件的根組件類名也為box，那背景也會(huì)為red）
- 其中渲染的原理：
給HTML的DOM節(jié)點(diǎn)添加一個(gè)不重復(fù)的data屬性 來(lái)表示唯一性
在對(duì)應(yīng)的css選擇器末尾添加一個(gè)當(dāng)前組件的data屬性選擇器來(lái)私有化
- 如果使用了scoped屬性后华蜒，想讓組件內(nèi)部樣式被外部控制舷蒲，只需要css添加
deep屬性即可
<style lang="less" scoped>
.text-box {
/deep/ input {
width: 166px;
text-align: center;
}
}
</style>
2. Vue.filter 全局過(guò)濾器
過(guò)濾器的目的主要是為了對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換
computed計(jì)算屬性也可以轉(zhuǎn)換，但是computed不能接受參數(shù)友多，只能針對(duì)某一個(gè)Vue內(nèi)部屬性進(jìn)行轉(zhuǎn)換牲平，但是filter可以接受參數(shù)。
注冊(cè)
全局過(guò)濾器
Vue.filter('globalFilter', value=>{....})
組件過(guò)濾器
filters:{
testFilters: value=>{...}
}
使用
在雙花括號(hào)插值
{{message | testFilter}}
在v-bind表達(dá)式中使用
<div v-bind:=id="rawId | testFilter"></div>
3. Vue.nextTick
- 用法： 在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)域滥。在修改數(shù)據(jù)之后立即使用這個(gè)方法纵柿，獲取更新后的 DOM
- 那么這句話是什么意思呢蜈抓，其實(shí)簡(jiǎn)單來(lái)說(shuō)就是，當(dāng)我們修改數(shù)據(jù)后昂儒，視圖層的數(shù)據(jù)更新是異步的沟使，既：當(dāng)修改過(guò)數(shù)據(jù)后立即輸出綁定改數(shù)據(jù)的dom元素，該dom元素中的數(shù)據(jù)還是未更新過(guò)的渊跋。
<template>
<div id="app">
<span ref="name">{{ name }}</span>
<button type="button" @click="change">改變</button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
list: [1,2,3],
name: 'tom'
}
},
methods: {
change() {
this.name = 'lucy';
console.log(this.$refs.name.innerHTML, 'dom未更新'); // 輸出tom
this.$nextTick(function (){
console.log(this.$refs.name.innerHTML, 'dom已更新'); // 輸出tom
});
}
}
}
</script>
4. mixins
混入 (mixin) 提供了一種非常靈活的方式腊嗡，來(lái)分發(fā) Vue 組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)拾酝。當(dāng)組件使用混入對(duì)象時(shí)燕少，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。
有以下幾個(gè)特點(diǎn)
當(dāng)組件和混入對(duì)象含有同名選項(xiàng)時(shí)蒿囤，這些選項(xiàng)將以恰當(dāng)?shù)姆绞竭M(jìn)行“合并”客们。
比如，數(shù)據(jù)對(duì)象在內(nèi)部會(huì)進(jìn)行遞歸合并材诽，并在發(fā)生沖突時(shí)以組件數(shù)據(jù)優(yōu)先
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})
同名鉤子函數(shù)將合并為一個(gè)數(shù)組底挫，因此都將被調(diào)用。另外脸侥，混入對(duì)象的鉤子將在組件自身鉤子之前調(diào)用建邓。
var mixin = {
created: function () {
console.log('混入對(duì)象的鉤子被調(diào)用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('組件鉤子被調(diào)用')
}
})
// => "混入對(duì)象的鉤子被調(diào)用"
// => "組件鉤子被調(diào)用"
值為對(duì)象的選項(xiàng)，例如 methods睁枕、components 和 directives官边，將被合并為同一個(gè)對(duì)象。兩個(gè)對(duì)象鍵名沖突時(shí)譬重，取組件對(duì)象的鍵值對(duì)。
ar mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"
- 當(dāng)然也可以 全局混入
- 混入也可以進(jìn)行全局注冊(cè)罐氨。使用時(shí)格外小心臀规！一旦使用全局混入，它將影響每一個(gè)之后創(chuàng)建的 Vue 實(shí)例栅隐。使用恰當(dāng)時(shí)塔嬉，這可以用來(lái)為自定義選項(xiàng)注入處理邏輯。
// 為自定義的選項(xiàng) 'myOption' 注入一個(gè)處理器租悄。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"
5. watch
- 類型：
{ [key: string]: string | Function | Object | Array } - 一個(gè)對(duì)象谨究，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)泣棋。值也可以是方法名胶哲，或者包含選項(xiàng)的對(duì)象。Vue 實(shí)例將會(huì)在實(shí)例化時(shí)調(diào)用 $watch()潭辈，遍歷 watch 對(duì)象的每一個(gè)屬性
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
}
},
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 該回調(diào)會(huì)在任何被偵聽的對(duì)象的 property 改變時(shí)被調(diào)用鸯屿，不論其被嵌套多深
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 該回調(diào)將會(huì)在偵聽開始之后被立即調(diào)用
d: {
handler: 'someMethod',
immediate: true
},
e: [
'handle1',
function handle2 (val, oldVal) { /* ... */ },
{
handler: function handle3 (val, oldVal) { /* ... */ },
/* ... */
}
],
// 如果只是監(jiān)聽e.f改變澈吨，可以只監(jiān)聽e.f，比監(jiān)聽e deep： true要好
'e.f': function (val, oldVal) { /* ... */ }
}
})
vm.a = 2 // => new: 2, old: 1
6. Vue.$set
問(wèn)題
如果在實(shí)例創(chuàng)建之后添加新的屬性到實(shí)例上寄摆，它不會(huì)觸發(fā)視圖更新谅辣。 或者 索引數(shù)組的修改，vue無(wú)法劫持該數(shù)據(jù)進(jìn)行響應(yīng)式變化當(dāng)你把一個(gè)普通的 JavaScript 對(duì)象傳入 Vue 實(shí)例作為
data選項(xiàng)婶恼，Vue 將遍歷此對(duì)象所有的屬性桑阶，并使用Object.defineproperty把這些屬性全部轉(zhuǎn)為getter/setter受現(xiàn)代 JavaScript 的限制 (以及廢棄 Object.observe)，Vue 不能檢測(cè)到對(duì)象屬性的添加或刪除勾邦。由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì)屬性執(zhí)行 getter/setter 轉(zhuǎn)化過(guò)程蚣录，所以屬性必須在 data 對(duì)象上存在才能讓 Vue 轉(zhuǎn)換它，這樣才能讓它是響應(yīng)的
解決方案
Vue 不允許在已經(jīng)創(chuàng)建的實(shí)例上動(dòng)態(tài)添加新的根級(jí)響應(yīng)式屬性 (root-level reactive property)检痰。然而它可以使用 Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對(duì)象上
Vue.set(vm.obj, 'e', 0)
您還可以使用 vm.$set 實(shí)例方法包归，這也是全局 Vue.set 方法的別名：
this.$set(this.obj,'e',02)
有時(shí)你想向已有對(duì)象上添加一些屬性，例如使用 Object.assign() 或 _.extend() 方法來(lái)添加屬性铅歼。但是公壤，添加到對(duì)象上的新屬性不會(huì)觸發(fā)更新。在這種情況下可以創(chuàng)建一個(gè)新的對(duì)象椎椰，讓它包含原對(duì)象的屬性和新的屬性：
// 代替 Object.assign(this.obj, { a: 1, e: 2 })
this.obj= Object.assign({}, this.obj, { a: 1, e: 2 })
7. Vue的通信方式
https://blog.csdn.net/u013262823/article/details/86570909
父子組件通信： v-bind:attr 厦幅，props
provide, inject (祖孫通信)
$attr、 $listeners
$parent, $children
ref
$emit, $on
Vuex
provide inject
父組件
<template>
<div class="test">
<son prop="data"></son>
</div>
</template>
<script>
export default {
name: "Test",
provide: {
name: "Garrett"
}
};
</script>
孫組件
<template>
<div>
{{name}}
</div>
</template>
<script>
export default {
name: 'Grandson',
inject: [name]
}
</script>
