基礎篇
- 當掛載成功後，我們可以通過 vue實例名.$el來訪問dom元素
生命週期
- created:實例創建完成後調用，但尚未掛載,$el還不可用
- mounted: el掛載實例後調用，一般第一個業務邏輯在此開始
- beforeDestroy:實例銷燬之前調用，主要解綁一些使用addEventListener監聽的事件
{{}}符號
- 只想顯示{{}}，不進行替換，可以使用v-pre跳過編譯過程
- {{}}只支持單個表達式，不支持語句和流控制
指令與事件
- 數據驅動DOM是 Vue.js的核心理念，所以萬不得已不主動操作Dom
- methods屬性中的方法中，this屬性指向當前vue實例本身！
計算屬性
計算屬性也可以有getter /setter方法
computed:{
fullName:{
get:function(){
},
set:function(newValue){
}
}
}
當執行 vue實例.fullName=‘xxx’,setter方法就會被調用的
v-if
如果一次性判斷多個元素，可以使用標籤
<template v-if='status==1'>
<p>1</p>
<p>2</p>
</template>
由於底層vue.js可能採用複用，所以如果考慮禁用可以使用key元素指定不同的鍵值
method 參數
方法的參數，可以傳入$event,代表原生dom的 事件對象
<a href='xxx' @click='handle('xxx',$event)'>
js:
methods:{
handle:function(message,event){
xxxxx
}
}
v-model的修飾符
- .lazy v-model會變成change事件同步
- .number 將輸入轉換爲number類型
- .trim 自動過濾輸入的首尾空格
組件篇
- 組件註冊
1.全局註冊
2.局部註冊
- 非父子組件通信
簡單的方案就是使用bus總線
<script>
var bus = new Vue();
子組件：
bus.$emit("事件名","需要傳遞的數據")
父組件處理函數：
var _this =this;//先保留this引用
bus.$on('事件名'，function(msg){
//處理邏輯
})
- 父鏈 和 子鏈
儘量不使用，直接修改父子鏈狀態，理解困難
使用
this.$parent 可以直接訪問該組件的父實例或組件
使用
this.$children 訪問它所有的子組件
- 子組件索引
通過this.$children 遍歷組件實例，比較麻煩，可以使用ref便捷訪問
<component-a ref='comA'></component-a>
父組件可以通過 this.$refs.comA直接訪問子組件的vue 實例
需要注意的是ref 標記在普通元素上時， this.$refs.普通元素 得到的是 普通元素的Dom
- slot 插槽
1.具名插槽
2.作用域插槽，使用一個複用的模板替換已經渲染的元素
3. 訪問slot 使用 this.$slots.slot名稱（或者default）
- 其他一些高級知識點
1.$nextTick :等待到下一個時間循壞tick中，Vue 刷新隊列並執行實際（異步更新隊列已去重）的工作
this.$nextTick(function(){
//業務邏輯
})
2.手動掛載實例
創建vue實例的時候沒有指定el屬性，處於未掛載的狀態，可以使用$mount手動掛載一個實例，這個方法返回實例本身
var a = Vue.extend({...一些屬性})
new a().$mount('#dom的Id')
3.動態組件
使用component用來掛載不同組件，is屬性來選擇要掛載的組件
<component :is='需要掛載的組件'>