• Vue2【watch 侦听器、计算属性、axios、vue-cli、vue 组件】

    文章目录

    watch 侦听器

    1. 什么是 watch 侦听器

    watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
    语法格式如下：

    在这里插入图片描述
    要监听那个数据的变化，就把数据名当作方法名即可

    2. 使用 watch 检测用户名是否可用

    监听 username 值的变化，并使用 axios 发起 Ajax 请求，检测当前输入的用户名是否可用：
    在这里插入图片描述

    3. immediate 选项

    默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用 immediate 选项。示例代码如下：
    在这里插入图片描述

    4. deep 选项

    如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选项，代码示例如下：
    在这里插入图片描述

    5. 监听对象单个属性的变化

    如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch 侦听器：
    在这里插入图片描述

    计算属性

    1. 什么是计算属性

    计算属性指的是通过一系列运算之后，最终得到一个属性值。

    这个动态计算出来的属性值可以被模板结构或 methods 方法使用。示例代码如下：
    在这里插入图片描述

    2. 计算属性的特点

    ① 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性
    ② 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算

    axios

    axios基础语法

    在这里插入图片描述
    axios基本使用

    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>Documenttitle>
head>

<body>

  <script src="./lib/axios.js">script>
  <script>
    // http://www.liulongbin.top:3006/api/getbooks

    // 1. 调用 axios 方法得到的返回值是 Promise 对象
    axios({
      // 请求方式
      method: 'GET',
      // 请求的地址
      url: 'http://www.liulongbin.top:3006/api/getbooks',
      // URL 中的查询参数
      params: {
        id: 1
      },
      // 请求体参数
      data: {}
    }).then(function (result) {
      console.log(result)
    })
  script>
body>

html>

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

    axios发起POST、GET请求

    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>Documenttitle>
head>

<body>

  <button id="btnPost">发起POST请求button>
  <button id="btnGet">发起GET请求button>

  <script src="./lib/axios.js">script>
  <script>
    document.querySelector('#btnPost').addEventListener('click', async function () {
      // 如果调用某个方法的返回值是 Promise 实例，则前面可以添加 await！
      // await 只能用在被 async “修饰”的方法中
      const { data } = await axios({
        method: 'POST',
        url: 'http://www.liulongbin.top:3006/api/post',
        data: {
          name: 'zs',
          age: 20
        }
      })

      console.log(data)
    })

    document.querySelector('#btnGet').addEventListener('click', async function () {
      // 解构赋值的时候，使用 : 进行重命名
      // 1. 调用 axios 之后，使用 async/await 进行简化
      // 2. 使用解构赋值，从 axios 封装的大对象中，把 data 属性解构出来
      // 3. 把解构出来的 data 属性，使用 冒号 进行重命名，一般都重命名为 { data: res }
      const { data: res } = await axios({
        method: 'GET',
        url: 'http://www.liulongbin.top:3006/api/getbooks'
      })

      console.log(res.data)
    })

    // $.ajax()   $.get()  $.post()
    // axios()    axios.get()    axios.post()    axios.delete()   axios.put()
  script>
body>

html>

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

    axios直接发起GET、POST请求

    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>Documenttitle>
head>

<body>
  <button id="btnGET">GETbutton>
  <button id="btnPOST">POSTbutton>

  <script src="./lib/axios.js">script>
  <script>
    document.querySelector('#btnGET').addEventListener('click', async function () {
      /* axios.get('url地址', {
        // GET 参数
        params: {}
      }) */

      const { data: res } = await axios.get('http://www.liulongbin.top:3006/api/getbooks', {
        params: { id: 1 }
      })
      console.log(res)
    })

    document.querySelector('#btnPOST').addEventListener('click', async function () {
      // axios.post('url', { /* POST 请求体数据 */ })
      const { data: res } = await axios.post('http://www.liulongbin.top:3006/api/post', { name: 'zs', gender: '女' })
      console.log(res)
    })
  script>
body>

html>

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

    把axios挂载到vue原型

    在这里插入图片描述
    在这里插入图片描述

    axios配置请求根路径

    在这里插入图片描述
    在这里插入图片描述

    vue-cli

    1. 什么是单页面应用程序

    单页面应用程序（英文名：Single Page Application）简称 SPA，顾名
    思义，指的是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能
    与交互都在这唯一的一个页面内完成。

    例如资料中的这个 Demo 项目：
    在这里插入图片描述

    2. 什么是 vue-cli

    vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。

    引用自 vue-cli 官网上的一句话：
    程序员可以专注在撰写应用上，而不必花好几天去纠结 webpack 配置的问题。
    中文官网：https://cli.vuejs.org/zh/

    3. 安装和使用

    vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上：
    npm install -g @vue/cli

    基于 vue-cli 快速生成工程化的 Vue 项目：
    vue create 项目的名称
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    4. vue 项目的运行流程

    在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。
    其中：
    ① App.vue 用来编写待渲染的模板结构
    ② index.html 中需要预留一个 el 区域
    ③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中

    vue 组件

    1. 什么是组件化开发

    组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。

    2. vue 中的组件化开发

    vue 是一个支持组件化开发的前端框架。
    vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

    3. vue 组件的三个组成部分

    每个 .vue 组件都由 3 部分构成，分别是：

    • template -> 组件的模板结构
    • script -> 组件的 JavaScript 行为
    • style -> 组件的样式

    其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。

    3.1 template

    vue 规定：每个组件对应的模板结构，需要定义到