Vue是“渐进式框架”：vue.min.js只包含了vue最核心的内容「例如：options api、数据处理、template模板视图的解析等操作」；真实项目中我们还会根据需求，导入
Vue是基于MVVM模式构建的框架，它本身实现了viewModel层去监听数据/视图的变化，从而去渲染视图/修改数据，所以我们学习vue主要考虑两条主线
+ Model数据层 + View视图层 最后学习vue的原理，把两条主线关联在一起
`ViewModel`通过双向数据绑定把`View`层和`Model`层连接了起来，而View和Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需要关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。
如何判断数据是否为响应式？
响应式数据 new Vue的时候，在data中指定的数据，vue默认就会对其做劫持处理，所以这些数据是响应式的；
特殊：对于数据来讲，数组本身会做劫持；但是数据中的每一个索引项并没有做劫持；这样是不好的，vue为了解决这个问题，把数组中的7个方法(push/pop/shift/unshift/splice/sort/reverse)进行了重写，后期我们操作这个7个方法，不仅可以修改数据中某一项的内容，而且也会触发视图的重新渲染；
vm.arr=100 这是修改arr的值，触发重新渲染
vm.arr[0]=100 这是修改arr堆内存中的信息，不属于修改arr本身，不会触发重新渲染
vm.arr.splice(0, 1, 100); 基于重写的7个方法操作数据每一项，会重新渲染「推荐」非响应式数据: 自己直接挂在到实例上的是非响应式的数据；
响应式数据 VS 非响应式数据
vm的options API对象中的属性
let vm = new Vue({
//指定视图,将html中的视图元素与vm绑定
el: "#app",
//构建数据模型，挂载需要在视图中渲染的数据，这里的数据都是==响应式数据==
data: {
msg: '<a href="">你好,世界</a>',
num: 8,
arr: [{
id: 1,
title: "今天天气很好"
}, {
id: 2,
title: "很适合学习"
}]
},
/* methods编写普通方法 */
// 1.这样写方法，不论方法咋执行的，也不论在哪执行的，方法中的this是vue的实例「vue内部做了处理」；所以我们不会把其设置为箭头函数(this->window)！！
// 2.methods编写的方法会直接挂载到实例上(不做get/set劫持)，所以可以直接在视图中使用
methods: {
hadle(e) {
console.log('handle', ev.keyCode);
},
submit() {
console.log('submit');
},
fn() {
console.log("fn");
}
},
// 计算属性：依赖于某些数据值，计算出新的值 【多个值变化,影响到一个结果值变化】
**计算**:以函数的形式定义 - **属性**：以属性的形式使用
//【==缓存效果==：依赖的值没变，会用之前计算的值，只有依赖的值变了，才会重新计算】
// - ==这里的this也指向vm==
computed:{
fun1(){}
fun1(){}
},
// ==watch:侦听属性【一个值变化，影响多个结果值变换】==
- **侦听**：watch中的定义的属性名就是我们监控的vm里的私有属性名，当这个私有属性发生变化是，会自动执行watch中对应方法:可以看作是`computed`和`methods`的结合体
**特点**：`watch能够监控路由`，如果不需要监控路由，==我们尽可能的用computed的set方法来代替watch==，原因是computed有缓存
- **注意**：我们监控的对象必须vm里已经存在该私有属性
})computed、watch、methods的区别
computed用法
computed是依赖已有的变量来计算一个目标变量,大多情况下都是多个变量凑在一起,计算出一个变量,并且computed具有缓存机制,依赖值不变的情况下,其会直接读取缓存进行复用.computed不能进行异步操作 多对一
<div>{{funllname}}</div>
<script>
let vm=new Vue({
computed:{
// 以函数的形式定义
fullname(){
return this.first+"-"+this.last;
}
}
})
对象定义方式**：computed中的计算属性本身其实存在两个方法，只是默认获取，`get()和set`方法，原理：使用了Object.defineProperty()中的get/set劫持
computed:{
fullname:{
// 对fullname属性获取时拦截，也是函数定义形式使用的默认方法
get(){
//实现多个值变换，改变一个结果值
return this.first+"-"+this.last;
},
//对fullname属性赋值时拦截
set(val){//val是想赋给fullname的值，也可以说是心值
let arr=val.split("-");
//实现一个值变化，改变多个结果只
this.first=arr[0];
this.last=arr[1];
}
}
} 监听,某一个变量的变化,并执行响应的回调函数,通常是一个变量的变化决定对个变量的变化,watch可以进行异步操作 一对多
watch:{
//fullname就是我们监控的vm实例中的私有属性,存在两个值
//函数式写法
"obj"(newVal,oldVal){
let arr=newVal.split("-");
//实现一个值变化，改变多个结果值
this.first=arr[0];
this.last=arr[1];
},
// 对象式写法
"obj":{
// 这是函数式写法默认用的方法
// handler(newVal,oldVal){...}
//设置对obj的属性是否进行深侦听
deep:true,
// 设置对obj的属性是否在第一次渲染页面时立即侦听一次
immediate:true
}
}指定视图的方法4种
let vm=new Vue({
//方案一：指定页面中存在的DOM元素作为视图
el:`#box`,
//方案二：创建视图
template:`<div>
//最后把数据渲染在这个视图中
</div>`,
//方案四：render渲染视图
render:h=>{
...
}
})
//方案三：挂载视图
vm.$mount(('#app'));Vue构建视图是基于“template”模板语法：template中定义了很多vue内置的语法规范，这些规范不能被浏览器直接识别，需要基于vue进行渲染「流程：根据数据和template视图，把其识别为一个虚拟DOM对象(vnode) -> DOM-DIFF -> 把vnode虚拟DOM变为真实DOM」
vue内部指令
vue修饰符
普通指令：v-xxx
1. 渲染数据的属性`v-text/v-html:[string]`:把数据渲染到指定的容器中
<h2 v-text="msg"></h2>//带标签
<h2 v-html="msg"></h2>//不带标签
<h2>{{msg}}</h2>//小胡子语法{{}}与v-text相同2. v-show:[boolen]控制元素的显示隐藏{原理:控制display='none/block'}；所以这种方式，不论结果是TRUE还是FALSE，元素都渲染出来了，只是display值不同而已！！
<h2 v-show="num>15">{{msg}}</h2>3. v-if/v-else-if/v-else
v-if:[boolean]`:控制元素的显示隐藏，但是和v-show不一样，如果值是false，元素是不进行渲染的(页面中没有这个元素)，只有结果是true，元素才会渲染！！
- ==两者应该分场景使用：==
- `v-else-if:[boolean]/v-else`:与`v-if`联合使用，如果三个组合用，用的标签必须挨着，否则无法生效
<button v-if='num>10'>红色</button>
<button v-else-if="num<10">蓝色</button>
<button v-else="num<20">绿色</button>4. v-for
v-for="(item,index) in xxx" :key="index"`:循环创建元素，实现内容绑定
:xxx是数字,先隐式转换为数组`[1,2,3,4,5]`,再进行逐项循环渲染
<ul>
<li v-for="(item,index) in 5">
{{item}}--{{index}}
</li>
xxx是字符串，先隐式转为数组`[s,t,r]`,再逐项循环渲染
<li v-for="(item,index) in 'str'">
{{item}}--{{index}}
</li>
xxx是数组类型，直接逐项循环渲染
<li v-for="(item,index) in arr" :k='item.id'>
{{item.title}}
</li>
</ul>
为什么在v-for中必须有:key="xxx"属性，并且不能用index？
比如我们用多选框选中了数组中的第二个数据：
- - 如果没有存key值：则浏览器默认认为index=2的数据被选中了，当我们在数组最前面插入数据项，则后面的数据位置都发生了改变，而系统仍然认为index=2的数据项被选中了，这时正确被选中的应该是第三项猜对
- - 如果有:key值，但是:key="index":浏览器回去找:key=2的数据选中，但是当在最前面插入数据项时，后面所有数据的key值，都会跟着改变，结果仍然是不正确的
所以我们为了保证Vue能够跟踪每个节点的身份，从而重用和重新排序现有的元素，==我们应该给每一项提供一个唯一的key属性，且这个key属性不会被改变。
.template与div用v-for的区别
v-for的优先级高于v-if那么就会出现一个问题
<div v-for="(item,index) in arr" v-if=" item>10">{{item}}</div>
以上标签在渲染时，会首先通过`v-for`循环创建3个div标签，再通过`v-if`判断是否符合条件，不符合条件的再被销毁，但这里有item=10的标签并不需要渲染创建再销毁，这样是消耗性能的
//-----------------------------解决方法-----------------------------------------
- template标签：==template标签不会被渲染到页面上,
template里面的div在渲染时已经知道了item值，所以不符合规则的div不会再无用的生成再销毁一次，优化了性能
<template v-for="(item,index) in arr">
<div v-if="item>10">{{item}}</div>
</template>5.v-on
`v-on:[事件]="要执行的方法"`：缩写为`@事件="要执行的方法"
原理基于DOM2事件绑定实现的 addEventLinstener冒泡事件==【好处是，后期获取到这个DOM元素对象，再做事件绑定，也不会和@click绑定的方法冲突】
*以下写法都是点击的时候才会把handle执行
原生中
button.addEventListener('click',handle(10,20)) 不等点击 handle就已经执行了
button.addEventListener('click',handle.bind(null,10,20)); 这样才是基于bind预先把handle中的this和值处理好，点击的时候，才会执行handle
<button @click="handle">按钮</button>
<button @click="handle(10,20)">按钮</button>
<button @click="handle(10,20,$event)">按钮</button>点击事件的修饰符
-..passive` `@click.passive`:当我们在监听元素滚动事件的时候,会一直触发onscroll事件,在pc端没有啥问题,但是在移动端会让网页变卡,因此我们使用这个修饰符的时候想到相当于给onscroll事件整了一个lazy修饰符
键盘事件的修饰符
@keydown/@keyup/@keypress
`left/right/middle` **鼠标左中右按键**
自定义按键修饰符
- `Vue.config.keyCodes.a=65;`
- `@keydown.a='xxx'`
- `@keydown.65='xxx'`组合按键
@keydown.ctrl.65="xxx"`:按下ctrl+a就会触发
- 默认情况下，按下的按键只要包含组合键(==哪怕还按了其他键)==也会触发，但是我们可以基于.exact修饰符，设置精准匹配(只有按下规定的键，其他键不按，才会触发)
- `@keydown.ctrl.65.exact`:只有按下ctrl+a才会触发
- `@click.exact`:只有只点击了单击按键时触发
6. v-bind
给元素的attribute动态绑定值
`v-bind:xxx="xxx"`:简写为`:xxx="xxx"`给元素的attribute动态绑定值
动态绑定class
动态绑定style：
样式需要用驼峰命名法
修饰符
..camel``:sup-name.camel`:把设定的`sup-name`自动转为camel规范=>`supName`
.prop `:supName.prop`
- 默认情况下，给元素设置的属性都会呈现在元素的结构上，我们可以基
getAttribute/setAttribute来设置获取；
- 但是设置了prop修饰符，设置的自定义属性不在结构上，不再html结构中显示，而是放到了DOM对象的堆内存中
- 给元素设置自定义属性有两种方式
- - 方式一：写在结构上，`<div index="8"></div>`,用`setAttribute、getAttribute`
- - 方式二：写在堆内存中，box{index:8},用`box.index=8、box.index`
.sync:supName.sync
性能优化指令
7. v-pre让元素及其后代元素跳过编译
8. v-once控制元素或组件的编译次数
9. v-clock延迟显示元素
用法：
<style>
[v-clock]{
display:none;
}
</style>
<div v-clock></div>10. v-model
v-model`:实现==视图更新控制状态修改==
- 实现原理：
修饰符
.lazy把监听事件从input换成change*
.number`规定输入的内容必须是数字格式
文本框中默认输入的内容都是字符串格式，设置了这个修饰符，vue内部会把输入的内容自动转换为数字(如果出现非有效数字字符，则会把非有效字符及以后的内容干掉)
.trim自动去除输入内容的首尾空格
能够用v-model的修饰符的标签类型有：`input/textarea、select(option)、input[type='radio']、input[type='checkbox']`
select下拉框
<select v-model="city">
<option value="">请选择</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>
<script>
let vm = new Vue({
data: {
city: 'beijing'
}
})
vm.$mount('#app')
</script>在radio点选框中
<input type="radio" name="sex" :value="0" v-model="sex">男
<input type="radio" name="sex" :value="1" v-model="sex">女
let vm = new Vue({
data: {
sex: 0
}
})
vm.$mount('#app')在checkbox多选框中
<input type="checkbox" name="hobby" value="jump" v-model="hobby">音乐
<input type="checkbox" name="hobby" value="movie" v-model="hobby">电影
<input type="checkbox" name="hobby" value="music" v-model="hobby">跳舞
<input type="checkbox" name="hobby" value="read" v-model="hobby">阅读
let vm = new Vue({
data: {
hobby: ['jump', 'read']
}
})
vm.$mount('#app')vue2.0中如何使用过滤器？
vue1.0中存在自带的过滤器
vue2.0中需要在vm实例options API的filters里定义局部过滤器，也可以用Vue.filter定义全局过滤器
- 能够用filter过滤器的有`{{}}(小胡子语法)`和`v-bind指令`
Vue.filter("uppercase", function (value) {
console.log(value); //msg abc
return value.toUpperCase();
})