Vue基础

Vue是什么？

Vue是一套用于构建用户界面的渐进式框架(由简到深)

官网：https://v2.cn.vuejs.org/

Vue的核心：数据驱动

        也就是可以直接控制js数据，来改变页面(html)的内容

Vue的两大特征？

            1、数据驱动视图

               (1)、用数据来更改页面效果

               (2)、数据的变化会驱动视图的根本更新

               (3)、好处：程序员只管把数据维护好，那么页面解构会被Vue自动渲染出来

        

           2、双向数据绑定

        

         （1）、在页面中，form表单负责采集数据，ajax负责题交数据

         （2）、js数据的变化，会被自动渲染到页面上

         （3）、页面上的表单采集的数据发生变化的时候，会被Vue自动获取到，并更新到js数据中

什么是MVVM？

        MVVM是Vue实现数据驱动视图双向绑定数据绑定的和核心原理

        M:模型（model）

        V:视图（View）

        VM:视图模型（view-model）

什么是Vue全家桶？  

        Vue全家桶一般来说指的是脚手架vue-cli、路由vue-Router、状态管理模式vuex、Axios、elementUI等ui框架和打包工具webpack。

基础代码：

 语法格式：

Vue配置项：

        Vue管理的函数，不能使用箭头函数

        el:

                两种写法：1、new Vue时配置el的属性

                                  2、先创建Vue实例，随后再通过 vm.$mout('#app')指定el的值

        data 存放数据

                  两种写法：1、函数式

                                     2、对象式

                    面试题：为啥data是一个函数

                           答：各个组件的实例拥有独立的作用域，data互补影响

     methods: 用来储存事件

     computed : 计算属相

                    面试题：computed 和 watch 有何区别？

                           答：computed要有缓存 watch没有

                                   computed 从现有的数据计算出新的数据   watch监听数据变化执行的handler回调函数

                                     computed多对一  watch一对多

      watch: 监听数据（deep 深度监听）

      filters：过滤数据

                      filters 里的this指向 是 window对象，所以说，在过滤器(filters里面进行this调用的时候）不会访问的data属性，methods以及所有可以this指向得到的数据，在filters里面都无法访问；

   

Vue组件的三部分：

        template-------组件的模板解构、

        script--------组件的JS行为

        style--------组件的样式

Vue指令  ：

 插值语法 ：

                  

     

  V-text :                    

         注释：

                        不可以把带有标签的字符串，渲染成真正的HTML内容        

                        v-text 和插值语法 {{ }} 类似但不相等

                        v-text 会覆盖内部原本内容

                  

 v-bind：

                       

 v-model：（双向数据绑定）

                 

v-on：（事件绑定）

        用来做事件绑定，一般写在Vue实例methods里面的方法，可以绑定为事件

        用法：v-on:触发事件='事件名/事件名( )' 简写：@触发事件='事件名/事件名()'

v-if(判断语句)：

        当 if 里面的条件为真时，显示当前标签，如果不满足，标签不会渲染到页面上，也不会存在于 dom树 中

v-else-if v-else

v-show：

        

面试题： 什么情况下使用 v-if ? v-show?

      答：  理解需求，如果当前的内容确定不会改变的时候使用 v-if ，如果，当前的内容有多种情况会发生改变，使用 v-show

v-for：遍历数组的方法

        面试题：v-if 和 v-for 为什么不建议一起使用

        答：        v-for和v-if不要在同一标签中使用，因为解析时先解析v-for再解析v-if。如果遇到需要同时使用时可以考虑写成计算属性的方式

生命周期：

                

 什么是生命周期？ 

          生命周期就是vue实例从创建到销毁的全过程，也就是 new Vue() 开始就是vue生命周期的开始。Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom-->渲染、更新-->渲染、卸载 等一系列过程，称这是Vue的生命周期

生命周期的钩子函数：

        钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。Vue有8个钩子函数。

                beforeCreate( ){ }  实例创建前

                因为此时vue实例还没有创建，那么就无法访问到 data 中的数据，并且 dom 视图也没有更新，所有的结构都停留在原始的状态

                create( ){ }   实例创建后

                这里是，最早能够调用 data 数据和 methods 方法的周期函数 ，此时，data 数据和 methods 方法已经可以调用，但是 dom 视图并没有更新

                beforeMount( ){ } 实例挂载前

                 在当前生命周期中，页面呈现的是原始 dom 结构，但是此时虚拟 dom 已经创建完成， 在 mounted 生命周期，会覆盖所有的 dom 所有的dom操作，均不奏效

                mounted( ){ } 实例挂载后

                在此周期之前的所有的dom操作，都不凑效，在这里可以做 dom 操作，并且所有的dom操作都能够展现出视图的变化

                beforeUpdata( ){ } 实例（试图）更新前

                在数据更新的时候触发；此时 data 数据是最新的，但是并没有更新到视图上，就是 数据视图内容不同步

                updated( ){ }  实例（试图）更新后

                数据更新后，此时数据是最新的，视图也是最新的，实现了数据 和 视图内容 双同步

                beforeDestroy( ){ }  实际销毁前

                实例销毁前，在这里是最后一次，能够访问的到 data 的数据和 methods 方法的生命周期

                destroyed( ){ }  实例销毁后

                实例销毁后，当触发了这个声明变量的时候，代表者，当前的vue实例已经被销毁的，所有的 data 数据 和 methods 方法，都不能用了

组件传参：

        父传子 在父组件中通过属性的方式向子组件传参  子组件中通过props接收参数

        子传父 在子组件中通过$emit调用父组件的自定义事件 在父组件的自定义事件中通过$event接收参数

        非父子关系：

        ref获取引用

        依赖注入：provide inject

        vuex

        vue2（选项options） envetBus传参”；$parent父对象，$chilren子对象 $root根节点

        

Vue 路由钩子函数

        路由钩子的执行流程，钩子函数种类有：全局守卫、路由守卫、组件守卫。        

        完整的导航解析流程：

                1、导航被触发。

                2、在失活的组件里调用 beforeRouteLeave 守卫。

                3、调用全局的 beforeEach 守卫。

                4、在重用的组件调用 beforeRouteUpdate  守卫（2.2+）。

                5、在路由配置里面 beforeEnter。

                6、解析异步路由组件。

                7、在被激活的组件里调用 beforeRouteEnter。

                8、调用全局的 beforeResolve 守卫（2.5+）。

                9、导航被确认。

                10、调用全局的 afterEach 钩子。

                11、触发 DOM 更新。

                12、调用 beforeRouteEnter 守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入。