vue 框架

1.vue vue 是一套构建用户界面的渐进式框架 偏向于 视图层 view (component 组件) API 齐全 简单明了 的前端框架 vue 采用自下而上的增量开发设计 vue 实现 单页面应用 SPA single page appliaction 通过路由匹配组件和数据 (vue-router)

设计模式

单例模式 工厂模式 代理模式 发布订阅模式 观察者模式

设计思想 MVC ===> angular1/angular2 react

M model 数据层 data V view 视图层 组件/模板/html C controller 逻辑层 函数

MVVM ===> vue (不完全遵循) M model 数据层 data binding V view 视图层 DOM listen VM viewmodel VM实例对象 通过vue把数据 data 和视图 html 绑定在一起

MVP m model 数据层 v view 视图层 p presenter 逻辑层

组件系统

因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用

组件就意味着 由虚拟dom组成 抽象层 virtual DOM

一个组件本质上是一个拥有预定义选项的一个 Vue 实例

渲染函数 render vue render(createElement){ return createElement(

, document.getElementById(“app”) ) }

移动端适配

rem 当前页面的根节点 (HTML) 的字体大小 vw 当前设备屏幕宽度 1/100 响应式的值

响应式 根据不同的手机设备宽度 来等比例 变换当前的rem 等比缩放

当前设计稿宽度 ps = 640px 假定当前设计稿宽度 1rem = 100px

ps/screen = psRem/screenRem

640/320 = 100px/ 50px;

div 200px/100px; 90px/45px 0.9rem/0.9rem 1rem = 100px / 1rem = 50px

设计稿宽度 设计稿rem 手机机型 手机宽度 div宽度 divRem宽度 当前rem div实际宽度 换算实际宽度 640px 100px 4s/5/5s 320px 200px 2rem 50px 100px 50px*2

117px 6/7/8 375px 200px 2rem 58.59px 200:w=640:375 58.59px*2

淘宝适配 flexible

高清图片失真边框1px 问题 rem/vw 响应式 em rem iphone6 设计基准原型 375px 640px;

视窗 viewport 宽度 默认宽度 走 PC宽度 980px

px 物理像素(physical pixel)

物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件

ppi dpi 每一px 的单位面积内(一个小点)里面有多少个物理单位

设备独立像素(density-independent pixel) 设备独立像素也称为密度无关像素 手机 可以认为是计算机坐标系统中的一个点

css像素 px CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容

屏幕密度 屏幕密度是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算(PPI)。

设备像素比(device pixel ratio)

设备像素比简称为dpr

设备像素比 ＝ 物理像素 / 设备独立像素

dpr = pt / px (1px 里面有多少个物理像素 ) = 2pt / px = 2 = 3pt/px = 3

window.devicePixelRatio

淘宝适配

根据手机设备dpr 放大 viewport 让 设计走最小的物理像素

2.根据rem 进行等比缩放 把设备分为100等分,每一份就一a ,1rem= 10a

vuex

.vue 1.0 // vm 实例化 Vue 得到的对象 // vm 遍历 #App 下面的 DOM 和 data 结合在一起 // el 指定vue 作用的范围 document.querySelector(el) // data 需要绑定的数据 MVC - MVVM - MVP Model 数据层 // {{ }} 双大括号语法 插值表达式 绑定数据 // v-bind 绑定属性 // v-on 绑定事件

vue 1.1 v-bind 绑定属性 : 缩写 v-on 绑定事件 @ 缩写 v-if if 隐藏 渲染和不渲染的区别 v-show 显示和隐藏 display:none 样式切换

methods 指当前 app 下绑定的方法 v-for 遍历数据 v-model 表单输入和应用状态之间的双向绑定 v-model 只能用于 input 或者 textarea v-model 封装语法糖 事件监听 数据绑定 v-model 实现数据双向绑定 1. 修改 数据 model 更新 view DOM 2. 修改 view DOM 更新数据 v-model 指令把 DOM(视图) 和 数据（model）绑定在一起 当你修改 view 触发DOM Listeners 就马上去 修改对应的model 的值 当你修改 model(data) 中的值 马上去执行 data-bindings 去 修改对应 DOM

1.2

生命周期钩子函数 伴随 Vue 实例在被创建时都要经过一系列的初始化过程 数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 钩子函数意义 给了用户在不同阶段添加自己的代码的机会 实例创建阶段 beforeCreate created 实例载入阶段 beforeMount mounted 实例更新阶段 beforeUpdate updated 实例销毁阶段 beforeDestroy destroy

1.3

v-once 你也能执行一次性地插值，当数据改变时，插值处的内容不会更新 v-html 解析 HTML 标签 变量 v-bind v-on 指令 (Directives) 是带有 v- 前缀的特殊特性 作用 操作底层DOM

1.4

data 适用简单的逻辑 计算属性 computed 复杂逻辑 依赖 data 某个数值 计算属性有缓存 只有当前 计算属性依赖的值 改变 才会重新计算求值 getter setter 侦听属性 watch 监听某个数值 该数值发生改变 执行对应的 函数 处理相关逻辑

1.5 v-if 是“真正”的条件渲染 确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建 v-if 有更高的切换开销 在运行时条件很少改变 v-if 较好

v-show 元素总是会被渲染，并且只是简单地基于 CSS 样式 进行切换 v-show 有更高的初始渲染开销 非常频繁地切换 使用 v-show 较好 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级 v-if 在前面 v-for 遍历对象/ 数组 v-for="(todo,i) in todos" v-for="(value,key,index) in object" key 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性

1.6

Vue.set Vue.delete vm.$setvm.$delete 数组操作 引用数值类型 1. 变异数组方法 触发vue 视图更新 改变原数组 push() pop() shift() unshift() splice() sort() reverse() join()

2. 非变异数组方法 不会改变原数组 无法触发Vue视图更新 返回新的数组 filter() concat() slice() find()

1.7

vue v-on:click @click input change click dbclick keyup keydown keypress mousemove mousedown mouseup touchstart touchmove touchend

原生绑定事件 onclick="do()" document.getElementyById("box").onclick = fn; addEventListener("click",fn,false/true) true 冒泡 false 捕获 removeEventListener("click") jquery 绑定事件 on / off bind / unbind click() 事件委托===> 基于事件冒泡的原理 把子元素的触发 父元素代替子元素执行 $(parent).on('click',child,fn); $(parent).delegate(child,'click',fn); 事件修饰符 .stop .prevent .capture .self .once 按键修饰符 enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方： 双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： | 文本格式化 | 管道符 声明这是过滤器 pipe 管道符 过滤器 全局注册 局部注册

1.8

// 深拷贝 浅拷贝 // 3. 可变对象 数组 / 对象 修改某一项属性的值 没有真正修改 // 修改 可变 响应式系统无法检测 vue没法检测到数据变化 深度监听 // 4. 不可变对象 string/number/boolean // 修改 不可变对象 Vue 响应式系统 可以检测

1.9 自定义指令

Vue 也允许注册自定义指令 操作底层DOM元素 v-bind v-on v- 开头 指令定义 focus 指令 v-focus name：指令名，不包括 v- 前缀。 value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。 expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。 arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。 modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。 myShow 驼峰命名 v-my-show

2.0 组件 Vue 组件 当做 小型 Vue 实例 且带有一个名字 包含 一段 HTML 和相关 业务逻辑的代码块 显示内容 展示数据 修改数据

组件名称和标签 名称 不能 一致 data 必须是一个函数 必须返回对象 独立 小巧 可复用 的单元个体 组件只能有一个顶层标签

2.1 组件组织关系

组件的组织 关系 1. 父子组件 <Parent> <Child/> </Parent> 2. 兄弟组件 <Child1/> <Child2/> 组件的通信 1.父组件访问子组件 a.props b.refs d.事件机制 c.vuex 2.子组件访问父组件 3.兄弟组件 访问 props 属性 传递数据 用于 父组件给 子组件传递数据 ref a. 作用于组件 指向这个组件 b. 作用某个DOM 元素 指向当前的DOM 动态切换组件 1. v-if/v-show 2. 路由 3. component 组件 is 属性 组件分发 slot 写在 子组件 接收 父组件动态传递子组件内容 片断 slot 插槽 组件分发 封装组件