VUE详解

渐进式框架 
声明式渲染（无需关心如何实现）、组件化开发、客户端路由（vue-router）、大规模的数据状态（vuex）、构建工具（vue-cli） 
全家桶：vue.js+vue-router+vuex+vue-cli+axious

Vue核心知识点

数据驱动(主要操做的是数据) 
数据变化会致使视图自动更新 
组件化开发

框架的模式

MVC单项的数据绑定

• 只能经过改变数据来改变视图

MVVM 双向的数据绑定

• 视图发生改变，数据也会跟着变
• 数据发生改变，视图也会跟着改变

vue的使用方式

一、采用cdn：<script src="https://unpkg.com/vue"></script> 
二、在须要的项目中安装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。 
注意：

• 一、methods中的方法名不能和data中的变量名同样，由于都会挂载到vue的实例上，重名会报错
• 二、不该该使用箭头函数来定义method中的方法，由于使用箭头函数会改变函数中的this，而咱们要保证方法中的this都是vue的实例
• 三、{{}}中执行method中的方法，方法后面必需要加（），才表明执行

filters：

容许你在filters中定义本身的过滤器，可被用于一些常见的文本格式化。过滤器能够用在两个地方：双花括号中和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号“｜”来指示； 
注意: 
一、filters方法中的this都是window 
二、｜后面的方法执行的时候，会默认的把｜以前的值看成第一个参数传递给｜后面的方法 ; 
三、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来实现深度监控；

计算属性和方法的区别：

一、缓存：计算属性会根据依赖的属性（归vue管理的数据，能够响应式的变化）进行缓存，只有在它的相关依赖发生改变时才会从新求值； 
二、在{{}}中使用的时候，方法名后必需要加（）来执行，而计算属性若是不须要传递参数，则不须要写（）； 
三、方法是无论数据有没有发生改变，都会从新计算，且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.$data vm上的响应式的数据，是个对象 
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:{
        }
    });