目录
前言
一、插值表达式 {{}}（文本渲染）
二、v-bind 单向属性绑定（简写:）
三、v-on 事件绑定（简写 @）
四、v-model 双向数据绑定（表单开发必备）
五、v-if /v-else 条件渲染
六、v-for 列表循环渲染
本篇总结
前言
Vue 采用声明式模板语法，可以直接在 HTML 中编写 Vue 指令，无需手动操作 DOM 元素。本文是 Vue3 入门必学基础内容，完全按照官方文档顺序讲解插值、文本绑定、属性绑定、事件、双向绑定、条件、列表渲染，语法为最新<script setup>标准，易懂易上手。
一、插值表达式 {{}}（文本渲染）
作用：将 JS 响应式变量数据渲染到页面文本内容中
vue
<template> <div>欢迎学习Vue3官方教程：{{ message }}</div> </template> <script setup> import { ref } from 'vue' const message = ref('Vue3最新零基础教程') </script>二、v-bind 单向属性绑定（简写:）
用于绑定 HTML 标签属性，不能使用 {{}} 语法
vue
<div :title="tip">鼠标悬浮查看提示信息</div>三、v-on 事件绑定（简写 @）
用于绑定点击、输入、鼠标等各类事件
vue
<button @click="handleClick">点击按钮触发事件</button>四、v-model 双向数据绑定（表单开发必备）
数据变化页面自动更新，页面输入数据自动同步 JS 变量
vue
<input v-model="username" placeholder="请输入账号">五、v-if /v-else 条件渲染
满足条件才渲染 DOM，不满足直接移除标签
vue
<div v-if="isShow">显示内容</div> <div v-else>隐藏内容</div>六、v-for 列表循环渲染
循环遍历数组，批量生成列表 DOM 结构
vue
<ul> <li v-for="item in list" :key="item.id"> {{ item.name }} </li> </ul>本篇总结
- {{}}：文本插值渲染
- : 属性：单向属性绑定
- @事件：绑定点击事件
- v-model：表单双向绑定
- v-if 条件渲染、v-for 列表循环渲染
){kind=spacer}
