当前位置：首页 > news >正文

快速入门Vue3——基础语法

news 2025/9/3 10:47:37

写在前面

一、Vue中应用的基础概念

二、Vue中的生命周期函数

三、Vue中的常用模板语法介绍

四、数据、方法、计算属性、监听器

五、样式绑定

六、条件渲染

七、列表循环渲染

八、事件绑定

九、双向绑定

写在前面

上一篇《快速入门Vue3——语法初识》中我们通过几段代码对Vue的语法有了一个初步的感受，那本篇内容我们就开始来详细的介绍一下Vue的基础语法了，话不多说，开始今天的内容！

一、Vue中应用的基础概念

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vue基础语法</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></head><body><div id="root"></div></body><script>// createApp表示创建一个Vue应用，存储到app变量中// 传入的参数表示，这个应用最外层的组件，应该如何展示// mvvm设计模式：m->model数据层，v->view视图层，vm->ViewModel视图数据连接层const app = Vue.createApp({data(){return {content:'Hello World'}},template:`<div>{{content}}</div>`})// vm代表的就是Vue应用的根组件const vm = app.mount('#root')vm.$data.content = '修改数据'</script>
</html>

上面的代码结构展示了最基础的Hello World，从这里面我们可以得到以下几个知识点：

Vue应用创建：通过Vue.createApp方法创建Vue应用实例，该方法接收的参数决定应用最外层组件的展示形式，即决定根组件的初始配置
挂载机制：调用app.mount('#root')将应用挂载到指定DOM节点，作用域：Vue应用只管理挂载节点(root)及其子节点的DOM内容
根组件获取：mount()方法的返回值即为根组件实例（这里命名为vm），它实现的是MVVM架构中的ViewModel层，自动维护数据与视图的绑定关系
MVVM模式：
- Model层：组件中定义的响应式数据（如data返回的content）
- View层：组件模板（如包含{{content}}的template）
- ViewModel层：Vue组件实例自动建立数据与模板的绑定关系
数据操作：通过vm.$data.content可访问或修改根组件数据，数据变更将触发视图自动更新

二、Vue中的生命周期函数

我们可以通过打印日志来观察生命周期的变化：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vue基础语法</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></head><body><div id="root"></div></body><script>// 生命周期函数：在某一时刻会自动执行的函数const app = Vue.createApp({data() {return {content: 'Hello World',}},// 在实例生成之前会自动执行的函数beforeCreate() {console.log('beforeCreate')},// 在实例生成之后会自动执行的函数created() {console.log('created')},// 在组件内容被渲染到页面之前自动执行的函数beforeMount() {console.log(document.getElementById('root').innerHTML, 'beforeMount')},// 在组件内容被渲染到页面之后自动执行的函数mounted() {console.log(document.getElementById('root').innerHTML, 'mounted')},// 当数据发生变化时会自动执行的函数beforeUpdate() {console.log(document.getElementById('root').innerHTML, 'beforeUpdate')},// 当数据发生变化，页面重新渲染后，会自动执行的函数updated() {console.log(document.getElementById('root').innerHTML, 'updated')},// 当Vue应用失效时自动执行的函数beforeUnmount() {console.log(document.getElementById('root').innerHTML, 'beforeUnmount')},// 当Vue应用失效时且DOM完全销毁之后自动执行的函数unmounted() {console.log(document.getElementById('root').innerHTML, 'unmounted')},template: `<div>{{content}}</div>`,})const vm = app.mount('#root')</script>
</html>

生命周期函数本质：在流程图虚线对应时刻自动执行的函数，其触发与代码运行强关联。通过生命周期流程图可观察Vue实例的完整初始化过程。执行Vue.createApp().mount()后，Vue将按顺序处理以下阶段：

Vue首先解析代码中的事件绑定（如v-on指令）和生命周期函数声明，完成逻辑分析初始化。

1) beforeCreate生命周期函数

beforeCreate为Vue实例创建前的首个生命周期函数
执行时机：完成事件和生命周期函数分析后立即触发

2) created生命周期函数

created函数在实例完成依赖注入和双向绑定分析后触发。
执行顺序：位于beforeCreate之后。核心差异：beforeCreate时实例未完全创建，created时实例已就绪。

3) beforeMount生命周期函数

阶段	触发条件	关联操作
beforeCreate	事件/生命周期分析完成	实例未创建
created	依赖注入/双向绑定分析完成	实例创建完毕

beforeMount在模板编译为render函数后触发，组件内容未挂载到root节点时，获取节点内容为空
简化理解：表示组件内容渲染到页面前的最后一刻，与后续mounted形成明确时序关系。

4) mounted生命周期函数

mounted函数标志组件已渲染至页面，组件渲染完成后可正确打印出"hello world"
核心考点：mounted是组件完成渲染后的唯一生命周期函数，常用于DOM操作初始化。

5) beforeUpdate生命周期函数

阶段	触发条件	输出内容
beforeUpdate	data数据变化时立即执行	变化前的DOM内容
updated	页面重新渲染后执行	变化后的DOM内容

6) updated生命周期函数

beforeUpdate特性：数据变更瞬间触发，此时页面尚未重新渲染，输出旧数据
updated特性：页面完成渲染后触发，输出新数据
核心区别：beforeUpdate反映变更前状态，updated反映变更后状态

7) beforeUnmount生命周期函数

触发条件：调用app.unmount()方法使Vue应用失效时
执行顺序：beforeUnmount在实例销毁前执行，此时仍可获取原始DOM内容

8) unmounted生命周期函数

阶段	DOM状态	输出验证方式
beforeUnmount	保留原有内容	可打印完整innerHTML
unmounted	已完全清除	innerHTML返回空值

三、Vue中的常用模板语法介绍

1）插值表达式

插值表达式语法为双大括号包裹变量或JS表达式，例如{{content}}指向data中的content变量。若变量包含HTML标签（如<strong>hello world</strong>），插值表达式会转译标签而非渲染样式。需注意仅支持JS表达式（如a+b或Math.max(1,2)），不支持JS语句（如if(true){console.log(1)}）。

2）v-html

v-html指令用于渲染未转译的HTML内容。例如<div v-html="content"></div>会直接解析content中的<strong>标签为加粗样式。与插值表达式的关键区别在于是否保留原始HTML结构。

3）v-bind

v-bind指令实现属性与数据的动态绑定：

基础用法：<div v-bind:title="content">使title属性值随content变量变化
布尔属性控制：<input v-bind:disabled="isDisabled">根据isDisabled值切换状态
简写形式：:disabled="isDisabled"与v-bind:disabled等效

4）v-once

v-once指令使元素仅渲染初始数据。例如<div v-once>{{content}}</div>首次渲染后不再响应content变量更新。适用于静态内容优化，可减少不必要的DOM更新。

5）v-if

v-if指令通过条件判断控制DOM存在性：

true时：渲染对应元素（如<div v-if="show">会显示）
false时：完全移除DOM节点（非隐藏）
与v-show区别：v-show通过CSS控制显示/隐藏，DOM始终存在

6）v-on

在模板中可通过v-on指令绑定事件，例如v-on:click="handleClick"。对应方法需定义在methods对象中，否则无法生效。
v-on:click可简写为@click，例如@click="handleClick"。

7）动态属性

动态属性名可通过中括号语法实现，例如:[name]="content"，其中name为变量，决定绑定的属性名（如title或title1）。
事件名也可动态绑定，例如@[event]="handleClick"，event变量值为click或mouseover等。

8）表单模板

表单提交默认会跳转至action指定地址，例如<form action="https://www.baidu.com">。
需通过<button type="submit">触发提交，否则可能因标签错误导致功能异常。

9）默认行为

阻止默认行为可通过e.preventDefault()实现，例如在handleClick方法中调用。
修饰符.prevent可简化代码，例如@click.prevent="handleClick"，无需在方法内显式调用preventDefault。
修饰符用于封装常见逻辑，如阻止默认行为、事件冒泡等

四、数据、方法、计算属性、监听器

1）数据

data函数：定义数据需在创建vue应用时声明，并通过return返回对象
模板数据绑定：return对象中的content数据可在模板中直接调用
数据修改：通过vm.$data.content修改第一层数据，简化语法：根数据可直接通过vm.message修改，效果等同于vm.$data.content

2）方法

方法定义：定义handleClick方法并通过v-on:click或@click绑定事件
方法调用场景：插值表达式中调用（如format(message)）或者在事件绑定时触发
this指向：
- 默认绑定：methods内函数this指向vue实例
- 箭头函数限制：禁止使用箭头函数定义方法，因其this指向外层作用域（如window）
函数定义规范：需采用functionName() {}形式确保this正确绑定

3）计算属性

定义方式：在Vue组件中通过computed选项定义，包含一个返回计算结果的函数

示例代码：

data() {return {count: 2,price: 5,}
},
computed: {total() {return this.count * this.price}
}

使用方式：在模板中直接使用计算属性名（不加括号），如{{total}}
响应式特性：当依赖的this.count或this.price变化时，会自动重新计算

计算属性和方法的区别：

对比维度	计算属性	方法
触发条件	依赖数据变更时重新计算	页面渲染时必然执行
缓存机制	结果缓存（依赖未变则复用）	无缓存，每次调用重新计算
性能建议	优先使用	需动态计算时使用

4）监听器

监听器（watcher）可以通过定义watch对象实现，用于监听数据变化并执行相应操作。

监听器的作用在于监听特定数据变化并执行异步操作。计算属性无法处理异步操作，此时应使用watch实现。

举个例子：定义price函数监听数据变化，通过setTimeout延迟3秒执行console.log。当price值从5变为6时，延迟后成功打印"press changed"，证明watch可监听变量变化并执行异步操作。

watch: {price(current,prev) {setTimeout(() => {console.log('price changed')}, 3000)},
}

watch可获取变化前后的值：第一个参数为新值，第二个参数为旧值。

简单总结：

计算属性：依赖数据变化时重新计算，具有缓存机制，适合同步操作
监听器：监听数据变化执行异步操作，代码相对冗余
开发建议：优先使用计算属性，无法满足需求时考虑侦听器或方法。

五、样式绑定

1）定义样式

在script标签内定义style，创建red和green两个样式类，分别设置color属性为red和green。通过class="red"为标签添加样式。如果需要通过数据控制样式，可在data中定义classString变量并绑定v-bind:class。

2）字符串绑定样式

通过vm.$data.classString="green"修改数据可实现样式切换

3）对象绑定样式

定义classObject数据项，通过{red:true, green:true}格式控制样式展示。true表示需要展示对应类名，false则不展示。修改对象属性值可动态切换样式。

4）数组绑定样式

通过数组形式绑定样式，如['red','green']。数组内可嵌套对象语法，例如['red',{brown:true}]。数组元素顺序决定样式优先级。

5）行内样式

行内样式可直接书写style="color:yellow"。也可通过styleString:'color:yellow' :style="styleString"数据绑定实现。基础字符串写法适用于简单场景。

6）对象形式样式处理

推荐使用styleObject形式定义行内样式，如{color:'orange', background:'yellow'}。对象语法比字符串拼接更易维护，支持多属性同时定义。

7）创建小组件

通过app.component创建名为demo的子组件。父组件调用子组件时，若子组件最外层为单标签，可通过父组件直接添加class。若子组件最外层为多标签，需使用$attrs.class语法或直接在子组件内部定义样式。

六、条件渲染

1) v-if指令

定义布尔型数据项show（默认值为true），通过v-if指令绑定show变量控制div标签显示逻辑。当show值为true时显示"hello world"，false时元素消失。

v-if通过DOM增删实现元素显隐控制：

show为true时，div标签存在于DOM树
show为false时，div标签从DOM中完全移除

2) v-show指令

采用v-show指令绑定相同show变量，初始状态true时同时显示v-if和v-show控制的div标签。

v-show控制元素原理：

指令	实现机制	性能建议
v-if	直接操作DOM增删	非频繁切换场景适用
v-show	切换CSS的display属性	频繁切换时性能更优

3）v-else用法

v-if配套语法：

定义conditionOne变量控制条件分支
v-else指令必须紧接v-if元素后使用
当conditionOne为false时自动显示v-else关联元素

注意事项：v-if与v-else元素需保持连续相邻的DOM结构。

4）v-else-if用法

多条件分支实现：

定义conditionTwo补充条件变量
v-else-if指令构成条件链：
- 优先判断conditionOne
- 次优判断conditionTwo
- 最终执行v-else
元素需保持严格相邻的DOM结构

典型应用场景：需要实现多重条件判断的界面元素控制。

七、列表循环渲染

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vue基础语法</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></head><body><div id="root"></div></body><script>const app = Vue.createApp({data() {return {listArray: ['I', 'love', 'China'],}},template: `<div><div v-for="(item,index) in listArray">{{item}}---{{index}}</div></div>`,})app.mount('#root')</script>
</html>

定义数组list，将数组内容循环展示。

1）、v-for指令实现数组循环渲染

基础语法：v-for="item in listArray"，通过插值表达式{{item}}展示当前项
执行逻辑：依次将数组元素I、love、China赋值给item并渲染
下标获取：可通过v-for="(item, index) in listArray"获取元素索引，注意索引从0开始

2）、v-for指令实现对象循环渲染

listObject:{"first name": "I","last name": "love","job": "China"
}

v-for="(value,key,index) in listObject"

第一个参数value对应对象属性值，建议命名采用value而非item
第二个参数key获取属性名，比如：first name
第三个参数index表示循环索引

3）、改变数组列表数据

数组更新方法：

push方法：末尾添加元素（如新增hello）
必须添加key：v-for="(item,index) in list":key="index"，建议使用唯一标识而非index

增加key值

key的作用：DOM复用机制：通过唯一key值识别可复用节点
性能优化：减少不必要的DOM操作

①、使用数组的变更函数

push函数

push：向数组末尾添加元素

shift函数

shift：删除数组首元素（与pop方向相反）

unshift函数

unshift：向数组头部添加元素

splice函数

splice：按索引修改数组（参数与原生JS一致）

sort和reverse函数

reverse：反转数组顺序
sort：按规则排序数组

②、直接替换数组

直接替换数组：将原数组赋值为新数组，例如listArray = ["newArray"]
使用返回新数组的方法：通过concat()或filter()等方法生成新数组后赋值，例如listArray = ["word"].concat("newWord")

③、直接更新数组的内容

修改数组元素：直接更新数组指定索引的值，例如listArray[1] = "hello"

更新方式	引用变化	典型方法	适用场景
变更函数	不改变引用	push/pop/shift	增删数组元素
替换数组	改变引用	直接赋值新数组	完全更新数据
修改元素	不改变引用	索引赋值	局部数据更新

4）、改变对象列表数据

对象更新方法：

比如：this.listObject.age = 30

this.listObject.sex = 'male'

直接添加属性：通过this.listObject.newKey = value动态添加属性
多属性更新：可连续添加多个属性，比如同时设置age和sex属性

5）、v-for循环数字

数字循环特性：

语法格式：item in 10会生成1-10的序列
渲染规则：从1开始到指定数字结束，逐项渲染

6）、指令优先级

冲突现象：v-for优先级高于v-if，导致同层级条件判断失效
解决方案：
- 嵌套写法：在内层元素添加v-if判断
- 使用template：通过<template>标签避免额外DOM节点生成

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vue基础语法</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></head><body><div id="root"></div></body><script>const app = Vue.createApp({data() {return {listObject: {first: 'I',second: 'love',third: 'China',},}},template: `<div><template v-for="(value,key,index) in listObject":key="index"><div v-if="key !== 'second'">{{value}}---{{key}}</div></template></div>`,})app.mount('#root')</script>
</html>

八、事件绑定

<html lang="en"><body><div id="root"></div></body><script>const app = Vue.createApp({data() {return {counter: 0,}},methods: {handleBtnClick(num, event) {console.log(event)this.counter += num},},template: `<div>{{counter}}<button @click="handleBtnClick(2,$event)">Button</button></div>`,})app.mount('#root')</script>
</html>

1）、事件对象

在模板中定义一个button按钮，并绑定方法handleButtonClick。
在data中定义属性count，初始值为0，并在页面展示该值。
通过方法实现计数功能：在handleButtonClick中执行count += 1，点击按钮后数值递增。
直接绑定表达式：可在事件绑定中直接编写count += 1，但推荐使用方法调用以保证代码可维护性。
获取原生事件对象：方法中第一个参数event即为原生事件对象，可通过event.target获取触发事件的DOM元素。
传递自定义参数并保留事件对象：使用$event传递原生事件，例如handleButtonClick(2, $event)，方法中可同时接收数值参数和事件对象。

2）、事件执行多个函数

多函数绑定语法：通过逗号分隔多个方法调用，例如@click="handleButtonClick(), handleButtonClick1()"，需显式添加括号以触发执行。
注意事项：直接引用函数名（如@click="handleButtonClick, handleButtonClick1"）无效，必须通过括号调用。

3）、事件修饰符

①、stop

作用：阻止事件冒泡。
示例：在子元素事件中添加.stop修饰符（如@click.stop），可避免父元素触发同类事件。
对比原生实现：等效于event.stopPropagation()。

②、self

作用：仅当事件由当前元素自身触发时执行回调。
示例：父元素添加.self修饰符（如@click.self），子元素触发事件时父元素不会响应。
应用场景：避免子元素事件冒泡导致父元素误触发。

③、prevent、capture、once、passive

修饰符	功能	等效原生方法
prevent	阻止默认行为	event.preventDefault()
capture	启用事件捕获模式	无直接等效，需手动设置
once	事件仅触发一次	需手动移除事件监听
passive	优化滚动性能，避免警告日志	无直接等效

常用事件修饰符总结：

.stop：阻止冒泡
.prevent：阻止默认行为
.capture：启用捕获模式
.self：仅自身触发有效
.once：单次执行
.passive：提升滚动性能

4）、按键修饰符

Vue中的按键修饰符用于处理键盘事件。通过@keydown等指令可绑定键盘事件，常见修饰符包括enter、tab、delete等，用于限定特定按键触发事件。

①、@keydown修饰符

通过@keydown绑定键盘事件时，默认所有按键均会触发回调函数。若需限定特定按键触发，需通过原生事件判断keyCode，例如回车键对应keyCode为13。

②、@keydown.enter修饰符

使用@keydown.enter修饰符可限定仅回车键触发事件。输入其他内容时无响应，按下回车键时才会执行绑定的回调函数。

③、常见按键修饰符

tab：仅Tab键触发
delete：仅删除键触发
esc：仅Esc键触发
方向键（up/down/left/right）：仅对应方向键触发

5）、鼠标修饰符

鼠标修饰符用于限定特定鼠标按键触发事件：

left：仅左键点击触发
right：仅右键点击触发
middle：仅滚轮点击触发

6）、精确修饰符

exact修饰符用于精确匹配组合键。例如@click.ctrl.exact表示必须单独按住Ctrl键点击时才触发事件，若同时按住其他键则无效。

九、双向绑定

双向绑定通常与表单元素如text、checkbox、radio、select等相关联。

1、input双向绑定

<script>const app = Vue.createApp({data() {return {message: 'hello',}},template: `<div>{{message}}<input v-model="message"/></div>`,})app.mount('#root')</script>

定义input框并通过v-model指令实现双向绑定
数据与input框值同步更新：当数据变化时input框内容随之变化，反之亦然
单向绑定与双向绑定的区别：数据变化影响视图为单向，视图变化影响数据则为双向
v-model替代value属性：使用v-model后无需额外编写value属性

2、textarea双向绑定

代码同上：<textarea v-model="message"/>

传统HTML中textarea需编写闭合标签
Vue中简化写法：通过单标签+v-model指令实现双向绑定
底层自动处理绑定关系：开发者仅需关注语法结构
数据与文本域内容实时同步：修改任一方均会触发另一方更新

3、checkbox双向绑定

const app = Vue.createApp({data() {return {message: [],}},template: `<div>{{ message }}Jack <input type="checkbox" v-model="message" value="jack" />Bob <input type="checkbox" v-model="message" value="dell" />John <input type="checkbox" v-model="message" value="lee" /></div>`})

单个checkbox绑定逻辑：v-model对应布尔值（true/false）控制选中状态
多个checkbox绑定逻辑：
- 数组存储选中项：需为每个input设置value属性标识选项内容
- 动态更新机制：勾选时value值加入数组，取消勾选时从数组移除
value属性的必要性：明确选项标识以确保数据准确存储

另外：checkbox可以通过true-value和false-value属性替换默认布尔值，例如true-value="hello"表示选中时同步值为hello，false-value="word"表示未选中时同步值为word。

4、radio双向绑定

const app = Vue.createApp({data() {return {message: '',}},template: `<div>{{ message }}Jack <input type="radio" v-model="message" value="jack" />Bob <input type="radio" v-model="message" value="dell" />John <input type="radio" v-model="message" value="lee" /></div>`
})

对比维度	checkbox	radio
数据存储类型	数组（允许多选）	字符串（仅单选）
初始值设定	空数组/布尔值	空字符串
选中逻辑	多选项独立存储	互斥仅存当前选中项
典型应用	多选场景（如兴趣选择）	单选场景（如性别选择）

5、select双向绑定

<script>const app = Vue.createApp({data() {return {message: '',}},template: `<div>{{message}}<select v-model="message"><option disabled value="">请选择内容</option><option value="A">A</option><option value="B">B</option><option value="C">C</option></select></div>`,})app.mount('#root')</script>

select标签通过v-model实现双向绑定，需定义字符串类型数据（如message）存储选中值
option需显式声明value属性（如value="a"），未声明时默认以文本内容作为value值
双向绑定验证：
- 修改vm.$data.message值可同步更新select选中状态
- 选中option时数据自动更新为对应value值

6、select多选双向绑定

<script>const app = Vue.createApp({data() {return {message: [],options: [{text: 'A',value: { value: 'A' },},{text: 'B',value: { value: 'B' },},{text: 'C',value: { value: 'C' },},],}},template: `<div>{{message}}<select v-model="message" multiple><option v-for="item in options" :value="item.value">{{item.text}}</option></select></div>`,})app.mount('#root')</script>

multiple属性实现多选功能，绑定数据需初始化为空数组
动态渲染优化：
- 通过v-for循环options数组生成option（含text/value属性）
- value支持对象类型存储，实际保存值为item.value而非显示文本
数据存储机制：
- 多选时自动以数组形式存储所有选中项的value值
- 当value为对象时，直接保存完整对象结构

7、表单双向绑定指令修饰符

v-model指令支持修饰符，用于优化表单控件的数据同步行为，包括lazy、number和trim三种类型。

①、lazy修饰符