VUE

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 逻辑层

2. 组件系统

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

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

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

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

   ,
   document.getElementById(“app”)
   )
   }

4. 移动端适配

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

1. 高清图片失真
2. 边框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

淘宝适配

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

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

6. 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  插槽   组件分发  

    封装组件