Vue基础学习

时间 2019-12-02

标签 vue 基础学习繁體版

原文原文链接

Vue

1、概念

中小型企业适合用Vuecss

大型公司通常用reacthtml

做者：尤雨溪vue

一、框架和类库的区别：

举例：jQuery好处：抹平了各个浏览器之间的差别链式操做domreact

相似于一个套餐git

框架：是一个总体相似于全家桶性能的优化，方法的实现 es6

UI框架：bootstrap面试

二、概念：

Vue是MVVM框架ajax

是渐进式的JavaScript框架正则表达式

渐进式：只包含核心语法，若是须要其余功能须要单独安装例如路由vuex 先后端数据交互的方式vue-router

好处：便捷不繁重（有须要才去安装）

什么是mvvm

mvc：model view controller

mvvm：

M层：model层数据层数据的增删改查

V： view层视图层类十余html同样的模板主要用来做展现

VM： viewModel层 model层与view层之间的一个映射联系model层和view层

例如：数据层发生改变视图层也会跟着发生改变

数据驱动视图

2、vue基本使用

一、安装

vue不支持IE8及如下的版本

cdn引入

npm install vue下载

二、建立实例

<div id="app">
    <h2>
        {{message}}
    </h2>
    
</div>
<script src="./vue.js"></script>
<script>
let  vm =  new Vue（{

        //做用：vue起做用的范围

            el:"#app",//document.querySelector

    // 当前组件所须要的状态（vue所须要的属性）

    data：{
            message：“xa-1901”
    }

}）
</script>

三、指令

v-text 简写：{{}}

底层原理：innertext 做用：渲染数据 v-text的值：任何js表达式

<div id="app">
    <h2 v-text="message"></h2>
    <h2 v-text="arr[0]"></h2>
    //当vue没有引入时就是标签添加一个属性
    //简写
    //当vue没有引入时就是不能识别{{}}，页面会显示{{}}
    <h2 >{{message}}</h2>
    <h2>{{ arr[0]}}</h2>
</div>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"xz1901"，
            arr:[10,20]
        }
    })

</script>

v-html

v-html:html

做用：渲染数据

底层原理 innerHTML

v-html的值：任何js表达式

能不用最好不用，不安全

<div id="app">
    <h2 v-html="message"></h2>
    <h2 v-html="arr[0]"></h2>

</div>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"<h4>xz1901</h4>"，
            arr:[10,20]
        }
    })

</script>

v-if

v-if:显示隐藏值：布尔值 true：显示 false：隐藏原理：操做dom节点

v-show

v-show:显示隐藏值：布尔值 true：显示 false：隐藏原理：display属性

v-if v-else v-else-if

限制：v-else v-else-if前面必须有v-if 做用：链式调用

<div id="app">
    <h2 v-html="message"></h2>
    <h2 v-html="arr[0]"></h2>
    <hr>
    <h2 v-show="flag">{{message}}</h2>
    <h2 v-if="flag">{{message}}</h2>
    <hr>
    <h2 v-if="cases == 1">周一</h2>
    <h2 v-else-if="cases == 2">周二</h2>
    <h2 v-else-if="cases ==3">周三</h2>
    <h2 v-else-if="cases == 4">周四</h2>
    <h2 v-else="cases == 4">周四</h2>
    
</div>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"xz1901"，
            arr:[10,20]，
            flag:false
        }
    })
    
</script>

v-for

语法：v-for="(数组中的值,数组中的下标) in 须要遍历的数据"

<div id="app">
    <p v-for="(item,index) in data.arr">{{item}}----{{index}}</p>
    <p v-for="(item,key) in obj">{{item}}----{{key}}</p>
    <div id="box">
        <div v-for="(item,index) in res">
            <p>{{item.name}}</p>
            <p>{{item.age}}</p>
         </div>
     </div>

</div>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            arr:[10,20]
        }
        obj：{
        name：“张三”，
        age：19，
        sex：“nv”
    },
    res:[
            {name:"lisi",
            age:20,
            sex:"nv",
            },
            {name:"wangwu",
            age:19,
            sex:"nv",}
        ]
    })

</script>

v-bind

v-bind:绑定属性 id class style src title href 简写 :简写名称

<div id="app">
    <div v-bind:id="id">
        
    </div>
    <div :class="myclass">
        
    </div>
     <div :class="myclassArr">
        
    </div>
     <div :class="myclassObj">
        
    </div>
    <div :style="mystyle">
        
    </div>
    <img :src="path" :title="title">


</div>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            id:"box"，
            myclass:"box1 box2",
            myclassArr:["box1","box2"],
            myclassObj:{
                        "content1":true,
                        "content2":false,
                        },
              myStyle:{
                     color:"red",
                     },
              path:"baidu.com",
              title:"一张图片"
        }
       
    })

</script>

v-on

v-on:事件绑定 v-on:click v-on:dblclick v-on:mouseover 简写方式 v-on ---->@ 用法： v-on:事件mingc.修饰符.修饰符一个事件能够有多个修饰符

修饰符：

stop 阻止冒泡 prevent 阻止浏览器默认行为 once 只会触发一次 keydown 按下某个键出发 keydown.enter keydown.enter 按下enter键

若是在时间中用到事件对象，须要在事件中传入$event

<div id="app">
    
    <div id="box" v-on:click="handle(abc)"><div>


</div>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{  
        },
        //当前vue所需的一些事件函数必须放在methods
        methods:{ 
            handle(ddd){
                console.log（1234567）
        }
    })

</script>

v-model

实现双数据绑定使用的元素：form表单的元素可使用v-model vue3.0中废除了 object.defineProperty() 换成es6的Proxy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <form action="" >
            <label for="">男：<input type="radio" v-model="radioVal" value="男"></label>
            <label for="">女：<input type="radio" v-model="radioVal" value="女"></label>
        </form>
        <div>您的性别是:{{radioVal}}</div>
        <hr>
        <form action="">
            <label for="">篮球 <input type="checkbox" value="篮球" v-model="checkVal"></label>
            <label for="">足球 <input type="checkbox" value="足球"v-model="checkVal"></label>
            <label for="">排球 <input type="checkbox" value="拍球" v-model="checkVal"></label>
            <label for="">乒乓球 <input type="checkbox" value="乒乓球" v-model="checkVal"></label>
            <h3>您选的爱好是：</h3>
            <div v-for="item in checkVal">{{item}}</div>
           
        </form>
    </div>
</body>
</html>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
    el : "#app",
    data : {
        radioVal:"男",
        checkVal:[],
    },
    methods:{
   
    },
    
})
    
</script>

v-pre

v-pre:不解析{{}}中的数据包括{{}}

v-once

只会渲染一次数据

当数据发生改变的时候加v-once指令的标签数据不会发生改变

v-cloak

防止第一次渲染的时候{{}}的出现

<html>
<body>
    <div id="app">
        <div>{{box}}</div>
        <!-- 只改变一次 -->
        <div v-once>{{box}}</div> 
         <!-- 原样输出 -->
        <div v-pre>{{box}}</div>
        <button @click=handle1>按钮</button>
    </div>
</body>
</html>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            box:"1901",
        },
        methods:{
            handle1(){
                this.box="1902";
            },
        }
    });
    
</script>

建立自定义指令

a、定义：

一、全局自定义指令 directive

二、局部自定义指令 directives

做用范围不一样写的位置不一样

全局指令：

b、语法：

Vue.directive(参数1，参数2)

参数1，指令的名称

参数二、指令实现的方法

参数1：当前元素做用在哪一个元素上

参数2：是一个对象

modifiers：修饰符

value：指令的表达式

expression：表达式

c、注意：

Vue.directive必须写在实例化以前

会有生命周期

Vue.directive('ccc',(el，{modifiers，value}))=>{

    console.log("我是自定义制定")

}

d、拖拽案例

<style>
    #box{
        width:200px;
        height:200px;
        background:red;
        position:absolute;
    }
</style>
<div id="app">
    <div id="box" v-drag></div>
</div>
<script src="vue.js"></script>
<script>
    Vue.directive("drag",(el,{modifiers,value})=>{
        // console.log(rest)
        var ofX,ofY
        el.addEventListener("mousedown",downCallback);
        function downCallback(e){
            //鼠标在当前元素内部的位置
            ofX = e.offsetX;
            ofY = e.offsetY;
            document.addEventListener("mousemove",moveCallback);
            document.addEventListener("mouseup",upCallback);
        };
        function moveCallback(e){
            var x=e.clientX-ofX;
            var y=e.clientY-ofY;
            el.style.left=x+"px";
            el.style.top=y+"px";               
        };
        function upCallback(){
            document.removeEventListener("mousemove",moveCallback);
            document.removeEventListener("mouseup",upCallback) 
        }
    })
    
    var vm = new Vue({
        el:"#app",
        data:{},
        methods:{},
        computed:{}
    })
</script>

3、计算属性

一、定义

computed 计算属性经过计算得来的属性

一、computed 里面的函数建议有返回值，不建议改变data中的属性

二、调用computed中的方法时，不须要加括号

三、基于vue依赖，当出发属性时会触发相对应的方法

四、当computed中函数执行完毕后，会执行缓存，当下次所依赖的函数没有发生改变时，会从缓存中读取数据

二、特色

一个属性受多个属性影响

本身触发不须要调用缓存存数据

三、computed与methods 区别

computed是属性调用，调用不须要加括号，当下次所依赖的函数没有发生改变时，再次调用时，会从缓存中读取数据

methods是函数调用，没有缓存存数据，每次调用每次执行

使用场景：一个属性受多个属性影响时会使用computed例如购物车的结算

<div id="app">
    <input type="text"v-model.number="a">
    <input type="text"v-model.number="b">
    <p v-cloak>结果：{{handle()}}</p>
    <p v-cloak>结果：{{handleCom}}</p>
</div>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            a:"",
            b:"",
            sum:"",
        },
        methods:{
            handle(){
                console.log("handle()被调用了")
                return this.a+this.b;
            }
        },
        computed:{
            handleCom(){
                console.log("handleCom被调用了")
                return this.a+this.b;
            }
        }
    })
</script>

4、过滤器

一、定义

过滤器：用来过滤数据的一个接口

二、语法

全局： Vue.filter("name",(val,n,sign)=>{

执行的操做

return 值

})

参数1：过滤器名称

参数2：过滤器实现的方法

参数2：有三个参数：

一、val 内容

二、n 长度

三、sign 后缀

如何使用过滤器

经过管道符 | 管道符左边是渲染的数据，右边是过滤器的名称

局部： filters:{}

<div id="app">
     <h2>{{message | reverse(3,'')}}</h2>
</div>
<script src="vue.js"></script>
<script>
    Vue.filter("reverse",(val,n,sign)=>{
        return "$"+val.substring(0,n).split("").reverse().join(sign)
    });
    var vm = new Vue({
        el:"#app",
        data:{
            message:"xa1901"
        }
    })

</script

五.Vue实例方法

一、$on

$on 绑定事件

参数1：事件名称

canshu2：绑定的事件函数

二、 $emit

$emit 触发事件

参数1：名称

参数2：须要传递给事件函数的参数

三、$off

$off：解绑事件

参数1：事件名称若是只写一个参数的话会解绑全部的事件

参数2：须要解绑的事件函数

四、$once

$once: 绑定一次事件

参数和on同样

<script>
    var vm = new Vue({
        el:"#app",
        data:{
        },
        methods:{
        }
    });
    vm.$on("test",func1) //绑定
    vm.$emit("test","345")//触发
    vm.$off("test",func1)//解绑

    function func1(val){
        console.log(111,val)
    }
    function func1(val){
        console.log(111,val)
    }

    vm.$once("test",func2)//绑定一次
    vm.$emit("test","444")//触发
    function func2(val){
        console.log(222,val)
    }
    vm.$emit("test","666")//再次触发，不会执行
    function func2(val){
        console.log(222,val)
    }

</script>

五、$mount

$mount() 挂载外部挂载

vm.$mount("#app")//和el同样

六、$destroy

$destroy() 卸载外部卸载

vm.$destroy("#app")

七、$forceUpdate

$forceUpdate 强制更新

迫使 Vue 实例从新渲染。

 methods:{
            changeA(){
                 this.obj.age = 19;
                 this.$forceUpdate();//强制更新
            }
        }
    //将非响应式属性变为响应式属性

在实例外部去访问data中的属性

vm.message

vm.$data.message

6、watch监听

一、定义

watch:作属性的监听

一、watch中的函数的名称必须是data中的属性

二、watch中参数会接受两个值，一个是新值，一个是旧值

三、watch中的函数时不须要调用的，但凡所依赖的属性发生了改变，那么就会调用相关的函数

四、在watch的属性监听当中尽可能不要去修改data中的属性

五、 watch监听属性的时候，只能监听对象的引用是否发生改变，而具体的属性值发生改变是不会监听的

有两种方式能够监听到值

a、对象.属性

b、深度监听 handler(newVal,oldVal){} , deep:true

六、 watch作属性监听的时候，若是属性是一个对象，那么须要作深度监听，利用handler和deep

七、 watch初始化的时候是不会执行的 immediate:true

解决方法：添加immediate:true属性

八、watch不会对数组的修改（特殊状况：this.arr[0]=100）进行监听

解决方法：

一、用$set

二、数组的方法splice

二、特色：

一个属性影响多个属性

三、适用场景：

模糊查询

网页自适应

发起后端请求

监听窗口的变化

computed场景：

商品总价结算

商品的筛选

$set:

给一个响应式对象添加一个属性，而且这个属性也是响应式的

对象的用法：

this.set(target,key,value);

Shuzu:

this.set（(target,index,value);）

四、案例

<body>
    <div id="app">
        <input type="text"v-model="name">
        <h2>{{name}}</h2>
        <input type="text"v-model="obj.name">
        <h2>{{obj.name}}</h2>
        <p v-for="item in arr">{{item}}</p>
        <button @click="haldleChange">按钮</button>
    </div>
</body>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            name:"zhangsan",
            obj:{
                name:"moria",
            },
            arr:[1,2,3,4,5]
        },
        methods:{
            haldleChange(){
                this.arr[0]=100;//不能经过索引的方式直接操做数组
                // this.arr.splice(0,1,199);
                // this.$set(this.arr,0,100);
            }     
        },
        watch:{
            name(newVal,oldVal){
                console.log(newVal+"+"+oldVal)
            },
            // obj:{
            //     handler(newVal,oldVal){
            //         console.log("我变了")
            //     },
            //     deep:true,
            //     immediate:true
            //}
            "obj.name":{//对象打点要加引号
                handler(newVal,oldVal){
                    console.log("我变成"+newVal)
                },
                deep:true,
                immediate:true
            },
            arr(newVal){
                console.log("数组变了");
            }
        }
    })

7、组件

一、概念：

由HTML css js 等封装好的一个功能，便于二次维护和复用

二、特色

复用性

页面上任何一个部分都是组件

三、与模块比较

模块：

一个大的功能，每个模块可分为多个组件首页模块分为头部组件，banner组件

能够理解为模块包含组件

四、组件的建立

全局组件

Vue.component()

参数1：组件名称最好用大写用于区分组件名称和HTML标签

参数2：组件的配置项 -》对象

组件配置项与vm中的配置项如出一辙

有两点不同

一、多一个template

二、data不是属性，是一个函数

局部组件

components:{}

8、脚手架

脚手架：帮助快速搭建一个项目的骨架

一、安装

a、全局安装脚手架 cnpm install -g @vue/cli

b、当前项目下构建项目 vue create 项目名称

c、选择你须要的类目

二、目录介绍

src：开发环境目录开发所需文件

assets 静态资源文件可放置css，js文件

components 公共组件编写的地方

static：静态资源文件图片 json数据等

test：单元测试、代码测试

.gitignore: git上传须要忽略的文件格式

package.json 项目的基本信息（项目的名称、项目所需模块、版本等）

bable：用来作代码转义

.vue文件：template写结构

script写徐建逻辑

style写组件样式

一个。vue文件至关于一个组件

render是一个配置项

是一个函数

用来渲染虚拟dom 渲染组件

9、生命周期

一、概念

一个组件从建立到销毁的过程

二、分类

建立挂载更新销毁

beforeCreate：建立前

当组件实例化的时候，作的一个初始化操做,注意当前生命周期是组件尚未实例化完毕，

所以，你是访问不到当前组件的data或者methods的属性和方法及其余生命周期函数（this能够访问到）

场景：初始化的loading

Created ：建立后

一、Created执行完毕以后，会将data以及methods身上的全部属性和方法都添加到vm的实例身上

内部操做：遍历挂载因此能够直接使用data和methods中的属性和方法

二、Created生命周期函数会将data身上全部的属性都添加上一个getter和setter方法，使得data的属性具备响应式特征

应用场景：ajax请求

beforeMount：挂载前

一、数据和模板还未进行结合，还能够对数据进行最后的一次处理

二、在这个生命周期函数中，是访问不到真实的DOM结构

mounted：挂载后

一、数据与模板进行相结合生成真是的dom

二、在这个生命周期函数中咱们能够经过this.$refs.属性名称，获取真实的dom结构，并对dom进行处理

三、通常状况下咱们都会在当前生命周期函数中作方法的实例化

beforeUpdate:更新前

一、更新的数据和模板还未进行结合，更新的最后一次修改

二、在这个生命周期函数中也能够获取到真实的dom结构

updated:更新后

一、更新的数据和模板进行相结合，在这个生命周期函数中咱们能够获取到数据更新后的dom结构，以及对数据的作一个监听

相似于watch

beforeDesyroy：销毁前

一、在当前生命周期函数中仍然能访问到dom结构

使用场景：作一些事件监听的解绑事件的移除

destroyed：销毁后

一、在这个生命周期函数中访问不到真实的dom结构了

二、在这个生命周期中会将vm与dom之间的关联所有都断开

10、组件传值

一、概念

组件之间的通信

2.分类

a、父传子

传递：当父组件给子组件进行传值的时候，给子组件的标签上加一个自定义属性值为须要传递的数据

接收：在子组件内部经过props进行接受，props进行接收的方式有2种一种是数组一种是对象

	数组接收：

           props:[自定义属性]

    对象接收:

              props:{

                  自定义属性:{

                    type:类型

                    default:"默认值",

                    required:必须传递

                  }

              }

b、子传父

接收：当子组件给父组件进行传值的时候，首先给子组件标签绑定一个自定义方法，值为一个函数，

注意这个函数不须要加() 传递过来的值经过这个函数就能够接收到

传递：在子组件内部经过 this.$emit("自定义方法名称",须要传递的参数) 来进行传递数据

c、非父子组件传值

①、公共的Vue实例

一、首先须要让全部的子组件都拥有共同的一个事件订阅的方法

Vue.prototype.Observer = new Vue();

二、给须要传值的组件调用this.Observer.$emit("事件名称",传递的值)

三、给须要接受的组件调用this.Observer.$on("事件名称",回调函数)

②、EventBus(本身了解)

③、手动封装$on $emit $off 事件订阅

一、首先须要让全部的子组件都拥有共同的一个事件订阅的方法

	手动封装的Observer

    import Observer from "./Observer";

    Vue.prototype.Observer = Observer;

二、给须要传值的组件调用this.Observer.$emit("事件名称",传递的值)

三、给须要接受的组件调用this.Observer.$on("事件名称",回调函数)

// 手动封装$on $emit $off 事件订阅

let evenList={

};
const $on = (evenName,callback)=>{
    if(!evenList[evenName]){
        evenList[evenName]=[]
    };
    evenList[evenName].push(callback)
};
const $emit = (evenName,params)=>{
    if(evenList[evenName]){
        evenList[evenName].forEach((cb)=>{
            cb(params)
        })
    }
}

const $off = (eventName,callback)=>{
    if(EventList[eventName]){
        if(callback){
            var index = EventList[eventName].indexOf(callback);
            EventList[eventName].splice(index,1);
        }else{
            EventList[eventName].length = 0;
        }
    }
}

export default {
    $on,
    $emit,
    $off,
}

面试题

谈谈你对单项数据流的理解

当父组件给子组件传递数据时，子组件只能接受不能修改，由于数据是单项流动的

若是自组件修改父组件的信息后，有可能会致使其余组件数据也会发生错误，错误没法捕获

为何组件中的data是一个函数，而不是对象？

data是当前组件所须要的状态，模块中不少个组件

每个组件都会返回独立的对象，若是data是对象的状况下，可能进行复用，由于对象是引用数据类型；可是若是是一个函数的状况下，那么就会每次返回一个新的对象，保证每一个组件都有一个独立的对象（状态）

11、动态组件

一、概念

多个组件经过同一个挂载点进行切换展现，经过is属性动态来改变组件

经过一个内置组件<component></component> 以及这个组件的属性is来进行切换的

keep-alive

keep-alive:用来去包裹动态切换的页面或者组件 (内置组件)

做用：凡是用keep-alive包裹的组件，不会被二次建立和销毁，而是进行了一个缓存

keep-alive组件身上会有如下这几个经常使用的属性

include:

值:字符串正则表达式

做用:指定哪些组件被缓存

exclude:

值:字符串正则表达式

做用：排除哪些组件被缓存

max:数字

做用：最大能够缓存多少个组件

注意：

凡是使用了keep-alive包裹的组件都会多2个生命周期函数

deactivated:当组件被切换隐藏的时候会进行缓存状态的生命周期

activated:当组件被切换显示的时候会进行进入活跃状态的生命周期

12、slot插槽

一、概念

正常状况下组件当作标签使用的时候，组件标签内部嵌套的元素是不会显示的若是须要进行显示，则须要用到插槽

二、分类

a、基本使用 (匿名插槽) default

一、在组件标签内部书写一个template标签标签添加一个指令 v-slot

二、将须要作嵌套的内部放在template标签内部

三、在组件内部经过<slot></slot>进行接受

b、具名插槽：

有名字的插槽

一、在组件标签内部书写一个template标签标签添加一个指令 v-slot:插槽的名称

二、将须要作嵌套的内部放在template标签内部

三、在组件内部经过<slot name='插槽的名称'></slot>进行接受

c、做用域插槽：

带参数的插槽 ------数据的子传父

一、在组件内部经过<slot name='插槽的名称' :自定义属性="须要传递的值"></slot>绑定一个自定义属性值为须要传递的数据

二、在组件标签内部书写一个template标签标签添加一个指令 v-slot:插槽的名称="须要接收的这个对象"

二、在template内部的标签上进行数据的渲染 {{须要接收的这个对象.自定义属性}}

十3、路由

在vue中使用插件的步骤

一、引入Vue

import Vue from 'vue'

二、引入路由插件

import Router from 'vue-router'

三、使用插件

Vue.use(Router)

四、实例化

export default new Router({
  mode:"hash",
  //每个路由页面的配置项
  routes: [
    {
      path: '/movie',
      name: 'movie',
      component: Movie
    }  
  ]
})

当路由配置成功之后Vue中就会多了两个内置组件

<router-view></router-view> //当路径匹配成功之后 router-view用来显示相对应的组件

<router-link></router-link>

一、作路由的跳转必需要添加一个属性 to:跳转的路径

二、除此以外 router-link 身上还会有一个tag属性指定router-link 渲染成指定的标签

五、路由的配置

mode:路由的形式 hash路由 history路由

routes:[] 每个路由页面的配置项

routes中的配置项

path:"路径匹配的路径"

component:当路径匹配成功须要渲染的组件

redirect：重定向

六、路由传值

a、动态路由

流程

一、在定义路由的时候设置传递数据的key值 path:"/路由地址/:key1/:key2" key1 key2表明的数据的键值

二、在作路由跳转的时候定义传递的数据 to="/路由地址/参数1/参数2"

三、在须要接受信息的组件内部经过this.$route.params进行接收

b、query传值

流程：

一、经过query的方式进行数据的传参 key=val&key=val

所谓的query传值其实就是咱们常说的get传值的方式经过？后面进行拼接

二、接收的时候经过this.$route.query进行接收

c、路由解耦(只适合动态路由传值)

一、在定义路由的时候添加一个属性props:true

二、接收的时候只须要经过props进行接收便可

面试题

query传值和 params 传值的区别？

前者的参数可传可不传

后者的参数是必需要传递的

七、编程式导航

路由跳转的方式

一、a标签跳转影院

二、组件 router-link

三、编程式导航经过js进行路由的跳转

this.$router.push 跳转

this.$router.back 后退

this.$router.forward 前进

this.$router.replace 替换 children:路由嵌套的配置项这个属性和routes同样

路由嵌套中path只须要写路径的名称便可

十4、vuex

一、npm install vuex - S

二、Vue.use(Vuex)

三、建立store模块，定义状态管理的规则

state ：共享的状态

mutations ：更改状态

actions：接受组件的事件（dispath），经过异步获取数据提交mutations（commit）

getters：获取最新状态，响应式的

moudle：分模块进行状态的管理

四、把store模块注册到viewmodel

五、this.$store 来访问这个store

mapGetters 把store中的getters方法的结果映射到组件中的computed属性

会主动订阅仓库中的状态变化，响应式的

mapMutations

mapState

dispatch("事件名")

定义一个vue插件

//插件中

export default {
	install(Vue,options){
		Vue.prototype.$show = function(){
		alert(1)
		}
	}
}


main.js中
import MyPlugin from ''
Vue.use(MyPlugin)

Vue基础学习

Vue

1、概念

一、框架和类库的区别：

二、概念：

2、vue基本使用

一、安装

二、建立实例

三、指令

v-text 简写：{{}}

v-html

v-if

v-show

v-if v-else v-else-if

v-for

v-bind

v-on

v-model

v-pre

v-once

v-cloak

建立自定义指令

a、定义：

b、语法：

c、注意：

d、拖拽案例

3、计算属性

一、定义

二、特色

三、computed与methods 区别

4、过滤器

一、定义

二、语法

五.Vue实例方法

一、$on

二、 $emit

三、$off

四、$once

五、$mount

六、$destroy

七、$forceUpdate

6、watch监听

一、定义

二、 特色：

三、适用场景：

四、案例

7、组件

一、概念：

二、 特色

三、与模块比较

四、组件的建立

8、脚手架

一、安装

二、目录介绍

9、生命周期

一、概念

二、分类

beforeCreate：建立前

Created ：建立后

beforeMount：挂载前

mounted：挂载后

beforeUpdate:更新前

updated:更新后

beforeDesyroy：销毁前

destroyed：销毁后

10、组件传值

一、概念

2.分类

a、父传子

b、子传父

c、非父子组件传值

①、公共的Vue实例

②、EventBus(本身了解)

③、手动封装$on $emit $off 事件订阅

面试题

11、动态组件

一、概念

keep-alive

注意：

12、slot插槽

二、特色：

二、特色

a、基本使用 (匿名插槽) default

b、具名插槽：

五、路由的配置