Vue的基础技术

一.MVVM模型

1.Vue中MVVM模型，M指的是数据，V指的是页面显示数据，VM是Vue的一个实例对象，通过更改M，由VM将数据传给页面进行渲染

二.事件处理

1.Vue数据代理  Object.defineProperty

Object.defineProperty('对象'，'对象中的变量'，{
vlaue:'',
neumerable:true //控制属性是否可以枚举 枚举就是数组是否可以遍历
writable:true //控制属性是否可以修改 默认false
configurable:true //控制属性是否可以被删除
get:function(){
return '属性'} //  当有人读取的想要的属性时，get（getter）函数就会被调用，且返回你的属性的值
})
set:function('参数值'){
return '属性'} //  当有人修改的想要的属性时，set（getter）函数就会被调用，且返回你的修改的值
})

理解：通过一个对象代理对另一个对象属性的操作 
Vue的数据代理：
原理：
data中的数据就是_data中的数据，Vue把_data中的数据使用Object.defineProperty 进行赋值给了VM实例对象分表给他们指定一个getter与setter进行数据的监听操作 
通过Vm对象代理data对象的属性的操作 好处就是方便获取数据

2.数据处理

(1).点击绑定点击事件传回的参数第一个时event 时节点数据在event.target获取节点
如果绑定事件传入参数时event就会丢失换成传来的数值，你需要把加$event
methods中配置的函数不要使用箭头函数，否则this的指向不是vm了 ，在methodes配置的函数都是被vue所管理的函数，this的指向时vm或组件实例对象

(2).事件修饰符 可以连着写修饰符  如cilck.***.***
在绑定事件时如

 <a  herf='******' @cilck.prevent='***' > </a> //就会停止标签的默认事件 .passive 事件默认事件先执行
//****.stop阻止事件冒泡    ***.once事件只会触发一次 
//***.capture 使用事件捕获模式     捕获阶段时由外向内 而冒泡时有内向外 使用后会先捕获的执行
如 <div @cilck.capture ="***"> 就先执行捕获阶段
        <div @cilck="***">

        </div>
    </div>
//.self 只有获取的event.target才会触发事件如
<div @cilck.self  ="***"> 
        <div @cilck="***">
//点击第二个div时候只有第二个会执行，也可以阻止事件冒泡
        </div>
    </div>

3.键盘事件 

@keyup送下键盘执行

@keydown按下执行

 添加写.enter回车(delet 删除 esc 退出 space空格 tab（配合keydowns使用）换行 up down left right)

(注意)：可以是键盘上所有的键如果是大驼峰命名就需要改为小写两个字母加-如CapsLock 变为caps-lock 
Ctrl alt shiftl  win 键特殊 keydown配合使用

三.计算属性

computed  直接引用且需要添加属性并且有逻辑时候使用computed  如果绑定某个事件时用methods  。当不进行修改的时候可以进行简写去掉set get

定义：要用的属性不存在需要通过已有的属性进行计算
原理：通过数据代理Object.defineProperty提供的gettr与settr
get当被调用时会初次进行读取，然后缓存不会再次调用，当所依赖的数据发生变化时会调用 
set 当修改时调用
优势：computed有缓存而methods 没有 而且效率更高
备注：计算属性会直接出现在vm上直接调用
如果计算属性要被修改那必须写set函数响应修改 且set中要引起依赖的数据发生变化

四.监视属性

//监视的属性必须存在
//Vue中默认不监视对象的内部属性
// 配置deep:ture可以监视内部属性
//Vue自学可以检测对象内部值的变化watch默认不行 根据实际应用进行监听 
监视属性的写法：

watch：{
属性名：{
deep:ture //深度监视所有属性的变化
immediate：true //初始化时让handler调用一下
handler(newvalue,oldvalue){
//监听数据的改变new是新的数据，old是老的数据
  }
 }
}
vm.$watch('**') //灵一种写法
//原始写属性'属性'加' '
// 直接可以拿到的属性可以简写不加' '

 

简写：

watch：{
属性(newvalue,oldvalue){
//监听数据的改变new是新的数据，old是老的数据
}
 //简写无法配置深度监听与初始化  不可以使用监听函数 有Vue管理的不可以使用箭头函数

}
2.

vm.$watch('属性'，function（newvalue,oldvalue）{
//逻辑语言
})

computed与watch的区别
1.computed能完成的 watch也能完成
2.watch能完成的工作  computed不一定能完成 watchj可以进行异步操作
两个重要的原则
1.所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm
2.所有不被vue管理的函数（定时器 ，ajax的回调函数）最好写成监听函数，这样this.的指向才是vm或组件实例对象

五.样式绑定

1.绑定class样式 字符串写法 适用于：样式类名不确定，需要动态指定
2.绑定class样式 数组写法 适用于：样式个数不确定，名字不确定
3.绑定class样式 对象写法 适用于：样式个数确定名字确定，需要动态决定

六.列表渲染

1.key的作用
1.虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据新数据生成新的虚拟DOM随后Vue进行新旧对比。
2.对比规则：
1.旧的虚拟DOM与新的虚拟DOM相同的key若没有发生变化就直接使用之前的真是DOM，若发生了改变则生成新的真是DOM，随后替换掉页面的真是DOM
2.新旧虚拟DOM的不同时，就会创建新的真是DOM
3.用index做key可能会引发的问题：
1.若对数组进行：逆序添加，删除等操作破话顺序操作会产生没必要的真实DOM的更新 效率低
2.如果结构还包含输入类的DOm就会发生错误如iput
4.开发中如何选择key
1.最好用每条数据的唯一标识做key 如id 手机号 学号
2.如果不存在数据逆序操作就可以使用index

六.数据监视

1.Vue会监视data中所有的层次的数据
2.如何监测对象中的数据？
通过setter实现监视，且要new vue的时候就要传入检测的数据
(1) .对象中后追加的属性，vue默认不做响应式处理
(2).如需要给后添加的属性做响应式，请添加一下API：

Vue.set(target,key,value) 或Vm.$set(target,key,value)

3.如何检测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事： 

(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面
4.Vue修改数组中的某个元素使用以下方法：
1.push、pop、shift、unshift、splice、sort、reverse
2.Vue.set 或vm.$set 注意不能给跟数组添加属性

七.数据劫持

数据劫持是利用 Object.defineProperty（）的 getter 和 setter 来监听到属性的变化时做一些事情。当你对数据进行更改时Vue检测到了你修改的数据，将更改的数据进行getter与settr绑定

八.过滤器

定义：对显示的数据进行特定格式后再显示（适用于简单的逻辑处理）
语法：1.注册过滤器：

//全局过滤器
Vue.filter(name,callback)   
//新一个api如methons平级：
//局部过滤器
filter：{}

//全局过滤器 
使用过滤器：

{{*** |过滤器的名字 }} 或 v-bind：属性 ="xxx | 过滤器的名字"

备注：
1.过滤器也可以接收额外的参数，多个过滤器可以串联使用
2.并没有改变数据本身，是产生新的数据

九.Vue的全部内置指令

v-bind：电向数据绑定 可简写为  ：
v-model： 双向数据绑定
v-for：遍历数组/对象/字符串
v-on：绑定事件监听，可简写为@
v-if： 条件渲染删除节点
v-else：与v-if连用只能兄弟间用
v-show：条件渲染隐藏节点
v-text：强制添加内容当有插值语法时就会覆盖插值语法 插值语法不生效
v-html：

1.作用：指向的节点添加HTML结构内容。
2.与插值语法的区别：
（1）.v-html会替代掉节点的所有内容，{{xx}}则不会
（2）.v-html可以识别html结构
3.严重注意：v-html有安全性问题！
（1）.在网站上动态渲染任意html的非常危险的，容易xss攻击
（2.）一定要在可信的内容上使用v-html，永不要用户提交内容上！
v-cloak指令（没有值）：
1.本质是一个特殊的属性，Vue实例创建完毕并接管容器后，会删除v-cloack属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
v-pre：

1.跳过所有节点的编译过程。
2.可利用跳过：没有使用指令语法、没有使用插值语法节点会加快编译。
v-once：
1.v-once所在节点在初次动态渲染后，就视为静态内容不再发生改变。
2.以后数据的改变不会引起v-once所在的结构更新，可以用于性能优化

十.自定义指令

//官方推荐指令名不要使用大写
//自定义指令中this指向windo

//何时会被调用？1.指令与元素成功绑定时调用 2.指令所在的模板被重新解析时候

1.局部指令

(1).自定义指令函数式
相当于加了bind() update()但没有 inserted() 在不复杂的时候使用函数式
 directives：{
            名字（element，binding）{
                逻辑 //element真是DOM  binding所绑定的值
            }
        }

(2).自定义指令对象式
directives: {
            名字：{
                //指令与元素成功绑定时
                bind(){ },
                //指令所在元素被插入页面时
                inserted(){ },
                //指令所在的模板被重新解析时
                update(){ }
            }
        }

2.全局指令

//全局指令对象的写法
Vue.directives（'名字'：{
                //指令与元素成功绑定时
                bind(){ },
                //指令所在元素被插入页面时
                inserted(){ },
                //指令所在的模板被重新解析时
                update(){ }
            }）
//全局指令函数的写法
Vue.directives（
                名字（element，binding）{
                逻辑 //element真是DOM  binding所绑定的值
            }
            ））
备注：1.指令定义时不加v- 用的时候加v-