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

Vue3基础

backend 2025/7/5 19:54:56

Vue3基础教程

介绍

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

  • 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
  • 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
  • 渐进式框架: Vue 的设计理念之一，指的是它可以根据项目需求逐步采用不同的功能，灵活且无缝地集成到各种规模和复杂度的项目中
## 详细解释1. 声明式渲染(声明式渲染让 UI 的描述更直观,代码更简洁,Vue 负责底层复杂的 DOM 更新逻辑.)声明页面应该是什么样子的,不需要关心具体如何操作DOM来实现这个界面Vue通过模板或者渲染函数将UI描述成虚拟的DOM树,虚拟DOM是JavaScript对象表示的理想化 UI 结构树.Vue会根据它生成真正的DOM节点当数据变化时,Vue 会重新生成新的虚拟 DOM 树,并通过“diff 算法”比较新旧虚拟 DOM 的差异,最后只对真实 DOM 进行必要的最小化更新2. 响应性(数据状态的变化能够自动驱动界面更新的能力)当响应式数据发生变化时,Vue 会自动触发相关组件的重新渲染,保证视图与数据状态始终同步支持计算属性computed和侦听器watch,后续详细的介绍Vue 提供API 如 ref()[用于包装基本类型或对象，访问时通过 .value]和 reactive()[用于包装对象,支持深度响应式],轻松创建响应式数据3. 渐进式框架(可以根据项目需求逐步采用不同的功能，灵活且无缝地集成到各种规模和复杂度的项目中)

声明式渲染

通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。

  • 能在改变时触发更新的状态被认为是响应式的，可以使用 Vue 的 reactive() API 来声明响应式状态。
import { reactive } from 'vue'const counter = reactive({count: 0
})console.log(counter.count) // 0
counter.count++
  • reactive() 只适用于对象 (包括数组和内置类型，如 Map 和 Set)。而另一个 API ref() 则可以接受任何值类型。ref 会返回一个包裹对象，并在 .value 属性下暴露内部值。
import { ref } from 'vue'const message = ref('Hello World!')console.log(message.value) // "Hello World!"
message.value = 'Changed'
  • 传入 createApp() 的对象是一个 Vue 组件。组件的状态应该在 setup() 函数中声明，并使用一个对象返回。
setup() {const counter = reactive({ count: 0 })const message = ref('Hello World!')return {counter,message}
}

返回对象中的属性可以在模板中使用。下面展示了我们如何使用双花括号语法，根据 message 的值来渲染动态文本：

<h1>{{ message }}</h1>
<p>Count is: {{ counter.count }}</p>

注意我们在模板中访问的 message ref 时不需要使用 .value：它会被自动解包。

在双花括号中的内容并不只限于标识符或路径——我们可以使用任何有效的 JavaScript 表达式。

<!DOCTYPE html>
<html><head><style></style>
</head><body><div id="app"><!-- 双花括号语法, 返回对象中的属性可以在模板中使用 --><!-- 在模板中访问的 message ref 时不需要使用 .value：它会被自动解包。 --><h1>{{ message }}</h1><p>Count is: {{ counter.count }}</p></div><script type="module">import { createApp, reactive, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js'createApp({setup() {// 只适用于对象 (包括数组和内置类型，如 Map 和 Set)const counter = reactive({ count: 0 })// 可以接受任何值类型, ref 会返回一个包裹对象，并在 .value 属性下暴露内部值。const message = ref('Hello World!')return {counter,message}}}).mount('#app')</script>
</body></html>

Attribute绑定

在 Vue 中，双大括号 只能用于文本插值。为了给 attribute 绑定一个动态值，可以使用 v-bind 指令。

<div v-bind:id="dynamicId"></div>

由 v- 开头的一种特殊 attribute。它们是 Vue 模板语法的一部分。和文本插值类似，指令的值是可以访问组件状态的 JavaScript 表达式。

冒号后面的部分 (:id) 是指令的“参数”，元素的 id attribute 将与组件状态里的 dynamicId 属性保持同步。

v-bind 使用地非常频繁，我们可以简写：

<div :id="dynamicId"></div>

示例：

<!DOCTYPE html>
<html><head><style>[v-cloak] { display: none; }/* class=title的css样式 */.title { color: red; } </style>
</head><body><div id="app"><!-- 动态的 class 绑定添加到 <h1> 上 --><!-- 并使用 titleClass 的数据属性作为它的值 --><h1 :class="titleClass">Make me red</h1></div><script type="module">import { createApp, reactive, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js'createApp({setup() {// 可以接受任何值类型, ref 会返回一个包裹对象，并在 .value 属性下暴露内部值。const titleClass = ref('title')return {titleClass}}}).mount('#app')</script>
</body></html>

事件监听

我们可以使用 v-on 指令监听 DOM 事件

<button v-on:click="increment">{{ count }}</button>

也可以简写

<button @click="increment">{{ count }}</button>

increment 引用了一个从 setup() 对象返回的方法

setup() {const count = ref(0)function increment(e) {// 更新组件状态count.value++}return {count,increment}
}

示例：

<!DOCTYPE html>
<html><head><style>[v-cloak] { display: none; }</style>
</head><body><div id="app"><button @click="increment">Count is: {{ count }}</button></div><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script><script type="module">import { createApp, reactive, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js'createApp({setup(){const count = ref(0);function increment(){count.value ++;}return {count,increment}}}).mount('#app')</script>
</body></html>

表单绑定

我们可以同时使用 v-bind 和 v-on 来在表单的输入元素上创建双向绑定：

<input :value="text" @input="onInput">function onInput(e) {// v-on 处理函数会接收原生 DOM 事件// 作为其参数。text.value = e.target.value
}

简化：

<input v-model="text">

v-model 会将被绑定的值与 <input> 的值自动同步，这样我们就不必再使用事件处理函数了。

v-model 不仅支持文本输入框，也支持诸如多选框、单选框、下拉框之类的输入类型。

<!DOCTYPE html>
<html><head><style>[v-cloak] {display: none;}</style>
</head><body><div id="app"><input v-model="text" placeholder="Type here"><p>{{ text }}</p></div><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script><script type="module">import { createApp, reactive, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js'createApp({setup() {const text = ref('')return {text,}}}).mount('#app')</script>
</body></html>

条件渲染

我们可以使用 v-if 指令来有条件地渲染元素：

<h1 v-if="awesome">Vue is awesome!</h1>

这个h1标签只有在awesome的值为真的情况下渲染，如果值为假，就会从DOM中移除

也可以使用 v-else 和 v-else-if 来表示其他的条件分支

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

示例：

<!DOCTYPE html>
<html><head><style>[v-cloak] {display: none;}</style>
</head><body><div id="app"><button @click="toggle">Toggle</button><h1 v-if="awesome">Vue is awesome!</h1><h1 v-else>Oh no 😢</h1></div><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script><script type="module">import { createApp, reactive, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js'createApp({setup() {const awesome = ref(true)function toggle(){awesome.value = !awesome.value}return {awesome,toggle}}}).mount('#app')</script>
</body></html>

列表渲染

我们可以使用 v-for 指令来渲染一个基于源数组的列表

<ul><li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul>

这里的 todo 是一个局部变量，表示当前正在迭代的数组元素。它只能在 v-for 所绑定的元素上或是其内部访问，就像函数的作用域一样

我们还给每个 todo 对象设置了唯一的 id，并将它作为特殊的key属性绑定到每一个li，这样Vue就可以精准地移动每个<li>，以匹配对应的对象在数组中的位置。

示例：

<!DOCTYPE html>
<html><head><style>[v-cloak] {display: none;}</style>
</head><body><div id="app"><form @submit.prevent="addTodo"><input v-model="newTodo" required placeholder="new todo"><button>Add Todo</button></form><ul><li v-for="todo in todos" :key="todo.id">{{ todo.text }}<button @click="removeTodo(todo)">X</button></li></ul></div><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script><script type="module">import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js'createApp({setup() {// 给每个todo对象一个唯一的idlet id = 0const newTodo = ref('')const todos = ref([{ id: id++, text: 'Learn HTML' },{ id: id++, text: 'Learn JavaScript' },{ id: id++, text: 'Learn Vue' }])function addTodo(){todos.value.push({ id: id++, text: newTodo.value })newTodo.value = ''}function removeTodo(todo){// .filter() 是Javascript 数组的原生方法|它会创建一个新数组，包含所有通过测试的元素|// 语法：array.filter(callback(element))todos.value = todos.value.filter((t) => t !== todo)// 回调函数 (t) => t !== todo:// 这是一个箭头函数，检查每个元素 t 是否不等于要移除的 todo// 只有不等于 todo 的元素会被保留在新数组中}return {newTodo,todos,addTodo,removeTodo}}}).mount('#app')</script>
</body></html>

计算属性

介绍一个新 API：computed。它可以让我们创建一个计算属性 ref，这个 ref 会动态地根据其他响应式数据源来计算其 .value：

计算属性会自动跟踪其计算中所使用的到的其他响应式状态，并将它们收集为自己的依赖。计算结果会被缓存，并只有在其依赖发生改变时才会被自动更新。

示例：

<!DOCTYPE html>
<html><head><style>[v-cloak] {display: none;}</style>
</head><body><div id="app"><form @submit.prevent="addTodo"><input v-model="newTodo" required placeholder="new todo"><button>Add Todo</button></form><ul><li v-for="todo in filteredTodos" :key="todo.id"><input type="checkbox" v-model="todo.done"><span :class="{ done: todo.done }">{{ todo.text }}</span><button @click="removeTodo(todo)">X</button></li></ul><button @click="hideCompleted = !hideCompleted">{{ hideCompleted ? 'Show all' : 'Hide completed' }}</button></div><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script><script type="module">import { createApp, ref, computed } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js'createApp({setup() {let id = 0const newTodo = ref('')const hideCompleted = ref(false)const todos = ref([{ id: id++, text: 'Learn HTML', done: true },{ id: id++, text: 'Learn JavaScript', done: true },{ id: id++, text: 'Learn Vue', done: false }])const filteredTodos = computed(() => {return hideCompleted.value? todos.value.filter((t) => !t.done): todos.value})function addTodo() {todos.value.push({ id: id++, text: newTodo.value, done: false })newTodo.value = ''}function removeTodo(todo) {todos.value = todos.value.filter((t) => t !== todo)}return {newTodo,hideCompleted,todos,filteredTodos,addTodo,removeTodo}}}).mount('#app')</script>
</body></html>

声明周期和模板引用

有时我们也会不可避免地需要手动操作 DOM，这时我们需要使用模板引用——也就是指向模板中一个 DOM 元素的 ref。

<p ref="pElementRef">hello</p>

要访问该引用，我们需要声明并暴露一个同名的 ref：

setup() {const pElementRef = ref(null)return {pElementRef}
}

注意这个 ref 使用 null 值来初始化。这是因为当 setup() 执行时，DOM 元素还不存在。模板引用 ref 只能在组件挂载后访问。

要在挂载之后执行代码，我们可以使用 onMounted() 函数：

import { onMounted } from 'vue'createApp({setup() {onMounted(() => {// 此时组件已经挂载。})}
})

这被称为生命周期钩子——它允许我们注册一个在组件的特定生命周期调用的回调函数。还有一些其他的钩子如 onUpdated 和 onUnmounted。

<!DOCTYPE html>
<html><head><style>[v-cloak] {display: none;}</style>
</head><body><div id="app"><p ref="pElementRef">Hello</p></div><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script><script type="module">import { createApp, ref, computed } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js'createApp({setup() {const pElementRef = ref(null)onMounted(() => {pElementRef.value.textContent = 'mounted!'})return {pElementRef}}}).mount('#app')</script>
</body></html>

侦听器

有时我们需要响应性地执行一些“副作用”——例如，当一个数字改变时将其输出到控制台。我们可以通过侦听器来实现它：

import { ref, watch } from 'vue'const count = ref(0)watch(count, (newCount) => {// 没错，console.log() 是一个副作用console.log(`new count is: ${newCount}`)
})

watch() 可以直接侦听一个 ref，并且只要 count 的值改变就会触发回调

<!DOCTYPE html>
<html><head><style>[v-cloak] {display: none;}</style>
</head><body><div id="app"><p>Todo id: {{ todoId }}</p><button @click="todoId++" :disabled="!todoData">Fetch next todo</button><p v-if="!todoData">Loading...</p><pre v-else>{{ todoData }}</pre></div><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script><script type="module">import { createApp, ref, watch } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js'createApp({setup() {const todoId = ref(1)const todoData = ref(null)async function fetchData() {todoData.value = nullconst res = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)todoData.value = await res.json()}fetchData()watch(todoId, fetchData)return {todoId,todoData}}}).mount('#app')</script>
</body></html>

组件

目前为止，我们只使用了单个组件。真正的 Vue 应用往往是由嵌套组件创建的。

父组件可以在模板中渲染另一个组件作为子组件。要使用子组件，我们需要先导入它：

import ChildComp from './ChildComp.js'createApp({components: {ChildComp}
})

我们还需要使用 components 选项注册组件。这里我们使用对象属性的简写形式在 ChildComp 键下注册 ChildComp 组件。

因为我们是在 DOM 中编写模板语法，因此需要遵循浏览器的大小写敏感的标签解析规则。所以，我们需要使用 kebab-case 的名字来引用子组件：

<child-comp></child-comp>

示例：

<!DOCTYPE html>
<html><head><style>[v-cloak] {display: none;}</style>
</head><body><div id="app"><child-comp></child-comp></div><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script><script type="module">import { createApp, ref, watch } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js'import ChildComp from './ChildComp.js'createApp({components: {ChildComp}}).mount('#app')</script>
</body></html>

export default {template: `<h2>A Child Component!</h2>`}
http://www.xdnf.cn/news/590.html

相关文章：

  • 关于一对多关系（即E-R图中1:n）中的界面展示优化和数据库设计
  • leetcode刷题日记——两数之和
  • Linux——firewalld防火墙
  • 2021-11-10 C++蜗牛爬井进3退1求天数
  • 【C++算法】63.字符串_二进制求和
  • 深度解析AI大模型中的模型微调技术：从基础到实践
  • 知识就是力量——一些硬件的使用方式
  • 第二十七讲：AI+农学导论
  • Python基于知识图谱的医疗问答系统【附源码、文档说明】
  • python基础知识点（3）
  • JAVA学习-多线程
  • linux查看目录相关命令
  • Linux系统中的网络传输、网络管理以及软件仓库的构建
  • @EnableAsync+@Async源码学习笔记之四
  • 2025年第十五届MathorCup数学应用挑战赛D题论文全网首发
  • MSCKF——运动方程IMU状态递推（Propagation）
  • 深度补全网络：CSPN++ 有哪些开源项目
  • 2025华中杯挑战赛B题【单车调度】原创论文讲解
  • docker 搭建nacos 2.2.1版本单机版
  • 国产SMT贴片机自主技术突破解析
  • A股周度复盘与下周策略 的deepseek提示词模板
  • Unreal 从入门到精通之如何接入MQTT
  • 【开发心得】Dify部署ollama模型的坑[8]
  • 【漫话机器学习系列】210.标准化（Standardization）
  • [Java · 初窥门径] Java 注释符
  • DEV-c++怎么免打头文件中英文切换
  • c语言中的原，反，补码
  • PyTorch 深度学习实战（38）：注意力机制全面解析（从Seq2Seq到Transformer）
  • “劣币驱逐良币”与“U型锁”刍议
  • Linux中的软件管理