Vue (讀音 /vjuː/,類似於 view) 是一套用於構建用戶界面的漸進式框架。
特點: 易用,靈活,高效,漸進式框架。
可以隨意組合需要用到的模塊 vue + components + vue-router + vuex + vue-cli
一.Vue的概念和特性
1.什麼是庫,什麼是框架?
- 庫是將代碼
集合
成一個產品,我們可以調用庫中的方法實現自己的功能。 - 框架則是爲
解決一類問題
而開發的產品,我們在指定的位置編寫好代碼,使用時框架幫我們調用。
框架與庫之間最本質區別在於控制權:you call libs, frameworks call you.
Vue屬於框架
2.MVC模型 && MVVM模型
在傳統的mvc中除了model和view以外的邏輯都放在了controller中,導致controller邏輯複雜難以維護,在mvvm中view和model沒有直接的關係,全部通過viewModel進行交互
Vue是MVVM模式
3.聲明式和命令式
- 自己寫for循環就是命令式 (命令其按照自己的方式得到結果)
- 聲明式就是利用數組的方法forEach (我們想要的是循環,內部幫我們去做)
二.Vue的基本使用
1.mustache語法
允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。在使用數據前需要先聲明:
- 編寫三元表達式
- 獲取返回值
- JavaScript 表達式
<div id="app">
{{ 1+1 }}
{{ msg == 'hello'?'yes':'no' }}
{{ {name:1} }}
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
msg:'hello'
}
})
</script>
2.響應式數據變化
Vue中使用Object.defineProperty
重新將對象中的屬性定義,如果是數組的話需要重寫數組原型上的方法
function notify() {
console.log('視圖更新')
}
let data = {
name: 'youxuan',
age: 18,
arr: [1,2,3]
}
// 重寫數組的方法
let oldProtoMehtods = Array.prototype;
let proto = Object.create(oldProtoMehtods);
['push', 'pop', 'shift', 'unshift'].forEach(method => {
proto[method] = function (...args) {
let inserted;
switch (method) {
case 'push':
case 'unshift':
inserted = args;
break;
}
observerArray(inserted)
notify();
oldProtoMehtods[method].call(this, ...args)
}
})
function observerArray(obj) { // 觀察數組中的每一項
for (let i = 0; i < obj.length; i++) {
observer(obj[i]);
}
}
function observer(obj) {
if(typeof obj !== 'object'){
return obj
}
if (Array.isArray(obj)) {
obj.__proto__ = proto
observerArray(obj);
}else{
for (let key in obj) {
defineReactive(obj, key, obj[key]);
}
}
}
function defineReactive(obj, key, value) {
observer(value); // 再一次循環value
Object.defineProperty(obj, key, { // 不支持數組
get() {
return value;
},
set(val) {
notify();
observer(val);
value = val;
}
});
}
observer(data);
data.arr.push({name:'jw'})
console.log(data.arr);
· 缺陷
- 不能通過通過長度、索引改變數組
- 不能給對象新增屬性
- 需要通過
vm.$set
和vm.$delete
方法強制添加/刪除響應式數據
3.Vue實例上的方法
- vm.$el;
- vm.$data;
- vm.$options;
- vm.$nextTick();
- vm.$mount();
- vm.$watch();
- vm.$set();
三.Vue中的指令
在vue中 指令 (Directives) 是帶有 v- 前綴的特殊特性,主要的功能就是操作DOM
1.v-once
<div v-once>{{state.count}} </div>
2.v-html
永遠不要對用戶輸入使用v-html,可能會導致xss攻擊
<div v-html="text"></div>
3.v-bind
動態綁定屬性需要使用v-bind
進行綁定
<img v-bind:src="src">
可以使用:來簡寫 v-bind
4.v-for
<template v-for="(fruit,index) in fruits" >
<li :key="`item_${index}`">{{fruit}}</li>
<li :key="`fruit_${index}`">{{fruit}}</li>
</template>
多個元素循環時外層需要增加template
標籤,需要給真實元素增加key
,而且key
不能重複,儘量不要採用索引作爲key
的值
舉個key
值的例子:
5.v-if/v-else/v-show
v-if
可以切換DOM
元素是否存在,並且v-if
爲false
時內部指令不會被執行 v-show
可以控制元素的顯示及隱藏,主要控制的是元素樣式
6.v-on
- 事件的綁定 v-on綁定事件
- 事件修飾符 (.stop .prevent) .capture .self .once .passive
7.v-model
雙向數據綁定
<input type="text" :value="value" @input="input">
<input type="text" v-model="value">
四.面試題環節
- 請說下對於MVVM的理解
- Vue實現數據雙向綁定的原理
- Vue常用的指令有哪些
- v-model的原理
- v-if 和 v-show 區別
- Vue中 key 值的作用
歡迎關注 [ 前端優選 ] 精彩文章,等你來看!