苦行僧DH

博客园 首页 新随笔 联系 订阅 管理
Vue笔记

课程来源：b站搜索编程不良人。

1 vue介绍

# Vue是一款**渐进式**的框架，它致力于用更简单的API来实现数据的双向绑定。

# 作者是国内的：**尤余溪**

# Vue的两个核心点:
	1: 响应式数据绑定当数据发生变化的时候，视图自动更新，即双向数据同步，原理利用了ES6中的 Object.definedProperty 中的setter/getter 代理数据，监控对数据的操作。
	2: 组合的视图组件即页面最终映射为一个组件树，采用树形数据结构进行设计，方便维护，重用。

2 vue入门案例

2-1 下载

有适用于开发环境和生产环境的两种文件(开发环境没压缩，更多的提示，生产环境压缩了，也去除了提示):

开发版,包含了有帮助的命令行警告:
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产版，优化了尺寸和速度：
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2-2 HelloWorld

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
            <h1>{{ helloMsg }}</h1>
            <h1>{{ helloMsg2 }}</h1>
    </div>    
</body>
<!-- 引入Vue.js,也可以使用CDN引入 -->
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
            helloMsg: "HelloWorld!",
            helloMsg2: "我的第一个Vue代码"
        }
    });
</script>
</html>

解释：

# 我们先是new了一个Vue，代表我们要使用Vue，然后传入的参数：
	{{}}：插值表达式，Vue渲染页面以后，会将插值表达式的内容替换成我们的变量名的值。
	属性el：代表我们需要接管的区域，一般都是一个大的div，里面可以使用任意选择器，id选择器、类选择器等等都可以。如果我们的插值表达式书写的地方不在el指向的范围的话，该插值表达式不会被解析。
	属性data：我们定义的需要被使用的数据，可以是任意类型。

3 v-text和v-html

3-1 v-text：

v-text的作用是从vue实例的data属性中取出数据渲染到指定标签中

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text的使用</title>
</head>
<body>
    <div id="app">
        {{msg1}}
        <h1 v-text="msg2"></h1>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data:{
            msg1: "我是数据1哦",
            msg2: "我是数据2哦"
        }
    });
</script>
</html>

解释：

# v-text直接依附在标签上，作用就是会将数据覆盖掉该标签中的原内容。
# 那么v-text和{{}}都可以获取data中的数据并填充，那他们的区别是什么?
	1: v-text是依附在标签上，{{}}是随处都可使用
	2: v-text不会出现闪烁的问题，{{}}会。
		什么是闪烁问题：
			假如我们的网上很慢，然后网页打开后js还没有下载完，那么这个时候{{}}这个插值表达式也没有被解析，那么在页面上呈现出来的样子就是”{{}}“，这样给用户的体验不好，然后当我们使用v-text的时候，哪怕js没有下载完，也不会在页面上出现类似于插值表达式这种的东西。
			这个情况也可以模拟，例如谷歌浏览器：f12->点击network->点击network下的Online并切换选择为Slow 3G，这样网速就会被限制为很慢的3G，然后ctrl+shift+R强制刷新，这样你就能看见网速慢的情况下，插值表达式未被渲染的情况了，这就是插值表达式的闪烁问题。

3-2 v-html

v-html和v-text功能一样，唯一的不同就是v-html可以将数据解析为html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-html</title>
</head>
<body>
    <div id="app">
        <h1>{{testMsg}}</h1>
        <h1 v-text="testMsg"></h1>
        <h1 v-html="testMsg"></h1>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
            testMsg: "<a href='https://www.cnblogs.com/daihang2366'>去往博客</a>"
        }
    });
</script>
</html>

解释：

# 我们的数据testMsg是一个字符串，但是实际的内容是一个a标签，当我们使用插值表达式和v-text的时候，都是直接将testMsg当作一个普通的值，而v-html却是将testMsg解析成了html标签。

4 事件绑定，v-on

v-on绑定事件的基本用法，语法：v-on:事件名=函数名

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on</title>
</head>
<body>
    <div id="app">
        <!-- 第一种写法：v-on:事件名=函数名 -->
        <input type="button" value="    -    " v-on:click="changCount(1)"/>
        <br>
        <span v-text="count"></span>
        <br>
        <!-- 第二种写法：@事件名=函数名 -->
        <input type="button" value="    +    " @click="changCount(-1)"/>
    </div>    
</body>
<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            count: 0,// 定义了一个数据
        },methods: {
            changCount:function(num){ // 定义了一个方法，vue中我们定义的方法都写在methods中
                this.count += num;
            },changCount1(num){ // 定义方法的写法除了上面的这种以外，还有下面的这种

            }
        },
    });
</script>
</html>

解释：

# vue的事件绑定:
	1、比如在methods下定义方法
    2、书写事件：第一种方法：v-on:方法名([参数,如果没有参数大括号可以不加])，第二种写法：@方法名([参数，如果没有参数大括号可以不加])。这里的参数可以是任意表达式。
        注：我们的事件绑定也可以直接书写表达式。
    3、书写监听方法：第一种写法:方法名:function(参数){方法体}，第二种写法：方法名(参数){方法体}

5 v-show v-if v-bind

5-1 v-show

v-show是用来控制该标签是否显示的。底层操作的是标签的display=none/block

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show</title>
</head>
<body>
    <div id="app">
        <h1 v-show="false">我被隐藏了，因为v-show的值是false</h1>
        <h1 v-show="isShow">我的显示决定于isShow的值</h1>
        <input type="button" value="显示/隐藏" @click="isShow=!isShow">
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data:{
            isShow: false
        },methods: {
            
        },
    });
</script>
</html>

解释：

# 我们可以f12中查看标签的style属性。

5-2 v-if

v-if也是用来控制标签是否显示的，但是和v-show不同的是，v-show是操作的元素的display，而v-if是直接操作dom。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if</title>
</head>
<body>
    <div id="app">
        <h1 v-if="false">我直接当场自闭，我没了</h1>
        <h1 v-if="isShow">我的显示与否取决于isShow</h1>
        <input type="button" value="切换显示/隐藏" @click="isShow=!isShow">
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
            isShow: false
        },methods: {
            
        },
    });
</script>
</html>

解释：

# 我们f12后就会发现，当没显示的时候，直接dom元素直接没了，然后再去对比v-show就能很清晰的知道他们二者的区别了。

5-3 v-bind

用来绑定标签的属性，达到快捷的更改属性的操作，例如绑定元素的class，src等。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind</title>
    <style type="text/css">
        .s1{
           color:red;
           font-size: 25px; 
        }
        .s2{
            color: aqua;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div id="app">
        <span v-bind:class="spanClass">我是文字,我会被动态的改变样式,因为我使用v-bind绑定了class属性</span>
        <span v-bind:class="spanClass">我是文字,我也会被动态的改变样式,我使用了另一种绑定的语法，:class</span>
        <br>
        <input type="button" value="切换span的样式" @click="changeSpanStyle">
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
            spanClass: "s1"
        },methods: {
            changeSpanStyle(){
                this.spanClass = this.spanClass=='s1'?'s2':'s1'
            },
        }
    });
</script>
</html>

解释：

# v-bind的作用就是绑定标签的属性，可以很便捷的更改其属性的值。
    两种写法：
    	1> v-bind:属性名="变量名"
        2> :属性名="变量名"

6 v-for循环

可以遍历对象、数组等玩意的。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for</title>
</head>
<body>
    <div id="app">
        <h2>测试遍历对象</h2>
        <ul>
            <li v-for="(value,key,index) in user">
                第:{{index+1}}个，key:{{key}}，value:{{value}}
            </li>
        </ul>
        <hr>
        <h2>测试遍历数组</h2>
        <ul>
            <li v-for="item,index in arrays">
                第:{{index+1}}个，值为:{{item}}
            </li>
        </ul>
        <hr>
        <h2>测试遍历数组(内容为对象)</h2>
        <ul>
            <li v-for="user,index in users">
                第:{{index+1}}个，用户名为:{{user.username}}，名称为:{{user.name}}，密码为:{{user.password}}
            </li>
        </ul>
        <hr>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user: {username:"user1",name:"用户1",password:"密码1"},
            arrays: ["张三","李四","王麻子"],
            users: [
                {username:"user1",name:"用户1",password:"密码1"},
                {username:"user2",name:"用户2",password:"密码2"},
                {username:"user3",name:"用户3",password:"密码3"},
                {username:"user4",name:"用户4",password:"密码4"}
            ]
        },methods: {
            
        },
    });
</script>
</html>

解释：

# 遍历对象的时候：
    v-for="每一项的key,每一项的value,当前下标 in 变量名"
# 遍历其他的时候：
    v-for="每一项的内容,当前下标 in 变量名"

7 v-model双向绑定

双向绑定的意思就是，绑定的标签元素的值与data数据中的保持一致，data中更改后元素值就会更新，元素中值更新后data中数据也会更新，也就是达到他们会保持一致的这个特点，这就是双向绑定。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-mode</title>
</head>
<body>
    <div id="app">
        <h2 v-text="content"></h2>
        <input type="text" v-model="content">
    </div>    
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
            content: "内容"
        },methods: {

        },
    });
</script>
</html>

解释：

# 1、v-model可以实现表单元素与data数据的双向绑定。
# 2、v-model双向绑定只能用于表单元素中。
# 3、直接在表单元素中应用v-model的时候，那么绑定的就是元素的value属性值.

7-1 v-model小案例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本</title>
</head>
<body>
    <div id="app">
        <input type="text" placeholder="请输入需要加入的内容" v-model="inputContent"> <input type="button" value="确定" @click="addContent"><br>
        <ul>
            <li v-for="info,index in infoList">{{index+1}} &nbsp;&nbsp;&nbsp; {{info.content}}</li>
        </ul>
        <span>总条数:<span v-text="infoList.length  ">14</span></span> 
        <input type="button" value="删除所有信息" @click="clearAllContent" v-show="infoList.length!=0">
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
            infoList:[
                {content:"第一条记录"},
                {content:"第二条记录"}
            ],
            inputContent: ""
        },methods: {
            addContent(){
                this.infoList.push({content:this.inputContent});
                this.inputContent = '';
            },
            clearAllContent(){
                this.infoList = [];
            }
        },
    });
</script>
</html>

8 事件修饰符

官方解释：

​ 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

​ 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

大概的意思就是，例如冒泡这种，元素内的元素事件可以会冒泡到外层元素的事件中，或者我们a标签点击事件的时候，并不想触发它默认的跳转的行为，这些在没有vue之前，都需要自己手动的去设置，有了vue以后，vue提倡的是只关心代码的数据、逻辑实现，而不需要去关心dom事件的繁杂细节，所以vue提供了事件修饰符来进行解决这些事情。

语法：@事件名.修饰符，注意，修饰符可以多个。

8-1 stop修饰符

用来阻止事件的冒泡

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>stop修饰符</title>
</head>
<body>
    <h1>阻止事件的冒泡</h1>
    <div id="app" style="width: 500px;height: 500px;" @click="divClick">
        <input type="button" value="点我呀" style="margin: 30px;" @click.stop="inputClick">
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
        },methods: {
            divClick(){
                console.log("我是div,我被点了！");
            },inputClick(){
                console.log("我是input，我被点了");
            }
        },
    });
</script>
</html>

解释：

# 如果我们没有给input的click加上.stop的修饰符，那么div的click也会被触发

8-2 prevent修饰符

用来阻止标签的默认行为的，比如说a标签，你懂的。。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>prevent修饰符</title>
</head>
<body>
    <div id="app">
        <a href="https://www.cnblogs.com/daihang2366" @click.prevent="aClick">我是a标签</a>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        methods: {
            aClick(){
                alert("a标签的事件被触发!");
            }
        },
        
    });
</script>
</html>

解释：

# 我们a标签本身的行为就是跳转到href的地址，而我们使用修饰符.prevent以后呢，那么它的默认行为就会不生效了。

8-3 self修饰符

加了这个修饰符以后，那么这个事件只会被元素自身触发，其他的地方触发是无效的，就比如一个大div和小div，他们都有自己的点击事件，那么小div事件触发后会冒泡到大div的事件中，那么如果大div加上这个self修饰符以后，那么大div的事件只能够被大div自己所触发，小div的冒泡到大div来这种啥情况的就没用了。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>self修饰符</title>
</head>
<body>
    <h1>阻止事件的冒泡</h1>
    <div id="app" style="width: 500px;height: 500px;" @click.self="divClick">
        <input type="button" value="点我呀" style="margin: 30px;" @click="inputClick">
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
        },methods: {
            divClick(){
                console.log("我是div,我被点了！");
            },inputClick(){
                console.log("我是input，我被点了");
            }
        },
    });
</script>
</html>

解释：

# 大的div的事件因为加了self修饰符，所以说它只关心由自己元素本身触发事件，其他的一概不鸟。

8-4 once修饰符

这个其实最简单，意思就是加了这个修饰符，那么该事件就只会被触发一次。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>once修饰符</title>
</head>
<body>
    <div id="app">
        <h1><a href="javascript:;" @click.once="aClick">我只会被触发一次</a></h1>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data: {

        },methods: {
            aClick(){
                console.log("a标签被触发了哦！");
            }
        },
    });
</script>
</html>

解释：

# 通过点击测试可以发现，我们的aClick方法只会被执行一次，因为我们的a标签的click事件第一次被触发后就不能再触发了。

9 按键修饰符

就是现有一个onkeyup事件，然后可以指定哪个按键，比如说我们想要当回车键按下后触发事件，当退格键按下后触发事件，那么这种就可以使用按键修饰符。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按键修饰符</title>
</head>
<body>
    <div id="app">
        <!-- 回车按键 -->
        <input type="text" placeholder="测试回车按键" @keyup.enter="input1Click">
        <!-- 退格按键 -->
        <input type="text" placeholder="测试退格按键" @keyup.delete="input2Click">
        <!-- ESC按键 -->
        <input type="text" placeholder="ESC退格按键" @keyup.esc="input3Click">
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data: {

        },methods: {
            input1Click(){
                console.log("你按下了回车!");
            },input2Click(){
                console.log("你按下了退格!");
            },input3Click(){
                console.log("你按下了ESC!");
            }
        },
    })
</script>
</html>

解释：

# 按键修饰符有很多，常用的有：
    1 .enter
    2 .tab
    3 .delete (捕获“删除”和“退格”键)
    4 .esc
    5 .space
    6 .up
    7 .down
    8 .left
    9 .right	
当然我们也可以直接用按键对应的码，例如@click.keyup.112="customClick"。
我们也可以自定义xxx码对应为xxx按键，例如：Vue.config.keyCodes.f1 = 112，也可以简写为:v-on:keyup.f1 = 112
如果你想了解详细点，可以看官网：https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6

10 Axios使用

Axios是一个异步请求的库。Vue的作者推荐使用Axios这个Http请求库。

使用：

可以使用CDN，也可以直接下载下来后用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

10-1 GET请求的方式：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios</title>
</head>
<body>
</body>
<script src="./js/axios.min.js"></script>
<script>
    /**
     * axios.get("请求路径",{请求参数}).then(function(response){请求正常响应数据的时候}).catch(function(error){请求失败的时候});
     * 注意：
     *  请求参数如果没有，可以不写，直接只需要一个请求路径
     *  
     */ 
    axios.get("http://127.0.0.1:8080/test1",{}).then(function(response){
        // 这里拿到的response是一个封装好了的对象,其中它的属性data才是返回的数据。
        console.log(response);
    }).catch(function(error){
        // 这里拿到的就是错误信息。
        console.log("请求失败,失败信息:"+error)
    });
    // 我们的回调方法可以换一种写法，例如这样：axios.get("请求路径",{请求参数}).then(response=>{请求正常响应数据的时候}).catch(error=>{请求失败的时候})
    axios.get("http://127.0.0.1:8080/test1",{}).then(response=>{
        console.log(response);
    }).catch(error=>{
        console.log("请求失败,失败信息:"+error)
    });
</script>
</html>

10-2 POST请求方式：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试POST</title>
</head>
<body>
    
</body>
<script src="./js/axios.min.js"></script>
<script>
    axios.post("http://127.0.0.1:8080/test2",{
        username: "测试username",
        gender: "男",
        age: 18
    }).then(response=>{
        console.log(response.data);
    }).catch(error=>{
        console.log(error);
    })
</script>
</html>

解释：

# 语法：
    axios.get/post.(url,param).then(function(response){}).catch(function(error){})
    url:字符串，请求路径
    param:请求参数,{}
	.then:正常情况的回调
    .catch:正常

10-3 axios并发请求：

可以让我们先存储几个请求，然后再一次性的全都请求出去。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并发请求</title>
</head>
<body>
    
</body>
<script src="./js/axios.min.js"></script>
<script>
    /*存储test1的get请求*/
    function test1(){
        return axios.get("http://127.0.0.1:8080/test1",{});
    }
    /*存储test2的post请求*/
    function test2(){
        return axios.post("http://127.0.0.1:8080/test2",{username:"测试用户名",age:20});
    }
    /*开始执行并发的请求*/
    axios.all([test1(),test2()]).then(
        axios.spread(function(test1Response,test2Response){
            console.log(test1Response.data);
            console.log(test2Response.data);
        })
    );
</script>
</html>

解释：

# test1方法返回test1这个请求的信息，test2方法返回test2这个请求的信息。
axios.all([需要执行的请求信息]).then(
    axios.spread(function(响应信息[有几个请求则写几个参数]..){
        响应回调方法体
    })
)
最后附上测试的后台Controller：
package com.cqsw.demo.controller;

import com.cqsw.demo.utils.response.ComResponse;
import org.springframework.web.bind.annotation.*;

import java.util.Date;
import java.util.Map;
import java.util.Set;
/**
 * Vue测试接口哦
 */
@RestController
public class Test1Controller {

    @GetMapping("/test1")
    @CrossOrigin
    public ComResponse test1() {
        return ComResponse.buildSuccess("成功了!", new Date());
    }

    @PostMapping("/test2")
    @CrossOrigin
    public ComResponse test1(@RequestBody Map<String, String> map) {
        Set<String> keySet = map.keySet();
        for (String s : keySet) {
            System.out.println("key:" + s + "====value=" + map.get(s));
        }
        return ComResponse.buildSuccess("成功", null);
    }
}

11 生命周期

所谓生命周期，就是从出生到死亡的这个过程。那么这里呢就是说明Vue的生命周期

# 我们可以将这个生命周期拆分为三个阶段：
	1- 初始化阶段
	2- 运行阶段
	3- 销毁阶段
# 那么就按照这三个阶段来说明这三个阶段中的回调方法：
	1- 初始化阶段：
		# beforeCreate:Vue实例仅仅是初始化、绑定了事件、还没有初始化el、data等数据的时候
		# created:完成了el、data等数据库初始化，但是还没有将数据渲染到dom中的时候
		# beforeMount:准备将数据渲染到dom中，但是还没有渲染的时候
		# mounted:已经将数据渲染到dom中的时候
	2- 运行阶段：
		# beforeUpdate:data中数据发生改变，重新渲染到dom中之前的时候
		# updated:data中改变的数据已经重新渲染到dom中之后的时候
	3- 销毁阶段：
		# beforeDestroy:实例销毁之前的时候，在这个方法里面使用vue完全可以
		# destroyed:实例被销毁之后的时候，在这个方法里面vue基本上不可用了
当然还有很多其他的回调方法:
	例如activated(keep-alive缓存组件激活时)、deactivated(keep-alive缓存组件停用时)、errorCaptured(发生错误的时候)，详细了解可以查询官网:
	https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9FE9%92%A9%E5%AD%90

代码示例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试生命周期</title>
</head>
<body>
    <div id="app">
        <h1 v-text="msg" id="h1Test"></h1>
        <button type="button" @click="changeValue">改变值</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data:{
            msg: "测试Msg"
        },methods: {
            changeValue(){
                this.msg = "改变后的☞"
            }
        },beforeCreate() {
            console.log("beforeCreate:"+this.msg);
        },created() {
            console.log("beforeCreate:"+this.msg);
        },beforeMount() {
            console.log("beforeMount:"+document.getElementById("h1Test").innerText)
        },mounted() {
            console.log("mounted:"+document.getElementById("h1Test").innerText)
        },beforeUpdate() {
            console.log("beforeUpdate-data中的值:"+this.msg);
            console.log("beforeUpdate-标签的内容:"+document.getElementById("h1Test").innerText)
        },updated() {
            console.log("updated-data中的值:"+this.msg);
            console.log("updated-标签的内容:"+document.getElementById("h1Test").innerText)
        },beforeDestroy() {
            
        },destroyed() {
            
        },
    })
</script>
</html>

11-1 综合前面所学vue知识做一个员工管理系统

https://files.cnblogs.com/files/daihang2366/vuedemo1.zip ，下载后导入sql则可以运行

12 vue中组件(Component)

12-1 组件作用

组件是vue中可复用的实例，我们可以将整个项目划分为不同的组件，然后多个组件组整一个完整的项目。

12-2 组件使用

12-2-1 全局组件的注册

全局组件注册后可以在vue实例的任意范围内使用该组件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 2、在vue范围内使用该组件，该组件的名称就是标签名 -->
        <login></login>
        <user-add></user-add>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    // 1、书写全局组件
    Vue.component('login',{
        template: '<div><h1>用户登录</h1></div>'
    })
    // 测试驼峰命名
    Vue.component('userAdd',{
        template: '<div><h1>用户添加</h1></div>'
    })
    const vue = new Vue({
        el: "#app",
        data: {},methods: {},created() {},
    });
</script>
</html>

解释：

# 1：Vue.component用来开发全局组件
    参数1：组件的名称。
    参数2：组件的配置--template:''用来书写组件的代码
    	注意：组件中的代码只能有一个根元素，且必须有一个根元素
# 2：使用时需要在Vue实例的范围内使用，其他地方使用是无效的
# 3：如果组件注册过程中，使用驼峰命名，例如你的组件名是这样的：userAdd，那么你使用的时候，就要变成这样：user-add

12-2-2 局部组件的注册：

通过将组件注册给Vue实例的一个components属性来完成注册，这样不会对Vue造成累加

第一种开发方式:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <login></login>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    // 声明组件为一个变量
    let login = {
        template: '<div><h1>登录组件</h1></div>'
    };
    const vue = new Vue({
        el: "#app",
        data:{},
        methods: {},
        components:{
           // 注册组件到Vue实例的components中
            login:login // 前面的是组件名称，后面的是组件的内容，我们这里使用变量login
            // login,如果组件名和变量名一致，那么只需要写一个login就可以了。
        },
        created() {},
    });
</script>
</html>

第二种方式：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <login></login>
    </div>   
    <!-- 使用template，可以定义组件的内容 -->
    <template id="loginCom">
        <div>
            <h1>用户登录</h1>   
        </div>
    </template>
</body>

<script src="./js/vue.js"></script>
<script>
    // 声明变量来保存组件
    let login = {
        template: '#loginCom' // 我们在这里不仅可以直接书写html，还可以使用选择器，例如id选择器，类选择器等
    }
    const vue = new Vue({
        el: "#app",
        data:{},methods:{},
        components:{
            login
        }
    });
</script>
</html>

解释：

# 1：注意我们的组件是在Vue实例的components属性中进行注册的。
# 2：我们的组件实际代码除了直接在属性template中书写，还可以额外在html代码中写一个template标签，然后template属性中使用id、class等选择器指向该tempplate标签即可。

12-3 Prop的使用

作用：prop用来给组件传递静态数据或动态数据

12-3-1 通过在组件上声明静态数据传递给组件内部

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <login user-name="张三" age="18"></login>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    let login = {
        template: '<div><h1>你好<span style=\'color:red\'>{{userName}}--</span><span v-text=\'age\'></span>,请登录</h1></div>',
        props:["userName","age"] // 通过props接收标签中传递的数据
    }
    const vue = new Vue({
        el: "#app",
        data:{},methods:{},
        components:{
            login
        }
    });
</script>
</html>

解释：

# 1：可以在标签属性上书写属性名=值，然后在组件参数使用props声明这两个传递来的值，然后我们就可以在组件内使用这两个使用这两个值
# 2：标签内的命名不能使用驼峰命名，只能使用单词-单词这种，但是当我们在组件内使用的使用又不能使用-的这种变量名，所以我们在标签上使用-形式，在组件内就转为驼峰命名法即可

12-3-2 通过在组件上声明动态数据传递给组件内部

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过在组件上声明动态数据传递给组件内部</title>
</head>
<body>
    <div id="app">
        <login :name="username"></login>   
        <button type="button" @click="changeName">更改username的值</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>

    let login = {
        template:'<div><h1>你好，{{name}}</h1></div>',
        props:["name"]
    };

    const vue = new Vue({
        el: "#app",
        data: {
            username:"张三"
        },methods:{
            changeName(){
                this.username='李四';
            }
        },
        components:{
            login
        }
    });
</script>
</html>

解释：

# 注意：
	我们前面的静态数据是写死的，但是我们要知道我们的login这个标签是在vue实例中的，那么我们就可以使用vue实例的data数据，那么我们将原来的死数据绑定为我们vue实例中的data数据，那么就达到了动态的效果。

13-3-3 prop的单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

# 是什么意思呢？
	就比如前面的例子，
		我们vue实例中data数据发生改变后，那么组件内应用了此数据的地方则会进行更新，这就是向下流动到子组件中。
		但是如果我们在组件中修改data数据，那么这就会改变vue实例的状态，那么这种情况是不被认可的，vue认为这是难以理解的。

代码实例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过在组件上声明动态数据传递给组件内部</title>
</head>
<body>
    <div id="app">
        <login :name="username"></login>   
        <button type="button" @click="changeName">更改username的值</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>

    let login = {
        template:'<div><h1>你好，{{name}}</h1><button type=\'button\' @click=\'changeValue\'>改变值</button></div>',
        props:["name"],
        methods: {
            changeValue(){
                this.name='你好'
            }
        },
    };

    const vue = new Vue({
        el: "#app",
        data: {
            username:"张三"
        },methods:{
            changeName(){
                this.username='李四';
            }
        },
        components:{
            login
        }
    });
</script>
</html>

暂且不关心组件内方法如何定义(会面会说)，这里你会发现，我们点击login外的button去更改data的时候，是没问题的，但是我们在login内点击更改绑定的name的值的时候，由于它绑定了vue的username的值，所以它会去更改vue的username的值，虽然效果是没问题的，但是这种情况不被认可，所以我们开发中不要这么干

12-4 组件中定义数据和事件的使用

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <login></login>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    let login = {
        template: "<div><h1>用户登录<button type=\'button\' @click=\'testClick\'>点我鸭</button></h1></div>",
        methods: { // methods的定义和vue中定义一模一样
             testClick(){
                console.log(this); // 这个时候的this是组件对象，而不是vue,打印结果：VueComponent 
             }
        },data(){ // 组件中data需要定义为一个函数，返回结果为一个对象
            return {
                username: "张三"
            };
        }
    };
    const vue = new Vue({
        el: "#app",
        data:{},methods: {},
        components:{
            login
        }
    });
</script>
</html>

解释：

# 1：组件中定义方法和vue实例一致
# 2：定义data和vue实例不同，定义data需要写成一个函数，并且返回数据是对象。

12-5 向子数组中传递事件并在子组件中调用改变事件

也就是说在子组件内去调用父组件的方法

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 
            @find：这个find是在组件内调用时候的名字
            findAll：需要调用的实例中的方法名
         -->
        <login @find="findAll"></login>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    let login = {
        template:"<div><h1>你好,请登录</h1><button type='button' @click='testClick'>试试点我</button></div>",
        methods: {
            // 组件内的方法
            testClick(){
                this.$emit("find"); // 此方法名在标签中定义的
            }
        },
    }
    var vue = new Vue({
        el: "#app",
        data:{},
        methods:{
            findAll(){ // vue实例的方法
                alert("vue实例的findAll方法");
            }
        },
        components:{
            login
        }
    });
</script>
</html>

解释：

# 1、<login @find="findAll"></login>--->find则是在组内见调用方法的时候的名字
# 2、this.$emit("find"); // 此方法名在标签中定义的，

13 vue中路由(Router)

13-1 路由是什么

路由:根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理

13-2 作用

用来实现在vue中组件的动态切换

13-3 使用路由

安装路由:https://unpkg.com/vue-router@3.3.4/dist/vue-router.js

1、引入路由

<script src="./js/vue-router.js"></script>

2、创建组件

// 登录组件
 const login = {
     template: '<div><h1>登录组件</h1></div>'
 }
 // 注册组件
 const register = {
     template: '<div><h1>注册组件</h1></div>'
 }

3、创建路由对象并定义路由规则

// 定义路由对象
const router = new VueRouter({
    routes:[
        {path:'/login',component:login},  // path就是对应路径，component就是对应的组件
        {path:'/register',component:register} 
    ]
});

4、将路由对象注册到vue实例中

const vue = new Vue({
        el: "#app",
        data:{},
        methods: {
        },
        router:router // 将路由注册到vue实例中去
    })

5、在页面中定义路由组件显示的区域

 <!-- 显示路由组件 -->
 <router-view></router-view>

6、定义a标签来切换路由

<a href="#/login">点我到登录</a>      
<a href="#/register">点我到注册</a>
注意：要加上#符号

13-4 router-link使用

作用：用它以后，我们就不用自己写a标签，然后再写#/xxx路径了，

好处：也就是代替我们写a标签，写#路径

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>测试router-link哦</h1>
        <!-- to:到达的路径，不用加#符号 -->
        <router-link to="/login">登录组件</router-link>
        <!-- tag：生成标签的类型，可以是任意标签,当然我们也可以写style样式 -->
        <router-link to="/register" style="color:red" tag='button'>注册组件</router-link>
        <router-view></router-view>
    </div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script>
    // 登录组件
    let login = {
        template: '<div><h1>用户登录</h1></div>'
    }
    // 注册组件
    let register = {
        template: '<div><h1>用户注册</h1></div>'
    }
    // 创建router路由对象
    const router = new VueRouter({
        routes:[
            {path:'/login',component:login},
            {path:'/register',component:register}
        ]
    })
    const vue = new Vue({
        el: "#app",
        data:{},
        methods: {},
        router:router
    });
</script>
</html>

13-5 默认路由

默认路由就是第一次进入界面显示的组件地址

我们可以直接使用 / 来指定默认地址：

 const router = new VueRouter({
        routes:[
            {path:'/',component:login}, /*我们可以直接使用/来代表默认地址显示的组件*/
            {path:'/register',component:register}
        ]
    })

我们也可以使刚开始的 / 重定向到/login地址

  const router = new VueRouter({
        routes:[
            {path:'/',redirect:'/login'},  /*当我们地址是 / 的时候，重定向到/login中*/
            {path:'/login',component:login}, 
            {path:'/register',component:register}
        ]
    })

13-6 路由中传递参数

1、第一种方式在路径上?号传递参数

在路径上拼接参数

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-link to="/login?name=张三" tag="button">去往登录组件</router-link>
        <router-link to="/register" tag="button">去往注册组件</router-link>
        <router-view></router-view>
    </div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script>
    // 登录组件
    let login = {
        template: '<div><h1>用户{{name}}登录</h1></div>',
        data(){return{name:""};},
        created(){
            console.log(this.$route.query.name);
            this.name = this.$route.query.name;
        }
    };
    // 注册组件
    let register = {
        template: '<div><h1>用户注册</h1></div>'
    };
    // 创建路由对象
    const router = new VueRouter({
        routes:[
            {path:'/login',component:login},
            {path:'/register',component:register}
        ]
    })
    const vue = new Vue({
        el:"#app",
        data:{},
        router:router
    })
</script>
</html>

2、restful形式传递参数

路径方式传递参数

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-link to="/register/1/张三">注册哦</router-link>
        <router-view></router-view>
    </div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script>
    // 注册组件
    let register = {
        template: '<div><h1>用户注册</h1></div>',
        created() {
            console.log(this.$route);
            console.log(this.$route.params.id);
            console.log(this.$route.params.name);
        },
    }
    // 创建路由对象
    const router = new VueRouter({
        routes:[
            {path:'/register/:id/:name',component:register}
        ]
    })
    const vue = new Vue({
        el: "#app",
        data:{},
        router:router
    })
</script>
</html>

13-7 嵌套路由

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div id="app">
    <h1>主页面</h1>
    <!-- a标签 -->
    <router-link to="/user">用户管理</router-link>
    <!-- 用户管理模板的位置 -->
    <router-view></router-view>

    </div>
    <!-- 用户管理的模板 -->
    <template id="userTemplate">
        <div>
             <h1>用户管理</h1>
            <router-link to="/user/add">新增用户</router-link>    
            <router-link to="/user/select">查询用户</router-link>    
            <router-view></router-view>
        </div>
    </template>
</body>
<script src="/js/vue.js"></script>
<script src="/js/vue-router.js"></script>
<script>
    // 用户管理组件
    let user = {
        template: "#userTemplate",
    }
    // 新增用户组件
    let userAdd = {
        template: "<div><h3>新增用户</h3></div>",
    }
    // 查询用户组件
    let userSelect = {
        template: "<div><h3>查询用户</h3></div>",
    }
    const router = new VueRouter({
        routes:[
           {path:'/',redirect:"/user"}, 
           {path:'/user',component:user,
                children:[  
                {path:'add',component:userAdd}, /*注意：嵌套路由里面路径开头不要加“/”*/
                {path:'select',component:userSelect},
           ]}, 
        ]
    })
    const vue = new Vue({
        el:"#app",
        data:{},
        router:router
    })
</script>
</html>

解释：

解视组件内还需要展示其他的组件，那么就需要下一层。
例如：
	用户管理--组件
		新增用户--组件
		查询用户--组件
那么这个时候，我们需要在用户管理内展示新增用户，那么就需要这种嵌套路由。

14 vue CLI脚手架

14-1 什么是CLI

命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（CUI）。

14-2 什么是Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统

14-3 Vue CLI优势

  • 通过 @vue/cli 实现的交互式的项目脚手架。
  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
  • 一个运行时依赖 (@vue/cli-service)，该依赖：
    • 可升级；
    • 基于 webpack 构建，并带有合理的默认配置；
    • 可以通过项目内的配置文件进行配置；
    • 可以通过插件进行扩展。
  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。
  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

14-4 Vue CLI安装

1、环境准备

# 1、下载node.js
	http://nodejs.cn/download/
# 2、配置node.js
	下载安装包安装或者压缩包解压。
	然后配置环境变量：
		1:新建NODE_HOME=nodejs根目录
		2:在PATH中加入：%NODE_HOME%
# 3、验证是否成功
	cmd输入node -v出现版本号则成功
# 4、npm介绍
	全名node package manager：nodejs的包管理工具，相当于后端的maven一样。
# 5、配置npm的淘宝镜像
	先使用:npm config get registry查看当前中央仓库地址，此地址是外国的，需要更换为国内的淘宝镜像
	使用：npm config set registry https://registry.npm.taobao.org配置中央仓库为国内的
	再使用npm config get registry查看镜像地址。
# 6、配置npm依赖下载的位置
	npm config set cache "E:\NodeJS\node-v14.7.0-win-x64\npm-cache"
	npm config set prefix "E:\NodeJS\node-v14.7.0-win-x64\npm_global"
# 7、验证环境配置
	npm config ls 
		; cli configs
        metrics-registry = "https://registry.npm.taobao.org/"
        scope = ""
        user-agent = "npm/6.14.7 node/v14.7.0 win32 x64"

        ; userconfig C:\Users\23665\.npmrc
        cache = "E:\\NodeJS\\node-v14.7.0-win-x64\\npm-cache"
        prefix = "E:\\NodeJS\\node-v14.7.0-win-x64\\npm_global"
        registry = "https://registry.npm.taobao.org/"

        ; node bin location = E:\NodeJS\node-v14.7.0-win-x64\node.exe
        ; cwd = C:\Users\23665
        ; HOME = C:\Users\23665
        ; "npm config ls -l" to show all defaults.

2、安装脚手架

# 1、卸载原有脚手架
	npm uninstall -g @vue/cli  //卸载3.x版本脚手架
	npm uninstall -g vue-cli  //卸载2.x版本脚手架
# 2、安装脚手架
	npm install -g @vue/cli

14-5 第一个脚手架项目

# 1、需要将我们前面设置的下载位置加入到环境变量中
	例如我的这个是：E:\NodeJS\node-v14.7.0-win-x64\npm_global
# 2、测试是否安装成功
	cmd->vue --version，出现版本号则成功
# 3、创建脚手架项目
	切换到我们需要的目录，然后vue init webpack 项目名
	注意：
		1：可能会让你安装init组件，那么npm install -g @vue/cli-init
		2：创建脚手架的中途，会让你确认一系列
			1):确认项目名：回车
			2):确认项目简介：回车
			3):确认作者信息邮箱：回车
			4):忘记了：回车
			5):是否安装路由:y
			6):是否需要els初始化：n
			7):是否需要测试：n
			8):是否需要e2e测试：n
			9):包管理用啥：回车
			10):然后就等

14-6 如何开发脚手架

# 1.创建第一个项目
	hello     ------------->项目名
    -build  ------------->用来使用webpack打包使用build依赖
    -config ------------->用来做整个项目配置目录
    -node_modules  ------>用来管理项目中使用依赖
    -src					 ------>用来书写vue的源代码[重点]
    	+assets      ------>用来存放静态资源 [重点]
      components   ------>用来书写Vue组件 [重点]
      router			 ------>用来配置项目中路由[重点]
      App.vue      ------>项目中根组件[重点]
      main.js      ------>项目中主入口[重点]
    -static        ------>其它静态
    -.babelrc      ------> 将es6语法转为es5运行
    -.editorconfig ------> 项目编辑配置
    -.gitignore    ------> git版本控制忽略文件
    -.postcssrc.js ------> 源码相关js
    -index.html    ------> 项目主页
    -package.json  ------> 类似与pom.xml 依赖管理  jquery 不建议手动修改
    -package-lock.json ----> 对package.json加锁
    -README.md         ----> 项目说明文件

# 2.如何运行在项目的根目录中执行
		npm start 运行前端系统
			注意：如果使用vscode打开后，终端里提示找不到npm命令的话，那么使用管理员的身份打开即可
# 3.如何访问项目
		http://localhost:8081    
# 4.Vue Cli中项目开发方式
	 注意: 一切皆组件   一个组件中   js代码  html代码  css样式
	 	1. VueCli开发方式是在项目中开发一个一个组件对应一个业务功能模块,日后可以将多个组件组合到一起形成一个前端系统
	 	2. 日后在使用vue Cli进行开发时不再书写html,编写的是一个个组件(组件后缀.vue结尾的文件),日后打包时vue cli会将组件编译成运行的html文件	  
# 5.注意，vue中一切皆组件！

15 脚手架中使用axios

# 1、安装axios
npm install axios --save-dev
# 2、在main.js中引入axios并配置
import axios from 'axios';
Vue.prototype.$http=axios;
# 3、使用axios
this.$http.get(xxxxx)，这种用法，我们配置的原因就是将vue中的http请求工具换成axios

16 脚手架中使用ElementUI

# 1、安装ElementUI
npm install element-ui --save-dev
# 2、配置
在main.js中：
	导入组件库import ElementUI from 'element-ui'
	导入样式import "element-ui/lib/theme-chalk/index.css"
	使用Vue.use(ElementUI)

17 vue CLI脚手架项目打包和部署

# 1.在项目根目录中执行如下命令:
	  npm run build
		注意:vue脚手架打包的项目必须在服务器上运行不能直接双击运行
# 2.打包之后当前项目中变化
	 	在打包之后项目中出现dist目录,dist目录就是vue脚手架项目生产目录或者说是直接部署目录

18 使用iview

# 注:这里使用的是最新版本4.x的，看官网文档的时候，记得选文档版本，不然你会气死的，相信我，我就是这样，
# 1、安装
      $ npm install view-design --save
# 2、导入到入口文件
   import ViewUI from 'view-design';
      // import style
      import 'view-design/dist/styles/iview.css';
# 3、设置到vue中
      Vue.use(ViewUI);

备注事项：

vue和nuxt中都不要使用a标签的跳转方式，因为这样会重新加载vue实例，会降低页面速度，我们直接使用路由$ruter.push('路径')更好，这样的好处就是vue实例不会重置，速度更快，而且也方便我们操作store的东西。

做个例子，如果我们store中有一个data为userinfo(这个userinfo是布局中created方法中去请求拿到的)，然后我们从page1到page2，page2需要拿到store中的这个userinfo，如果我们page1中使用a标签的href到达page2，那么这个时候page2中拿到的userinfo始终是空的，因为我们这个时候拿store中的userinfo还没有查询出来，而我们使用$router.push的话，当我们在page1的时候，布局代码中已经请求到了这个userinfo，然后跳转到page2的时候，页面未刷新，所以我们可以拿到已经请求到的userinfo，而不需要重新去获取等操作。

posted on 2020-07-31 20:27  苦行僧DH  阅读(417)  评论(0)  编辑  收藏  举报