Vue3快速入门 - 技术栈

一、Vue简介

Vue，是一款用于构建用户界面 的渐进式 的JavaScript框架。

官方网站：https://cn.vuejs.org。

渐进式中的渐进呢，字面意思就是 "循序渐进"。Vue生态中的语法呢是非常多的，比如声明式渲染、组件系统、客户端路由（VueRouter）、状态管理（Vuex、Pinia）、构建工具（Webpack、Vite）等等。

Vue中两种常见的开发模式：

基于Vue提供的核心包，完成项目局部模块的改造了。
基于Vue提供的核心包、插件进行工程化开发，也就是做整站开发。

二、Vue3快速入门

使用 ES 模块构建步骤：

准备一个html文件，并在其中引入Vue模块【注意：模块化的js，引入时，需要设置 type="module"】。
创建Vue程序的应用实例，控制视图的元素。
准备元素（div），交给Vue控制。
准备数据。在创建Vue应用实例的时候，传入了一个js对象，在这个js对象中，我们要定义一个data方法，这个data方法的返回值就是Vue中的数据。
通过插值表达式渲染页面。插值表达式的写法：{{...}}。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3-快速入门</title>
</head>
<body>
  <!-- 3.准备视图元素 -->
  <div id="app">
    <!-- 5.通过插值表达式进行数据渲染 -->
    <h1>{{message}}</h1>
  </div>

  <script type="module">
    // 1.引入Vue模块
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    // 2.创建Vue实例,并绑定视图
    createApp({
      // 4.定义数据模型
      data () {
        return {
          message: 'Hello Vue'
        }
      }
    }).mount('#app')

  </script>
</body>
</html>

注意：

Vue中定义数据，必须通过data方法来定义，data方法返回值是一个对象，在这个对象中定义数据。
插值表达式中编写的变量，一定是Vue中定义的数据，如果插值表达式中编写了一个变量，但是在Vue中未定义，将会报错。
Vue应用实例接管的区域是 '#app'，超出这个范围，就不受Vue控制了，所以vue的插值表达式，一定写在 <div id="app">...</div> 的里面。

三、Vue3常用指令

指令：指的是HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义，可以实现不同的功能。例如：v-if，v-for...

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-if/v-else-if/v-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件

3.1 v-for

作用：列表渲染，遍历容器的元素或者对象的属性。

语法：v-for = "(item,index) in items"。

参数：

items 为遍历的数组。
item 为遍历出来的元素。
index 为索引/下标，从0开始；可以省略，省略index语法： v-for = "item in items"

v-for 示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-for示例</title>
</head>
<body>
  
  <div id="app">
    <!-- <p v-for="name in names">{{name}}</p> -->
    <p v-for="(name, index) in names">{{index + 1}} : {{name}}</p>
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          names: ['张先生', '张三丰', '李四', '王五']
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

3.2 v-bind

作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。

语法：v-bind:属性名="属性值"。

简化：:属性名="属性值"。

注意：v-bind 所绑定的数据，必须在data中定义。

v-bind 示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-bind示例</title>
</head>
<body>
  
  <div id="app">
    <a v-bind:href="url">链接1</a>
    <br><br>
    <a :href="url">链接2</a>
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          url: "https://www.baidu.com"
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

3.3 v-if && v-show

作用：这两类指令，都是用来控制元素的显示与隐藏的。

v-if：

语法：v-if="表达式"，表达式值为 true，显示；false，隐藏。
原理：基于条件判断，来控制创建或移除元素节点（条件渲染）。
场景：要么显示，要么不显示，不频繁切换的场景。
其它：可以配合 v-else-if / v-else 进行链式调用条件判断。

v-show：

语法：v-show="表达式"，表达式值为 true，显示；false，隐藏。
原理：基于CSS样式display来控制显示与隐藏。
场景：频繁切换显示隐藏的场景。

注意：v-else-if必须出现在v-if之后，可以出现多个； v-else 必须出现在v-if/v-else-if之后。

v-if 示例：

javascript 复制代码

<!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>Vue3-示例</title>
    <style>
        table,th,td {
            border: 1px solid #000;
            border-collapse: collapse;
            line-height: 50px;
            text-align: center;
        }

        #center,table {
            width: 60%;
            margin: auto;
        }

        #center {
            margin-bottom: 20px;
        }

        img {
            width: 50px;
        }

        input,select {
            width: 17%;
            padding: 10px;
            margin-right: 30px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .btn {
            background-color: #ccc;
        }
    </style>
</head>

<body>
<div id="app">
    <div id="center">
        姓名: <input type="text" name="name">
        性别:
        <select name="gender">
            <option value="1">男</option>
            <option value="2">女</option>
        </select>
        职位:
        <select name="job">
            <option value="1">讲师</option>
            <option value="2">班主任</option>
            <option value="3">其他</option>
        </select>

        <input class="btn" type="button" value="查询">
    </div>

    <table>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>头像</th>
            <th>性别</th>
            <th>职位</th>
            <th>入职时间</th>
            <th>更新时间</th>
        </tr>

        <tr v-for="(user, index) in userList" :key="user.id">
            <td>{{index + 1}}</td>
            <td>{{user.name}}</td>
            <td> <img :src="user.image"> </td>
            <td>
                <!-- v-if 控制显示或隐藏 -->
                <span v-if="user.gender == 1">男</span>
                <span v-else-if="user.gender == 2">女</span>
                <span v-else>其他</span>
            </td>
            <td>
                <!-- v-show 控制显示或隐藏 -->
                <span v-show="user.job == 1">讲师</span>
                <span v-show="user.job == 2">班主任</span>
                <span v-show="user.job == 3">其他</span>
            </td>
            <td>{{user.entrydate}}</td>
            <td>{{user.updatetime}}</td>
        </tr>
    </table>
</div>

<script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
        data() {
            return {
                userList: [
                    {
                        "id": 1,
                        "name": "张三",
                        "image": "localhost:8080/2025/1.jpg",
                        "gender": 1,
                        "job": 1,
                        "entrydate": "2025-06-09",
                        "updatetime": "2025-07-01 00:00:00"
                    },
                    {
                        "id": 2,
                        "name": "李四",
                        "image": "localhost:8080/2025/2.jpg",
                        "gender": 1,
                        "job": 1,
                        "entrydate": "2025-06-09",
                        "updatetime": "2025-07-01 00:00:00"
                    },
                    {
                        "id": 3,
                        "name": "张三丰",
                        "image": "localhost:8080/2025/3.jpg",
                        "gender": 2,
                        "job": 2,
                        "entrydate": "2025-06-09",
                        "updatetime": "2025-07-01 00:00:00"
                    },
                    {
                        "id": 4,
                        "name": "王五",
                        "image": "localhost:8080/2025/4.jpg",
                        "gender": 1,
                        "job": 3,
                        "entrydate": "2025-06-09",
                        "updatetime": "2025-07-01 00:00:00"
                    }
                ]
            }
        },
    }).mount("#app");
</script>
</body>

</html>

3.4 v-model

作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据。

语法：v-model="变量名"。

这里的双向数据绑定，是指 Vue中的数据变化，会影响视图中的数据展示。视图中的输入的数据变化，也会影响Vue的数据模型。注意：v-model 中绑定的变量，必须在data中定义。

v-model 代码示例：

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-model入门</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model="name"> <br>
    {{name}}
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          name: 'Tom'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

3.5 v-on

作用：为html标签绑定事件（添加时间监听）。

语法：

v-on:事件名="内联语句"

html 复制代码

  <input type="button" value="点我一下试试" v-on:click="console.log('试试就试试');">

v-on:事件名="函数名"
html 复制代码
```
  <input type="button" value="点我一下试试" v-on:click="handle">
```
这里的handle函数，就需要在Vue应用实例创建的时候创建出来，在methods定义。简写为 @事件名="..."

v-on 代码示例：

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-on入门</title>
</head>
<body>
  
  <div id="app">    
  <input type="button" value="按钮1" v-on:click="console.log('点击按钮')">
    <input type="button" value="按钮2" v-on:click="handle">
    <input type="button" value="按钮3" @click="handle">
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          name: 'Vue'
        }
      },
      methods: {
        handle(){
          console.log('点击按钮1');
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

四、Vue生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程。

vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。我们一般用于页面初始化自动的ajax请求后台数据。

五、异步Ajax

我们前端页面中的数据，应该来自于后台，那么我们的后台和前端是互不影响的2个程序，那么我们前端应该如何从后台获取数据呢？因为是2个程序，所以必须涉及到2个程序的交互，所以这就需要用到Ajax技术。

Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。其作用有如下2点：

与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互：可以在不重新加载整个页面 的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

5.1 原生Ajax

客户端的Ajax请求代码如下有如下4步。

创建XMLHttpRequest对象：用于和服务器交换数据。
向服务器发送请求。
获取服务器响应数据。

代码：

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>原生Ajax</title>
</head>
<body>  
    <input id="btn1" type="button" value="获取数据">
    
    <div id="div1"></div>

    <script>
        document.querySelector('#btn1').addEventListener('click', ()=> {
          //1. 创建XMLHttpRequest 
          var xmlHttpRequest  = new XMLHttpRequest();
          
          //2. 发送异步请求
          xmlHttpRequest.open('GET', 'http://localhost:8080/emps/list');
          xmlHttpRequest.send();//发送请求
          
          //3. 获取服务响应数据
          xmlHttpRequest.onreadystatechange = function(){
              if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                  document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
              }
          }
        })
    </script>
</body>
</html>

5.2 Axios 示例

原生的Ajax请求的代码编写起来比较繁琐。我们使用更加简单的发送Ajax请求的技术Axios 。Axios是对原生的AJAX进行封装，简化书写。Axios官网是：https://www.axios-http.cn。

发送 get 请求：

javascript 复制代码

axios({
    method:"get",
    url:"http://localhost:8080/emps/list"
}).then(function (resp){
    alert(resp.data);
})

发送 post 请求：

javascript 复制代码

axios({
    method:"post",
    url:"http://localhost:8080/emps/update",
    data:"id=1"
}).then(function (resp){
    alert(resp.data);
});

说明：

axios()是用来发送异步请求的，小括号中使用 js的JSON对象传递请求相关的参数：

method属性：用来设置请求方式的。取值为 get 或者 post。
url属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
data属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为 回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

示例代码：

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>Axios-示例</title>
</head>
<body>
    
    <input type="button" value="获取数据GET" id="btnGet">
    <input type="button" value="删除数据POST" id="btnPost">

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        //GET请求
        document.querySelector('#btnGet').addEventListener('click', ()=>{
            axios({
                url: 'http://localhost:8080/emps/list',
                method: 'GET'
            }).then(result => {
                console.log(result.data);
            }).catch(err => {
                console.log(err);
            })
        })

        //POST请求
        document.querySelector('#btnPost').addEventListener('click', ()=>{
            axios({
                url: 'http://localhost:8080/emps/update',
                method: 'POST',
                data:'id=1'
            }).then(result => {
                console.log(result.data);
            }).catch(err => {
                console.log(err);
            })
        })
    </script>
</body>
</html>

5.3 Axios 别名

Axios还针对不同的请求，提供了别名方式的api，具体格式如下：

复制代码

axios.请求方式(url [, data [, config]])

具体如下：

方法	描述
axios.get(url [, config])	发送get请求
axios.delete(url [, config])	发送delete请求
axios.post(url [, data[, config]])	发送post请求
axios.put(url [, data[, config]])	发送put请求

get请求代码如下：

javascript 复制代码

axios.get("http://localhost:8080/emps/list").then(result => {
    console.log(result.data);
})

post请求代码如下：

javascript 复制代码

axios.post("http://localhost:8080/emps/update","id=1").then(result => {
    console.log(result.data);
})

5.4 async/await

可以通过async、await来解决回调函数地狱问题。async就是来声明一个异步方法，await是用来等待异步任务执行。

await关键字只在async函数内有效，await关键字取代了原来的then成功回调函数，且await会等待获取到请求成功的结果值。

使用async/await实现省市联动代码：

javascript 复制代码

<!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>Vue3-案例1</title>
    <style>
      #center {
        margin-bottom: 20px;
      }

      input,
      select {
        width: 17%;
        padding: 10px;
        margin-right: 30px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div id="center">
        省:
        <select v-model="province">
          <option v-for="p in provinces" :key="p.id" :value="p.id">{{p.name}}</option>
        </select>
        市:
        <select v-model="city">
          <option v-for="c in cities" :key="c.id" :value="c.id">{{c.name}}</option>
        </select>
        区:
        <select v-model="area">
          <option v-for="a in areas" :key="a.id" :value="a.id">{{a.name}}</option>
        </select>
      </div>
    </div>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="module">
      import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
      createApp({
        data() {
          return {
            province: '',
            city: '',
            area: '',

            provinces: [],
            cities: [],
            areas: [],
          };
        },
        methods: {
          // 通过async声明异步方法
          async search(){
            //1.获取所有的省 https://web-server.itheima.net/province
            let presult = await axios.get('localhost:8080/province');  //等待
            this.provinces = presult.data.data;
            this.province = this.provinces[0].id;

            //2.获取第一个省对应的市
            let cresult = await axios.get(`localhost:8080/city?pid=${this.province}`);  //等待
            this.cities = cresult.data.data;
            this.city = this.cities[0].id;

            //2.获取第一个市对应的区
            let aresult = await axios.get(`localhost:8080/area?cid=${this.city}`);  //等待
            this.areas = aresult.data.data;
            this.area = this.areas[0].id;
          }
        },

        //钩子函数
        mounted() {
          this.search();
        },
      }).mount("#app");
    </script>
  </body>
</html>