過濾器
vue允許自定義過濾器，我個人認為，過濾器有兩種，一種是對數據的清洗過濾，一種是對數據切換的動畫過濾
數據切換的動畫過濾
這里還是利用前面的動態組件的例子：
這里由於沒辦法展示動畫效果，代碼如下，自己體會吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.v-enter, .v-leave-to{
transform: translateX(10px);
opacity: 0;
}
.v-enter-active,.v-leave-active {
transition: all .5s ease;
}
</style>
</head>
<body>
<div id="app">
<a href='' @click.prevent='Name="Vheader"'>頭部</a>
<a href='' @click.prevent='Name="Vfooter"'>底部</a>
<transition mode='out-in'>
<component :is="Name"></component>
</transition>
</div>
<!--你的vue模塊路徑-->
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script>
Vue.component('Vheader', {
template: '<div>頭部內容</div>'
})
Vue.component('Vfooter', {
template: '<div>底部內容</div>'
})
let app = new Vue({
el: '#app',
data: { Name: ''},
})
</script>
</body>
</html>
其中transition是vue自帶的動畫組件，相關參數及說明：
並且會自帶有這些css參數：
更詳細的說明參見：官方文檔
對數據的清洗過濾
什么意思呢？如果你沒看明白，來，直接看個例子，相信你就能看懂了
這個過濾器，如果你是用過Python的django框架的朋友，應該很熟悉，django里面模板文件里也有個這種過濾器
全局過濾器
當然也有全局的過濾器，這個就跟前面的組件很像了
監聽屬性
監聽屬性一共有兩種，都是作為監聽數據的
計算屬性
模板內的表達式非常便利，但是設計它們的初衷是用於簡單運算的。因為在模板中放入太多的邏輯會讓模板過重且難以維護
計算屬性默認是get，即獲取值，當然也可以修改值，先看看get類型的：
最開始msg是test，然后computed屬性內的就是計算屬性，此時的是changestr，將值渲染到p標簽上，當點擊button元素原始的監聽事件點擊修改了msg的值后，計算屬性changstr獲取到新的值，立馬做出反應，然后重新渲染到p標簽上
set方式：
這里可能不太好理解
步驟：
- 1.默認渲染出msg為test的
- 2.計算屬性changestr觸發get方法
- 3.渲染到p標簽
- 4.click點擊
- 5.綁定方法修改msg的值
- 6.計算屬性changestr觸發set方法，修改值
- 7.計算屬性實時監聽發現msg值修改，重新get值
- 8.渲染到p標簽
如果需要設置值的話，就需要如上分開寫計算屬性，是不是感覺有點像在寫后端的api接口啊，哈哈
偵聽器
雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。這就是為什么 Vue 通過 watch 選項提供了一個更通用的方法，來響應數據的變化。當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的
比如這里，模擬一個網頁搜索輸入框，當我輸入vue時，自動補齊數據為 vue 官網
注意：使用偵聽器時，屬性直接時那個待渲染的字符串msg
生命周期函數
又叫鈎子函數，在組件的創建到銷毀的每個時段都有一個hook函數，即鈎子，這個就是生命周期函數
所有的生命周期鈎子自動綁定 this 上下文到實例中，因此你可以訪問數據，對屬性和方法進行運算。這意味着你不能使用箭頭函數來定義一個生命周期方法 (例如 created: () => this.fetchTodos())。這是因為箭頭函數綁定了父上下文，因此 this 與你期待的 Vue 實例不同，this.fetchTodos 的行為未定義
每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鈎子的函數，這給了用戶在不同階段添加自己的代碼的機會
生命周期函數一共有如下：
- beforeCreate ：創建之前
- created：創建之后哦
- beforeMount：掛載之前
- mounted：掛載之后
- beforeUpdate：更新之前
- updated：更新之后
- activated：激活之前
- deactivated：激活之后
- beforeDestroy：銷毀之前
- destroyed：銷毀之后
- errorCaptured：錯誤調用，這個可以忽略，基本不怎么用
那么這里呢就來一個大綜合的例子：
<keep-alive></keep-alive>
但是，在很多時候，其實我們並不想刪除，只是想隱藏就行了，比如之前直接一個css樣式dispaly:none就行了，vue里其實也有這種類似的組件——keep-alive:
當點擊銷毀已經不會走beforeDestory和destoryed周期函數，這個組件暫且這樣，以后還會用到的，詳細的就看官方文檔吧
以上生命周期函數代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script>
var Vcommon = {
template: `<div>{{msg}}<button @click="changeHander">修改</button></div>`,
data() {
return {
msg: 'test',
}
},
methods: {
changeHander() {
this.msg = 'vue的聲明周期函數測試'
}
},
beforeCreate() {
console.log('創建之前')
},
created() {
console.log('創建之后')
},
beforeMount() {
console.log('掛載之前')
},
mounted() {
console.log('掛載之后')
},
beforeUpdate() {
console.log('更新之前')
},
updated() {
console.log('更新之后')
},
beforeDestroy() {
console.log('銷毀之前')
},
destroyed() {
console.log('銷毀之后')
},
}
let app = new Vue({
el: '#app',
data: {
isShow: true
},
components: {
Vcommon
},
methods: {
change() {
this.isShow = !this.isShow
}
},
template: `<div>
<keep-alive>
<Vcommon v-if = 'isShow'/>
</keep-alive>
<button @click="change">銷毀</button>
</div>`
})
</script>
</body>
</html>
以下為官方文檔的聲明周期函數的前后邏輯
根據個人經驗，用的比較多的周期函數還是mouted
獲取DOM元素
根據官方文檔的解釋，貌似是不太贊同獲取DOM元素進行操作，不過還是給了一個可以直接獲取DOM的元素的屬性 ref 和$refs
希望獲取的DOM給一個ref屬性，值為自定義，通過mouted周期函數才能拿到數據，利用Vue實例中的$refs.(自定義的值)即可拿到：為什么是$refs這個可以自己去看官網
拿到之后就可以對其進行DOM操作了，如果希望獲取組件對象，一樣的操作即可
$nextTick延時
如下，我們希望對input標簽用focus聚焦，打開自動去到輸入框的效果：
但是你發現，明明可以拿到DOM元素，但是操作不了，這就是vue的虛擬DOM的效果了，虛擬DOM是react提出來的，然后三大框架現在都有了虛擬DOM的概念，因為加載速度比較快，性能較好
那么此時怎么辦呢，利用$nextTick做延時就行：
打開頁面input框自動聚焦已自動聚焦
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
},
mounted() {
// console.log(this.$refs.input)
// console.log(this.$refs.input.focus())
this.$nextTick(function () {
// 獲取更新之后的DOM
this.$refs.input.focus()
})
},
template: `<div>
<input type="text" ref="input">
</div>`
})
</script>
</body>
</html>
總結
其實沒什么可說的，還是多看官方文檔，我感覺寫的很詳細了，我的文章只是把一些可能經常用的抽出來而已