前端框架
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。
以 Vue 为例，我整理了如下的面试题。
computed: {
//常用写法 实际上只是get（一个属性）
// fullname: function() {
// return this.firstname + ' ' + this.lastname;
// }
//真正的规范写法 但是一般不写set方法 只读属性
fullname: {
set: function(newValue) {
const names = newValue.split(' ');
this.firstname = names[0];
this.lastname = names[1];
},
get: function() {
return this.firstname + ' ' + this.lastname;
}
}
computed计算属性的好处：多次调用get属性，里面的函数只调用一次，之后调用会直接使用缓存，只有在更新了之后，才会重新调用函数，选择使用computed而不是mustache或者method能对性能有较大改善。
4. 事件监听 v-on
v-on基本使用
<button v-on:click="increment">+</button>
<!-- 语法糖-->
<button @click="increment">+</button>
添加参数
注意参数要传入基本数据类型，例如字符串要加单引号 不然会被当做变量
v-on修饰符
<div id="app">
<!-- 1.阻止事件冒泡 .stop-->
<div @click="divclick">
<button @click.stop="btnclick">按钮</button>
</div>
<!-- 2.prevent 阻止默认事件-->
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
<!-- 3.监听某个键盘事件 enter回车按钮-->
<input type="text" @keyup.enter="keyup">
<!-- 4.once 只触发一次回调-->
<button @click.once="onceclick">只响应一次</button>
</div>
5. 条件判断v-if、v-else、v-else-if
小问题：
存在虚拟dom的机制，在数据改变时，会复用已经存在的元素（用户输入内容也保存下来了），并修改变化的部分，再显示出来
不想复用的话，可以使用key属性，当key值不同时，不会复用（其实也就是更好的复用）
6. 显示v-show
注意v-show和v-if的区别：
<!-- v-if：当条件为false时，该dom元素不存在-->
<h2 v-if="isShowed" id="aaa">{{message}}</h2>
<!-- v-show：当条件为false时，添加行内样式display：none，实际存在于dom树中-->
<h2 v-show="isShowed" id="bbb">{{message}}</h2>
选择：当显示与隐藏切换很频繁时，使用v-show，当只有一次切换时，使用v-if
7. 遍历数据v-for
遍历数组和对象
<!-- 遍历数组-->
<li v-for="item in names">{{item}}</li>
<li v-for="(item, index) in names">{{index+1}}.{{item}}</li>
</ul>
<ul>
<!-- 遍历对象-->
<li v-for="item in person">{{item}}</li>
<li v-for="(value, key, index) in person">{{key}}.{{value}}.{{index}}</li>
</ul>
使用v-for是添加key属性：更好的复用
当有key时，先匹配对应的对应的key值，在创建新的并插入
因此key的值要一一对应，譬如：<li v-for="item in letter" :key="item">{{item}}</li>（没有重复元素的前提下，这是一一对应的）
数组中的响应式方法：
因为Vue是响应式的，所以当数据变化时，Vue会自动检测数据变化，视图会发生对应的更新
push()、pop()、shift()、unshift()、splice()、sort()、reverse()
删除元素/插入元素/替换元素：
删除：splice(开始的位置, 删除的个数) splice(开始的位置) 后面的全部删除
替换：splice(开始的位置, 删除的个数, 追加元素1, 追加元素2...) Vue.set(要修改的对象, 索引值, 修改的值)
插入：splice(开始的位置, 0, 追加元素1, 追加元素2)
注意 通过索引值来修改数据，不是响应式的
8. 表单绑定v-model
基本使用：
mustache语法/v-bind是单向的，就是数据发生变化，会显示在页面上，但是反过来不行
v-model是双向绑定的，数据和UI对应变化，应用于input 和 textarea
<input type="text" v-model="message"> 相当于 <input tyoe="text" :value="message" @input="message=$event.target.value">
v-model其实是一个语法糖，包含两个操作：v-bind绑定一个value属性；v-on指令给当前元素绑定input事件
v-model：radio
数据中的sex和value绑定了，此时，可以不用添加name="sex"也可以实现互斥选择
<div id="app">
<label for="male">
<input type="radio" id="male" name="sex" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" name="sex" value="女" v-model="sex">女
</label>
<h2>{{sex}}</h2>
</div>
v-model：checkbox
把选中的和hobbies联系起来
<div id="app">
<input type="checkbox" id="agree" value="篮球" v-model="hobbies">篮球
<input type="checkbox" id="agree" value="足球" v-model="hobbies">足球
<input type="checkbox" id="agree" value="羽毛球" v-model="hobbies">羽毛球
<input type="checkbox" id="agree" value="游泳" v-model="hobbies">游泳
<h2>{{hobbies}}</h2>
</div>
v-model：select
mySelect："", mySelects：[]
值绑定：
通过v-bind动态绑定value的值（originHobbies可能是网络获取的数据）
<label v-for="item in originHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
修饰符：
v-model.lazy：不及时双向绑定，而是当失去焦点或者回车时才更新数据
v-model.number：输入框获得的都是字符串类型，使用此修饰符可以转成数字类型，方便后续处理
v-model.trim：过滤内容两边的空格
三、其他补充知识
1. ES6对象增强写法
angular：google 实际是用typescript
typescript：Microsoft 增加了类型检测
flow：Facebook
react：Facebook 用JavaScript
2. js高阶函数filter/map/reduce
命令式编程：一步一步给指令执行
声明式编程：先把数据定义好，然后直接拿来使用， vue/react
面向对象编程：第一公民是对象
函数式编程：第一公民是函数
filter：
语法：var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
回调函数返回一个布尔值，若为true，则加入新数组中，false则过滤掉
//返回小于100的值
let newNums = nums.filter(function(n) {
return n < 100;
})
map：
语法：
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])
一个由原数组每个元素执行回调函数的结果组成的新数组
//返回两倍
let newNum = nums.map(function(n){
return n \* 2;
})
reduce：
语法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
Accumulator (acc) (累计器)
Current Value (cur) (当前值)
Current Index (idx) (当前索引)
Source Array (src) (源数组)
作用：对数组中所有内容进行汇总
前端框架
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。
以 Vue 为例，我整理了如下的面试题。
