web 15题

1. MVVM模式

MVVM模式（Model-View-ViewModel）模式包括三个核心部分

Model（模型）：有核心的业务逻辑产生的数据对象，例如从数据库取出并做特定处理后得到的数据。

View（视图）：即用户界面。

ViewModel（视图模型）：用于链接匹配模型和视图 的作用模型。

正在上传…重新上传取消

1. CMD命令模式操作（p10）

1. 内部命令：操作系统的基本命令

常用的内部命令有：

dir:显示一个目录中的文件列表

cd:进入一个目录

Md:创建一个目录

1. 外部命令：需要把程序安装到计算机，然后执行相应的文件名。

1. CDN（P11）

所谓CDN，是指内容分发网络。通过构建分布式的内容分发网络，用户可以就近获取所需内容，这样可以提高用户访问的响应速度和命中率。

1. ES6-键值对（P17）

任何一个对象的成员要么是数据成员，要么是函数成员。但无论是数据成员还是函数成员，在本质上都是一个 “键-值”对，“键”是这个成员的名字，“值”是这个成员的内容。对于函数成员来说，“键”是函数的名字，“值”是函数的“地址”。

1. 模板字符串（P20）

它以“`”符号开头和结尾，代替了普通字符串开头和结尾的单引号和双引号。在这种字符串模板中，可以方便的插入变量。使用模板字符串的另一个优点是，可以跨行，直接产生多行文本。

1. 生命周期钩子（P26）

常用的钩子函数：

beforeCreate()	在实例创建之前调用；
created()	在实例创建之后调用，此时尚未开始DOM编译；
beforeMount()	在挂载之前调用；
mounted()	在实例挂载后调用，这时页面相关的DOM节点已被新创建的vm.$el替换，它相当于JavaScript中的window.onload()方法；
beforeUpdate()	每次页面有新元素需要更新时，在更新之前就会调用beforeUpdate()钩子函数；
updated()	每次页面中有元素需要更新时，在更新之后就会调用update()钩子函数；
beforeDestroy()	在销毁实例之前调用，此时实例仍然有效；
Destroyed()	在实例被销毁之后调用；

1. 数组侦听（P37）

使用标准方法修改数组可以被侦听到：

1. push():尾部添加；
2. Pop():尾部删除；
3. Unshift():头部添加；
4. Shift():头部删除；
5. splice():删除，添加，替换；
6. Sort():排序；
7. Reverse():逆序；

如果彻底替换为一个新的数组，那么可以被侦听到；

如果直接修改数组的元素，那么无法被侦听到，通过使用$set()方法修改元素的内容，只有这样才能被侦听到；

1. 事件对象属性（P52）

标准Dom	类型	读/写	说明
altKey	Boolean	读写	按下Alt键则为true，否则为false
button	Integer	读写	鼠标事件，值对应按下的鼠标键
cancelable	Boolean	只读	是否可以取消事件的默认行为
stopPropagation()	Function	N/A	阻止事件向上冒泡
clientX	Integer	只读	鼠标在客户端区域（当前窗口）的水平坐标，不包括工具栏、滚动条等
clientY	Integer	只读	鼠标在客户端区域（当前窗口）的垂直坐标，不包括工具栏、滚动条等
ctrlKey	Boolean	只读	按下Ctrl键则为true，否则为false
relatedTarget	Element	只读	鼠标正在进入/离开的元素
charCode	Integer	只读	按下按键的Unicode值
keyCode	Integer	读写	按下按键时为0，其余情况下按下按键的数字代号
detail	Integer	只读	鼠标按键的单机次数
preventDefault()	Function	N/A	阻止事件的默认行为
screenX	Integer	只读	鼠标相对于屏幕的水平坐标
screenY	Integer	只读	鼠标相对于屏幕的垂直坐标
shiftKey	Boolean	只读	按下shift键则为true，否则为false
target	Element	只读	引起事件的元素/对象

1. 事件修饰符（P59-60）

.stop事件修饰符	会自动调用stopPropagation()方法，从而阻止事件的继续传播。
.self事件修饰符	仅当一个事件的目标(event.target)是当前元素自身时，才会触发处理函数。
.capture事件修饰符	改变事件流的默认处理方式，从默认的冒泡方式改为捕获方式。
.once事件修饰符	只触发一次事件。
.prevent事件修饰符	使用后程序会自动调用event.prevevntDefault()方法，从而取消事件触发的默认行为。

1. v-model修饰符（P71-72）

.lazy	v-model修饰符	使用后在每次change事件触发后，会对文本输入框的值与数据进行同步。
.number	v-model修饰符	使用后可以将用户输入的值自动转换为数值类型。
.trim	v-model修饰符	使用后可以自动过滤用户输入的首尾空白字符。

1. key属性的作用（P75）

管理可复用的元素。

当Vue.js更新使用v-for渲染的列表时，由于列表都是“就地更新”的，所以复选框仍然保持原来的状态，解决这个问题的办法是对li元素绑定key属性——在v-for的后面添加v-bind:key，将key属性绑定到数据模型中具有唯一性的属性之后，整个迭代元素和数据模型就一一对应，新元素会按顺序插入用来的列表，而不是“就地更新”。

1. v-if与v-show的区别（P76）

1. v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件侦听器被销毁和重建。
2. v-if是“惰性”的，即如果在进行初始渲染时条件为假，则不会渲染，直到条件第一次变为真时，才开始渲染相应的DOM结构。
3. v-show相对简单，不管初始条件是什么，元素总是会被渲染，并且还会基于CSS的display属性进行切换。
4. 通常，v-if的切换开销更大，而v-show的初始渲染开销最大。因此，如果切换非常频繁，优先v-show；而如果在运行时条件很少改变，则使用v-if效果较好。

1.  v-for与v-if一同使用的注意事项（P84-85）

当它们处于同一节点时，v-for的优先级比v-if高，v-for每次迭代都会执行一次v-if，这会造成不必要的计算开销，影响性能，尤其是只需要渲染很小一部分的时候，表现尤为明显。比较好的做法是直接在数据模型中对列表进行过渡，以减少视图中的判断。如果希望有条件地跳过循环的执行，那么将v-if置于外层元素上。

1. 父子组件之间传递数据的方法（P122）

子组件向父组件传递数据：需要使用数据机制来实现。

父组件向子组件传递数据：通过组件的props(属性)和slot(插槽)来实现。

总结起来就是：“从上向下通过属性来传递数据，从下向上通过事件来传递数据。”

1. 单页应用（SPA）

页面结构	一个页面+许多模块的组件
体验效果	页面切换流畅，体验效果更佳
资源文件	公共资源只需要加载一次
路由模式	可以使用hash，也可以使用history
适用场景	对体验效果和流畅度有较高要求的应用不利于SEO
内容更新	相关组件的切换，仅局部更新
相关成本	前期开发成本较高，后期维护较为容易