【Vue3速成】03-vue基本语法的使用

弹简特2026-05-24 8:53

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨
🎯 你正在阅读「半路出家玩前端」系列文章 🎯

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

🔥 弹简特 个人主页

❄️ 个人专栏直通车：

✨ 靠热爱去书写自己，靠勇敢去书写生活！

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

🌟 博主简介:

文章目录：

  • 一、vue的代码编写方式
  • 二、视图渲染
    • [第 1 步：模板语法 ------ 把数据放到页面上](#第 1 步：模板语法 —— 把数据放到页面上)
      • [1.1 要学会什么](#1.1 要学会什么)
      • [1.2 先理解：Vue 模板是什么？](#1.2 先理解：Vue 模板是什么？)
      • [1.3 文本渲染：三种方式，怎么选？](#1.3 文本渲染：三种方式，怎么选？)
      • [1.4 属性渲染：不能用 `{{ }}`，要用 `v-bind`](#1.4 属性渲染：不能用 {{ }}，要用 v-bind)
      • [1.5 事件绑定用 `v-on`（简写 `@`）](#1.5 事件绑定用 v-on（简写 @）)
    • [第 2 步：响应式 ------ 数据变了，页面自己跟着变](#第 2 步：响应式 —— 数据变了，页面自己跟着变)
      • [2.1 你要学会什么](#2.1 你要学会什么)
      • [2.2 先理解：什么叫响应式？](#2.2 先理解：什么叫响应式？)
      • [2.3 两个工具：`ref` 和 `reactive`](#2.3 两个工具：ref 和 reactive)
      • [2.4 为什么学习响应式](#2.4 为什么学习响应式)
        • [`ref` ------ 万能盒子](#ref —— 万能盒子)
        • [`reactive` ------ 专门包对象](#reactive —— 专门包对象)
      • [2.4 一张对比表（复习时看）](#2.4 一张对比表（复习时看）)
    • [第 3 步：条件 & 列表 ------ 控制「显示什么」](#第 3 步：条件 & 列表 —— 控制「显示什么」)
      • [3.1 条件渲染：`v-if` 和 `v-show`](#3.1 条件渲染：v-if 和 v-show)
      • [3.2 列表渲染：`v-for`](#3.2 列表渲染：v-for)
    • [第 4 步：双向绑定 ------ 用户输入写回数据](#第 4 步：双向绑定 —— 用户输入写回数据)
      • [4.1 先分清：单向 vs 双向](#4.1 先分清：单向 vs 双向)
      • [4.2 怎么用（最常见）](#4.2 怎么用（最常见）)
    • 第5步：计算属性
    • 第6步：生命周期
      • [6.1 为什么学习生命周期](#6.1 为什么学习生命周期)
      • [6.2、最常用 6 个钩子（执行顺序）](#6.2、最常用 6 个钩子（执行顺序）)
      • 6.3、核心使用场景

一、vue的代码编写方式

1、一个vue文件有的3个基本部分

2、vue的setup语法糖


结果：

二、视图渲染

第 1 步：模板语法 ------ 把数据放到页面上

1.1 要学会什么

  • 在 HTML 里写出 {``{ 数据 }}，页面就能显示内容
  • 会用几种常见「写法」：插值、指令
  • 知道：显示文字、改属性、点按钮做事 分别用什么

1.2 先理解：Vue 模板是什么？

浏览器只认识普通 HTML。

Vue 在 HTML 上加了一层「说明书」，告诉它：这里要显示哪个变量、这里要监听点击。

编译之后，Vue 会帮你做一件事：

数据变了，只改需要改的那一小块页面（不用整页刷新）。

1.3 文本渲染：三种方式，怎么选？

想象你有一段文字 message = "你好"：

方式 写法 通俗理解 什么时候用
插值 {``{ message }} 像填空，写在标签中间 最常用，还能写简单计算
v-text <p v-text="message"> 整段文字塞进标签里 和插值类似，一般不优先
v-html <div v-html="msg"> 把内容当 HTML 解析 只有你信任的内容才用

例子：

html 复制代码 
<script setup>
let message = "大家好，我是弹简特";
let testMessage = () => {
  return "<i>hello</i>";
}


</script>

<template>
  <div>
    <!-- 插值语法 -->
    <h1>{{ message }}</h1>
    <h1>{{ testMessage() }}</h1>

    <!-- v-text的内容 -->
    <h1 v-text="message"></h1>
    <h1 v-text="testMessage()"></h1>

    <!-- v-html -->
    <h1 v-html="message"></h1>
    <h1 v-html="testMessage()"></h1>


    <h1>他们的区别：{{ message }}</h1>
    <h1 v-text="'他们的区别：' + testMessage()"></h1>
  
  </div>
</template>

<style scoped>

</style>




1.4 属性渲染：不能用 {``{ }}，要用 v-bind

插值只能放在标签内容里。

属性（value、href、id）要用 v-bind，简写是 :。

html 复制代码 
<script setup>
let msg = "用户名";
let typeName = "button";
</script>



<template>
  <div>
    <input type="text" v-bind:value="msg">
    <br>
    <input type="text" :value="msg">
    <br>
    <input :type="typeName" :value="msg">
  </div>
</template>

<style scoped>

</style>

记忆口诀：

  • 标签里面 → {``{ }}
  • 标签属性 → :xxx="数据"

1.5 事件绑定用 v-on（简写 @）

事件的写法：v-on:事件类型="事件方法名"

html 复制代码 
<script setup>
  let fun = ()=>{
    //点击的时候弹出框
    alert("按钮被点击")
  }
</script>



<template>
  <div>
    <input type="button" v-on:click="fun" value="按钮">
    <br>
    <input type="button" @click="fun" value="按钮">
  </div>
</template>

<style scoped>

</style>

事件名：和原生一样，只是去掉 on ------ onclick → @click。

两个常用「小开关」（修饰符）：

写法 作用 生活例子
@click.once 只执行一次 「新人礼包只能领一次」
@click.prevent 阻止默认行为 点链接但不跳转

第 2 步：响应式 ------ 数据变了，页面自己跟着变

2.1 你要学会什么

  • 知道 Vue 3 里：普通变量改了，页面不会自动变
  • 会用 ref、reactive 把数据变成「活的」
  • 分清在 JS 里 和 模板里 写法有什么不同

2.2 先理解：什么叫响应式？

可以记成一句话：

你改数据，页面自动更新；不用自己找 DOM 去改 innerHTML。

Vue 2 里选项式 data 默认就是响应式。

Vue 3 的 <script setup> 里，要自己包一层。

2.3 两个工具：ref 和 reactive

不用一次背完，先记使用场景：

数字、字符串、布尔 → 优先 ref

对象、数组 → ref 或 reactive 都行（初学建议 ref 更省心）

2.4 为什么学习响应式

所谓的响应式就是我们的数据在页面上实时更新，比如我们看以下的例子

html 复制代码 
<script setup>
  //我要在此处定义一个数据
  let num = 0;
  //自增函数
  let incr = ()=>{
    num++;
  }
  //自减函数
  let decr = ()=>{
    num--;
  }
</script>

<template>
  <div>
    <!-- 左侧是一个自减的按钮：同时给他绑定一个事件-->
    <input type="button" value="-" @click="decr">
    <span>{{ num }}</span>
    <!-- 有侧是一个自增按钮 -->
    <input type="button" value="+" @click="incr">

  </div>
</template>
ref ------ 万能盒子

使用ref这种方式是我们最常使用的一种方式：

注意：ref返回的是对象，该对象里面有value属性，那么我们操作值，得通过value属性：

此时我们可以看一下ref返回的对象结构

修改之后：

html 复制代码 
<script setup>
  //首先ref需要在我们的vue框架中导入进来
  import {ref} from 'vue'

  //我要在此处定义一个数据
  let num = ref(0);

  //ref返回的对象结构
  console.log(num)
  //自增函数
  let incr = ()=>{
    num.value++;
    console.log(num.value)
  }
  //自减函数
  let decr = ()=>{
    num.value--;
    console.log(num.value)
  }
</script>

<template>
  <div>
    <!-- 左侧是一个自减的按钮：同时给他绑定一个事件-->
    <input type="button" value="-" @click="decr">
    <span>{{ num }}</span>
    <!-- 有侧是一个自增按钮 -->
    <input type="button" value="+" @click="incr">

  </div>
</template>

我们的ref使用包装基本数据类型，同时也可以包装数组和对象，如下所示：

html 复制代码 
<script setup>
  //首先ref需要在我们的vue框架中导入进来
  import {ref, reactive} from 'vue'

  //我要在此处定义一个数据
  let num = ref({
    data:0
  });

  //ref返回的对象结构
  console.log(num)
  //自增函数
  let incr = ()=>{
    num.value.data++;
  }
  //自减函数
  let decr = ()=>{
    num.value.data--;
  }
</script>

<template>
  <div>
    <!-- 左侧是一个自减的按钮：同时给他绑定一个事件-->
    <input type="button" value="-" @click="decr">
    <span>{{ num.data }}</span>
    <!-- 有侧是一个自增按钮 -->
    <input type="button" value="+" @click="incr">

  </div>
</template>
reactive ------ 专门包对象

这个我们基本很少用到：

html 复制代码 
<script setup>
  //首先ref需要在我们的vue框架中导入进来
  import {ref, reactive} from 'vue'

  //我要在此处定义一个数据
  let num = reactive({
    data:0
  });

  //ref返回的对象结构
  console.log(num)
  //自增函数
  let incr = ()=>{
    num.data++;
  }
  //自减函数
  let decr = ()=>{
    num.data--;
  }
</script>

<template>
  <div>
    <!-- 左侧是一个自减的按钮：同时给他绑定一个事件-->
    <input type="button" value="-" @click="decr">
    <span>{{ num.data }}</span>
    <!-- 有侧是一个自增按钮 -->
    <input type="button" value="+" @click="incr">

  </div>
</template>

2.4 一张对比表（复习时看）

ref reactive
能包数字、字符串吗？ ✅ ❌（只能对象/数组）
在 JS 里读写 要 .value 直接点属性
在模板里 自动拆开，不用 .value 直接用
换一整个对象 user.value = { ... } ✅ 别 user = { ... } ❌

第 3 步：条件 & 列表 ------ 控制「显示什么」

3.1 条件渲染：v-if 和 v-show

都是「条件不满足就不给人看」，但机制不同：

v-if v-show
不满足时 元素不存在（DOM 里没有） 元素在，只是 display: none
适合 不常切换、要彻底销毁内容 频繁显示/隐藏
搭配 可有 v-else 不能和 v-else 一起用

例如：

html 复制代码 
<script setup>
  //导入ref
  import {ref} from 'vue'
  let lag = ref(true);//默认显示

  let flag = () => {
    lag.value = !lag.value;
  }
</script>

<template>
  <div>
    <h1 v-if="lag">v-if-真</h1>
    <h1 v-else>v-if-假</h1>
    <h1 v-show="lag">v-show</h1>
    <input type="button" value="显示" @click="flag">
  </div>
</template>

3.2 列表渲染：v-for

html 复制代码 
<script setup>
  //我们需要响应式，所以就先将我们的ref方法给导入进来
  import { ref } from 'vue';
  //定义一个响应式数组
  let nameList = ref(["李四", "王五", "张三", "赵六", "钱七"]);
</script>

<template>
  <div>
    <!-- 使用无序列列表来渲染 -->
    <ul>
      <li v-for="name,index in nameList" :key="index">{{ name }}</li>
    </ul>
  </div>
</template>



理解语法：

  • list：你的数组
  • user：当前这一项
  • index：下标（从 0 开始）

空列表怎么办？ 配合 v-if：

html 复制代码 
<div v-if="list.length === 0">暂无数据</div>

<div v-else>...表格...</div>

:key 是什么？

给每一行一个「身份证号」，Vue 才能高效更新。用 user.id 这种稳定唯一的值，不要用随机数。

比较复杂一丢丢的例子:

html 复制代码 
<script setup>
  //我们需要响应式，所以就先将我们的ref方法给导入进来
  import { ref } from 'vue';
  //定义一个响应式数组
  let studentList = ref([
    {id:"1001", name:"李四1", age:10},
    {id:"1002", name:"李四2", age:20},
    {id:"1003", name:"李四3", age:30},
    {id:"1004", name:"李四4", age:40},
    {id:"1005", name:"李四5", age:50}
  ]);
</script>

<template>
  <div>
<!-- 完整表格结构 -->
<table border="1">
  <!-- 表头 -->
  <thead>
    <tr>  <!-- 行 -->
      <th>编号</th>  <!-- 表头单元格 -->
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>

  <!-- 表体 -->
  <tbody>
    <tr v-for="student,index in studentList" :key="index">
      <td>{{ student.id }}</td>
      <td>{{ student.name }}</td>
      <td>{{ student.age }}</td>
    </tr>
  </tbody>
</table>
  </div>
</template>

第 4 步：双向绑定 ------ 用户输入写回数据

双向绑定：只针对用户表单的value属性

原因：我们需要在页面中输入的就只有表的中的value属性有这个功能~

4.1 先分清：单向 vs 双向

数据 → 页面 用户在输入框里打字 → 数据
单向 :属性名，比如:value ✅ ❌
双向 v-model ✅ ✅

一句话：

  • 只想「程序改，界面跟着变」→ :属性名(:value)
  • 还要「用户打字，程序里也能拿到」→ v-model

4.2 怎么用（最常见）

html 复制代码 
<script setup>
  //我们需要响应式，所以就先将我们的ref方法给导入进来
  import { ref } from 'vue';
  //定义一个响应式数据
  let name = ref("Admin");
</script>

<template>
  <div>
    <!-- 这里使用一个表单 -->
    <span>{{ name }}</span>
    <br>
    <input type="text" v-model="name">
  </div>
</template>


第5步：计算属性

这个所谓的计算属性，其实很简单，就一个函数：，他有一个机制就是无论你调用多少次，我们的方法都只会执行一次👇

如果没有使用计算属性：

html 复制代码 
<script setup>
  //我们需要响应式，所以就先将我们的ref方法给导入进来
  import { ref } from 'vue';
  //定义一个响应式数据
  let studentList = ref([
    {id:"1001", name:"李四1", age:10},
    {id:"1002", name:"李四2", age:20},
    {id:"1003", name:"李四3", age:30},
    {id:"1004", name:"李四4", age:40},
    {id:"1005", name:"李四5", age:50}
  ]);


  let ageCount = ()=>{
    //计算总的年龄数
  	let count = 0;
    //打印调用
    console.log("计算年龄---》ageCount");

    //计算总的年龄数
    for (let i = 0; i < studentList.value.length; i++) {
      count += studentList.value[i].age;
    }
    return count;
   
  }

</script>

<template>
  <div>
    <h1>年龄总和：{{ ageCount() }}</h1>  
    <h1>年龄总和：{{ ageCount() }}</h1>  
    <h1>年龄总和：{{ ageCount() }}</h1>  
    <h1>年龄总和：{{ ageCount() }}</h1>  
  </div>
</template>

如果使用计算属性

html 复制代码 
<script setup>
  //我们需要响应式，所以就先将我们的ref方法给导入进来
  import { ref, computed } from 'vue';
  //定义一个响应式数据
  let studentList = ref([
    {id:"1001", name:"李四1", age:10},
    {id:"1002", name:"李四2", age:20},
    {id:"1003", name:"李四3", age:30},
    {id:"1004", name:"李四4", age:40},
    {id:"1005", name:"李四5", age:50}
  ]);

  //计算总的年龄数

  let ageCount = computed(
    ()=>{
    let count = 0;

    //打印调用
    console.log("计算年龄---》ageCount");

    //计算总的年龄数
    for (let i = 0; i < studentList.value.length; i++) {
      count += studentList.value[i].age;
    }
    return count;
   
  }
  )

</script>

<template>
  <div>
    <h1>年龄总和：{{ ageCount }}</h1>  
    <h1>年龄总和：{{ ageCount }}</h1>  
    <h1>年龄总和：{{ ageCount }}</h1>  
    <h1>年龄总和：{{ ageCount }}</h1>  
  </div>
</template>

第6步：生命周期

Vue 组件从创建 → 挂载 → 更新 → 销毁 的整个过程，就是生命周期；
钩子函数 = Vue 在特定阶段自动调用的函数，让你能在对应时机写自己的逻辑。

6.1 为什么学习生命周期

我们vue的生命周期里面有一些回调函数的执行时机，他们被称之为钩子函数，通过使用合适的回调函数，我们可以达成指定的目的，比如我前端需要渲染后端的数据，那么在渲染之前需要我们去请求后端的数据，这个请求过程一定是有时机的，他必须要在我们的渲染之前去做，那么渲染之前谁去做这件事情呢？由我们的onMounted函数去做，在里面我们就是写请求后端数据的逻辑。[钩子函数有好几个 我们重点介绍onMounted()]

html 复制代码 
<script setup>
  //我们需要响应式，所以就先将我们的ref方法给导入进来
  import { ref, onMounted } from 'vue';
  //定义一个响应式数据

  onMounted(() => {

    
  })


</script>

<template>
  <div>

  </div>
</template>


6.2、最常用 6 个钩子（执行顺序）

  1. onBeforeMount ：挂载前（DOM 还没渲染，拿不到页面元素）
  2. onMounted ：挂载完成 （DOM 渲染完毕，最常用！ 发请求、操作 DOM 都在这）
  3. onBeforeUpdate ：数据更新了，但 DOM 还没重新渲染
  4. onUpdated ：数据更新 + DOM 重新渲染完成
  5. onBeforeUnmount ：组件销毁前（清理定时器、取消订阅）
  6. onUnmounted ：组件销毁完成

6.3、核心使用场景

钩子 最常用场景
onMounted 接口请求、初始化操作、获取 DOM 元素
onUpdated 数据更新后，操作最新的 DOM
onBeforeUnmount / onUnmounted 清除定时器/事件监听，防止内存泄漏
相关推荐
AI产品实战6 小时前
95coder一句话生成MOM系统，AI用时6分50秒，Token只消耗25107
vue.js·spring boot·ai编程·ruoyi
humcomm6 小时前
FinClip vs React Native：两大跨平台方案的深度对比
javascript·react native·react.js
在繁华处6 小时前
从零搭建轻灵（四）：工具系统与 Pipeline
前端·chrome
小则又沐风a6 小时前
进一步了解进程---第四章 进程管理
java·服务器·前端
放下华子我只抽RuiKe56 小时前
FastAPI 全栈后端（一）：为什么选择 FastAPI
前端·javascript·深度学习·react.js·机器学习·前端框架·fastapi
ZC跨境爬虫6 小时前
跟着 MDN 学CSS day_11：（深入理解CSS值与单位的完整体系）
前端·css·ui·html·tensorflow
青云计划6 小时前
SSE流式响应：从Reactor Flux到生产级AI聊天的工程实践——5分钟超时、线程隔离、背压处理全解析
前端·人工智能·firefox
A南方故人6 小时前
将容器内的元素变为可拖拽
开发语言·javascript·ecmascript
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法04【AI】2026 年具身智能模型和世界模型总结05裂开！ChatGPT 居然开始要手机号验证，附详细解决方法06CC-Switch & Claude 基于 Linux 服务器安装使用指南07几个好用的ip纯净度检测网站08装上就回不去了：CodeGraph 让 AI 编程效率飙升 92%，它到底做了什么？09codex app每次打开重连5次Reconnecting问题解决10用了半年 OpenRouter，我换到了 Ofox.ai — 两个 AI API 聚合平台的真实对比