凡人多烦事01

这个屌丝很懒，什么也没留下！

热门标签

Vue 笔记---kalrry

作者：凡人多烦事01 | 2024-06-13 05:25:20

踩

Vue 笔记---kalrry

Vue常用技巧：
文档
一、vue
二、vue3.0

Vue常用技巧：

作用	快捷键	备注
创建Vue项目	vue create appname
快速生成组件模板	`Shift`+`<`	vuetr
Vue引CSS		@import “@/文件路径”;
Vue引JS		import swiper from ‘./swiper.js’
Vue引SCSS		import swiper from ‘./swiper.scss’

文档

vue文档

一、vue

1、什么是vue？

vue是现今最为主流的MVVM 框架作者：尤雨溪

vue是 渐进式 的 自低向上增量开发 的MVVM框架

渐进式：渐进式的框架就是一种可以更好的方便的与其他框架整合的模式（只会做职责之内的事情）

自低向上增量开发：从简单到复杂的一个过程 vue在编写的时候先把基本页面写好在逐渐完成逻辑

2、MVVM是什么？

M model 模型===数据

V view 视图=== 用户能够看见的界面

VM viewModel 视图模型===连接视图于模型之间的桥梁

3、vue的特点

1.轻量级

2.高效率

3.上手快

4.文档全面

4、vue–Helloword

1.把cmd的路径切换到你要写项目的位置

初始化不要忘 npm init -y

2.下载

今后所有的依赖全部要被npm（包管理工具）所管理

npm install --save vue\

3.编写如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.先引包 -->
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <!-- M        model          模型===数据

         V         view              视图=== 用户能够看见的界面

         VM      viewModel  视图模型===  连接视图于模型之间的桥梁
        
    -->


    <!-- 2.创建视图层v -->
    <div id="demodiv">
        {{text}}-----{{num}}
    </div>
    <script>
        // 3.创建vm层 vm层就是vue实例 注意大小写
        new Vue({
            // 4连接视图
            el:"#demodiv",
            // 5.创建模型层m
            data:{
                text:"我是字符串",
                num:18,
                bool:true,
                arr:[1111,2222,3333],
                obj:{
                    name:"xioxio"
                }
            }
        })
    </script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

5、{{ }}是什么？

模板语法/模板插值/双大括号赋值

{{表达式}}作用就是把表达式（就是通过计算可以返回结果的公式）放到页面中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <h1>{{text}}</h1>
        <h1>{{num+1}}</h1>
        <h1>{{bool?"你好":"你坏"}}</h1>
        <h1>{{str.toUpperCase()}}</h1>
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                text:"我是字符串",
                num:1,
                bool:true,
                str:"abcdefghijk"
            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

6、指令

6.1. 简介

就是在vue中使用v-前缀的html特殊属性

作用：就是在vue中扩展标签的功能

语法：写在开标前中并且 v-指令名="指令值“

6.2. v-model指令

作用:

在 表单元素 中完成 数据的双向绑定
双向绑定的原理

双向绑定是通过 数据劫持 与 发布者订阅者模式 实现的

数据劫持：

就是当数据改变的时候 vm会通过js的一个Object.defineProperty()来监控数据的改变（在初始化的时候 Object.defineProperty()这个方法会把data里面的所有数据监听起来当监听的数据改变了那么这个方法就会触发通知另一方进行改改变

发布者订阅者模式：

就是一个一对多的关系一个发布者可以对应无数个订阅者如果发布者变了所有的订阅者都会随之发生改变
什么是双向绑定：

就是 视图变模型变

在表单元素中使用v-model绑定的变量如果在视图中改变了那么vm就会得到通知就会通知模型也自动发生改变

模型变视图绑定的数据也随之发生改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <h1>v-model指令</h1>
        <!-- 视图变模型变
        在表单元素中  使用v-model绑定的变量  如果在视图中改变了  那么vm
        就会得到通知   就会通知模型也自动发生改变   -->

        <!-- 模型变视图绑定的数据也随之发生改变 -->
        <input type="text" v-model="text"/>
        <h1>{{text}}</h1>
        <hr>
        如果给复选框绑定一个任意的数据  那么当复选框勾选或者取消的时候会把这个变量改变布尔值
        <input type="checkbox" v-model="ck"/>
        <h1>{{ck?"你勾选了":"你取消了"}}</h1>
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                text:"",
                ck:"我是一个变量"
            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

6.3. v-show指令

作用: 就是切换一个元素的显示或者隐藏(是通过css的方式来控制的)

语法:v-show=“true显示/false隐藏”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <h1>v-show</h1>
        <input type="checkbox" v-model="bool">

        <h1 v-show="bool">我是测试站位的</h1>
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
               bool:true
            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

6.4. v-on指令

作用:就是给html绑定事件的

语法: v-on:事件不加on="函数简写: @事件名不加on="fun() “ 函数写在与el data 等同级的位置 methods来进行表示

6.5. v-for指令

作用: 便利数据并且在页面中进行数据的展示
语法: v-for="( v 便利出来的值, i 便利出来的下标) in 你要便利的数据"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <ul>
            <li v-for="(v,i) in arr">
                {{v}}---{{i}}
            </li>
        </ul>

        <table border="1">
            <tr v-for="(v,i) in obj">
                <td>{{v.name}}</td>
                <td>{{v.age}}</td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                arr:["EZ","VN","MF","NOC"],
                obj:[
                    {name:"xixi1",age:181},
                    {name:"xixi2",age:182},
                    {name:"xixi3",age:183},
                    {name:"xixi4",age:184},
                    {name:"xixi5",age:185},
                    {name:"xixi6",age:186}
                ]
            },
            methods:{

            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

6.6. if 全家桶

v-if

作用:对当前的页面dom内容进行添加或者移除

语法: v-if=“true添加/false移除”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        v-if与v-show的区别
        v-show是使用css来显示和隐藏的  在频繁切换的时候性能损耗低   初始化的时候性能损耗高
        v-if是对dom进行添加或者是移除  在频繁切换的时候性能损耗高    初始化的时候性能损耗低
        
        <input type="checkbox" v-model="bool">
        <h1 v-show="bool">我是v-show</h1>
        <h1 v-if="bool">我是v-if</h1>
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
              bool:false
            },
            methods:{

            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

v-else

不能单独使用必须配合v-if使用与v-if之间不能有第三者

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <h1 v-if="bool">你好</h1>
        <!-- <p>我是占位的if 与 else之间不能有第三者</p> -->
        <h1 v-else>你坏</h1>
    </div>
    <script>

        new Vue({
            el:"#demodiv",
            data:{
              bool:false
            },
            methods:{

            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
       <h1 v-if="num==1">第1个</h1>
       <h1 v-else-if="num==2">第2个</h1>
       <h1 v-else-if="num==3">第3个</h1>
       <h1 v-else-if="num==4">第4个</h1>
       <h1 v-else>什么都不是</h1>
    </div>
    <script>



        new Vue({
            el:"#demodiv",
            data:{
              num:7
            },
            methods:{

            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

6.7. v-bind(初学者最容易忘记的一个指令)

作用: 给html的属性插变量

语法: v-bind:属性=“变量” 简写: :属性=“变量”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <a v-bind:href="ahref">{{text}}</a>
        <a :href="ahref">{{text}}</a>
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                text:"点我去百度",
                ahref:"http://www.baidu.com"
            },
            methods:{

            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

6.8. v-html

作用: 把字符串html在页面解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <div>
            {{text}}
        </div>
        <div v-html="text">

        </div>
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                text:"<em>我是一个斜体么么哒</em>"
            },
            methods:{

            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

6.9. v-once

作用: 一次性插值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <input type="text" v-model="text">
        <h1>{{text}}</h1>
        <h1 v-once>{{text}}</h1>
        <h1>{{text}}</h1>
        <h1>{{text}}</h1>
        <h1>{{text}}</h1>
        <h1>{{text}}</h1>
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                text:"我是默认值"
            },
            methods:{

            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

6.10. v-text

作用:就是解析变量到页面展示同{{}}作用一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <h1>{{text}}</h1>
        <h1 v-text="text"></h1>


    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                text:"你好么么哒~！！！！"
            },
            methods:{

            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

6.11. 扩展— 屏幕闪烁问题

当用户网络不好的时候由于加载速度太慢可能在用户的视图界面展示出很多的{{}}用户体验非常不好然后等数据加载过来之后页面突然间变好了那么这个过程我们叫屏幕闪烁问题

1.使用v-text 替换{{}}绑定数据（太麻烦了不推荐）

2.使用v-cloak指令来完成（用来保持元素在页面关联实例结束之后进行编译）

7、 watch 监听

7.1. 简介

监听data的数据当data的数据改变了那么watch就说收到信息从而处理一些逻辑

7.2. 语法：

// 写在与el  data  methods 等同级的位置
watch:{
  你要监听的数据(newval,oldval){
    你要处理的逻辑
	}
}
1
2
3
4
5
6

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demodiv">
        <input type="text" v-model="text">
        <h1>{{text}}</h1>
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                text:"你好"
            },
            methods:{

            },
            // 监听
            watch:{
                text(newval,oldval){
                    console.log("aaaaa")
                    console.error(newval)//新值
                    console.error(oldval)//旧值
                }
            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

7.3. 疑问？

watch首次加载会触发吗/页面刷新完会触发吗？

watch首次加载页面不触发
那我如果想让他页面在加载完毕就直接触发怎么办？

我们会在上脚手架之后在给大家说

8、computed 计算属性

8.1. 引子

你在{{ }}中写数据的逻辑处理是没问题的但是视图层是展示数据的地方
如果我们在视图层中写了太多了逻辑 导致代码的可维护性降低

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demodiv">
        <!-- 你在{{}}中写数据的逻辑处理是没问题的  但是  视图层是展示数据的地方   
        如果我们在视图层中写了太多了逻辑   导致代码的可维护性降低 -->
        <h1>{{text}}</h1>
        <h1>{{text.toUpperCase()}}</h1>
        <h1>{{text.toUpperCase().substr(1,5)}}</h1>

    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                text:"abcdefgijk"
            },
            methods:{

            },
            watch:{
              
            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

8.2. 作用：

计算（数据处理）属性（vue实例中的一个属性）就是可以对data中的数据进行一些数据处理一条数据在不同位置展示出不同形态的时候

8.3. 语法：

// 写在与el data methods watch等同级的位置
computed:{
	处理完的数据变量(){
			return 你的操纵数据的逻辑
	}
}
1
2
3
4
5
6

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demodiv">
        <!-- 你在{{}}中写数据的逻辑处理是没问题的  但是  视图层是展示数据的地方   
        如果我们在视图层中写了太多了逻辑   导致代码的可维护性降低 -->
        <h1>{{text}}</h1>
        <h1>{{text.toUpperCase()}}</h1>
        <h1>{{text.toUpperCase().substr(1,5)}}</h1>

        <h1>计算属性的方式对text进行处理</h1>
        <h1>{{uppertext}}</h1>
        <h1>{{subtext}}</h1>

    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                text:"abcdefgijk"
            },
            methods:{

            },
            watch:{
              
            },
            computed:{
                uppertext(){
                    // 必须
                    return this.text.toUpperCase()
                },
                subtext(){
                    return this.text.toUpperCase().substr(1,6)
                }
            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

8.4. 疑问？

计算属性 computed 与方法 methods 的区别？

计算属性是 依赖缓存 的，只要处理一次数据这个数据不改变那么之后的所有调用都是从缓存中读取更加节省资源

方法：憨憨的只要调用就执行
computed 计算属性与 watch 有什么区别?

watch 是监听data的数据当data的数据改变了那么watch就会去处理一些逻辑

computed 依赖data数据当data数据改变了那么计算属性会重新计算返回新的结果

9、vue事件对象($event)

谁触发这个事件，事件对象就是谁，$event 来表示事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <input type="text" @keydown="fun($event)">
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{

            },
            methods:{
                fun(e){
                    if(e.keyCode==13){
                        console.log("回车被按下了");
                    }
                }
            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

9.1. 修饰符

就是用来简化我们对于事件处理的一些操作

v-on:事件.修饰符=“函数”

9.2. 按键修饰符

简化了我们对于键盘相关事件的处理

.up .down .enter .ctrl .space

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <input type="text" @keydown.ctrl="fun()">
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
            },
            methods:{
                fun(){
                   console.log("我被按下了"); 
                }
            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

9.3. 事件修饰符

在没有冲突的情况下修饰符是可以串联的

对于我们经常处理的事件进行处理、

prevent 阻止事件默认行为

stop 阻止事件冒泡

captrue 设置事件为捕获方式

self 只会触发自己范围内的事件不包含子组件

once 事件只会触发一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <style>
        .fu{
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .zi{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="demodiv">
        <div class="fu" @click="fu()">
            <div class="zi" @click.stop.once="zi()"></div>
        </div>
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{

            },
            methods:{
                fu(){
                    console.log("fuffufufuf");
                },
                zi(){
                    console.log("zizizizzizi");
                },
            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

10、生命周期的钩子函数

10.1. 钩子函数简介

在程序运行过程中被自动执行的函数叫钩子函数

10.2. 生命周期

vue实例从创建到销毁的过程

10.3. 生命周期的钩子函数

写在与el data methods 等同级的位置

实例创建之前 beforeCreate ()

实例创建之后 created()

模板渲染之前 beforeMount()

模板渲染之后 mounted()

数据更新之前 beforeUpdate()

数据更新之后 updated()

实例销毁之前 beforeDestory()

实例销毁之后 destoryed()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <h1>{{text}}</h1>
        <button @click="text='我变了'">点我修改</button>
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                text:"你好"
            },
            methods:{
                
            },
            watch:{

            },
            computed:{

            },
         
            beforeMount(){
                console.log("模板渲染之前")
            },
            mounted(){
                console.log("模板渲染之后");
            },


            beforeCreate(){
                console.log("实例创建之前");
            },
            created(){
                console.log("实例创建之后");
            },

            beforeUpdate(){
                    console.log("数据更新之前");
            },
            updated(){
                console.log("数据更新之后")
            },
            beforeDestory(){
                console.log("实例销毁之前");
            },
            destoryed(){
                console.log("实例销毁之后");
            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

10.4. 问答？

页面第一次加载执行那些生命周期的钩子?

执行了实例创建与模板渲染的着4个钩子
生命周期钩子函数的作用？

在程序运行的时候给我们提供了一个自动执行的场所
生命周期共有几个阶段？

4大阶段实例创建模板渲染数据更新实例销毁

8个钩子
Dom在那个阶段加载完成？

mounted阶段已经把dom加载完毕
简述每个生命周期的钩子函数/请你给我说下vue创建的过程原理

beforeCreate () 在这个阶段数据观测（数据的创建双向绑定的劫持）与事件的初始化还没有开始created() 数据观测已经完成 vue的属性方法等这些内容已经准备好了但是这个时候dom还没有开始加载（页面还没有内容显示）

beforeMount() 页面的dom准备开始编译渲染了也开始准备把页面进行编译了但是还没有挂在到el上（页面还没有显示）

mounted() 页面已经显示，挂载在页面中了并且dom内容也已经加载完成了

beforeUpdate() 已经把要更新的内容准备好了并且也准备开始更新了

updated() 更新完成并且也显示在页面中了

beforeDestory() 开始准备销毁但是此时vue还能用

destoryed() 啥都没有了

11、vue-cli

11.1. 准备

电脑上面必须有node 如果有打开cmd 输入 node空格-v查看下版本如果版本是12以下

建议删掉你的node重新安装一个高一点的版本最少12以上

建议电脑上都安装以下淘宝镜像并且把npm的镜像源切换到淘宝上：

npm config set registry https://registry.npm.taobao.org
1

11.2. 创建

我们现在要常见的脚手架是4.0的版本

1.全局下载脚手架 npm install -g @vue/cli

2.查看版本 vue --version

以上这两部只需要执行一次即可除非你重新装系统了或者重新安装node了否则执行一次就好今后就不需要了

3.把cmd的路径切换到你要下载的文件夹路径之下

4.开始创建项目 vue create 你的项目名然后稍等选择第三项自定义剩下的眼睛一闭一路回车

5.cd到你的项目路径下

11.3. 拿到空项目怎么办？

1.删除src文件夹下 components下的 Helloword.vue文件

2.删除app.vue文件夹下的指定内容

<template>
  <div id="app">
    <!-- 1.删除如下内容 -->
    <!-- <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  </div>
</template>

<script>
// 2.删除如下内容
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    // 3.删除如下内容
    // HelloWorld
  }
}
</script>

<style>
/* 4.删除如下内容 */
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

3.我们需要创建自己的文件

在components文件夹下创建一个我们自己的 xx.vue文件写入如下内容

<template>
  <div>
      写我们自己组件的内容
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4.app.vue中使用我们创建的组件

<template>
  <div id="app">
    <!-- 3.使用 -->
    <Home/>
  </div>
</template>

<script>
// 1.引用  引用单文件组件的时候首字母大写
import Home from "./components/home.vue"

export default {
  name: 'App',
  components: {
    // 2.调用
    Home
  }
}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

11.4. .vue文件是什么？

.vue文件全名是单文件组件

一个文件包含三个内容

template 你写html的地方

script 你写js的地方

style 你写css的地方

11.5. vue中的属性在.vue中怎么写？

11.6. data

data的写法是有变化的

vue的组件data为什么是一个函数而不是对象？

<template>
  <div>
      我是妹子的区域{{text}}
  </div>
</template>

<script>
export default {
    data(){
        return {
            text:"我是字符串"
        }
    }
}


</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

11.7. 剩下的属性没有区别

<template>
  <div>
      我是妹子的区域{{text}}
      <input type="text" v-model="text">
      <button @click="fun()">点我调用函数</button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            text:"我是字符串"
        }
    },
    methods:{
        fun(){
            console.log("你好");
        }
    },
    watch:{
        text(newval){
            console.log(newval)
        }
    }
    // 计算属性也和本地模式相同
}


</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

12、组件

12.1. 简介

组件就是把一个页面拆分成多个小区域单独来编写效率高了复用性也提高了降低了测试难度

组件的本质是：自定义标签

12.2. 全局组件—component

全局组件引用一次之后在任何地方都可以直接使用了

12.3. 基本语法

1.创建组件

2.在main.js中配置全局组件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

// 全局组件
// 1.引用
import Demo from "./components/demo.vue"
// 2.调用
// Vue.component("组件的名字随便起",你引用的组件)
Vue.component("Demo",Demo)

// 全面引用elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
// 全面引用elementui


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

3.在任何的组件中直接可以使用

12.4. ui库/组件的二次封装

12.5. 局部组件components

使用局部组件

1.引用

2.调用

3.使用

12.6. 父子组件

就是组件与组件之间相互引用的关系引用者就是父组件被引用者就是子组件

12.7. 父子组件作用域

父组件的数据子组件能直接读取吗？

子组件不能直接读取父组件的数据

子组件的数据父组件能直接读取吗？

父组件不能直接读取子组件的数据

组件是一个完整的独立的个体他自己的数据 默认情况 下只能自己使用不能被其他组件使用

13、组件传值

13.1. 正向传值—props

你问你父亲要—正向传值

props就是可以接收组件外部传递进来的数据

语法:写在与el data methods 等同级的位置

props:[ “接收数据的变量1”,“接收数据的变量2”,…n ]

<template>
  <div>
      zizizizi----{{xiaoming}}
  </div>
</template>

<script>
export default {
  // 定义props设置接收变量
  props:["xiaoming"]
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

父组件就可以给这个接收变量上传递数据了

<template>
  <div>
      fuffufufufufufu
      <!-- 在子组件被调用的地方 把props当成属性来进行传值 -->
      <Zi :xiaoming="text"></Zi>
  </div>
</template>

<script>
import Zi from "./zi.vue"
export default {
  data(){
    return {
      text:"我是父组件的数据"
    }
  },
    components:{
        Zi
    }
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

13.1.1 props验证

就是对父组件传递过来的数据进行校验判断它的数据是否是我们预先定义好想要的

语法

props:{

你的props变量:数据类型 //验证一种类型

你的props变量:[ 第一个数据类型,第二个数据类型,…n ] //验证一种类型

你的props变量: {

type:你的数据类型,

default: 你的默认值

} // 设置默认值

}

注意:props验证不会对页面的展示造成影响他只会在控制台给我们一个警告提示提示我们数据类型有问题

<template>
  <div>
      <h1>我是子组件-----{{title+1}}</h1>
  </div>
</template>

<script>
export default {
    // props:["title"],
    // props验证
    props:{
        // title:Number,//只能验证一种
        // title:[String,Number] //验证多种类型
        title:{
            type:String,
            default:"我是title的默认值么么哒^_!!!"
        }
    }
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

13.2. 逆向传值

你父亲问你要—逆向传值

注意：在vue中逆向传值是不被允许的

实现:

(1)把数据放在自定义事件上（抛出自定义事件）

$emit( “自定义事件名随便写”, 自定义事件绑定的数据 ) 自定义事件

<template>
  <div>
      ziziziziz
      <!-- 1.逆向传值需要通过事件来触发才行 -->
      <button @click="fun()">点我逆向传值</button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            text:"我是子组件的数据呵呵！！！！"
        }
    },
    methods:{
        fun(){
            // 2.通过自定义事件来抛出子组件的数据
            this.$emit("emitdemo",this.text)
        }
    }
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

(2)接收自定义事件传递的参数(接收自定义事件的数据)\

<template>
  <div>
      fuffufufufufu
      <!-- (3) 绑定子组件的自定义事件  但是 父组件调用的时候函数不加()不加()不加()
      函数不加()不加()不加()
      函数不加()不加()不加()
      函数不加()不加()不加()
      函数不加()不加()不加()
      函数不加()不加()不加()
      函数不加()不加()不加()
      函数不加()不加()不加()
       -->
      <Ez @emitdemo="fun"/>
  </div>
</template>

<script>
import Ez from "./emitzi.vue"
export default {
    components:{
        Ez
    },
    methods:{
        fun(text){
            console.log("我是父组件的函数---"+text)
        }
    }
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

注意

emit( ) 大家要记住它的作用是自定义事件

13.3. 同胞传值-中央事件总线(eventbus)

你兄弟问你要—也就是同胞/同级传值

就是在两个需要传递数据的组件之上的一个空的vue实例那么这个实例就用来作为传递数据的桥梁进行兄弟传值

使用

1.创建这个中央事件总线（vue实例）在src创建一个文件夹用来容纳eventbus

import Vue from "vue"
export default new Vue
1
2

2.在需要传递的组件中进行抛出

只需要在这个实例上绑定一个自定义事件

中央事件总线.$emit(事件名,数据)

<template>
  <div>
      aaaaaaaaaaaaaaa
      <button @click="fun()">点我传递数据给b</button>
  </div>
</template>

<script>
// 1.引用中央事件总线
import EventBus from "@/eventbus/index.js"
export default {
    methods:{
        fun(){
            // 2使用中央事件总线抛出数据
            EventBus.$emit("demoa","你好我是a的数据")
        }
    }

}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3.在需要使用接收数据的组件中进行接收

$on() 监听实例上的自定义事件

<template>
  <div>
      bbbbbbbbbbb
  </div>
</template>

<script>
// 1.引用中央事件总线
import EventBus from "@/eventbus/index.js"
export default {
    mounted(){
        // 2.监听实例上的自定义事件
        // EventBus.$on("你要监听的事件名",(xx就是那边抛出来的数据)=>{})
        EventBus.$on("demoa",(val)=>{
            console.log(val);
        })
    }
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

13.4. 跨组件传值–vuex

你爷爷问你要—跨组件传值

13.4.1. vuex简介

vuex 就是状态数据管理工具把一个项目中的数据全部放到vuex中统一管理起来那么这样子一来那个组件想用数据那么这个组件就直接去vuex中取就可以了在也不需要一层一层的数据传递了

创建好vuex的项目之后会多一个store的文件夹 ---- 》存储vuex的内容文件夹

import Vue from 'vue'//引用vue
import Vuex from 'vuex'//引用vuex

Vue.use(Vuex)//在vue中使用vuex

export default new Vuex.Store({//创建store实例 vuex的实例
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
}) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

13.4.2. vuex的5大属性

1. state

就是数据源用来存储vuex数据的属性

import Vue from 'vue'//引用vue
import Vuex from 'vuex'//引用vuex

Vue.use(Vuex)//在vue中使用vuex

export default new Vuex.Store({//创建store实例 vuex的实例
  state: { //数据源   vuex的所有数据都写在state当中即可
    name:"xixi",
    age:18,
    arr:[1111,22222,33333],
    obj:{
      sex:"男"
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }    
}) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

使用vuex的数据

在想使用的组件中直接使用 this.$store.state.xxx 直接进行使用

使用vuex的数据

可以使用计算属性的方式进行取值

<template>
  <div class="about">
    <h1>This is an about page---{{this.$store.state.text}}--{{newtext}}</h1>
  </div>
</template>
<script>
export default {
  computed:{
    // 从vuex中取出数据
    newtext
      
      return this.$store.state.text
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2. modules

modules就是vuex中的模块在传统的项目中由于项目的体积逐渐变大今后会有一个问题就是store文件夹下的index.js中state的内容会越来越多导致后期维护或者代码编写的时候难度加大

所以在这个时候我们可以把vuex查分成一个个个的小模块分别管理降低了代码的复杂度

使用;

1.在store下创建一个文件夹‘ 用来存储模块

2.然后在模块文件夹中创建文件并写入如下内容

let homem={
    state:{
        hometext:"我是home数据",
    }
}
export default homem
1
2
3
4
5
6

3.关联模块

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 1.先引用模块
import aboutm from "./modules/aboutm.js"
import homem from "./modules/homem.js"

export default new Vuex.Store({
  state: {
   
   
  },
  mutations: {
  },
  actions: {
  },
  modules: { // 2。关联模块
    aboutm,
    homem
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

注意注意：

当我们在vuex中使用模块的时候获取数据就需要变成 this.$store.state.模块名.你的数据

<template>
  <div class="about">
    <h1>This is an about page---{{this.$store.state.homem.hometext}}--{{newtext}}</h1>
  </div>
</template>
<script>
export default {
  computed:{
    // 从vuex中取出数据 不要忘了.模块名
    newtext(){
      return this.$store.state.aboutm.abouttext
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3. mutations 修改数据

在vuex中数据state的修改不能直接改必须要通过 mutations来对state进行修改

1.触发修改的这个动作 this.$store.commit(“你要触发的修改动作名”)

<template>
  <div>
      <h1>数据修改--{{newnum}}</h1>
      <button @click="fun()">点我修改数据</button>
  </div>
</template>

<script>
export default {
    methods:{
        fun(){
            // 触发mutations的修改  vuex的commit传递的是一个字符串
            // 这个字符串就是你要触发修改的动作名 但是 在工作中通常大家都会把
            // 动作名写成大写 用来区分和数据的不同
            this.$store.commit("DATA_NUM_UPDATE")
        }
    },
    computed:{
        newnum(){
            return this.$store.state.commitm.num
        }
    }
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2.在vuex中编写修改动作

let commitm={
    state:{
        num:666
    },
    mutations:{//vuex的数据修改的位置 mutaions中是一个个的函数  每个函数就是一个修改的动作
        // state这个形参就是上面那个数据源
        DATA_NUM_UPDATE(state){
            state.num=9527
        }

    }
}
export default commitm
1
2
3
4
5
6
7
8
9
10
11
12
13

payload载荷

在上面的数据修改中我们是吧mutations中的修数据写死了不太灵活所以我们可以使用payload接收commit中的数据

1。在触发动作的时候给commit传递第二个参数

<template>
  <div>
      <h1>数据修改--{{newnum}}</h1>
      <button @click="fun()">点我修改数据</button>
      <button @click="funb()">点我修改数据2</button>

  </div>
</template>

<script>
export default {
    methods:{
        fun(){
            // 触发mutations的修改  vuex的commit传递的是一个字符串
            // 这个字符串就是你要触发修改的动作名 但是 在工作中通常大家都会把
            // 动作名写成大写 用来区分和数据的不同
            this.$store.commit("DATA_NUM_UPDATE")
        },
        funb(){
            // 第一个参数是你调用mutations的名字
            // 第二个参数  就是你传递给mutations的数据
            this.$store.commit("DATA_NUM_UPDATEB",{text:9529})
        }
    },
    computed:{
        newnum(){
            return this.$store.state.commitm.num
        }
    }
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

2.在mutations中定义payload接收

let commitm={
    state:{
        num:666
    },
    mutations:{//vuex的数据修改的位置 mutaions中是一个个的函数  每个函数就是一个修改的动作
        // state这个形参就是上面那个数据源
        DATA_NUM_UPDATE(state){
            state.num=9527
        },
        // payload就是接收commit的第二个参数
        DATA_NUM_UPDATEB(state,payload){
            state.num=payload.text
        }

    }
}
export default commitm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

刷新丢失

vuex在数据修改之后刷新页面会丢失

   // 解决数据刷新丢失
    created () {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    } 

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12

4. actions

actions 就是vuex中的异步触发器（在actions中用来写异步操作）

1.页面触发actions

this.$store.dispatch(“你要触发actions的名字”)

<template>
  <div>
      <h1>异步请求闭环操作</h1>
  </div>
</template>

<script>
export default {
    mounted(){
        // 调用actions触发异步请求
        this.$store.dispatch("AXIOS_LINK")
    }
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.在actions中进行异步操作

// 引用请求封装
import getlink from "@/api/getapi.js"
let actionsm={
    state:{

    },
    mutations:{

    },
    // 就是放置异步操作的
    // acitons中就是一个个的方法  每个方法是一个异步操作
    actions:{
        AXIOS_LINK(){
            // 放置异步操作
            getlink("/mock/data").then((ok)=>{
                console.log(ok);
            })

        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

5. getters

getters就是vuex中的计算属性

1.在state mutations等同级的位置编写

  // 计算属性
    getters:{
        // 这个state的形参就是上面的数据源
        newtext(state){
            return state.text.toUpperCase()
        }
    }
1
2
3
4
5
6
7

2.在想使用的组件内使用 this.$store.getters.xxx

{{this.$store.getters.newtext}}
1

14. slot插槽/槽口

14.1. 引子

<template>
  <div>
      fuffufufufufufu
     
      <!-- 组件的本质是什么?
      自定义标签
      标签的分类有哪些？
      单标签双标签
      为什么会有单双两种标签？
      双标签通常需要向其内部插入内容才会显示
       -->
       <Sz></Sz>
       <!-- 默认情况下在组件调用的时候  插内容是不显示的 -->
       <Sz>
           <h1>能在里面写东西吗？</h1>
       </Sz>
  </div>
</template>

<script>
import Sz from "./slotzi.vue"
export default {
    components:{
        Sz
    }
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

14.2. slot是什么？

用来混合父组件的内容于子组件自己的模板(就是可以在组件被调用的时候向其内部插入新的dom)

在组件使用的时候再次提升了组件的可复用性

<template>
  <div>
    ziziziziziz
    <!-- 设置了槽口  从而在组件调用的时候  在开关标签内插入新的dom内容 -->
    <slot></slot>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

14.3. 具名槽口

带有名字的槽口

使用：

1.需要给槽口起名字 name属性起名字

   <slot name="demo"></slot>
1

2.在插入新的dom的时候使用 slot属性来进行插入

  <h1 slot="demo">能在里面写东西吗？1</h1>[]
1

15. 扩展----项目怎么启动

只需要进入项目找到项目根路径下的 package.json文件中的scripts 节点即可知道

但是注意所有的名字启动都要是npm run 你设置的名字

但是只有一个是start 的启动是可以 npm start 或者 npm run start

16. 路由

就是通过路由技术可以让我们完成单页面应用 (SPA)

通过路由可以让我们进行根据url的切换从而程序切换不同的页面

单页面应用spa 所谓的单页面应用不是只会显示一个页面而是运行的时候只会有一个html文件在运行其中的组件页面切换的时候实质上是一个组件页面显示需要切换的时候把这个显示的组件页面替换成另一个而基本的浏览器上的html文件并不发生改变

好处 : 用户的体验非常的好在切换页面的时候没有等待很丝滑

缺点: 首次加载的时候可能会因为第一次加载内容太多造成页面白屏问题

16.1. 路由创建

16.1.1. 脚手架创建方式

就是在创建项目的时候使用光标上下按键找到router 并且使用空格键选中来进行项目的创建、

大家会发现项目src下多了两个文件夹

router文件夹-----》j就是写路由配置的文件夹

views文件夹------》就是页面组件文件夹

16.1.2. 拿到带路由的空项目

1.删除views页面文件夹中默认的内容并且根据我们的需求添加创建对应的.vue文件

2.需要去配置路由 router文件夹下的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

// 1.把你要用的组件页面 先引进来
import Fenlei from "../views/fenlei.vue"
import Gouwu from "../views/gouwu.vue"
import Home from "../views/home.vue"
import Jingxi from "../views/jingxi.vue"
import Wode from "../views/wode.vue"

Vue.use(VueRouter)
// 2.配置规则
const routes = [
  {
    path: '/home',//   配置url路径
    name: 'Home',//给当前规则起个名字
    component: Home//设置引用的组件
  },
  {
    path: '/fenlei',//   配置url路径
    name: 'Fenlei',//给当前规则起个名字
    component: Fenlei//设置引用的组件
  },
  {
    path: '/gouwu',//   配置url路径
    name: 'Gouwu',//给当前规则起个名字
    component: Gouwu//设置引用的组件
  },
  {
    path: '/jingxi',//   配置url路径
    name: 'Jingxi',//给当前规则起个名字
    component: Jingxi//设置引用的组件
  },
  {
    path: '/wode',//   配置url路径
    name: 'Wode',//给当前规则起个名字
    component: Wode//设置引用的组件
  },

]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

3.设置路由导航

4.设置路由出口

16.1.3. 路由导航

就是控制页面切换的标签或者功能等同于原来你们写的超链接

16.1.3.1. 声明式导航

router-link to属性开控制跳转路径

      <router-link to="/home">Home</router-link> |
      <router-link to="/shop">Shop</router-link> |
      <router-link to="/user">user</router-link> |
      <router-link to="/phone">phone</router-link> |
1
2
3
4

声明式导航动态类名

当我们写完了上面的 routerlink 运行之后,在开发者工具中查看编译后的 routerlink 会发现到我们点击切换路由或者手动修改 url 地址匹配到指定路由的时候,会给 router-link 导航动态的添加一个类名 router-link-active 的名字这个类名是 vue 自动添加的,方便我们设置选中时候的样式

16.1.3.3. 编程式导航

使用js的方式完成路由页面的跳转

this.$router.push("/你去的地方")

<template>
  <div>
      home
      <button @click="fun()">点我去shop</button>
  </div>
</template>

<script>
export default {
    methods:{
        fun(){
            // 编程式导航   
            this.$router.push("/shop")
        }
    }
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

this.$router.replace( ) 替换

this.$router.go( ) 正数前进负数后退

16.2. 路由出口

router-view

标识路由页面显示的位置 必须有 只是在接收加创建的方式中 router-view 会被自动创建

手工创建方式

17. 多级路由

它的创建流程和一级基本相同唯独就是在配置规则的时候有点区别

创建二级路由的组件页面
配置路由规则

（1）先引用

（2）再配置规则你要找到是那个一级路由的二级子路由就在对应的一级路由规则中使用 children 来进行配置

{
    path: '/shop',
    name: 'Shop',
    component: Shop,
    // 配置二级路由
    children:[
      {
        path: '/era',
        name: 'Era',
        component: Era
      },
      {
        path: '/erc',
        name: 'Erc',
        component: Erc
      },
      {
        path: '/erd',
        name: 'Erd',
        component: Erd
      },
      {
        path: '/ere',
        name: 'Ere',
        component: Ere
      },
    ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

设置导航
千万要记住不要忘了设置路由出口 router-view

千万要记住不要忘了设置路由出口 router-view

千万要记住不要忘了设置路由出口 router-view

千万要记住不要忘了设置路由出口 router-view

千万要记住不要忘了设置路由出口 router-view

千万要记住不要忘了设置路由出口 router-view

千万要记住不要忘了设置路由出口 router-view

千万要记住不要忘了设置路由出口 router-view

千万要记住不要忘了设置路由出口 router-view

<template>
  <div>
      shop

      <router-link to="/era">era</router-link>&nbsp;&nbsp;
      <router-link to="/erc">erc</router-link>&nbsp;&nbsp;
      <router-link to="/erd">erd</router-link>&nbsp;&nbsp;
      <router-link to="/ere">ere</router-link>&nbsp;&nbsp;


      <!-- 设置二级路由的出口 -->
      <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

17.1. 小扩展

之前的二级路由规则在写的时候 path是 /二级路由

{
        path: '/erd',
        name: 'Erd',
        component: Erd
      },
1
2
3
4
5

但是这个path还可以写成不带/的写法

{
        path: 'erd',    不带/
        name: 'Erd',
        component: Erd
      },
1
2
3
4
5

如果不带/ 那么在路由导航设置的时候路径必须是 /一级路由/二级路由

<router-link to="/shop/era">era</router-link>&nbsp;&nbsp;
<router-link to="/shop/erc">erc</router-link>&nbsp;&nbsp;
<router-link to="/shop/erd">erd</router-link>&nbsp;&nbsp;
<router-link to="/shop/ere">ere</router-link>&nbsp;&nbsp;
1
2
3
4

17.2. 路由模式

hash 模式默认模式（不写模式就是hash模式）

history 模式

区别

区别	hash	history
#号	带#	不带#
兼容性	兼容低版本浏览器	是H5新特性所以不支持低版本浏览器
刷新丢失	刷新没事	在上线之后刷新会丢失

某些app中在嵌入页面的时候由于安全机制是禁止路径中带特殊符号的

const router = new VueRouter({
  mode: 'history', //设置路由模式
  base: process.env.BASE_URL,
  routes
})                                                                      
1
2
3
4
5

18. 路由传参-动态路由匹配

把数据从一个组件页面传递到另外一个组件页面中

18.1. query方式

语法：

发送数据

1. 声明式

<!-- <router-link v-bind:to="{name:'你要去的页面规则的name',query:{发送数据的key:发送数据的val}}">点我把数据发送到user页面</router-link> -->
<router-link v-bind:to="{name:'User',query:{xiaoming:'我是声明式导航发送的数据么么哒'}}">点我把数据发送到user页面</router-link>
1
2

方式2

<!-- 方式2 -->
<router-link v-bind:to="{path:'你要去的页面路径',query:{发送数据的key:发送数据的val}}">点我把数据发送到user页面</router-link>
1
2

2. 编程式

// this.$router.push({name:'你要去的页面规则的name',query:{发送数据的key:发送数据的val}})
// this.$router.push({path:'你要去的页面路径',query:{发送数据的key:发送数据的val}})
this.$router.push({path:'/user',query:{xiaohong:"我是编程式发送的query数据"}})
1
2
3

2.接收数据

在你需要接收数据的页面中直接接收

<template>
  <div>
      user
      <!-- 接收数据 -->
      <h1>{{this.$route.query.xiaoming}}</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

18.2. params方式

语法：

1.在路由规则中设置接收参数

     {
        path: 'erc/:xiaoming',//在要接收参数的路由规则中设置接收参数
        name: 'Erc',
        component: Erc
      },
1
2
3
4
5

2.发送数据

1. 声明式

<!-- 声明式  params方式只能使用name  不能使用path-->
      <!-- <router-link :to="{name:'你去的路由规则的name',params:{发送数据的key和规则中设置的相同:数据}}"></router-link> -->
      <router-link :to="{name:'Erc',params:{xiaoming:'我是params声明式的数据'}}"></router-link>
1
2
3

2. 编程式

就是把声明式to里面的东西写在push()当中

3.接收数据

this.$route.params.xxxx

18.3. query与params的区别

用法上

query2步

params3步

query发送数据的时候可以使用name也可以使用path 但是params只能使用name
url展示上

params方式：只展示数据

http://localhost:8080/shop/erc/我是数据
1

query方式: key和val都展示

http://localhost:8080/all?newsid=3456456
1

19. route 与 router 区别

router 是vue路由对象 router是一个全局对象他包含了所有的路由信息

route 是当前页面路由对象

20. 路由懒加载及方式

懒加载就是按需加载，也就是需要时再加载内容

如果不使用路由懒加载技术可能会造成首页白屏问题（如果项目的页面很多那么第一次加载的时候就会把着很多个页面都要进行编译浪费很长时间那么这样一来就可能造成用户首先看到的就是白屏等页面全部加载完用户才能看到界面用户体验非常的不好）

方式

20.1. 异步组件方式

(resolve) => require(['要使用组件的路径'], resolve)
1

20.2. import 导入方式

() => import('要使用组件的路径')
1

21. 路由扩展

21.1. 重定向 redirect

重新定位方向

设置在路由规则的所有规则之后

 // 设置路由重定向
  {
    path:"/",
    redirect:"/home"
  }
1
2
3
4
5

21.2. 404 页面

// 一定要在所有配置规则的最下面
  {
    path: '*',
    name: 'no',
    component: () => import('../views/no.vue')
  },
1
2
3
4
5
6

22. 路由守卫-导航守卫-路由钩子

就是在路由跳转的时候提供一个自动执行的函数可以在今后用于对用户状态进行判断的一个作用

22.1. 全局守卫

就是对全部路由在跳转的时候都会触发的钩子函数

1. 全局前置守卫

to 你要去哪里的路由信息

from 你从那个路由来的信息

next() 下一步

router.beforeEach((to,from,next)=>{

你要执行的逻辑

})

router.beforeEach((to,from,next)=>{
      console.log(to);
      console.log(from);

      if(to.path=="/home"||to.path=="/phone"){
        next()
      }else{
        alert("您没有登录请您登录后访问vip页面！！！")
         // 下一步必须写
        next(false)
      }

1
2
3
4
5
6
7
8
9
10
11
12

2. 全部后置守卫

router.afterEach()

  router.afterEach((to,from)=>{
        console.log(to);
        console.log(from);
      })
1
2
3
4

22.1. 路由独享守卫

只对当前路由生效

beforEnter((to,from,next)=>{

})

  {
    path: '/phone',
    name: 'phone',
    component: () => import('../views/phone.vue'),
    // 路由独享守卫写在那个路由规则中
    beforeEnter:(to,from,next)=>{
      console.log(to);
      console.log(from);
      alert("您没有登录")
      next(false)
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12

22.1. 组件内守卫

进入组件的时候生效写在你想生效的组件里面

beforeRouteEnter

离开组件的时候生效
beforeRouteLeave

    beforeRouteEnter(to,from,next){
        console.log(to);
        console.log(from);
        
        console.log("进入组件的时候生效");
        next()
    },
    beforeRouteLeave(to,from,next){
        if(confirm("确定离开吗?")){
            next()
        }else{
            next(false)
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

23. 扩展-路径-@符号

无论在那个路径下只要使用@就代表src路径

24. 前后台交互

24.1. 简介

什么是前台什么是后台

前台就是用户能看到的东西（展示数据的）

后台就是支持前台的数据源（处理与提供数据的）
前后台交互的方式

1. 原生 ajax

2. jquery ajax 就是对XHR对象进行的封装

3. axios 就是对XHR对象进行的封装在封装的过程中使用了 promise来进行封装让他更加符合当下主流语法

4. fetch 是es7中最新推出的请求他与XHR无关是es中推出的新数据获取方式（react详细说）

24.2. axios使用

axios是一个第三方的数据请求所以我们可以在vue中使用也可在其他地方进行使用

1.下载 npm install --save axios

2.在你想使用的位置引用

3.使用

axios.get()
axios.post()
axios({
	url:"xxxxxx",
	method:"方式"
}).then((成功形参)=>{
	成功怎么处理
}) .catch(（失败的形参）=>{
	失败了怎么处理
})
1
2
3
4
5
6
7
8
9
10

<template>
  <div>
      <h1>axios数据请求</h1>
      <button @click="fun()">点我发送请求</button>
  </div>
</template>

<script>
// 1.引用
import axios from "axios"
export default {
    methods:{
        fun(){
            // 2.编写请求
            axios({
                url:"/data/mock",
                method:"GET"
            }).then((ok)=>{
                console.log(ok)
            }).catch((err)=>{
                console.log(err)
            })
        }
    }
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

25. 请求/响应拦截器

25.1. 简介

拦截器就是对我们的请求以及响应进行拦截

25.2. 拦截请求

在每次发送请求之前拦截到这个请求并且携带一些参数减少每次发送请求都要携带参数的复杂度

响应拦截

响应拦截的作用就是在接收到响应信息之后进行一些后续的操作

使用：

1.在src下创建一个utils 的文件夹( 工具文件夹其中放的内容通常都是一些工具库存放的就是一些没有也没有关系但是有了可以让程序更加高效执行的代码 )

2.随便创建一个文件用来存放拦截器代码（service.js request.js）

// 编写拦截器代码
import axios from "axios"
// 创建axios
const service = axios.create()

// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

//   暴漏
export default service
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

25.3. 请求封装

1.在src下新建一个api文件夹

就是用与存放数据请求封装的使用promise进行封装

// 咱们请求数据是需要通过拦截器去请求的所以先引用拦截器
import service from "@/util/service.js"

let apilink=(url)=>{
    return new Promise((resolve,reject)=>{
            url,
            method:"get"
        }).then((ok)=>{
            resolve(ok) 
        }).catch((err)=>{
            reject(err)
        })
    })
}

export default apilink
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

26. 跨域

为什么造成跨域？

同源策略端口域名协议不同的时候因为这个是浏览器的安全机制

解决跨域的方式:

26.1. jsonp

26.2. 代理跨域（vue,react）

就是使用脚手架中的一个叫devServer的微型服务器帮助我们获取数据那么这样一来就绕开了浏览器没有了浏览器就没有同源策略这个概念所以就没有了跨域问题

实现：

（1）在根路径下创建vue.config.js

(2) 写入如下内容

module.exports={
    devServer:{
        open:true,//自动开启浏览器
        port:8888, //设置端口
        proxy:{ //设置devServe解决跨域问题
            "/api":{
                // 我们需要告诉devserver帮我们解决那个地址的跨域
                target:"http://www.weather.com.cn",
                changeOrigin:true,
                ws:true,
                // 替换地址
                pathRewrite:{
                    "^/api":""
                }
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

(3)修改你请求的地址为/api

<template>
  <div class="about">
    <h1>请求数据</h1>
    
  </div>
</template>
<script>
import getlink from "@/api/getapi.js"
export default {
  created(){
    // 修改成跨域
    getlink("/api/data/cityinfo/101320101.html").then((ok)=>{
      console.log(ok);
    })
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

26.3. 反向代理跨域解决

26.4. 后台解决跨域 CORS

27. 请求方式

27.1. get数据发送—params

get发送数据只需要在axios中使用params属性来进行数据的发送

import service from "@/utils/service.js"

let getlink=(url,params)=>{
    return new Promise((resolve,reject)=>{
        service.request({
            url,
            method:"GET",
            // get发送数据
            // params:{你数据的key:val}
            params
        }).then((ok)=>{
            resolve(ok)
        }).catch((err)=>{
            reject(err)
        })
    })
}
export default getlink
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

27.2. post发送数据

1.使用data发送数据

import service from "@/utils/service.js"

let postlink=(url,data)=>{
    return new Promise((resolve,reject)=>{
        service.request({
            url,
            method:"POST",
            // post使用data
            data
        }).then((ok)=>{
            resolve(ok)
        }).catch((err)=>{
            reject(err)
        })
    })
}
export default postlink
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.转换

 fun(){
           let usp = new URLSearchParams()//帮助axios解析post  数据
        //    usp.append("key","val")
           usp.append("uname",this.inputaval)
           usp.append("upwd",this.inputbval)

            postlink("/api/user/denglu",usp).then((ok)=>{
                console.log(ok);
            })
        }
1
2
3
4
5
6
7
8
9
10

28. 扩展

28.1. 模拟数据mockjs

在开发的时候我们有时候写页面正常情况下数据是后端给我们的但是写的时候可能后端数据还没有写好为了不影响我们写代码所以我们可以使用mock模拟数据来先替代后台的数据

1.下载 npm install --save mockjs

2.我们要在新建一个文件夹 mock文件夹在其中在创建一个data文件夹用来存放模拟数据在和data同级的位置创建一个index.js文件用来写mock的代码

3.创建mock代码

// 1.引用
let Mock=require("mockjs")
// 2.使用
// Mock.mock("设置请求地址","请求方式get",require("你的模拟数据地址"))
Mock.mock("/movie/data","get",require("./data/movie.json"))
1
2
3
4
5

4.千万不要忘了

在main.js引用mock

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

// 因为如果我们只指定了文件夹的话  那么他会自己去这个文件夹下
// 找叫index.js的文件 
require("./mock")


new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

28.2. 自动开启浏览器

1.在项目的根路径下创建一个vue.config.js的文件

2.在其中编写如下代码

module.exports={
    devServer:{
        open:true,//自动开启浏览器
        port:8888 //设置端口
    }
}
1
2
3
4
5
6

29. Dom操作-ref

在vue 中是很少会用到dom操作的但是万一我们要用了呢虽然可以使用原生js的dom操作方式但是vue中还给我们提供了一套更加简单的dom操作语法

29.1. ref使用在html标签之上

ref给元素上面起一个引用的名字

this.$refs.你的名字来进行dom的查找

<template>
  <div class="about">
    <!-- 1.ref绑定名字 -->
    <h1 ref="demoh">This is an about page</h1>
    <button @click="fun()">点我修改h1</button>
  </div>
</template>
<script>
export default {
methods:{
  fun(){
    // 2.查找ref的内容进行操作
      this.$refs.demoh.style.color="pink"
  }
}
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

29.2. ref使用在组件之上

如果我们把ref绑定到了组件之上那么我们就可以通过ref 进行父组件获取子组件的数据还可以让父组件触发子组件的方法

<template>
  <div class="home">
    <Rd ref="demord"/>
    <button @click="fun()">点我查看下</button>
  </div>
</template>

<script>
import Rd from "@/components/refdemo.vue"

export default {
  name: 'Home',
  components: {
   Rd
  },
  methods:{
    fun(){
      // 打印出来之后 是子组件的 vue组件实例 其中包含了子组件的属性与方法等信息
      console.log(this.$refs.demord);
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

30. 动态组件

让多个组件使用同一个挂载点并且动态切换，就是动态组件

语法：

设置挂载点使用来进行表示

其中有个is属性用来承载显示的组件内容

<template>
  <div>
      <h1>动态组件</h1>
    <button @click="com='Demoa'">点我demoa</button>
    <button @click="com='Demob'">点我demob</button>
    <button @click="com='Democ'">点我democ</button>
      <!-- 设置挂在点 -->
      <!-- <component is="一个变量 这个变量保存的就是你要显示的组件名"></component> -->
      <component :is="com"></component>
  </div>
</template>

<script>
import Demoa from "@/components/demoa.vue"
import Demob from "@/components/demob.vue"
import Democ from "@/components/democ.vue"
export default {
    data(){
    return {
        com:"Demob"
    }},
    components:{
        Demoa,
        Demob,
        Democ
    }
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

31. keep-alive

31.1. 引子

我们在动态组件或者路由中每次切换页面或者组件的时候会发现其中的内容在伴随着切换的时候丢失了？

原因 是因为每当你在动态组件或者路由中切换的时候 vue在每次切换的过程中会创建一个新的vue组实例组件切换状态丢失

我就是不想让他状态丢失怎么办？

keep-alive

语法：

<keep-alive>
	你想保存状态的内容
</keep-alive>
1
2
3

保存动态组件的状态只需要包裹动态组件的挂载点即可

<keep-alive>
	<component :is="com"></component>
</keep-alive>
1
2
3

保存路由的状态

  <keep-alive>
       <router-view/>
  </keep-alive>
1
2
3

31.2. keep-alive的属性与钩子

属性

因为keep-alive是以标签的方式出现的在这个标签中就有两个属性

include 你要缓存谁
exclude 你不想缓存谁

    <keep-alive include="你要缓存的内容1,你要缓存的内容2,.....n">
            <component :is="com"></component>
      </keep-alive>
1
2
3

include与exclude都写了执行谁

exclude 的优先级要大于 include

31.3. keep-alive的钩子函数

写在被keep-alive管理的组件中

   activated(){
        console.log("进入到被kepp-alive管理的组件时候执行");
    },
    deactivated(){
        console.log("离开被kepp-alive管理的组件时候执行");
    }
1
2
3
4
5
6

32. directives-自定义指令

32.1. 简介

在现有内置指令不够用的时候我们自己来定义通过我们自己可以给 html 标签添加一些特殊的功能

语法：

// 写在与 data  methods同级的位置
directives:{
	自定义指令的名字:{
		自定义指令的钩子函数（）{
	}
},
	自定义指令的名字b:{
	
	},
}
1
2
3
4
5
6
7
8
9
10

<template>
  <div class="home">
    <!-- 自定义指令使用的时候加 v- 标识符 -->
    <h1 v-red>自定义指令</h1>
  </div>
</template>
<script>
export default {
  name: 'Home',
  components: {
  },
  directives:{
    red:{
      // 这个形参就是代表你把这指令插入到那个元素上 这个形参就是代表你把这指令插入到那个元素上
      inserted(el){
        el.style.color="red"
      }
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

32.2. 自定义指令的钩子函数

bind 就是在指令绑顶到元素之上只执行一次
inserted 使我们用的最多的绑定了指令的元素在插入到页面展示的时候调用
update 所有的组件节点更新的时候触发
componentUpdated 指令所在的节点以及它的子节点全部更新完的时候调用
unbind 解除指令和元素绑定的时候只执行一次

33. $set( )

33.1. 作用：

解决了数据变了视图没有变的问题

33.2. 引子：

vue中数据变了视图没有改变为什么？怎么解决？

出现的原因是当vue的data里面声明了已经赋值过得数组或者对象的时候我们程序运行中向其内容部插入新属性的时候就会出现数据变视图没有改变的问题。

<template>
  <div>
      $set  出现的原因是   当vue的data里面声明了已经赋值过得数组或者对象
       的时候  我们程序运行中向其内容部插入新属性的时候
        就会出现数据变 视图没有改变的问题。 
        <h1>name:{{user.name}}</h1>
        <h1>age:{{user.age}}</h1>

        <button @click="fun()">点我插入新内容</button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            user:{
                name:"xixi"
            }
        }
    },
    methods:{
        fun(){
            this.user.age=18
            console.log(this.user.age)
        }
    }
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

原理为什么会有这种情况？

因为出现这个情况的原因是因为在javascript中 Object.defineProperty（）这个方法只会监听初始化的数据 如果初始化完成之后那么数据劫持就已经监听完了如果中途在添加新属性就是数据劫持的Object.defineProperty（）劫持不到劫持不到就没有双向绑定没有双向绑定那么数据变视图当然不会变了

33.3. $set( )的使用

我就是向在程序运行的时候添加新的属性并且数据变视图变怎么办？

语法:

this.$set( 你要操纵的数据，新增的key, 新增的val )

fun(){
  // this.user.age=18
  // this.$set( 你要操纵的数据 ， 新增的key,  新增的val )
  this.$set(this.user,"age",666)
  console.log(this.user.age)
}
1
2
3
4
5
6

34. mixin混入

就是对vue的组件中属性与方法进行复用的一个技术

在多个组件中如果出现了相同的属性与方法我们传统写法是在每个组件中都写一遍去使用但是这样子后期的代码冗余和维护的难度就变大了

为了解决上面组件中出现重复的属性方法等内容可以使用混入那么我们组件中多次出现的属性和方法封装到混入中今后要使用直接去混入调用即可

34.1. 局部混入

局部就是只能在当前引用调用的组件中使用

1.新建 mixins 文件夹用来容纳

2.在其中把我们想封装的方法放到 index.js 的文件中原来组件中怎么写混入文件中就怎么写

let methodmixins={
    methods:{
        fun(){
            alert("您好")
        }
    }
}
export default methodmixins
1
2
3
4
5
6
7
8

3.再想使用这个方法的组件中引用调用使用

<template>
  <div>
      demoa
      <!-- 3.想怎么用就怎么用 -->
      <button @click="fun()">点我</button>
  </div>
</template>

<script>
// 1.引用
import methodmixins from "@/mixins/index.js"
export default {
    // 2.调用 与data methods的同级编写一个属性叫mixins
    mixins:[methodmixins]

}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

34.2. 全局混入

全局就是在一个地方引用一次剩下所有的组件都可以使用

1.来到main.js中进行引用与配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 1.引用混入
import Mixins from "./mixins/index.js"
// 2.调用
Vue.mixin(Mixins)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

35. Element UI

elementui是一个ui框架面向于pc端的

vue react jquery 这些都统称为js框架

使用：

1.下载 npm install element-ui --save

2.main.js中引用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false


// 全面引用elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
// 全面引用elementui


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

36. nextTick

36.1. 异步说明：

vue的响应式并不是在数据改变之后DOM立刻改变，而是等待vue的一定策略来进行DOM的更新

<template>
  <div class="about">
    <h1 ref="demoh">{{name}}</h1>
    <button @click="fun()">点我修改</button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      name:"xixi"
    }
  },
  methods:{
    fun(){
      // vue的响应式并不是在数据改变之后DOM立刻改变，
      // 而是等待vue的一定策略来进行DOM的更新
      this.name="我变了"
      // 在运行之后大家发现vue中的数据在修改之后 下面打印的dom内容
      // 还是原来旧的数据  也就印证了  vue在修改数据之后  dom不是立即修改
      console.log(this.$refs.demoh.innerText)

    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

异步说明的总结

简单来说说 vue的数据在修改之后视图不会立即更新是等待一个事件循环中所有的修改都完成了然后统一进行页面更新
执行原理

1.vue先去修改数据在修改数据时是一个同步任务，此时还没有涉及到dom的改变

2.vue会开启一个异步的列队用来缓存刚才修改的数据变化

3.当数据都修改完成之后开始执行这个异步的dom修改

36.2. nexttick是什么

等待dom执行完毕之后所运行的一个方法这个方法中的回调函数会立即执行

使用场景1

在数据修改之后想得到你改变数据的那个dom的新内容就可以使用nexttick

使用场景1

在vue生命周期的created钩子函数进行dom操作？

不可以因为created是实例创建完成但是在这个时候dom还没有进行加载所以在这个钩子中是不能进行dom操作的我想在created中进行dom操作怎么办？可以使用nexttick

<template>
  <div class="home">
      <h1 ref="demoh">{{name}}</h1>
  </div>
</template>

<script>


export default {
  created(){
    // console.log("我想得到dom中的数据"+this.$refs.demoh.innerText)
    // 尝试在dom执行完执行
    this.$nextTick(()=>{
      console.log("我想得到dom中的数据"+this.$refs.demoh.innerText)
    })
  },
  data(){
    return {
      name:"xixi"
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

使用场景2

<template>
  <div class="about">
    <h1 ref="demoh">{{name}}</h1>
    <button @click="fun()">点我修改</button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      name:"xixi"
    }
  },
  methods:{
    fun(){
      // vue的响应式并不是在数据改变之后DOM立刻改变，
      // 而是等待vue的一定策略来进行DOM的更新
      this.name="我变了"
      // 在运行之后大家发现vue中的数据在修改之后 下面打印的dom内容
      // 还是原来旧的数据  也就印证了  vue在修改数据之后  dom不是立即修改
      console.log(this.$refs.demoh.innerText)
      // 我就是想在数据修改之后立即得到dom信息怎么办？
      this.$nextTick(()=>{
        console.log(this.$refs.demoh.innerText)
      })
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

二、vue3.0

1. 简介

vue3.0 是2.0的一个提升在3.0中完全向下兼容2.0

3.0与2.0有什么区别？

响应式的区别

2.0中vue的响应式是基于数据劫持**（object.defineProperty这个方法来进行劫持的）**当前这个方法是兼容主流浏览器的ie9以上都可以使用,他是可以监听数据的变化从而让vue做出改变

但是他有一个bug , object.defineProperty 这个方法只能够监听初始化的时候数据 如果程序运行到一半你给 data 中的对象或者是数组添加 新属性 的时候 由于他只会在初始化监听 那么你中间添加的内容就无法监听没有监听到就没有数据劫持没有数据劫持那么就没有双向绑定没有双向绑定那么数据变视图就不会发生改变这时候我们必须使用 $set

而在 3.0 中对 2.0 的 bug 进行了解决

3.0中的响应式是采用 ES2015 中最新的一个规范 Proxy 来进行替代的 proxy 是惰性监听（他不会在初始化的时候监听数据而是在你使用数据的时候才回去监听）

proxy 是一个比较新的规范 ie 还不支持 vue 为了解决 ie 不支持的问题所以单独给 ie 进行了适配

传统主流浏览器使用 proxy 来进行监听

但是在ie中还是使用2.0中的 object.defineProperty来劫持
底层的变化

3.0底层全部都是使用ts（typescript）编写的今后3.0可以更好的与ts结合
属性声明方式

2.0中都是使用vue属性的方式来创建数据方法计算属性等内容的

3.0中改变了变成了 api方式进行创建也就是说 vue3.0 把变量方法 计算属性 等内容封装成了一个个的方法使用方法的方式进行调用

2. 脚手架创建

创建的方式和2.0几乎相同只是在选择版本的时候选择3.0

3. 语法

3.1. setup 启动器

setup是一个函数这个函数处于生命周期的 beforecreate 与 created 之间

setup 是 vue3.0 组合式 api（CompositionApi）的入口

setup中必须把定义的内容 return 出去否则无法使用

3.2. vue3.0中 ref 创建基本数据类型

3.2.1. ref 来进行创建

ref 接收一个参数为值然后返回一个响应式的对象

<template>
  <div class="about">
    <h1>This is an about page---{{text}}</h1>
  </div>
</template>
<script>
// 1.引用
import {ref} from "vue"
export default {
  setup() {
    // ref 接收一个参数为值  然后返回一个响应式的对象
    // 2.使用
   let text= ref("我是变量的初始值")
    return {
      text  //3.返回出
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.2.2. 基本数据类型的修改

想要修改使用 ref 创建的值那么必须必须必须必须修改他的 .value属性

<template>
  <div class="about">
    <h1>This is an about page---{{text}}</h1>
    <button @click="fun()">点我修改</button>
  </div>
</template>
<script>
// 1.引用
import {ref} from "vue"
export default {
  setup() {
    // ref 接收一个参数为值  然后返回一个响应式的对象
    // 2.使用
   let text= ref("我是变量的初始值")
  	//  函数直接写在setup方法体内  不要忘了return
   function fun(){
    // 修改ref创建的基本数据类型的变量 必须.value
      text.value="我变了"
   }
    return {
      text,fun  //3.返回出
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

3.2.3. ref创建多个变量怎么办？

方式：多次创建

      let text=ref("我是初始值")
      let texta=ref("我是初始值1")
      let textb=ref("我是初始值2")
      let textc=ref("我是初始值3")
      let textd=ref("我是初始值4")
1
2
3
4
5

3.3. reactive来创建复杂数据类型

reactive怎么创建对象创建数组

reactive是一个方法其中传递一个对象或者数据位置他会返回一个响应式对象

<template>
  <div class="home">
    <h1>{{obj.name}}</h1>
    <button @click="fun()">点我修改</button>
  </div>
</template>

<script>
import {reactive} from "vue"
export default {
  setup(){
    // 创建复杂数据类型reactive
    let obj=reactive({name:"xixi",age:18,sex:"男"})

    // 如果要修改使用reactive创建的复杂数据类型  那么 
    // 不需要不需要不需要  .value可以直接修改
      // 不需要不需要不需要  .value可以直接修改
      // 不需要不需要不需要  .value可以直接修改
      // 不需要不需要不需要  .value可以直接修改
      // 不需要不需要不需要  .value可以直接修改
      // 不需要不需要不需要  .value可以直接修改
      // 不需要不需要不需要  .value可以直接修改
    function fun(){
      obj.name="hahaa"
    }


    return {
      obj,fun
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

3.4. ref与reactive区别

ref 使用来创建基本数据类型 ref 创建的内容是需要通过 value 的方式来修改

reactive 是用来创建复杂数据类型可以直接修改

3.5. dom操作—ref

3.0中进行dom操作也是用ref来完成

<template>
  <div>
      <h1>我是3.0中测试dom操作的</h1>
        <!-- 2.ref绑定 -->
      <input type="text" ref="inputdom"/>
      <button @click="fun()">点我得到输入框的值</button>
  </div>
</template>

<script>
import {ref} from "vue"
export default {
   setup(){
    // 在使用ref查找dom对象的时候  我们是向ref中传递一个null那么这样一来
    // ref就可以进行dom操作的设置了
    // 1.创建
    let inputdom=ref(null)
    function fun(){
        // 3.获取ref
        console.log(inputdom.value.value)
    }
       return{
           inputdom,fun
       }
   }
}
</script>

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

3.6. 计算属性—computed

<template>
  <div>
      <h1>计算属性的学习</h1>
      <h1>{{text}}</h1>
      <h1>{{newtext}}</h1>
  </div>
</template>

<script>
// 1.先引用引用计算属性
import {ref,computed} from "vue"
export default {
    setup(){
        let text=ref("abcdefghijk")
        // 2.计算属性的编写  不要忘了在计算属性中必须有return
        // let newtext=computed(()=>{
        //     return 你处理数据的逻辑
        // })
        let newtext=computed(()=>{
            return text.value.toUpperCase()
        })
        return {
            text,newtext
        }
    }
}
</script>

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

3.7. watch监听

<template>
  <div>
      <h1>watch的使用</h1>
      <h1>{{text}}</h1>
      <button @click="fun()">点我修改</button>
  </div>
</template>

<script>
import {watch,ref} from "vue"
export default {
    setup(){
        let text=ref("我是测试watch的变量")
        function fun(){
            text.value="我变了"
        }
        // watch(()=>{return 你要监听的变量.value},(newval,oldval)=>{})
        watch(()=>{
            return text.value
        },(a,b)=>{
            console.log(a)
            console.log(b)
        })
        return {
            text,fun
        }
    }
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

3.8. 生命周期

序号	2.0的生命周期	3.0的生命周期
实例创建之前	beforeCreate ( )	setup
实例创建之后	created( )	setup
模板渲染之前	beforeMount( )	onBeforeMount
模板渲染之后	mounted( )	onMounted
数据更新之前	beforeUpdate( )	onBeforeUpdate
数据更新之后	updated( )	onUpdated
实例销毁之前	beforeDestory( )	onBeforeUnmount
实例销毁之后	destoryed( )	onUnmounted

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/711060

Vue 笔记---kalrry

Vue 笔记---kalrry

Vue常用技巧：

文档

一、vue

1、什么是vue？

2、MVVM是什么？

3、vue的特点

4、vue–Helloword

5、{{ }}是什么？

6、指令

6.1. 简介

6.2. v-model指令

6.3. v-show指令

6.4. v-on指令

6.5. v-for指令

6.6. if 全家桶

6.7. v-bind(初学者最容易忘记的一个指令)

6.8. v-html

6.9. v-once

6.10. v-text

6.11. 扩展— 屏幕闪烁问题

7、 watch 监听

7.1. 简介

7.2. 语法：

7.3. 疑问？

8、computed 计算属性

8.1. 引子

8.2. 作用：

8.3. 语法 ：

8.4. 疑问？

9、vue事件对象($event)

9.1. 修饰符

9.2. 按键修饰符

9.3. 事件修饰符

10、生命周期的钩子函数

10.1. 钩子函数简介

10.2. 生命周期

10.3. 生命周期的钩子函数

10.4. 问答？

11、vue-cli

11.1. 准备

11.2. 创建

11.3. 拿到空项目怎么办？

11.4. .vue文件是什么？

11.5. vue中的属性在.vue中怎么写？

11.6. data

11.7. 剩下的属性没有区别

12、组件

12.1. 简介

12.2. 全局组件—component

12.3. 基本语法

12.4. ui库/组件的二次封装

12.5. 局部组件components

12.6. 父子组件

12.7. 父子组件作用域

13、组件传值

13.1. 正向传值—props

13.1.1 props验证

13.2. 逆向传值

13.3. 同胞传值-中央事件总线(eventbus)

13.4. 跨组件传值–vuex

13.4.1. vuex简介

13.4.2. vuex的5大属性

1. state

2. modules

3. mutations 修改数据

payload载荷

刷新丢失

4. actions

5. getters

14. slot插槽/槽口

14.1. 引子

14.2. slot是什么？

14.3. 具名槽口

15. 扩展----项目怎么启动

16. 路由

16.1. 路由创建

16.1.1. 脚手架创建方式

16.1.2. 拿到带路由的空项目

8.3. 语法：