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>