Vue3基础语法大全 – 小白入门版

Vue3 基础语法知识点汇总

编程小白也能看懂的Vue3入门指南

Vue3 是一个用于构建用户界面的渐进式 JavaScript 框架，相比 Vue2 更加高效、灵活且易学。

本指南使用简单易懂的语言解释概念，并配有示例代码帮助你快速入门。

1. Vue实例与模板语法

创建Vue应用

Vue应用通过 createApp() 创建，需要挂载到DOM元素上：

                        const app = Vue.createApp({

                          // 选项和配置写在这里

                        })

                        app.mount(‘#app’) // 挂载到id为app的元素

模板语法

双大括号 {{ }} 用于在HTML中显示数据：

                        <div id=“app”>

                          <!– 显示message的值 –>

                          <h2>{{ message }}</h2>

                        </div>

大白话解释

可以把Vue实例看作一个”智能盒子”，里面装着你的数据和操作逻辑。模板语法就是这个盒子连接HTML的”管道”。

2. 响应式数据

ref() 函数

用于创建基本类型数据的响应式引用：

                        import { ref } from ‘vue’

                        const count = ref(0) // 创建响应式数据，初始值为0

                        const message = ref(‘Hello Vue3!’)

                        // 修改值需要使用.value属性

                        count.value++ // 值变为1

reactive() 函数

用于创建对象类型的响应式数据：

                        import { reactive } from ‘vue’

                        const user = reactive({

                          name: ‘张三’,

                          age: 25,

                          isAdmin: true

                        })

                        // 修改属性值可以直接赋值

                        user.age = 26

记忆技巧

ref – 用于基本类型（字符串、数字、布尔值）

reactive – 用于对象和数组

3. 常用指令

v-if / v-else / v-show

条件渲染：根据条件显示/隐藏元素

                        <!– v-if 条件为false时会完全移除元素 –>

                        <div v-if=“isVisible”>显示内容</div>

                        <div v-else>其他内容</div>

                        <!– v-show 只是切换CSS的display属性 –>

                        <div v-show=“isActive”>显示内容</div>

v-for

列表渲染：循环数组或对象

                        <!– 遍历数组 –>

                        <ul>

                          <li v-for=“(item, index) in items” :key=“index”>

                            {{ index }} – {{ item.name }}

                          </li>

                        </ul>

v-bind (缩写 🙂

动态绑定属性值

                        <!– 绑定HTML class –>

                        <div :class=“{ active: isActive }”></div>

                        <!– 绑定图片路径 –>

                        <img :src=“imagePath” alt=“图片”>

关键点

使用 v-for 时一定要指定 :key，帮助Vue高效更新DOM

4. 事件处理

v-on (缩写 @)

用于监听DOM事件

                        <!– 点击事件 –>

                        <button @click=“sayHello”>打招呼</button>

                        <!– 带参数的事件 –>

                        <button @click=“greet(‘Vue3’)”>问候</button>

事件修饰符

用于处理常见DOM事件细节

                        <!– 阻止默认行为 –>

                        <form @submit.prevent=“onSubmit”></form>

                        <!– 阻止事件冒泡 –>

                        <div @click.stop=“doThis”></div>

                        <!– 按键修饰符 –>

                        <input @keyup.enter=“submit”>

实用技巧

修饰符可以串联使用：@click.stop.prevent

5. 表单输入绑定

v-model

实现表单输入和应用状态的双向绑定

                        <!– 文本输入 –>

                        <input v-model=“message” placeholder=“输入内容”>

                        <p>输入的内容是: {{ message }}</p>

                        <!– 复选框 –>

                        <input type=“checkbox” v-model=“isChecked”>

                        <!– 下拉选择 –>

                        <select v-model=“selected”>

                          <option disabled value=“”>请选择</option>

                          <option>选项A</option>

                          <option>选项B</option>

                        </select>

修饰符

修改v-model的默认行为

                        <!– .lazy – 输入完成后同步 –>

                        <input v-model.lazy=“msg”>

                        <!– .number – 自动转换为数字 –>

                        <input v-model.number=“age” type=“number”>

                        <!– .trim – 自动去除首尾空格 –>

                        <input v-model.trim=“name”>

6. 计算属性和侦听器

computed – 计算属性

根据现有数据计算并返回新值

                        import { computed, reactive } from ‘vue’

                        const user = reactive({

                          firstName: ‘张’,

                          lastName: ‘三’

                        })

                        // 计算全名

                        const fullName = computed(() => {

                          return user.firstName + user.lastName

                        })

watch – 侦听器

监听数据变化并执行操作

                        import { watch, ref } from ‘vue’

                        const count = ref(0)

                        // 监听count的变化

                        watch(count, (newValue, oldValue) => {

                          console.log(`count从${oldValue}变为${newValue}`)

                        })

使用场景

computed：当你需要基于其他数据计算一个新值时

watch：当数据变化时需要执行异步操作或复杂逻辑时

7. 生命周期钩子

Vue组件从创建到销毁经历的一系列过程，可以在各个阶段添加自定义逻辑

                    import { onMounted, onUpdated, onUnmounted } from ‘vue’

                    // 组件挂载完成后执行

                    onMounted(() => {

                      console.log(‘组件已挂载’)

                    })

                    // 组件更新后执行

                    onUpdated(() => {

                      console.log(‘组件已更新’)

                    })

                    // 组件卸载前执行

                    onUnmounted(() => {

                      console.log(‘组件即将卸载’)

                    })

Vue3组件生命周期图示