VUE详解
渐进式框架
声明式渲染（无需关心如何实现）、组件化开发、客户端路由（vue-router）、大规模的数据状态（vuex）、构建工具（vue-cli）
全家桶：vue.js+vue-router+vuex+vue-cli+axious
Vue核心知识点
数据驱动(主要操作的是数据)
数据变化会导致视图自动更新
组件化开发
框架的模式
MVC单项的数据绑定
- 只能通过改变数据来改变视图
MVVM 双向的数据绑定
- 视图发生改变，数据也会跟着变
- 数据发生改变，视图也会跟着改变
vue的使用方式
1、采用cdn：
<script src="https://unpkg.com/vue"></script>
2、在需要的项目中安装vue模块 npm install vue，安装之后导入vue.js文件
跑环境
初始化package.json文件，在项目中执行npm init -y可自动生成一个默认的package.json文件；
由于项目依赖的模块较大，每次上传下载同步都很浪费时间，所以我们只需要上传package.json文件，里面写了所有的依赖模块，我们同步下来之后只需要在需要的项目中打开cmd窗口执行npm install，就可以把项目依赖的模块下载到；
vue中数组的变异方法（能改变原数组）
如果data中属性的值是一个数组，如果想改变数组中内容，只能使用原生的会修改原数组的方法进行修改，普通的 数组[索引]=值 不行；
操作数组的方法：（以下方法都会修改原数组）
- unshift、push、shift、pop、splice、reverse、sort
vue中常用的(以下方法都为声明式方法，for循环为编程式方法，能清晰的看到每一步)
- forEach、filter、map、some、every、reduce、find(ES6)
forEach，for，for in，for of的区别
forEach：不支持返回值，只是普通的循环遍历for in：key输出的值为字符串类型，包括把数组当成对象添加的属性也可以遍历出来for of：只返回具有数字索引的属性。这一点跟for…in循环也不一样。（不能遍历对象）
let arr = [3, 5, 7]; arr.foo = 'hello'; for (let i in arr) { //for in是把arr当成对象遍历，i是属性名，包括arr的私有属性 console.log(i); // "0", "1", "2", "foo" } for (let i of arr) { //for of是把arr当成数组遍历，i是数组中的每一项 console.log(i); // "3", "5", "7" } for of循环不会返回数组arr的foo属性 如果只想拿到索引，可用keys()方法 for (let index of ['a', 'b'].keys()) { console.log(index); } // 0 // 1 如果两个都想拿到，可用entries()方法 for (let (index, elem) of ['a', 'b'].entries()) { console.log(index, elem); } // 0 "a" // 1 "b"
把Vue当成对象添加的私有方法
全局过滤器：Vue.filter(方法名,方法)；相当于给全局过滤器中增加了一个方法（一次只能增加一个）
Vue.filter('my',data=>{return data})；
//页面中使用
<div id="app">
{{count|my}}
</div>
创建一个全局组件：Vue.component(自定义标签名,需要配置的参数)
//js代码 Vue.component('my-hand',{ template:'<h3>{{msg}}</h3>', data(){ return {msg:'我很英俊'} } }); let vm=new Vue({ el:'#app' }) //页面中使用 <div id="app"> <my-hand></my-hand> </div>
初始化vue时传入对象中的属性
el：
表示vue的属性和方法对哪个DOM根元素起作用（对它的后代元素也起作用）
data ：
data中的内容表示需要双向绑定时用到的数据，写在data中的属性都会挂载到当前Vue的实例上；（可以直接用vm.msg来调用）；
methods ：
methods中的方法也将挂载到Vue的实例上。可以直接通过vm实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue的实例。
在指令表达式中使用方法的时候，如果方法名后面不写括号，则会默认传入事件对象MouseEvent。写括号代表要传递参数，而不是直接执行，要手动传入事件对象$event。
注意：
- 1、methods中的方法名不能和data中的变量名一样，因为都会挂载到vue的实例上，重名会报错
- 2、不应该使用箭头函数来定义method中的方法，因为使用箭头函数会改变函数中的this，而我们要保证方法中的this都是vue的实例
- 3、{{}}中执行method中的方法，方法后面必须要加（），才代表执行
filters：
允许你在filters中定义自己的过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号中和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号“｜”来指示；
注意:
1、filters方法中的this都是window
2、｜后面的方法执行的时候，会默认的把｜之前的值当作第一个参数传递给｜后面的方法 ;
3、filters中的方法在{{}}中执行的时候，可以不写括号；
<!-- 在双花括号中 --> {{ message | toFixed(2)}}//toFixed方法执行时不改变原数据，只是改变message的显示效果 <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | toFixed"></div> filters: { toFixed(val,pra){ return '￥'+val.toFixed(pra); } }
computed
计算属性（会有缓存），不是方法：某一个属性的值依赖于其他值的改变而改变时，可使用computed，把需要绑定的属性写在computed中，只会跟依赖的值产生关系。属性中默认会有set和get方法，如果把计算属性写成函数，则默认只调用get方法（get方法必须要有返回值）；computed不支持异步；
watch:
监听属性（默认只监控所给属性的第一层）：watch中的方法名应该与data中的要监听的属性名相同。只有当
监听的值发生变化的时候才会触发对应的方法；watch支持异步，当需要异步的时候，watch还支持设置中间状态；如果想要深度监控，则需要写为对象的形式，并且修改deep：true来实现深度监控；
计算属性和方法的区别：
1、缓存：计算属性会根据依赖的属性（归vue管理的数据，可以响应式的变化）进行缓存，只有在它的相关依赖发生改变时才会重新求值；
2、在{{}}中使用的时候，方法名后必须要加（）来执行，而计算属性如果不需要传递参数，则不需要写（）；
3、方法是不管数据有没有发生改变，都会重新计算，且get方法必须有返回值；
什么时候用computed什么时候用watch：
当数据依赖于多个值的改变而改变时，我们就需要用computed；
<div id="app"> <input type="text" v-model="val"> {{fullName}} </div> let vm=new Vue({ el:'#app', data:{ val:'', firstName:'zfpx', lastName:'zy' }, computed:{ fullName(){ //只要依赖的其中一个值改变，就会执行此方法； return this.firstName+this.val+this.lastName; } } });
当监听的值发生改变的时候，数据需要跟着变，就要用watch，需要异步操作的时候，就必须用watch；
let vm=new Vue({ el:'#app', data:{ val:'', firstName:'zfpx', lastName:'zy', fullName:'' }, watch:{ //val的值改变了才会触发下面的方法,而且会默认传入两个参数，新的值和老的值 val(newV,oldV){ this.fullName=this.firstName+this.val+this.lastName; } //如果写成一个函数的形式（如上的形式），则只会监控第一层级属性对应的值，第一层级的值发生改变才会触发函数执行；如果要实现深度监控，则要写成如下对象的形式,将deep深度监控属性赋值为true； val:{ //监控时发生改变就会触发此方法，方法名必须是handler handler(newV){ localStorage.setItem('todo',JSON.stringify(newV)); }, deep:true } } });
{{}}：其中可放表达式、可以放赋值运算、计算、三元运算符（尽量少写逻辑运算）
vue的实例拥有的属性
此处的this是vue的实例
this.$datavm上的响应式的数据，是个对象this.$watch监控this.$el挂载的DOM根元素this.$set后加的属性实现响应式的变化this.$nextTick(()=>{})异步方法，渲染DOM完成后获取到需要的最新的数据this.$refs.xxx获取ref值为xxx的vue对象（可通过this.$refs.xxx.$el获取DOM元素）（通过v-for循环出来的可以获取多个，否则只能获取一个）
尽管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用的值。如：
<div id="parent">
<user-profile ref="profile"></user-profile>
</div>
为什么data中的属性会出现响应式的变化?
vue会循环data中的属性，依次增加getter和setter方法，来实现响应式的变化。（只有data中的属性会被增加getter和setter方法，下面的例子中属性a中的school属性不会被增加）
使用实例.$set可以给对象添加响应式的数据变化例如：vm.$set(vm.a,'school',1)
let vm=new Vue({ el:'#app-3', data:{ msg:'zhufeng'， a:{school:''} } methods:{ } });
