實例-vue是由實例組成的
根實例
組件也是實例
以$開頭的單詞都是代表着vue的實例屬性實例方法
vue實例中的生命周期鈎子
8個生命周期函數
這幾個函數不用放到methods里面
計算屬性
盡量使用計算屬性而不是watch！
可以配合着計算屬性使用setter和getter
綁定樣式
- 對於非行內樣式
方法一：
:class=“{becomeRed: isActivated}”
其中isActivated放到data里面，如果是true，就有becomeRed這個class，否則就沒有。
方法二：
:class=“[becomeRed]”
data:{ becomeRed: “”}
becomeRed里面放類名
- 對於行內樣式
:style=“styleObj”
//或
:style=“[styleObj,
{fontSize: '20px'}]”
data:{
styleObj:{
color:”black”
}
}
v-if和v-show
后者只是隱藏而已，dom元素還在；前者直接殺掉dom元素。
使用后者性能更高。
如果要使用v-if，而且這個要隱藏的組件以後還會顯示，我們可以在這個組件標籤裡面加上一個v-once，以此來增加性能，不讓這個組件死掉。
v-if和v-else
兩個東西要連着寫！
數組
如果想改變數組，界面跟着變。不能使用方括號來改。
有三種方式：
- 使用數組遍歷函數
- 改變數組的引用
- set方法：
Vue.set(vm.userInfo,1,5)
//或
vm.$set(vm.userInfo,2,10)
template占位符
起一個包裹的作用
向對象中注入新的屬性
- 改變對象的引用
- set方法：
Vue.set(vm.userInfo,”address”,”beijing”)
//或
vm.$set(vm.userInfo,”address”,”beijing”)
使用自定義組件時
is屬性
在table、ul、select下面使用自定義標簽時，使用is屬性解決模板標簽的bug
data
不應該是個對象，而是個函數，返回content，這樣的話，返回一個引用，每個子組件都可以擁有獨立的數據，互不干擾。
獲取dom
對原生標簽
ref=‘hello’
this.$refs.hello
對自定義標簽
使用ref返回的是引用。
父子組件的數據傳遞
父傳子
通過屬性的形式傳遞數據
<counter :count = "0"></counter>//傳數字
<counter count = "1"></counter>//傳字符串
單向數據流：
父組件可以向子組件傳遞數據，但是子組件不能修改父組件傳過來的東西。因為有可能其他組件還在使用父組件傳遞過來的數據，會影響其他組件。
如果要修改，得copy一份副本，修改這個副本
子傳父
激發事件emit
參數校驗
props后面不寫數組了，改寫成一個對象，like this：
props: {
content: {
type: String,
validator: function(value) {
return (value.length > 5)
}
},
index: Number,
num: [String,Number],
fuck: {
type: String,
required: false,
default: 'default value'
}
}
props特性
父組件向子組件傳屬性，子組件在props里面剛好聲明了，即父傳子接。
父組件和子組件有一種對應特性：
- 這個傳遞屬性不會在dom上顯示；
- 子組件接受了props后，子組件就可以使用差值表達式將其顯示出來。
非props特性
父組件向子組件傳屬性，但是子組件在props里面卻沒有聲明該屬性。
即父傳子不接。
- 子組件沒辦法獲取該屬性的內容，因為沒有獲取；
- 非props特性會顯示在dom元素里面的。
如何給自定義組件綁定原生事件？
- 方法一：
- 給子組件綁定一個原生事件，觸發子組件函數；
- 在子組件函數里面監聽，然后$emit一個自定義事件給自定義組件即可
- 方法二：
直接在自定義事件上面加native修飾符，這樣寫：
@click.native = “handleClick”
如何解決復雜的組件間傳值？
- vuex
- 發布訂閱模式（總線機制/Bus/觀察者模式）
總線機制
<div id="app">
<child content="旭鳳"></child>
<child content="錦覓"></child>
</div>
<script type="text/javascript">
Vue.prototype.bus = new Vue();
Vue.component('child',{
data: function() {
return {selfContent: this.content}
},
props: ['content'],
template: "<div @click='handleChildClick'>{{selfContent}}</div>",
methods: {
handleChildClick: function() {
this.bus.$emit('change', this.selfContent);
}
},
mounted: function() {
var that = this;
this.bus.$on('change', function(msg) {
that.selfContent = msg;
})
}
});
var app = new Vue({
el: '#app'
});
</script>
插槽
<slot>默認內容</slot>
具名插槽
給插槽起一個名字，插到指定的位置
作用域插槽
當子組件做循環或某一部分它的dom結構應該由外部傳進來的時候，使用作用域插槽。
<div id="app">
<sweet>
<template slot-scope='props'>
<h1>{{props.item}}</h1>
</template>
</sweet>
</div>
<script type="text/javascript">
Vue.component('sweet',{
data: function() {
return {
list: ['錦覓', '旭鳳', '潤玉']
}
},
template:
`<div>
<ul>
<slot
v-for='item in list'
:item='item'
></slot>
</ul>
</div>`
})
var app = new Vue({
el: '#app'
});
</script>
動態組件
<component :is=“type”></component>
這個type是根實例data裡面的一個屬性，用於替換component變成你自定義過的自定義組件。
可以用於替代v-if的效果！
動畫
過渡動態效果
漸入
漸出
<div id="app">
<transition name='fade'>
<div v-show='seen'>香蜜沉沉燼如霜</div>
</transition>
<button type="button" @click='handleBtnClick'>change</button>
</div>
<style>
.fade-enter, .fade-leave-to{
opacity: 0;
}
.fade-enter-active, .fade-leave-active{
transition: opacity 3s;
}
</style>
Animate.css
- keyframes自定義的標簽動畫
- 導入animate庫
<transition
name="fade"
enter-active-class="animated swing"
leave-active-class="animated shake"
>
<div v-show='seen'>香蜜沉沉燼如霜</div>
</transition>
如何讓刷新之后自動顯示動畫？
在transition標簽里面加上這么兩個屬性：
appear
appear-active-class=“animated swing”
如何讓keyframes動畫和transiton動畫融合在一起？
都放到enter和leave的那兩個active class里面去。
兩者時間不統一，如何設定動畫時間？
在transition標簽里面加上這么幾條屬性即可：
:duration=“{enter: 5000, leave: 10000}”
//或
:duration="1000"
//或
type="transition"
js動畫
使用js動畫鈎子。
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-show='seen'>香蜜沉沉燼如霜</div>
</transition>
methods: {
handleBtnClick: function() {
this.seen = !this.seen
},
handleBeforeEnter: function(el) {
el.style.color = 'pink';
},
handleEnter: function(el, done) {
setTimeout(()=>{
el.style.color = 'blue'
},2000);
setTimeout(()=>{
done()
},4000);
},
handleAfterEnter: function(el) {
el.style.color = 'red'
}
}
使用velocity.js來創作js動畫
methods: {
handleBtnClick: function() {
this.seen = !this.seen
},
handleBeforeEnter: function(el) {
el.style.opacity = 0;
},
handleEnter: function(el, done) {
Velocity(el,{
opacity: 1
},{
duration: 1000,
complete: done
})
},
handleAfterEnter: function(el) {
console.log('4s是垃圾！')
},
handleBeforeLeave: function(el) {
el.style.opacity = 1;
},
handleLeave: function(el, done) {
Velocity(el,{
opacity: 0
},{
duration: 1000,
complete: done
})
},
handleAfterLeave: function(el) {
console.log('我走了！')
}
}
多元素過渡效果
- 對原生組件
<style>
.fade-enter, .fade-leave-to {
opacity: 0;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 1s;
}
</style>
<transition
name="fade"
mode="out-in"
>
<div v-if='seen' key='flower'>錦覓</div>
<div v-else key='bird'>旭鳳</div>
</transition>
- 對自定義組件
<child v-if=“show”></child>
<child-one v-else></child-one>
- 對動態組件
直接用component標籤替換這兩child，就可以直接使用。效果一樣哦。
列表過渡
使用transition-group標籤代替transition標籤，來包裹列表，其他部分使用起來和前面一樣。
原理
相當於在每一個表項div外面包裹了一個transition標籤，對它使用一些如v-enter的class。
動畫封裝
不用css動畫了，用js動畫。
