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 值的作用
欢迎关注 [ 前端优选 ] 精彩文章，等你来看！
webyouxuan
