Vue学习--基于狂神说

最新推荐文章于 2024-07-08 15:38:00 发布

软工小白_1123

最新推荐文章于 2024-07-08 15:38:00 发布

阅读量571

点赞数 1

分类专栏：笔记文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/qq_57237780/article/details/127798687

版权

笔记专栏收录该内容

10 篇文章 1 订阅

订阅专栏

第一个vue

注意：这里还不是完整的vue程序。

使用vue需要和控制台命令符挂钩，组件可以通过npm导入

vue一定要有一个模块化的思想

如何导入，如何导出？

什么是vue？

**自己理解：**就是将数据的显示和视图的渲染分开，视图渲染只需要导入自己写的模板（变量）就可以得到数据

数据是在一个指定的地方去填写。（且view和model是双向绑定，可以动态的改变数据，不需要去刷新页面）

视图关注视图，任何需要数据的地方都在vue中

双向绑定

使用vue

1，安装插件

后面会使用到

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FHUBAyes-1668096028124)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220827161501537.png)]

注意：如果在新建中没有创建模板Vue Component

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CWan0RX3-1668096028125)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220827162441619.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LqzvZ1GL-1668096028126)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220827162454651.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wTlXlus9-1668096028126)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220827162508423.png)]

2，编写代码

创建一个html文件

将vue的js文件导入项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m3AWvbYv-1668096028126)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220827165402152.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>  
<body>
<!--view层，调模板得到里面的数据 {{data的键值}}调里面的数据-->
<div id="app">
    {{massage}}
</div>
<!--导入vue.js-->
<script src="vue/vue.js"></script><!--
cdn引入失败;好像是托管地址变了，所以使用第二种方式，去官网下载vue.js文件，放在项目里面，再在项目里面引入（类似CRM项目里面的插件引入）
cdn就是在线引入，可以百度查地址
min:压缩版，不用看源码-->
  
 //下面是vue部分
    1，new一个vue对象
    2，（）里面放{}代表参数
    3，el：绑定的标签，id用#名字   class用.名字（意思是这个标签可以用data里面的数据）
    4，data：{}获取的数据，以后后台传递的数据就放在这里面
    5，{{massage}}，获取模板，就可以得到里面的数据{{data里面的键值}}
    6，这个部分不能写在head里面，因为这个是要标签创建之后才开始调用的js，写前面调用不到除非用jQuery全局函数$.(function(){})
<script>
    var mv=new Vue({
        el:"#app",
        //data：model层，放置数据
        //以后从后台得到的数据放在data里面，然后前端标签调key值就可以得到数据
        data:{
            massage:"hello,vue"
        }
    });
</script>
</body>
</html>

什么意思呢？

意思就是，view层（也就是界面）获取数据就通过获取模板得到，这个模板就是vue里面的data中的键值

运行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k9KCxodO-1668096028127)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220827165245326.png)]

vue基本语法

在前端，js：{对象名：内容}表示一个对象

[aaa,bbb]表示一个数组

1，v-bind属性（绑定标签属性为指定vue数据）

获取data中的键值绑定的数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AL5bcAm0-1668096028127)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220827171957410.png)]

格式：<标签 v-bind:标签属性=“data中的键值”>

有些时候可以使用

例：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml
    // xmlns:v-bind="http://www.w3.org/1999/xhtml"会自动导入
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js-->
    <script src="vue/vue.js"></script><!--
</head>
<body>
<div id="app" >
    <span v-bind:title="massage">//title是span标签的属性，意思是悬停提示信息
        鼠标悬停几秒可以查看绑定属性
    </span>
    <!--创建vue对象-->
    <script>
        var mv=new Vue({
            el:"#app",
            //data：model层，放置数据
            data:{
                massage:"hello,vue"
            }
        });
    </script>
</div>
</body>
</html>

2，v-if属性

格式：<标签 v-if=“条件”>

就是if判断

3，v-else属性

格式：<标签 v-else >

正常else

4, v-else-if属性

格式：<标签 v-else-if=“条件”>

elseif的作用：多项选择

主要注意：这个指令在哪里用，在什么时候用，功能是什么

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
</head>
<body>
<!----测试选择的三个标签-->
<div id="app" >
    <p v-if="type2==='ok'">你好，世界</p><!--意思是如果type2等于ok则打印这个标签内容-->
    <p v-else-if="type2=='on'">你好嘛，世界</p>
    <p v-else-if="type2=='hh'">我很好，世界</p>
    <p v-else>你不好世界</p><!--否则打印这个-->
    
    <p v-if="type">你好，世界</p><!--意思是如果type等于true则打印你好世界（默认不写===什么就为true）-->
    <p v-else>你不好世界</p>
</div>
<script>
    var mv=new Vue({
        el:"#app",
        data:{
            type:true,
            type2:"ok"
        }
    });
</script>
</body>
</html>

5, v-for属性

格式：<标签 v-for=" 接收变量名 in 数组名"> {{接收变量名}}：取每一个遍历出来的元素

数组要在data里面定义

一个循环的指令

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
</head>
<body>
<div id="app">
    //类似  for(item:items)倒着写
<li v-for=" item in items">{{item.massage}}</li>//
//item用来指代每一次遍历取出来的对象，massage就是.对象的massage方法
</div>
<script>
    var mv=new Vue({
        el:"#app",
        //测试v-for循环指令
        data: {
            //定义一个items的数组，里面是两条massage对象的数据
            items: [{massage: "aaaa"},
                    {massage: "bbbb"}
                   ]
        }
    })
</script>
</body>
</html>

6, v-on属性(一般用于添加事件)

绑定事件

格式：<标签 v-on:事件类型=“方法名”>

发生这个事件会去调vue里面methods参数下面的对应方法

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="sayhi"> .....</button>//
</div>
<script>
    var mv=new Vue({
        el:"#app",
        //测试v-on绑定事件指令
        data: {
         message:"你好事件"
        },
        methods:{//方法必须定义在methods里面才是vue的方法
            //方法也是键值对的形式，方法名：function(){}
          sayhi:function (){
              alert(this.message);//this指代mv对象
          }
        }
    })
</script>
</body>
</html>

7，v-model属性(一般用于文本框等各种框，表单，双向绑定)

实时更新数据

1，通过改变视图里面的内容，改变vue里面的数据

 //v-model属性测试
    <input type="text"  v-model="message2">
    <p>
        {{message2}}
    </p>
<script>
    var mv=new Vue({
        el:"#app", 
        data: {
            message2:"121"
        }
    })
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZX2Vm1hR-1668096028127)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220827194306824.png)]

2，可以通过这个属性取到标签的value值（默认）

格式：<标签 v-model=“data里面的键值”>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5VsbbOcd-1668096028128)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220827193117865.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-keqa0Inv-1668096028128)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220827193129201.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cauRPJEU-1668096028128)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220827193619917.png)]

vue组件

还是有先有vue对象，然后绑定容器

Vue.component

使用组件：

1，创建vue对象，编写data属性

2，调Vue.component，编写自定义标签

3，props属性获取v-bind绑定的数据，template属性，这个自定义标签代替的片段

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uCELJMEK-1668096028129)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220828185942324.png)]

就是一个自定义标签

格式：Vue.component(“自定义名字”,{
template:‘代替的内容’
});

使用就正常定义标签的方式使用

template：模板

代码：

 <caishan></caishan>//调用自定义的组件
<script>
    //自定义一个组件
 Vue.component("caishan",{
        template:'<h1>蔡闪<h1>'
    });
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x5tW5D7r-1668096028129)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220828190645933.png)]

用法一：绑定数据。

注意点：现在的需求是让这个自定义标签里面的数据是动态变化的

首先，在vue对象里面写数据，

然后自定义标签通过v-for遍历data里面的数组，v-bind：名字A=“遍历用来接收的名字” 绑定一个名字来接收这个数据，然后在Vue.component里面使用props：[“名字A”]来获取数组中的每一个属性。template里面的数据通过{{名字A}}获取，就可以实现动态绑定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U6EWveRK-1668096028129)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220828191628593.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q4THnQfQ-1668096028130)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220828192932846.png)]

例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="sayhi"> .....</button>
    //v-model属性测试
    <input type="text"  v-model="message2">
    <p>
        {{message2}}
    </p>
    //组件测试
    //组件动态绑定数据
<p><caishan v-for=" item in items" v-bind:caishan2="item"></caishan></p>
    caishan2就相当于一个标签的属性
</div>
<script>
    Vue.component("caishan",{
        props:["caishan2"],
        template:"<li>{{caishan2}}<li>"
    });
    var mv=new Vue({
        el:"#app",
        //测试v-on绑定事件指令
        data: {
         message:"你好事件",
            message2:"121",
            items:["111","222","333"]
        },
        methods:{//方法必须定义在methods里面才是vue的方法
          sayhi:function (){
              alert(this.message);//this指代mv对象
          }
        }
    })
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o8PgOUP4-1668096028130)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220828192835958.png)]

Axios异步通信

可以用来代替jQuery的Ajax的通信

格式：axios.请求类型(“请求的路径”).then(response=>(操作))

axios：代替了$.ajax()

请求类型：表示发出什么请求（get||post…）

请求的路径：代替了原来的url属性

then：代替success

response：代替响应数据data参数

=>(操作)：代替原来的function

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NSZZuopz-1668096028130)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220828203249125.png)]

使用步骤：

一，导文件

这里使用cdn在线导入axios.js文件，官网下载导入vue.js

 	 <script src="vue/vue.js"></script><!--导入vue文件-->
     <script src="https://unpkg.com/axios/dist/axios.js"></script><!--导入axios异步通信文件-->

二，写模板

容器，vue对象，绑定

<div id="vue"><!--容器-->
</div>
<script>
    var mv=new Vue({<!--vue对象-->
       el:"#vue"<!--绑定-->

    });
</script>

三，伪造json字符串文件

这一步是关键，在后期可以通过constructor返回JSON字符串

新建一个data.json文件

{
//基本类型的json格式
  "name":"狂神说java",
  "url": "http://baidu.com",
  "page": "1",
  "isNonProfit":"true",
//对象类型的json格式
  "address": {
    "street": "含光门",
    "city":"陕西西安",
    "country": "中国"
  },
//数组类型的json格式
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "4399",
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

四，找钩子

这一步也是关键，vue提供了特别多的钩子，也就是插入代码的方法，具体参考官方文档

这些方法直接写方法名，不用在methods属性下面

<script>
    var mv=new Vue({
       el:"#vue",
        mounted(){<!--mounted钩子-->
            
        }
    });
</script>

五，写异步请求函数

这和ajax思路类似，但写法不同

<script>
    var mv=new Vue({
       el:"#vue",
        mounted(){
            <!--异步请求函数-->
            axios.get("data.json").then(Response=>(this.info=Response.data)) 
            <!--data.json:访问文件的路径，注意路径格式
            <!--Response.data:取出全部的JSON数据放到info变量里面-->
            <!--info：是data(){return{}}里面定义的变量名-->
			
        }
    });
</script>

六，取出响应数据放到vue对象里

注意：使用的是data（）方法，而不是data属性，

方法里面固定一个return{变量：{json字符串格式}}，前端通过取这个变量就可以取到JSON数据

json字符串格式，包括名字，必须和实际Response返回的JSON字符串格式一致，内容可以用null占位可以少，但是不能不一样

<script>
    var mv=new Vue({
       el:"#vue",
         <!--将响应数据放到info这个变量里面-->
        data(){
          return{
              info:{
                  name:null,
                  address:{
                      street:null,
                      city:null,
                      country:null
                  },
                  links:[
                      {
                          name:null,
                          url:null
                      },
                      {
                          name:null,
                          url:null
                      }
                  ]
              }
          }
        },
        mounted(){
            axios.get("data.json").then(Response=>(this.info=Response.data))
        }
    });
</script>

七，前端调用数据

调data（）的return{}里面定义的参数即可，和data属性大同小异

 	<h1>{{info.name}}</h1>//调普通数据
    <p>{{info.address.country}}</p>//调对象里面的数据
    <a v-bind:href="info.links.pop().url">点我</a>//调数组的数据
思考：
什么时候用v-bind绑定
当给一个标签的属性赋vue的数据时用绑定，如果只是单纯的在标签体内部取则{{}}足以

八，完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!---->
     <script src="vue/vue.js"></script><!--导入vue文件-->
     <script src="https://unpkg.com/axios/dist/axios.js"></script><!--导入axios异步通信文件-->
</head>
<body>
<div id="vue">
    <h1>{{info.name}}</h1>
    <p>{{info.address.country}}</p>
    <a v-bind:href="info.links.pop().url">点我</a>
</div>
<script>
    var mv=new Vue({
       el:"#vue",
        data(){
          return{
              info:{
                  name:null,
                  address:{
                      street:null,
                      city:null,
                      country:null
                  },
                  links:[
                      {
                          name:null,
                          url:null
                      },
                      {
                          name:null,
                          url:null
                      }
                  ]
              }
          }
        },
        mounted(){
            axios.get("data.json").then(Response=>(this.info=Response.data))
        }
    });
</script>
</body>
</html>

计算属性

他的实质还是一个方法，只是可以通过属性的形式进行调用（属性：不加括号）

缓存在内存中，提高效率，如果不再次调这个计算属性，则当前的数据不会改变

关键字：computed参数

和methods写法完全一致，就是两个方法不能重名

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
</head>
<body>
<div id="vue">
<p>time01的时间：{{time01()}}</p>//调方法
    <p>time02的时间：{{time02}}</p>//调属性
</div>
<script>
    var mv=new Vue({
        el:"#vue",
        data:{
            time:new Date()
        },
        methods:{
            time01:function (){
                  return this.time;
            }
        },
        计算属性，就是缓存
        computed:{
          time02:function (){
              return this.time;
          }
        }
    })
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k1rCGAV3-1668096028131)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220829130101009.png)]

插槽slot

这是一个组件需要先注册组件：vue.component

就是用slot标签去代替一段代码（占位），然后具体需要时再去替换

格式：

注意点：

1，先写一个大组件（自定义标签）然后照着原代码模式编写，需要数据，或者替换的地方通过slot标签先占位

2，有几个slot标签，就再定义几个组件，然后通过里面的name属性给一个名字（方便绑定，可以任意取）

3，在调用时，调组件标签，然后通过里面的slot属性绑定替代是哪一个片段（通过name的名字来）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
</head>
<body>
<div id="vue">
    <biaoge>
        //v-bind缩写：一个“:”号			v-on缩写 ：”@“符号
        <biaoto slot="biaoto111" :title="titles"></biaoto>
        <neiron slot="neiron222" v-for=" item in items" v-bind
v-bind:massage="item"></neiron>
    </biaoge>
</div>
<script>
    Vue.component("biaoge",{
        //slot就相当于占位，“\表示换行”，看着干净一点
        //slot中的name属性表示用哪一个组件来取代这个位置
        template: "<div>\
            <slot name='biaoto111'></slot>\
            <ul>\
            <slot name='neiron222'></slot>\
            </ul>\
                    <div>"
    });
    Vue.component("biaoto",{
        props:["title"],//相当于定义了一个属性，通过v-bind绑定可以取值
        template: "<div>{{title}}</div>"
    })
    Vue.component("neiron",{
        props:["massage"],
        template: "<div>{{massage}}</div>"
    })

    var mv=new Vue({
        el:"#vue",
        data:{
            titles:"标题xxxx",
            items:["蔡闪2001","蔡闪2002","蔡闪2003"]
        }
    })
</script>
</body>
</html>
//替代了
<!--    <div>标题xxxx</div>-->
<!--        <ul>-->
<!--            <li>蔡闪2001</li>-->
<!--            <li>蔡闪2002</li>-->
<!--            <li>蔡闪2003</li>-->
<!--        </ul>-->

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SU1kjCQe-1668096028131)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220829162304937.png)]

自定义事件内容分发

前提：因为vue对象和组件是两个不同的作用域，所以vue对象里面定义的东西在组件中无法直接调用，同理组件中的东西也不能调vue的。

他们之间需要通过一个中间商（前端视图来进行绑定才可以进行数据的调用）就好比组件中的数据动态加载需要props属性进行绑定

如何在组件中调用vue的方法？

通过在组件方法中调**this.$emit(“自定义事件名”，参数)**方法调用

其中自定义事件名：是在视图层定义的一个事件他绑定了vue的事件

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
</head>
<body>
<div id="vue">
    <biaoge>
        <biaoto slot="biaoto111" :title="titles"></biaoto>
        <neiron slot="neiron222" v-for= " (item,index) in items"
                v-bind:massage="item"  v-bind:index="index"
                v-on:remove="deleteItem">
      //这一行很有特点，就是逻辑思路的转变
            1，通过v-for遍历出items数组的数据放在item变量里，下标放在index变量里
            2，v-bind绑定组件中定义的massage属性值为item，index属性，将vue的数据传入组件
            3，v-on定义一个自定义事件调vue中的deleteItem方法，组件中的方法再调这个方法就可以调到vue对象中的方法
        </neiron>
    </biaoge>
</div>
<script>
    Vue.component("biaoge",{
        //slot就相当于占位，“\表示换行”
        //slot中的name属性表示用哪一个组件来取代这个位置
        template: "<div>\
            <slot name='biaoto111'></slot>\
            <ul>\
            <slot name='neiron222'></slot>\
            </ul>\
                    <div>"
    });
    Vue.component("biaoto",{
        props:["title"],
        template: "<div>{{title}}</div>"
    })
    Vue.component("neiron",{
        props:["massage","index"],
        template: "<div>{{index}}----{{massage}}<button v-on:click='delet'>删除</button>
</div>",
        //绑定一个点击事件调delet方法
        methods: {
            delet:function (index){
                this.$emit("remove",index)，这个参数会传到自定义事件里面
            }
        }
    })

    var mv=new Vue({
        el:"#vue",
        data:{
            titles:"标题xxxx",
            items:["蔡闪2001","蔡闪2002","蔡闪2003"]
        },
        methods:{
            deleteItem:function (index){
              //js前端删除数据的方法
                this.items.splice(index,1)//删除指定的一个元素
            }
        }
    })
</script>
</body>
</html>

js删除数组元素的方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jmyIqBaO-1668096028131)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220829163707126.png)]

vue-clic程序

一个模板，可以基于他快速开发vue，类似maven的模板

安装node.js

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cKX7f8Sl-1668096028132)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220829174821386.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uERWHeIa-1668096028132)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220829173910988.png)]

安装cnpm

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wtpj5hq7-1668096028132)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220829174403922.png)]

安装vue-cli

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-syMd0qzw-1668096028132)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220829194232785.png)]

创建vue-cli项目

先用控制台进入想创建的目录下（存放位置）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WuqNlDQy-1668096028133)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220829194311591.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-34zTtTID-1668096028133)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220829194426866.png)]

初始化并执行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ab9QFz7f-1668096028133)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220829194453676.png)]

cd myvue 进入项目里面

npm install 安装所有环境

npm run dev 启动这个项目

控制台+ctrl+c:停止项目

利用IDEA打开这个文件

安装webpack程序

安装这个后就可以将ES6规范的代码打包为ES5规范，让所有浏览器都可以使用

在控制台安装

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8TDwawDx-1668096028134)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220830160958654.png)]

配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ydgZBZwP-1668096028134)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220830161152125.png)]

使用步骤：

1，创建一个空项目，在需要的路径下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LO6dCaXc-1668096028134)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220830162720051.png)]

2，利用IDEA打开这个项目

3，在项目下创建一个modules目录

用来放置一些js文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kOnEHAmh-1668096028134)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220830162959159.png)]

4，在modules目录下创建js模块

hello.js：这是一个模块

//暴露一个方法，sayHi，暴露的方法可以被调用：exports.被暴露的方法
exports.sayHi=function (){
    document.write("<div>你好</div>")
}
//这个js相当于一个模块

main.js：这相当于一个对外的接口，引入其他模块js

//导入一个模块，就是js文件，
//这一步相当于java中的根据类，创建实例化对象，调方法
//require("文件路径")//指定类
var hello=require("./hello");//“./”返回当前目录
hello.sayHi()//调方法

//这个js文件，相当于是一个接口，将其他模块js通过require导入这里面，然后再打包这个文件

5，创建一个webpack.config.js 打包js

这里面是打包的一些配置

//指定要打包的模块
module.exports={
    entry:"./modules/main.js",//绑定需要打包的js，一步是主js，这个js里面导入了其他的模块，相当于一个接口
    output:{//指定导出的位置
    filename:"./js/bundle.js"//这指定导出的位置
}
}

6，在控制台输入webpack命令打包

无法在idea控制台输入命令，可能电脑问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gvIZaz6D-1668096028135)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220830170138271.png)]

在外部命令框输入命令，先进入这个项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Ci9UUeX-1668096028135)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220830170220855.png)]

7，结果

会生成一个dist目录，里面包含你打包的内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n5XH1LkP-1668096028135)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220830170320429.png)]

8，测试

在html页面通过script引入这个打包好的文件即可使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hIaqssX7-1668096028136)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220830170422481.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QgRGQU45-1668096028136)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220830170430418.png)]

vue-router路由组件

vue-router：实现页面跳转的组件

1，安装vue-router

在命令提示符输入：
npm install vue-router --save-dev
    npm install vue-router@3.1.3 --save-dev//上面那个版本过高安装失败
--save-dev:在当前项目导入，
所以这个命令是在项目里面进行导入，而且每一个项目都需要导入一下
//axios同理，就不用在线导入了，怎么导入看官方文档

2，导入vue项目

这个vue项目是先前在命令提示符下创建的项目

import 自定义名字 from "组件名"	//导入vue的组件
Vue.use(自定义名字);		//vue-router在当前页面安装组件
===============================================================
    
import 自定义名字 from "./组件名"	//导入自己写的组件名，需要写路径

vue基本架构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fwtRyzaj-1668096028136)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220830190831181.png)]

在vue项目里面src里面的main.js里面定义了一个vue对象，这个对象不能变！！！，这就是整个项目的vue对象

然后app.vue自就是整个项目的vue接口，需要配置在项目里的vue组件最后都会导入这里，

他和main.js里面的vue是绑定好了的

vue组件的分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2HaoItau-1668096028137)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220830191555311.png)]

第一块：template标签

这里面就是写的视图部分（html），这个组件的页面结果

第二块：script标签

这里面就是js部分，包括vue模块的导出（export），导入（import）

第三块：style标签

这里面就是css样式，如果加了scoped，表示作用域，只在这个组件页面生效

第一个vue项目

1，命令符创建vue-cli项目

先找到这个项目想要存放的路径
cd  这个路径
然后
vue init webpack 项目名称
一路选择no

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nZ2aOEaC-1668096028137)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220829194426866.png)]

2，导入初始化配置

cd 这个项目	   //进入这个项目
npm install  //初始化

3，安装vue-router

在这个项目的路径下安装

在命令提示符输入：
	npm install vue-router --save-dev
    npm install vue-router@3.1.3 --save-dev//上面那个版本过高安装失败
--save-dev:在当前项目导入，
所以这个命令是在项目里面进行导入，而且每一个项目都需要导入一下
//axios同理，就不用在线导入了，怎么导入看官方文档

4，idea打开之前创建的项目

下面是这个项目初始化的样子，删除了一下他自带的页面样式

但是这个结构不能删除

src就是主要写代码的地方

里面的assets：存放图片

components：存放vue组件

router：这个是后期写上去的，里面写一个index.js存放的各种请求跳转的具体情况（类似控制层）

App.vue是一个核心组件，最后自己写的这些组件都是在这里面进行调用然后渲染成为项目页面

mian.js相当于java中的main函数，没有这个项目跑不起来，里面就是将所有用到的vue组件（不是自己写的那些）导入进去，然后在vue对象里面配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QAiTmnmT-1668096028137)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220830204039744.png)]

5，编写Content.vue

<template>
<h1>我是内容页</h1>
</template>

<script>
export default {
  name: "Content"//给其他组件一个调用组件的名字
}
</script>

<style scoped>
</style>

6，编写Main.vue

<template>
<h1>首页</h1>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>

7，编写router路由的index.js

因为要跳转vue，所以vue要导入并配置

因为是用于路由，所以路由组件要导入并配置

因为涉及到其他vue组件，所以其他使用到的vue组件也要导入并配置（在路由对象里面配置）

/**
 * 这个目录里面的index.js主要用来管理路由，也类似控制层，根据请求跳转页面
 * 除了，vue和router组件必须导入以外，所有跳转到的页面也需要导入进来
 */
import Vue from "vue";
import VueRouter from "vue-router";
import Content from "../components/Content";
import Main from "../components/Main";
//安装路由
Vue.use(VueRouter);
//配置导出路由
//定义一个导出的默认的对象VueRouter，让其他组件可以使用这个路由
//里面的routes参数就是配置跳转页面的具体情况
export default new VueRouter({
  routes:[
    {
      //路由的路径(相当于页面发出的请求)
      path:"/content",
      //跳转的组件(相当于要跳转的页面)
      component:Content,
      //这个请求的名字（可以省略）
      name:"content"
    },
    {
      //路由的路径(相当于页面发出的请求)
      path:"/main",
      //跳转的组件(相当于要跳转的页面)
      component:Main,
      //这个请求的名字（可以省略）
      name:"main"
    }
  ]

});

8，在App.vue中进行调用（集成）

router-view：展示路由绑定的页面

router-link：类似a标签给一个点击的选择

<template>
  <div id="app">
    //如果是利用router-link通过发请求的方式跳转组件，就不需要将组件导入总的组件接口
    <router-link to="/main">首页</router-link><!--router-link :类似一个a标签，可以发送请求-->
    <router-link to="/content">内容页</router-link>
    <router-view></router-view><!--router-view :和上面配套使用，没有这个只能发请求不能渲染请求绑定的页面-->
  </div>
</template>

<script>
/**
 * 类比java
 * 1，导入包（import导入）
 * 2，实例化（components配置）
 */
export default {//这个叫App的export，是被vue对象监听的
  name: 'App',
  components: {
  }
}
</script>

<style >
#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>

9，在main.js中导入并配置用到的vue组件（不是自己写的）

/**
 * 这个页面，就相当于主程序，main方法，就像java里面有main方法才可以跑程序
 */
import Vue from 'vue'
import App from './App'
import router from "./router";//在项目里面应用到的组件（不是自己自定义的那些）都需要导入到mian.js这个页面来，
Vue.config.productionTip = false
//直接在页面里面写上组件名字就可以被配置
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,//这个router虽然是一个组件，但是不能配置在components里面，写在外面即可，否则会报错
  components: { App },//component 配置的组件，+s，可写多个
  template: '<App/>'
})

10，思考

1，.js文件都要创建对象

目前就一个主的js文件创建vue对象，一个router的js文件，创建router对象

2，.js文件都要导vue组件

可能是将它绑定为一个vue的部分，类似注解开发写在类前面的注解

3，.vue文件都要export（导出）一个default

目的是给其他文件，一个导入他自己的窗口

elementUI学习

什么是elementUI？

elementUI是用于快速构建前端页面的一个库

类似bootstrap

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2vCWgDhU-1668096028137)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220901133536961.png)]

使用步骤：

1，打开命令行导入

在需要的项目里面导入elementUI组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gb6m8NJ3-1668096028138)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220901133819295.png)]

注意：如果最后无法渲染页面，可能是因为sass加载器的版本文件，需要改版本，用到element-UI就要有sass加载器

2，创建需要的文件夹

router：放路由

view：放页面，和组件差不多，只是分开一下，这里面是交互页面

components：放一下偏功能性的组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rhmsYAGX-1668096028138)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220902171303685.png)]

3，在element-ui官网找自己需要的组件

login.vue页面

//这是一个登录框的样式
<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
  name: "Login",
  data() {
  return {
  form: {
  username: '',
  password: ''
},
  //表单验证，需要在el-form-item 元素中增加prop 属性
  rules: {
  username: [
{required: true, message: " 账号不可为空", trigger: 'blur'}
  ],
  password: [
{required: true, message: " 密码不可为空 ", trigger: 'blur'}
  ]
},
//对话框显示和隐藏
  dialogVisible: false
}
},
  methods: {
    onSubmit(formName) {
//为表单绑定验证功能
      this.$refs [formName].validate((valid) => {
        if (valid) {
		//使用vue-router路由到指定页面，该方式称之为编程式导航
          this.$router.push("/main");//发送请求
        } else {
          this.dialogVisible = true;
          return false;
        }
      });
    }
  }

}
</script>

<style lang="scss" scoped>
.login-box {
  border: 1px solid #DCDFE6;
  width: 350px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}

.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
}
</style>

4，router/index.js页面

//路由跳转，接收请求，跳转页面

import Vue from "vue";
import Router from "vue-router"
import Login from "../view/login";
Vue.use(Router)
export default new Router({
  routes:[{
    path:"/login",
    component:Login
  }]
})

5，main.js页面

//主的js页面，用到的router，element组件都要导入这里面，并且进行配置

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';//就是因为需要导入这个element的css，所以需要sass加载器
import Router from "./router";

Vue.config.productionTip = false

Vue.use(ElementUI);
Vue.use(Router)
new Vue({
  Router,//配置router
  el: '#app',
  render: h => h(App)//配置element
})

6，App.Vue页面

<template>
  <div id="app">
    <router-view></router-view>//展示路由视图
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
#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>

7，修改node-sass版本

如果在运行后报错，则需要修改版本

1，点击项目的package.json

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JrKgRdjF-1668096028138)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220902175117466.png)]

2，修改对应版本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fngNPb7J-1668096028139)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220902175206327.png)]

这两个版本不会冲突

3，npm install一下，如果报错cnpm install

嵌套路由

children属性，格式和routes一致

相当于就是在main这个路由下面，嵌套了这两个路由，然后在main页面里面就可以引入这两个路由的试图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-va9Rmq01-1668096028139)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220902195507974.png)]

1，重写main.vue

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <!--一个侧边款的模块-->
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <!--插入的地方-->
                <router-link to="/toPerfer">个人信息</router-link>//这个路径是根据实际项目发出的请求而改变的
              </el-menu-item>
              <el-menu-item index="1-2">
                <!--插入的地方-->
                <router-link to="/toUserList">用户列表</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
       <!--设置按钮-->
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <el-main>
          <!--在这里展示视图,
          el-main：是一个内部浏览器的样式，就是ssm项目那种
          -->
            //将跳转的视图展示在这个标签里面
          <router-view />
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>
<script>

export default {
  name: "Main"
}

</script>
<style scoped lang="scss">
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
.el-aside {
  color: #333;
}
</style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Fz3jS1m-1668096028139)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220902201813622.png)]

2，写两个vue组件作跳转

<template>
  <h1>用户列表</h1>
</template>
<script>
export default {
  name: "UserList"
}
</script>
<style scoped>
</style>

===========================================================================
<template>
  <h1>个人信息</h1>
</template>
<script>
export default {
  name: "UserProfile"
}
</script>
<style scoped>
</style>

3，从写路由跳转

在这里，新学习到了一个children属性：创建子路由，然后父路由可以跳转到他。

使用场景：就是在浏览器内部，还有浏览器请求时使用，就可以在内部跳转，否则单独写的话，会直接跳转

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eH8CEZAi-1668096028139)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220902203632968.png)]

import Vue from "vue";
import router from "vue-router"
import Login from "../view/login";
import Main from "../view/main";
import userList from "../view/UserList";
import Perfer from "../view/Perfer";
Vue.use(router)
export default new router({
    //routes：全局跳转，适用于整个页面跳转
  routes:[{
    path:'/login',
    component:Login
  },
    {
      path:'/main',
      component:Main,
        //children：子路由属性，适用于局部页面跳转
      children:[
        {
          path :"/toUserList",
          component:userList
        },
        {
          path :"/toPerfer",
          component:Perfer
        }
      ]
    }
  ]
})

数据传递和重定向

数据传递

1，修改router-link

<router-link to="/toPerfer">个人信息</router-link>
改为：
//:就是v-bind:to      然后传递对象{}   name：这个路由的name属性
	params：传递数据，以对象方式传递{}   id:参数名     1：就是数据  
<router-link :to="{name:'toUser',params:{id: 1}}">个人信息</router-link>

传递参数就需要对象

2，修改该条路由

path :"/toUserList",
    改为：
//后面加上 :参数名字，整个参数名要和前面的参数名保持一致,/是一种格式
path :"/toUserList/:id",

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zhT9FwlL-1668096028140)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220902205359369.png)]

3，修改该路由的跳转页面

<template>
  <!--  所有的元素必须在根节点下，用一个总div包含起来-->
  <div>
    <h1>个人信息</h1>
    {{$route.params.id}}//获取组件传递的参数中叫id的参数的数据
  </div>
</template>
<script>
export default {
  name: "UserProfile"
}
</script>
<style scoped>
</style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yYFLJ6JY-1668096028140)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220902205742269.png)]

4，利用props属性获取数据

修改路由配置 , 主要在router下的index.js中的路由属性中增加了 props: true 属性

{
	path: '/user/profile/:id', 
	name:'UserProfile', 
	component: UserProfile, 
	props: true//添加整个属性，然后取就可以用对象的props属性获取
}

传递参数和之前一样
在Profile.vue接收参数为目标组件增加 props 属性

<template>
  <div>
    个人信息
    {{ id }}//在模板展示
  </div>
</template>
<script>
    export default {
      props: ['id'],//取id整个参数的数据
      name: "UserProfile"
    }
</script>
<style scoped>
</style>

重定向

redirect属性，后面接的不是页面的名字，而是可以跳转到页面的请求

在router/index.js配置重定向路径

import Vue from "vue";
import router from "vue-router"
import Main from "../view/main";
import userList from "../view/UserList";
import Perfer from "../view/Perfer";
Vue.use(router)
export default new router({
  routes:[
    {
      path:'/main',
      component:Main,
      children:[
        {
          path :"/toUserList",
          component:userList
        },
        {
          path :"/toPerfer/:id",
          name:"toUser",
          component:Perfer
        }
      ]
    } ,
    {
      path: '/goHome',
      redirect: '/main'//发送一个/main请求，然后执行/main请求的效果
    }
  ]
})

视图增加

<el-menu-item index="1-3">
    <!--插入的地方-->
    <router-link to="/goHome">返回首页</router-link>
</el-menu-item>

404和路由钩子

router属性：

mode：url格式

路由模式有两种

hash：路径带 # 符号，如 http://localhost/#/login
history：路径不带 # 符号，如 http://localhost/login

修改路由配置

export default new VueRouter({
  mode:'history',
  routes: []
  )}

404页面

思路，也是写一个路由，然后path：“*”,接收全部请求，除已经配置的请求，然后跳转一个你想要的404响应页面

代码：

router/index.js

import Error from "../view/error";

{
  path:"*",
  component:Error
}

error页面

<template>
  <h1>404,你访问的页面不存在</h1>
</template>

<script>
export default {
  name: "error"
}
</script>

<style scoped>

</style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uZ5F7kme-1668096028140)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220902214538834.png)]

路由钩子

功能类似与过滤器

除了之前的钩子函数还存在两个钩子函数

beforeRouteEnter：在进入路由页面前执行
beforeRouteLeave：在离开路由页面前执行

要在具体的vue组件里面使用

在 Profile.vue 使用

<script>
export default {
  name: "UserProfile",
    //调钩子函数		next：执行下一步
  beforeRouteEnter:(to, from, next)=>{
    console.log("准备进入个人信息页");
    next();//配套写，没有这个会阻塞在钩子函数，不会到下一步
},
  beforeRouteLeave:(to,from,next)=>{
    console.log("准备退出个人信息页");
    next();
}
}
</script>

参数说明：
to：路由将要跳转的路径信息
from：路径跳转前的路径信息
next：路由的控制参数
next() 跳入下一个页面
next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
next(false) 返回原来的页面
next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例。这里vm就代替Profile组件的对象，可以调他的对象里面的属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UchpbbHt-1668096028141)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220902215219851.png)]

钩子函数用法一：

在进入页面之前异步处理获取数据

安装Axios

cnpm install --save vue-axios

main.js引用 Axios

所有使用到的官方组件，不是自己写的，都需要在main.js中进行导入，配置。然后其他vue组件就可以使用到这个组件

同理，其他js文件导入Vue组件后，再导组件需要的就可以了，类似router的index.js

vue组件原则上是不需要导入官方组件的

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
//不同于之前的cnd导入，这里需要导两个，用谁查谁的官方文档

准备数据

{
  "name": "cv战士",
  "url": "https://blog.csdn.net/qq_45408390?spm=1001.2101.3001.5343",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://bilibili.com"
    },
    {
      "name": "cv战士",
      "url": "https://blog.csdn.net/qq_45408390?spm=1001.2101.3001.5343"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

说明：只有我们的 static 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下

在 beforeRouteEnter 中进行异步请求

<script>
    export default {
        name: "UserProfile",
        beforeRouteEnter: (to, from, next) => {
            console.log("准备进入个人信息页");
            next(vm => {
                //进入路由之前执行getData方法
                //vm代替的是这个页面的vue对象，这样子就不需要自定义组件的做一个中转取数据了，模板不能直接取vue组件对象的数据，方法
                vm.getData()
            });
        },
        beforeRouteLeave: (to, from, next) => {
            console.log("准备离开个人信息页");
            next();
        },
        //axios
        methods: {
            getData: function () {
                this.axios({
                    method: 'get',
                    url: 'http://localhost:8080/static/mock/data.json'
                }).then(function (response) {
                    console.log(response)
                })
            }
        }
    }
</script>

静态数据要放在static里面，否则访问不到数据

报错

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u7tCnrLL-1668096028141)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220902181618385.png)]

**原因：**在main.js中router的名字，不能是Router。（可能和vue里面的参数名字重复了）

修改：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Vwoi4Kn-1668096028141)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220902181914213.png)]

改个名字即可。