Vue
尤雨溪
漸進式的JAVAscript框架
MVVM框架
M:model層 數據的增刪改查
V:view層 視圖 類似與HTML一樣的模板
VM:viewModel model和view的一個映射層
優點:
數據驅動視圖
回流和重繪
簡單的來說頁面的排版布局發生了改變就是回流
簡單來說對一個元素進行樣式操作不會導致頁面布局發生改變重繪
回流一定會發生重繪
重繪不一定發生回流
vue常用的指令
v-text {{}}
v-html
v-bind :
v-on @ .stop .prev .enter .keyCode值 $event
v-model form表單 .number
Object.defineProperty
Proxy
v-for
v-show
v-if
區別:
前者操作元素的display屬性 初次渲染的開銷較大
后者操作元素的創建和銷毀 開銷較大
使用場景:
v-else-if
v-else
v-pre
v-cloak
v-once
v-slot 插槽
自定義指令
全局注冊
Vue.directive()
局部注冊
VUE({
})
過濾器
Vue.filter()
組件
Vue.component()
watch
屬性監聽
基於Vue的依賴,當依賴的屬性發生了改變的時候,那么就會自動觸發相對應的方法進行數據的處理
如果監聽對象的時候只會監聽對的引用地址是否發生了改變 具體的值是不會進行監聽的
如果需要監聽對象值的變化 handler函數 deep:true
無法監聽數據(特殊情況)的變化 this.arr[0] = 200; this.arr.length = 0
在監聽的函數中會接收到2個值 一個新值和一個舊值
$set() 給一個響應式對應添加一個響應式屬性
特點:
一個數據影響多個數據
computed
屬性計算
基於Vue的依賴,當依賴的屬性發生了改變的時候,那么就會自動觸發相對應的方法進行數據的處理
數據的緩存
特點
一個數據受多個數據的影響
生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
activated 活躍狀態
deactivated 緩存狀態
動態組件
通過同一個掛載點進行動態切換組件的變化
<component></coponent> is
<keep-alive></keep-alive> (***)
屬性:
include
exclude
max
Vue動畫
當前的元素必須遵循2個特點
1、必須經歷顯示隱藏
2、需要執行動畫的元素 外層必須加一個<tranisition></tranisition>
name:動畫的名稱
name-enter
name-enter-active
name-enter-to
name-leave
name-leave-active
name-leave-to
<tranisition
enter-class
enter-active-class
enter-to-class
。。。
></tranisition>
組件傳值
父傳子
自定義屬性
props:[] {}
type default required
子傳父
通過自定義方法 觸發通過this.$emit
通過插槽作用域
非父子
公共的vue實例對象
EventBus
手動封裝$on $emit $off 事件訂閱
Vuex
為了使組件更加的靈活
data為什么在組件中是一個函數而不是一個對象?
什么是單項數據流?
插槽
slot
默認名字是default
如果需要命令的時候 v-slot:名稱
作用域插槽:
v-slot:名稱 = "接收的值"
<Banner>
<template v-slot>
<p>111</p>
</template>
</Banner>
vue實例身上的方法
$mount()
$destroy()
$foreUpdate
$on
$emit
$off
$once
1、什么叫回流和重繪
2、虛擬DOM (虛擬DOM就是真實的JS對象,操作內存中的JS對象比操作真實的DOM速度要快)
3、模塊化
4、虛擬DOM的key值有什么作用
5、Object.defineProperty
6、單頁面開發與多頁面開發的優缺點
博客
深入響應式原理
單文件組件?
查漏補缺
<keep-alive></keep-alive>
實例身上的方法
$extend
$mixin
路由
Vuex
axios
跨域
移動端