5 前端系统开发：Vue2、Vue3框架（上）：Vue入门式开发和Ajax技术

本文链接：https://blog.youkuaiyun.com/smalltorch/article/details/145404307

文章目录

前言
一、Vue框架（简化DOM操作的一个前端框架）：基础入门
二、Vue常用指令
三、计算属性和监视器
三 Vue生命周期和Vue中发送请求的位置
- - （1）Vue对象的生命周期
  - （2）mounted阶段：发送请求的时刻
四、Ajax技术（从服务端获取数据，发送各种请求）

前言

一、Vue框架（简化DOM操作的一个前端框架）：基础入门

Vue的使用在前端想学习深入还是有很多要学习的，但我们重点不在前端。我们快速入门一下，能够简单使用就可以了，如果想深入了解这个十分重要的前端框架，就需要专门去找Vue这门课好好学习一下了。

1 Vue基本概念

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
前面学DOM操作，会发现相当繁琐，方法属性一大堆，不方便。因此就衍生出了Vue这么一个框架可以帮助我们简化DOM操作的书写。
- 优点:大大提升开发效率(70%个)
- 缺点︰需要理解记忆规则→官网
  使用框架就要遵守框架中的一些人为规定的规则
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
Vue的学习，其实关注一点：
数据模型 <=====>前端界面展示 ，这二者是相互影响的
（1）数据模型里面对应的数据值发生了变化，前端展示中所有应用这个数据值都会同时发生变化
（2）前端展示的所有数据值只要有一个地方修改了这个值，就会导致数据模型中对应的值发生变化，进而导致前端其他引用这个数据值的地方也发生变化
官网: https://v2.cn.vuejs.org/
框架:是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

问题来了，数据模型是什么？下面通过一个Vue的快速入门来了解上述这些概念。

2 快速入门：创建Vue实例，初始化渲染

（1）创建一个入门Vue实例

参考视频

Vue的基本使用只有三步
- （1）新建HTML页面，引入Vue.js文件（引包）
  官网: https://v2.cn.vuejs.org/提供了两种模式的Vue.js文件
  开发版本包含完整的警告和调试模式，更加适合我们开发者。如果产品上线了换成生产环境版本，对用户更加友好，出现报错屏蔽了报错信息。
  - 
    <script src=“https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js”></script>
  - 
    <script src=“https://cdn.jsdelivr.net/npm/vue@2”></script>
- （2）在JS代码区域，创建Vue核心对象，定义数据模型
  - 知识点：JS中的自定义类，自定义对象、JSON知识；参考上一篇JS博客
  - 代码解释：
    - new Vue( JS对象 ) ：这里是new出来一个 Vue对象，里面传参传一个自定义的对象（这个对象就是数据模型）
    - 数据模型：可以发现是一个JS对象（键值对）
      - el ：指定挂载点（要控制渲染的是哪一个容器）
        用于规定这个 Vue 能控制html中的哪些元素（标签等），里面的语法类似CSS选择器
        例如这里 el: "#app"就是表示能控制id="app"的这个元素
      - data : 数据模型，值是一个{ }（也就是一个JSON对象），里面的键值对可以放各种前端要展示的数据，甚至是css样式（可能还有更加高级的用法）
- （3）编写视图（准备容器，要渲染的标签，一般我们都是使用一个div标签容器）
  { { }} ：插值表达式语法，可以直接获取数据模型中的数据用于展示

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>           <!-- 引入Vue.js -->
</head>
<body>
	<!-- 定义要渲染的容器 -->
    <div id="app">
        {
  { message }}                   <!-- 使用双大括号(插值表达式)绑定数据 -->
    </div>
</body>
<script>
    // 定义Vue对象
    new Vue({
     
        el: '#app',                      // 挂载点,绑定id为app的元素
        data: {
     
            message: 'Hello Vue.js!'        // 数据
        }
    })
</script>
</html>

渲染结果：
在这里插入图片描述

（2）插值表达式：{ {表达式}}

参考视频
插值表达式是一种Vue的模板语法

作用: 利用表达式进行插值（访问data数据模型中数据），渲染到页面中
表达式: 是可以被求值的代码，JS引擎会将其计算出一个结果
语法: { {表达式}}
注意点：
- 使用的数据必须存在( data )
- 支持的是表达式（理解成能够求出一个值的js代码即可），而非语句，比如:if for …
- 不能在标签属性中使用{ {}}插值
  标签属性中访问data数据模型中数据必须使用v-bind指令

示例：

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

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>           <!-- 引入Vue.js -->
</head>

<body>
    <!-- 插值表达式: {
    {
     }}  <!-- 插值表达式,用于输出数据 -->
    <!-- 里面的表达式可以是任意的JavaScript表达式,可以是变量,也可以是函数,也可以是运算符等等，只要最终能够返回一个值即可 -->
    <div id="app">
        {
  { nickname }}  <br>                                      <!-- 输出 tony -->
        {
  {nickname.toUpperCase()}}  <br>                          <!-- 输出 TONY -->
        {
  {nickname.length}}  <br>                                 <!-- 输出 4 -->
        {
  {nickname.split('').reverse().join('')}}  <br>           <!-- 输出 ynot -->
        {
  {age + 2}}  <br>                                         <!-- 输出 20 -->
        {
  {age > 18 ? '成年人' : '未成年人'}}  <br>                 <!-- 输出 未成年人 -->

        <!-- 拿到对象的属性: -->
        {
  {friend.name}}  <br>                                     <!-- 输出 jack -->
        {
  {friend.age}}  <br>                                      <!-- 输出 18 -->
    </div>
    
</body>

<script>
    // 定义Vue对象
    const app = new Vue({
     
        el: '#app',                      // 挂载点,绑定id为app的元素
        data: {
     
            nickname: 'tony',
            age : 16,
            friend : {
     
                name : 'jack',
                age : 18
            }
        }
    })

</script>
</html>

渲染结果：
在这里插入图片描述

（3）Vue实例中的传入的对象中键的解释（重要）

new Vue() 实例化时，除了 el 和 data 之外，Vue 还支持许多其他属性来配置组件的行为。这些属性可以帮助你定义组件的生命周期、计算属性、方法、监听器、子组件等。下面会列出比较常见的几种：

常见属性：
- el string ：指定挂载点（CSS 选择器），将 Vue 实例挂载到 DOM 元素上。
- data Object：（数据模型）定义组件的初始数据，必须是函数形式（返回一个对象）。
- methods Object ：定义组件的方法，可以在模板或逻辑中调用。
钩子方法：
- mounted() ：挂载完成。

---- 数据模型data

data中的数据, 最终会被添加到对应的Vue实例上
- 访问数据: “实例.属性名”
- 修改数据: “实例.属性名”=“值”
- 在Vue内部修改data里面的数据，可以直接使用this.属性名访问到
  例如在methods中我们如果有方法需要修改data里面的数据，直接this.属性名就可以进行修改或者其他操作了

先记住这几条规则后面会频繁用到

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>           <!-- 引入Vue.js -->
<body>
    <div id="app">
        {
  {nickname}}                     <!-- 渲染结果 ： 张三 -->
    </div>
    
</body>

<script>
    // 定义Vue对象
    const app = new Vue({
     
        el: '#app',                      // 挂载点,绑定id为app的元素
        data: {
     
            nickname: 'tony'
        }
    })

    app.nickname = '张三'                // 修改数据

</script>

---- 定义方法：methods

具体使用见下面的【v-on:事件名= “methods中的函数名”】

---- mounted()钩子方法：挂载完成

具体使用见下面【案例练习：Axios+Vue,基于Vue及Axios完成数据的动态加载展示】

（4）Vue响应式特性

Vue核心特性: 响应式

我们已经掌握了基础的模板渲染，其实除了基本的模板渲染，Vue背后还做了大量工作。
- 比如: 数据的响应式处理 → 响应式: 数据模型里面数据发生变化，对应的渲染视图自动更新
- 聚焦于数据 → 数据驱动视图
- 使用Vue开发，关注业务的核心逻辑，根据业务修改数据即可

在这里插入图片描述

示例：
下面这个还是上面的插值表达式的示例代码，我们在浏览器的控制台上面修改数据模型data里面的数据：

在这里插入图片描述

更加具体清晰反映这种Vue核心特性: 响应式的例子见下面的：【v-model指令：在表单元素上创建双向数据绑定】

二、Vue常用指令

学习Vue指令建议先看v-on 这个给标签绑定事件的指令再学习其他指令会更加轻松。

Vue会根据不同的【指令】，针对标签实现不同的【功能】。

通过Vue的各种指定就可以实现各种数据模型和前端展示相互依赖的效果，下面我们就要来学习一些常用指令

指令: HTML标签上带有v-前缀的特殊标签属性，不同指令具有不同含义。例如:v-if，v-for…
常用指令：

1 v-html指令：设置元素的innerHTML

作用: 设置元素的innerHTML
很显然和传统的DOM操作中：Element对象的属性 ---- innerHTML属性获取或设置元素的 HTML 内容的作用是一样的
语法: v-html = “表达式”

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>           <!-- 引入Vue.js -->
<body>
    <div id="app">
        <div v-html="msg"></div>        <!-- 使用v-html指令插入 html -->
    </div>    
</body>

<script>
    // 定义Vue对象
    const app = new Vue({
     
        el: '#app',                      // 挂载点,绑定id为app的元素
        data: {
     
            msg:
            '<a href="https://www.bilibili.com/">哔哩哔哩</a>'
        }
    })
</script>

渲染结果：
在这里插入图片描述

2 v-on指令：为html标签绑定事件

作用: 注册事件 = 添加监听 + 提供处理逻辑
语法：
- v-on:事件名=“内联语句”
  内联语句：理解成一段可执行的代码
- v-on:事件名= “methods中的函数名”
简写：v-on:事件名 <==> @:事件名
例如：v-on:click 监听按钮的点击事件，触发 handleClick 方法。
可以简写为 @click=“handleClick”。
v-on 可以监听任何 DOM 事件，例如：
- @input：输入事件
- @keyup：键盘按键松开事件
- @submit：表单提交事件
- @mouseover：鼠标悬停事件
- 等等事件都可以上网去搜索（一般会结合指令修饰符一起使用）

（1）v-on:事件名=“内联语句”

直接将要执行的代码写成字符串就可以执行了

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>           <!-- 引入Vue.js -->
<body>
    <div id="app">
        <button @click = 'count = count - 1'>-</button>
        <span>{
  { count }}</span>
        <button @click = 'count = count + 1'>+</button>
    </div>
</body>

<script>
    // 定义Vue对象
    const app = new Vue({
     
        el: '#app',                      // 挂载点,绑定id为app的元素
        data: {
     
            count : 100
        }
    })
</script>

渲染结果：
在这里插入图片描述

（2）v-on:事件名= “methods中的函数名”

Vue示例中的
methods中可以定义各种事件触发的方法

---- 不传参

示例1：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
    <div id="app">
        <input type="button" value="按钮" @click = "handle()">
    </div>
</body>
<script>
    new Vue({
     
        el: '#app',
        data: {
     
            message : "我被点击了！！！！"
        },
        methods: {
     
        // methods中的所有函数，this都指向当前实例
            handle(){
     
                alert(this.message);     // 这个this语法下面会解释
            }
            /* 
            完整写法，上面是简写
            handle : function(){
                alert(this.message);     // 这个this语法下面会解释
            } 
            */
        }
    });
</script>

在这里插入图片描述

this 在 Vue 实例的方法中指向当前 Vue 实例。
通过 this 可以访问 data中的键。
典型错误：在 Vue.js 中，this.data.message 是错误的写法。
- 在 Vue 中，data 是一个函数，它返回一个对象。
- Vue 会将 data 返回的对象中的属性直接挂载到 Vue 实例上，而不是保留在 data 对象中。
- Vue 会将 message 直接挂载到实例上，而不是保留在 data 对象中。
- 因此，你可以通过 this.message 访问 message，而不是 this.data.message。
- 总结一下，我们传人的对象到Vue中，Vue会将data下一级的键直接挂载在上面，而不是直接挂载data。其余的也可以按照这个逻辑类比推导。

示例2：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
    <div id="app">
        <button @click = "fn">切换显示隐藏</button>
        <h1 v-show="isShow">黑马程序员</h1>
    </div>
</body>
<script>
    new Vue({
     
        el: '#app',
        data: {
     
            isShow: true
        },
        methods: {
     
            fn(){
     
                this.isShow = !this.isShow;      // 点击按钮时，切换显示隐藏
            }
        }
    });
</script>

渲染结果：
在这里插入图片描述

---- 传参

基本语法：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
    <div id="app">
        <div class="box">
            <h3>小黑自动售货机</h3>
            <button @click = "buy(5)">可乐5元</button>
            <button @click = "buy(10)">雪碧10元</button>
        </div>
        <p>银行卡余额：{
  {money}}元</p>
    </div>
</body>
<script>
    new Vue({
     
        el: '#app',
        data: {
     
            money: 100
        },
        methods: {
     
            buy(price){
     
                this.money -= price;
            }
        }
    });
</script>

渲染结果：
在这里插入图片描述

3 v-model指令：在表单元素上创建双向数据绑定

作用: 给 表单元素 使用，双向数据绑定 → 可以快速 获取或设置 表单元素内容
① 数据变化 → 视图自动更新
② 视图变化 → 数据自动更新
语法:v-model=‘变量’

（1）v-model 应用于输入框 input:text

这个指令就简单多了，用处也比较单一只能用在表单元素上。
v-model 是 Vue.js 中用于实现表单输入元素和 Vue 实例数据之间双向绑定的指令。它主要用于 <input>、<textarea>、<select> 等表单元素，能够自动同步用户输入的值和 Vue 实例中的数据。

示例1：

v-model 将输入框的值与 Vue 实例中的 message 数据绑定。
当用户输入内容时，message 会自动更新；反之，如果 message 的值发生变化，输入框的内容也会同步更新。

<body>
    <div id = "app">
        <input type="text" v-model="message">         <!-- v-model指令用于在表单控件元素上创建双向数据绑定 -->
        <p>{
  { message }}</p>                           <!-- {
   {}}用于输出数据 -->
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>           <!-- 引入Vue.js -->
<script>
    // 定义Vue对象
    new Vue({
     
        el: '#app',                      // 挂载点,绑定id为app的元素
        data: {
     
            message: 'Hello Vue.js!'        // 数据
        }
    })

</script>

下面就演示什么叫数据模型与前端展示视图相互依赖
原始界面：
在这里插入图片描述
将input输入框里面文字改成：曹潇潇我喜欢你！会发现下面的段落文字也会同步改变，这就是相互依赖，十分强大这个功能，我们压根不需要去在操作DOM就能实现这样的同步效果。

示例2：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>

    <div id="app">
        账户：<input type="text" v-model="username" >
        <br><br>
        密码：<input type="password" v-model="password" >
        <br><br>
        <button @click = "login">登录</button>
        <button @click = "reset">重置</button>
    </div>

</body>


<script>
    new Vue({
     
        el: '#app',
        data: {
      
            username: '',
            password: ''
            
        },
        methods: {
     
            login() {
     
                // 登录的逻辑，直接就可以通过 this.username 和 this.password 快速获取到输入框的值
                console.log('账户：' + this.username)
                console.log('密码：' + this.password)
                alert("用户"+this.username+"登录成功")
            },
            reset() {
     
                // 重置的逻辑
                this.username = ''
                this.password = ''
            }    
        }
    })
</script>

渲染结果：
在这里插入图片描述

（2）v-model 应用于其他各种表单组件

参考视频
常见的表单元素都可以用 v-model 绑定关联 → 快速获取或设置表单元素的值
它会根据控件类型自动选取正确的方法来更新元素

输入框 input:text
文本域 textarea
复选框 input:checkbox
单选框 input:radio
下拉菜单 select
案例：通过这个案例将上述所有组件都演示一下使用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小黑记事本</title>
    <style>
        textarea {
     
          display: block;
          width: 240px;
          height: 100px;
          margin: 10px 0;
        }
      </style>
</head>
<body>
    <div id="app">
        <h3>小黑学习网</h3>
        
        <!-- 输入框 -->
        姓名：
          <input type="text" v-model="username">            <!-- 输入框绑定是是 字符串类型 -->
          <br><br>
        
        <!-- 复选框 -->
        是否单身：
          <input type="checkbox" v-model="isSingle">         <!-- 复选框绑定是是 布尔类型 -->
          <br><br>
    
        <!-- 
          前置理解：
            1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
            2. value: 给单选框加上 value 属性，用于提交给后台的数据
          结合 Vue 使用 → v-model
        -->
        <!-- 单选框 -->
        性别: 
          <input type="radio" name="gender" value="1" v-model="gender">男       <!-- 单选框绑定是是 字符串类型和你设置的value值一样   -->                      
          <input type="radio" name="gender" value="2" v-model="gender">女
          <br><br>
    
        <!-- 
          前置理解：
            1. option 需要设置 value 值，提交给后台 ,假设 101 代表北京，102 代表上海...
            2. select 的 value 值，关联了选中的 option 的 value 值
          结合 Vue 使用 → v-model
        -->
        <!-- 下拉框 -->
        所在城市:
          <select v-model="city_id">
            <option value="101">北京</option>
            <option value="102">上海</option>
            <option value="103">成都</option>
            <option value="104">南京</option>
          </select>
          <br><br>
    
        <!-- 文本域 -->
        自我描述：
          <textarea v-model="desc"></textarea> 
    
        <button>立即注册</button>
      </div>
    
</body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
     
      el: '#app',
      data: {
     
        username: '',
        isSingle: true,
        gender : '1',
        city_id: '103',
        desc: ''          


      }
    })
  </script>
</html>

4 条件指令：v-if , v-else-if, v-else：根据if条件渲染某元素（标签），判定为true展示标签，否则不展示

v-if ： if
- 作用: 控制元素显示隐藏（条件渲染)
- 语法: v-if = “表达式”
- 表达式值true显示， false隐藏
v-else-if：else if
- 语法：v-else-if = “表达式”
- 注意: 需要紧挨着v-if 一起使用
v-else: else
- 语法：v-else
- 注意: 需要紧挨着v-if 一起使用
等价于：if(条件){}else if(条件){}else{}

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
    <div id="app">
        年龄<input type="text" v-model="age">经判定，为：
        <span v-if = "age <= 35">年轻人（35及以下）</span>                    <!-- if条件成立展示这条标签，不成立就不展示 -->
        <span v-else-if = "age>35 && age<60">中年人（35-60）</span>          <!-- else-if -->
        <span v-else>老年人（60以上）</span>                                 <!-- else -->
    </div>
</body>
<script>