Vue3的搭建及「响应式变量」

Vue3的项目创建

全局安装vite：npm i vite -g

创建命令：npm create vite

● Project name（给要创建的项目取个名字）：todo

● Select a framework（键盘上下键选择一个前端框架）：选择Vue，按下回车

● Select a variant（选择开发使用的语言，JS或者TS）：选择JavaScript，按下回车

建议使用pnpm安装依赖。没有pnpm的，先安装pnpm：npm i pnpm -g

pnpm带有缓存，如果第一次安装过了，第二次再安装时速度非常快

进入到项目目录：cd todo

执行依赖安装：pnpm i

运行：npm run dev

Vue3中使用【响应式变量】

响应式变量

改变变量的值的时候，能够触发界面重新渲染

Vue2中使用响应式特性

在data上面声明这种具有响应式特性的数据：

// Vue2中
<script>
data: () => {
    return {
        num: 0
    }
}
doAdd: function () {
    // num是在data上声明的，修改之后会触发界面重新渲染
    this.num++ 
}
<script>

<template>
    <button @click="doAdd">{{ num }} </button>
</template>

Vue3中使用响应式特性

● 声明响应式变量的语法变化：

import { ref } from 'vue'
// 创建响应式变量num，ref调用的时候参数，就是响应式变量num的初始值
const num = ref(0) 

● 修改和获取响应式变量，加上.value属性

// 修改普通变量 num = 1
// 修改ref创建的响应式变量：
num.value = num.value + 1

● template上的语法，和vue2中是一样的 --> 绑定点击事件 @click，绑定数据 :num=""

● 在模板中，使用响应式变量的时候，不需要加.value

小练习：实现一个步进器

已有两个button按钮和一个label标签，实现左边按钮点一次，标签上的数字增加1；右边按钮点一次，标签上的数字减1

<script setup>
import { ref } from 'vue'
</script>
<template>
  <div class="card">
    <button>+</button>
    <label>{{ 数字 }}</label>
    <button>-</button>
  </div>
</template>

完成后：

<script setup>
import { ref } from 'vue'
const num = ref(0)
const doAdd = () => {
  num.value++
}
const doDec = () => {
  num.value--
}
</script>
<template>
  <div class="card">
    <button @click="doAdd">+</button>
    <label>{{ num }}</label>
    <button @click="doDec">-</button>
  </div>
</template>

实现前端交互功能基本的套路：

● 声明响应式变量，承载想要变化的内容。上面例子中，数字需要变化，所以数字用响应式变量num来表示；

● 绑定交互对应的事件（点击click，change等），事件处理函数在JS中声明

● 在事件处理函数中，修改响应式变量。修改后自动触发界面重新渲染，把最新的内容展示到界面上

小练习：实现登录框中的发送验证码倒计时按钮

点击『发送验证码』按钮后：

● 按钮上的文字变为：xx秒后重新发送

● 在倒计时结束之前，按钮不可点击（disabled状态）

● 倒计时结束后恢复

分析：

● 该声明什么为响应式变量？界面是哪块在变化？倒计时的秒数 --> const second = ref(60)

● 绑定什么事件？ 发送验证码按钮上面绑定click事件

● 事件处理函数中加上什么逻辑？

○ 改变按钮上的文字

○ 开启定时器，每隔1秒钟执行一次；

○ 定时器回调函数中，判断是否倒计时结束，如果结束.... ; 如果没结束...

实现：

<script setup>
const INIT = 3
// 倒计时的秒数
const second = ref(INIT)
const doSend = () => {
  const id = setInterval(() => {
    second.value--
    if (second.value == 0) { // 减少到0，关闭定时器
      clearInterval(id)
      second.value = INIT // 恢复初始值
    }
  }, 1000)
}
</script>
<template>
<div class="card">
    <input type="text" /><button :disabled="second != INIT" @click="doSend">{{ second == INIT ? '发送验证码' : second +
      '秒后重新发送' }}</button>
  </div>
</template>