vue初學者必看——要點介紹
一、 Vue 資料雙向繫結
資料雙向繫結:
Object.defineProperty(obj, 'name', {
Value: "",
Writable:"" ,
get() {
},
set(val) {
}
});二、 Vue中虛擬DOM
虛擬DOM: 其實就是一個物件。
虛擬DOM2和虛擬DOM1進行比較，比較完成後（diff）DOCUMENT
三、Vue的指令
V-model V-text v-if v-show v-bind(:) v-on(@) v-html
v-if v-show
四、 vue的methods
@click="xxxx" methods: { xxxx() { this.xxxx } }
五、Vue的directives(自定義指令)
自定義指令: 一般有相同DOM操作的時候（v-focus）
1) 全域性自定義
Vue.directive('focus', function(el, bindings) {
})
2）區域性
directives: {
focus() {
}}六、 Vue中的自定義filters(過濾器)
過濾器: 對資料再次處理，來達到你想要的資料。
Vue.filter('', function() {})
filters: {
my() {
}}七、 Vue中的元件
元件就是一個物件 let top = { template: 'html程式碼', data() { return {} }, methods:{} } Vue.component() components: { top }
八、 元件通訊
父傳子 props 自定義屬性
子傳父 @event 自定義事件
兄弟 EventBus 事件車 $on $off $emit()
Vuex 全域性的定義變數:state ->view-> actions -> state(狀態) 單向資料流。
九、 Vue DOM操作
ref
this.$refs.refname
<!-- 這個函式什麼時候使用？
更新資料後需要使用DOM節點。
-->
this.list = ["2222"]
<!-- 頁面重新渲染完成之後。 -->
this.$nextTick(function() {
this.$refs.list
})
十、 內建元件
template
keep-alive
transtion
十一、 vue-router
1.npm install
<!--
註冊了兩個全域性元件
router-view
router-link
-->
2.Vue.use(VueRouter)
3./:id 路由傳引數
router-link :to="{name:'', params: {id: ''}}"
router-link :to="{path:'', query: {id: ''}}" 將變數值放入了url中
4.切割程式碼
import()=>''
5.$route物件
$route.params
$route.meta (路由元)
6.$router物件
push
go
back
七、守衛函式:
即將進入相關路由時執行的函式。
三大守衛函式:
全域性 beforeEach
路由: beforeEnter
元件的鉤子函式
元件: beforeRouterEnter、beforeRouterUpdated
beforeRouterLeave