【Vue快速入门】

最新推荐文章于 2025-06-30 12:25:16 发布

原创最新推荐文章于 2025-06-30 12:25:16 发布 · 1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html

Vue 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了Vue.js的核心概念，包括MVVM模式、渐进式框架、指令、计算属性、侦听器、过滤器、组件化、生命周期和钩子函数。通过Vue-HelloWorld案例，展示了Vue的页面渲染、事件处理、属性绑定等功能，并通过实际代码解释了计算属性和侦听器的区别。此外，文章还涵盖了Vue Router的基本使用和axios库的介绍，演示了如何进行HTTP请求。最后，提到了使用Vue CLI进行模块化开发的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、简介

在这里插入图片描述

Vue (读音 /vju/，类似于 view) 是中国的大神尤雨溪开发的，为数不多的国人开发的世界顶级开源软件。是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。 MVVM响应式编程模型，避免直接操作DOM , 降低DOM操作的复杂性。

1.MVVM编程思想

在这里插入图片描述
MVVM：页面输入改变数据，数据改变影响页面数据展示与渲染

M（model）：普通的javascript数据对象
V（view）：前端展示页面
VM（ViewModel）：用于双向绑定数据与页面，对于我们的课程来说，就是vue的实例

2.渐进式框架

在这里插入图片描述
“渐进式框架” 非常简单，就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性

3.核心功能

基础功能：页面渲染、表单处理提交、帮我们管理DOM(虚拟DOM)节点
组件化开发：增强代码的复用能力，复杂系统代码维护更简单
前端路由：更流畅的的用户体验、灵活的在页面切换已渲染组件的显示，不需与后端做多余的交互
状态集中管理：MVVM响应式模型基础上实现多组件之间的状态数据同步与管理
前端工程化：结合webpack等前端打包工具，管理多种静态资源，代码，测试，发布等，整合前端大型项目。

二、Vue-HelloWorld案例

1. 初始化npm项目

npm init ‐y

在这里插入图片描述

2.安装vue

npm install vue

在这里插入图片描述

3.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>
</head>
<body>
    <div id="app">
        <h1> {{name}} ,你好</h1>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        let vm = new Vue({
            el:"#app",//绑定元素
            data: {
                name:"李白"
            },
        });
    </script>

</body>

</html>

在这里插入图片描述

4.基本应用介绍

new Vue实例，每个vue应用都是通过Vue函数创建一个Vue实例开始的

<!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>
</head>
<body>
    <div id="app">
        <!-- 双向绑定：数据发生改变，视图也要随着改变 v-model -->
        <input type="text" v-model="num">
        <button v-on:click="num++">登录</button>
        <button v-on:click="num--">登出</button>
        <h1> {{name}} ,你好，当前登录第{{num}}次</h1>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        // 1.new Vue实例，每个vue应用都是通过Vue函数创建一个Vue实例开始的
        new Vue({
            el:"#app",  //挂载的模板
            data: {     //绑定的数据 当数据属性的值发生改变时，视图会进行重新渲染，响应式的
                name:"李白",
                num:1
            },
            //方法：声明方法可以实现更复杂的操作，声明methods属性中
            methods: {
                nowDate(){
                    return new Date();
                },
                loginout(){
                    this.num--;
                }
            },
        });
    </script>

</body>

</html>

三、指令

1.v-text/v-html：指定标签体

v-text : 当作纯文本
v-text是元素的 InnerText 属性，它的作用和之前我们使用的 {{}} 一样，用于数据绑定

<!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>
</head>
<body>
    <div id="app">
        <!-- v-text和v-html的应用 -->
        <div v-text="message"></div>
        <div v-html="message"></div>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data: {
                message: "<div>您好！</div>"
            },
        });
    </script>
</body>
</html>

在这里插入图片描述

2.v-if和v-show

vue提供了vif和vshow两个指令来控制页面元素的显示和隐藏。我们先通过一段代码来看一下使用两个指令各有什么效果

vif : 如果vlaue为true, 当前标签会输出在页面中
vshow: 就会在标签中添加display样式, 如果vlaue为true, display=block, 否则是none

<!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>
</head>
<body>
    
    <div id="app">
        <button @click="vif=!vif">切换显示隐藏</button>
        <div v-if="vif" style="background-color: aqua;height: 200px;width: 200px;">
            v-if
        </div>
        <hr>
        <button @click="vshow=!vshow">切换显示隐藏</button>
        <div v-show="vshow" style="background-color: red;height: 200px;width: 200px;">
            v-show
        </div>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data() { 
                return { 
                    vif:true,
                    vshow:true
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

3.velse、velseif

事实上，vif的条件渲染和JavaScript条件判断语句中的if、else、else if非常类似
与vif一起使用, 如果value为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>
</head>
<body>
    <div id="app">
        <div v-if="num === 1">
            1
        </div>
        <div v-else-if="num === 2">
            2
        </div>
        <div v-else>
            3
        </div>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data() {
                return {
                    num:1
                }
            },
        })
    </script>
</body>
</html>

4.vfor : 遍历

遍历数组 : vfor=“person in persons” $index
遍历对象 : vfor=“value in person” $key

<!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>
</head>
<body>
    <div id="app">
        <div v-for="(item, index) in musics" :key="index">{{item.name}}</div>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data() {
                return {
                    musics:[{name:"十年"},{name:"歌唱祖国"}]
                }
            },
        })
    </script>
</body>
</html>

5.v-on : 绑定事件监听

有时候，我们需要给元素绑定事件，vue 中提供了指令 von 来进行事件的绑定。用法： von:事件名=“方法”，例如：von：click=“alert”。
von:事件名, 可以缩写为: @事件名

<!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>
</head>
<body>
    <div id="app">
        <button v-on:click="fun1()">点击触发事件</button>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data() {
                return {
                    
                }
            },
            methods: {
                fun1(){
                    alert("OK");
                }
            },
        })
    </script>
</body>
</html>

6.v-bind : 属性绑定

v-bind用于给元素的属性赋值。v-bind后面是：属性名=[变量名]。例如:v-bind:title=“message”；
很多属性值是不支持表达式的, 就可以使用vbind
vue 还提供了指令 vbind 的简写方式，可以直接通过:属性名的方式。
vbind:src = “src” = :src = "src"

<!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>
</head>
<body>
    <div id="app">

        <div v-bind:title="title">悬停查看信息</div>

        <div>
            <a v-bind:href="href">百度</a>
        </div>
        
        <div>
            <img v-bind:src="src">
        </div>
        
        <div>
            <button v‐bind:disabled="disabled">禁用按钮</button>
        </div>
        
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: { 
                title: "您好！", 
                href: 'https://www.baidu.com/',
                src: 'http://img2.mukewang.com/szimg/5df1deec09ba554712000676‐360‐202.png', 
                disabled: true
            }
        })
    </script>
</body>
</html>

7.v-model 双向数据绑定

<!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>
</head>
<body>
    <div id="app"> 
        <div>
            <label>年龄：</label> 
            <input v-model="age"/> 
        </div> 
            <div>当前输入的年龄是: {{age}}</div> 
            <button @click="add">加一岁</button> 
            <button @click="alertYear">弹出年龄</button> 
    </div>
    
    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data:{
                age:10
            },
            methods: {
                add(){
                    this.age = this.age+1;
                },
                alertYear(){
                    alert(this.age);
                }
            },
        })
    </script>
</body>
</html>

四、计算属性和侦听器

1.计算属性 VS 方法

计算属性

案例

<!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>
</head>
<body>
    <div id="app">
        <!-- 实现一个购物车功能
        1. 数据初始化处理
        2.计算商品总价
        3.选择商品数量：当商品数量超过库存做提示
        -->
        <ul>
            <li v-for="(item, index) in car" >
            {{item.pname}} --- 商品价格：{{item.price}} --- 库存：{{item.stock}}
            数量：<input type="number" v-model="item.num" style="width: 30px;" />
            </li>
            <!-- 调用方法时，方法名需要加(),而调用计算属性的时候不用加括号 -->
            <li><strong>总价:</strong>{{calcSum}}</li>
        </ul>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data:{
                car:[
                    {pname:'Iphone 12',price:7999,stock:10,num:1},
                    {pname:'小米11',price:3599,stock:3,num:4},
                ],
            },
            // methods : 当方法中使用的数据发生改变，方法会自动调用
            methods: {
                // calcSum(){
                //         let sum=0;
                //         this.car.forEach(item => {
                //             sum+=item.price*item.num;
                //         });
                //         return sum;
                //     }
            },
            computed:{
                calcSum(){
                        let sum=0;
                        this.car.forEach(item => {
                            sum+=item.price*item.num;
                        });
                        return sum;
                    }
            }
        })
    </script>
</body>
</html>

比较
methods : 当方法中使用的数据发生改变，方法会自动调用
计算属性: 当方法中使用的数据发生改变，方法会自动调用

方法和计算属性的区别：声明发生不一样，调用不一样，方法要用(), 计算属性调用不要加()

如果不使用计算属性，在 methods 里定义了一个方法，也可以实现相同的效果，甚至该方法还可以接受参数，使用起来更灵活。

既然 methods 同样可以解决模板中复杂逻辑计算的问题，那么为什么还需要使用计算属性呢?

原因就是：计算属性是基于它的依赖缓存的。前面我们介绍过，计算属性的改变取决于其所依赖数据的变化，所以只要依赖数据不发生改变，计算属性就不会更新。当我们重复获取计算属性时它也不会重复计算，只会获取缓存的值。而我们每次调用 methods 都会重新计算一遍，这样将会消耗一部分性能。当然，如何你不希望对数据进行缓存，那么可以用方法来代替。

2.侦听器

通过侦听器来监听数据的变化，进行相应的逻辑处理。
监听对象类型数据的某个属性进行侦听。
案例

<!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>
</head>
<body>
    <div id="app">
        <!-- 实现一个购物车功能
        1. 数据初始化处理
        2.计算商品总价
        3.选择商品数量：当商品数量超过库存做提示
        -->
        <ul>
            <li v-for="(item, index) in car" >
            {{item.pname}} --- 商品价格：{{item.price}} --- 库存：{{item.stock}}
            数量：<input type="number" v-model="item.num" style="width: 30px;" />
            </li>
            <!-- 调用方法时，方法名需要加(),而调用计算属性的时候不用加括号 -->
            <li><strong>总价:</strong>{{calcSum}}</li>
            <li v-html="message"></li>
            <li v-html="warn()"></li>
        </ul>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data:{
                car:[
                    {pname:'Iphone 12',price:7999,stock:10,num:1},
                    {pname:'小米11',price:3599,stock:3,num:4},
                ],
                message:"",
            },
            // methods : 当方法中使用的数据发生改变，方法会自动调用
            methods: {
                //方法侦听属性
                warn(){
                    let message="";
                    this.car.forEach(item => {
                        if(item.num>item.stock){
                            message+=`${item.pname}的库存超出限制<br/>`
                        }
                    });
                    return message;
                }
            },
            computed:{
                calcSum(){
                        let sum=0;
                        this.car.forEach(item => {
                            sum+=item.price*item.num;
                        });
                        return sum;
                    }
            },
            watch:{
                //要侦听的数据: 数组
                car:{
                    handler(newvalue,oldvalue){
                        this.message="";
                        this.car.forEach(item => {
                            if(item.num>item.stock){
                                this.message+=`${item.pname}的库存超出限制<br/>`
                            }
                        })
                    },
                    deep:true //深度侦听器
                },
                //基础类型侦听，将侦听数据作为函数就可以了
                message(newvalue,oldvalue){
                    console.info(newvalue,oldvalue);
                }
            }
        })
    </script>
</body>
</html>

方法和侦听器的区别：

方法：方法中任意数据发生了改变就会自动调用方法可以调用，进行返回值

侦听器：需要指定具体的侦听数据，只有被具体指定的侦听数据发生了改变才会触发不能像方法那样去调用，而是靠vue自动触发

五、过滤器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>过滤器</title>
</head>

<body> 
    <div id="app">
        <ul>
            <li v-for="user in userList">
                姓名:{{user.name}}；性别:{{formateGender(user.gender)}}
                <!-- 过滤器的用法 -->
                {{user.gender | filterGender}}
            </li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script> 
        let vm = new Vue({
            el: "#app",
            data: {
                userList: [
                    { id: 1, name: 'xushu', gender: 1 },
                    { id: 2, name: 'zhuge', gender: 0 }
                ]
            },
            methods: {
                formateGender(gender){
                    if(gender==1){
                        return "~男"
                    }else{
                        return "~女"
                    }
                }
            },
            // 专门针对数据过滤
            filters:{
                filterGender(gender){
                    if(gender==1){
                        return "!男"
                    }else{
                        return "!女"
                    }
                }
            }
        })
    </script>
</body>

</html>

六、组件化基础

组件是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
在这里插入图片描述
在编写组件时，我们需要不断思考如何提高组件的可复用性。

组件是可复用的 Vue 实例，我们可以把页面中在多个场景中重复使用的部分，抽出为一个组件进行复用。组件大大提高了代码的复用率。

1.全局组件注册

我们可以通过调用 Vue.component 的方式来定义全局组件，它接收两个参数：1. 组件名，2. 组件属性对象
属性对象：组件的属性对象即为 Vue 的实例对象属性。

全局组件可以在任何其他组件内使用，所以当我们设计的组件，需要在不同地方使用的时候，我们应当注册全局组件。

2.局部组件注册

我们也可以在 Vue 实例选项中注册局部组件，这样组件只能在这个实例中使用。局部组件的注册利用 Vue 实例的 components 对象属性，以组件名作为 key 值，以属性对象作为 value。由于局部组件只能在当前的 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>
</head>
<body>
    <div id="app">
        <!-- 1.4 全局组件的使用 -->
        <biaoge></biaoge>
    </div>

    <div id="app2">
        <!--3. 局部组件的使用 -->
        <biaobiao></biaobiao>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        // 1.全局組件： 在所有的Vue实例中使用
       /*
            1.1 命名：不要使用驼峰命名, 可以使用中划线的方式命名
            1.2 模板： 必须的
            1.3 数据：一定要函数的方式声明
       */
      Vue.component("biaoge",{
          template:`<div @click='num++'>{{num}}</div>`,
          data() {
              return {
                  num:1
              }
          },
      })

      //1.定义局部组件
      const biaobaio = {
          template:`<div @click='num++'>{{num}}</div>`,
          data() {
              return {
                  num:40
              }
          },
      }



        new Vue({
            el:"#app",
            data() {
                return {
                    
                }
            }
        })
        new Vue({
            el:"#app2",
            data() {
                return {
                    
                }
            },
            // 2.定义局部组件
            components:{
                "biaobiao":biaobaio
            }
        })
    </script>
</body>
</html>

七、生命周期和钩子函数

1.生命周期

在这里插入图片描述

从上面这幅图中，我们可以看到 vue 生命周期可以分为八个阶段，分别是：

beforeCreate（创建前）
created（创建后）
beforeMount (载入前)
mounted（载入后）
beforeUpdate（更新前）
updated（更新后）
beforeDestroy（销毁前）
destroyed（销毁后）

1.1 创建前（beforeCreate）

在实例初始化之后，此时的数据观察和事件机制都未形成，不能获得 DOM 节点。

1.2 创建后（created）

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测（data observer），属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始。

1.3 载入前（beforeMount）

在挂载开始之前被调用：这个过程是在模版已经在内存中编译完成， render 函数首次被调用，此时完成了虚拟 DOM 的构建，但并未被渲染。

1.4 载入后（mounted）

这个过程在模版挂载之后被调用，页面完成渲染，所以在这之后，我们可以操作和访问 DOM 元素。

1.5 更新前（beforeUpdate）

当数据更新时调用，在这一阶段 DOM 会和更改过的内容同步。

1.6 更新后（updated）

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

1.7 销毁前（beforeDestroy）

实例销毁之前调用。在这一步，实例仍然完全可用。

1.8 销毁后（destroyed）

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。实例代码：

2.案例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id = "app">
    <span id="name">{{ name }}</span>
    <button @click="updateName">更新</button>
    <button @click="destroy">销毁</button>
  </div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type = "text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      name:'hello !'
    },
    methods : {
      updateName() {
        console.log('准备修改名字啦！')
        this.name = 'hello hello！'
      },
      destroy(){
        vm.$destroy()
      }
    },
    beforeCreate() {
      // 此时页面数据未初始化
      console.log('beforeCreate:' + this.name) // beforeCreate： undefined
    },
    created() {
      // 页面数据已经初始化
      console.log('created:' + this.name) // beforeCreate： hello !
    },
    beforeMount() {
      console.log('beforeMount:' + this.name) // beforeCreate： hello !
      console.log("html模板未渲染：" + document.getElementById("name").innerText);
    },
    mounted() {
      console.log('mounted:' + this.name) // beforeCreate： hello !
      console.log("html模板已渲染：" + document.getElementById("name").innerText);
    },
    // 点击更新按钮后会先触发 beforeUpdate
    beforeUpdate() { 
      console.log('beforeUpdate:' + this.name) // beforeCreate： hello 
      console.log("html模板未更新：" + document.getElementById("name").innerText);
    },
    updated() {
      console.log('updated:' + this.name) // updated hello 中国 !
      console.log("html模板已更新：" + document.getElementById("name").innerText);
    },
    // 点击销毁按钮后会先触发 beforeDestroy
    beforeDestroy(){
      console.log('beforeDestroy: before destroy') // beforeDestroy: before destroy
      console.log("销毁前：" + document.getElementById("name").innerText);
    },
    destroyed(){
      console.log('destroyed: success') // destroyed: success
      // 在这之后点击页面 更新 按钮将无任何效果
      console.log("销毁后：" + document.getElementById("name").innerText);
    }
  });
</script>
</html>

八、Vue-Router路由

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。 — 官方定义
VueRouter 是 SPA（单页应用）的路径管理器，它允许我们通过不同的 URL 访问不同的内容。

步骤

1.安装vue-router路由，引入vue-router文件

 npm install vue‐router

在这里插入图片描述

2.要根据不同url链接到不同的页面，需要使用模板实现，将模板绑定对应的路由地址

在这里插入图片描述

3.使用路由管理模板，将url跟模板进行绑定

在这里插入图片描述

4.用route-link跳转，route-view展示跳转的地址所含的组件

在这里插入图片描述

5.综合代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div>
      <!-- <a href="/5、vue路由器.html#/index">首页</a>
      <a href="#">商品</a> -->
      <router-link to="/index">首页</router-link>
      <router-link to="/product">商品</router-link>

      <router-view></router-view>

    </div>
  </div>
</body>

<script src="./node_modules/vue/dist/vue.js"></script>
<!-- 1.安装vue-router路由
     2.引入vue-router文件

     3.要根据不同url链接到不同的页面， 需要使用模板实现， 将模板绑定对应的路由地址
-->
<script src="./node_modules/vue-router/dist/vue-router.js"></script>




<script type="text/javascript">
  let Index = Vue.component("index", {
    template: `<div>Hello，欢迎使用来到小米商城！</div>`
  });
  let Product = Vue.component("product", {
    template: `<ul><li>1. Iphone11</li><li>2. 小米11</li></ul>`
  });

  // 4.使用路由管理模板， 将url跟模板进行绑定

  const router = new VueRouter({
    routes: [{
        path: "/index",
        component: Index
      },
      {
        path: "/product",
        component: Product
      },
    ]
  })


  var vm = new Vue({
    el: '#app',
    router
  })
</script>

</html>

九、axios

1.介绍

官方：http://www.axios-js.com/zh-cn/docs/
Axios 是一个基于 promise 的 HTTP 库，可以用在html和 vue、nodejs 中。

特性

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

2.使用

2.1 安装

 npm install axios

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.2 案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in users">
                {{item}}
            </li>
        </ul>
    </div>
</body>

<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>

<script>
    //1. 还没有调用getAllUsers方法
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                users: []
            }
        },
        mounted() {
            this.getAllUsers();
        },
        methods: {
            getAllUsers() {
                axios.get('http://localhost:8811/user/getAllUsers'
                        //, {
                        //     params: {
                        //         ID: 12345
                        //     }
                        // }
                    )
                    //不使用箭头函数，用this.user不可以，因为在这个this是指Axios
                    // .then(function(response){
                    //     vm.users = response.data.data;
                    // })

                    // 当使用箭头函数  this 指向的是外层
                    .then(response => {
                        this.users = response.data.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
    })
</script>

</html>

2.3 Get请求

			axios.get('/user', {
                params: {
                    ID: 12345
                }
            })
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });

2.4 POST请求

            axios.post('/user', { 
                firstName: 'Fred', 
                lastName: 'Flintstone' 
            }) 
            .then(function (response) { 
                console.log(response); 
            }) 
            .catch(function (error) {
                console.log(error); 
            });

2.5 执行多个并发请求

			function getUserAccount() { 
                return axios.get('/user/12345'); 
            } 
            
            function getUserPermissions() { 
                return axios.get('/user/12345/permissions'); 
            } 
            
            axios.all([getUserAccount(), getUserPermissions()])
            .then(axios.spread(function (acct, perms) { 
                // 两个请求现在都执行完成 
            }));