Vue
作者:尤雨溪
框架:MVVM
渐进式的Javascript框架
框架与类库的区别?
举例:
jquery好处:1.抹平了各个浏览器之间的差异
2.链式操作DOM
套餐
框架:全家桶
渐进式:vue只会包含核心语法,如需其他功能需要单独安装,例如:路由 vuex 前后端数据交互的方式
什么是MVVM?
mvc:model view controller 大多数会用在后端
MVVM: 大多数用在前端
M:model层 数据层 数据的增删改查的操作
V:view层 视图层 类似于这个html一样的模板 主要用来做展示
VM:viewModel层 mode层与view之间的一个映射层 联系model和view层
vue最大的优点 MVVM最大的优点
数据驱动视图
1.MVC MVVM
2.传统的DOM渲染过程:
html解析器,生成dom树
css解析器,生成行间样式表
3.,回流和重绘(博客-设计模式-单例模式)
回流:只要文档布局发生了改变那么就会发生回流
重绘:当前元素对自己本身的样式进行改变,
4.虚拟DOM的理解
真是的JS对象
操作内存中的js对象要比 操作DOM节省性能
vue的副本使用
vuejs官网
5.模块
v-text:
底层原理:innerText
作用:渲染数据
v-text的指:任何js表达式
简写:{{}}
v-html:
底层原理:innerHTML
作用:渲染数据
v-html的值:任何js表达式
简写:{{{}}} 注意这个方法现在已经被淘汰了 vue1.0
v-show:显示隐藏
值:布尔值
true为显示
false为隐藏
原理:操作元素的display属性
v-if:显示隐藏
值:布尔值
true为显示
false为隐藏
原理:操作元素的DOM节点增加和删除
v-else-if
v-else
注意在使用v-else-if v-else 前面必须要有v-if
面试题:
v-if与v-show的两个区别
前者是操作元素的DOM节点创建元素和删除元素
后者是操作元素的display属性
使用场景:
单纯的元素显示隐藏,不会涉及到权限.安全.页面展示的情况下一般使用v-show
如果涉及到权限(例如vip权限).安全 .页面展示的情况下用v-if
v-for
语法:v-for="(数组中的值,数组中的下标) in 需要遍历的数据"
v-bind:绑定属性
属性:id class style src title href....
v-bind:简写:属性名称
v-on:事件的绑定
vue所需用到的一些事件函数必须放在methods中
v-on:click
v-on:dblclick
v-on:mouseover
修饰符:做事件的修饰
用法:v-on:事件mingc.修饰符.修饰符
一个事件可以有多个修饰符
.stop 阻止事件冒泡event.stopPropagation()
.prevent 组织浏览器默认事件event.preventDefault()
.once 只会触发一次回调
.enter 按下回车的时候
.13
如果需要在事件中用到事件对象,需要在事件函数中传递一个$event
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
v-once:只会渲染一次数据
当数据发生改变的时候,凡是加v-once指令的标签数据不会发生改变
v-pre:不解析{{}}中的数据,包括{{}}
v-cloak:防止第一次渲染的时候{{}}的出现
v-model:实现双数据绑定
使用的元素:form表单的元素都可以使用v-model
面试题:
v-model实现双数据绑定的原理?
底层用了一个object.defineProperty() 做数据劫持 检测当前对象数据发生了变化,就会触发一个方法getter/setter
如何做到数据劫持:(vue.js中的深入响应式原理 详见:https://cn.vuejs.org/v2/guide/reactivity.html#ad)
VUE3.0中废除掉了Object.defineProperty 换成ES6的proxy() (详见:https://www.cnblogs.com/nanianqiming/p/9164097.html)
回流(reflow)和重绘(repaint)
回流:当render tree的一部分或者全部的元素因改变了自身的宽高.布局,显示或隐藏,或者元素内部的文字结构发生变化,导致需要重新构建页面的时候,回流就产生了
重绘:当一个元素自身的宽高,布局,及显示或者隐藏没有改变,而只是改变看元素的外观风格的时候,就会产生重绘.
回流必定出发重绘,而重绘不一定触发回流
触发回流的css属性:
触发重绘的:
避免回流的方法:
- 不使用以上能触发图层回流的属性.
- 建立一个图层,让回流在这些图层里面进行,限制回流和重绘的范围,减少浏览器的运算工作量
