如果你是初学者,可能会觉得这些概念有些复杂。别担心!博主也是一路走过来的,随着你的不断成长,到未来有能力实现更复杂的项目时,这一路上获得的知识依然会适用。理解教程和指南的内容只需要具备基础的 HTML 和 JavaScript 知识。即使你不是这些方面的专家,也能够跟得上。这就是为什么我们将 Vue 称为“渐进式框架”:它是一个可以与你共同成长、适应你不同需求的框架。
什么是Vue?
Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助我们可以高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。
Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景,你可以用不同的方式使用 Vue:
- 无需构建步骤,渐进式增强静态的 HTML
- 在任何页面中作为 Web Components 嵌入
- 单页应用 (SPA)
- 全栈 / 服务端渲染 (SSR)
- Jamstack / 静态站点生成 (SSG)
- 开发桌面端、移动端、WebGL,甚至是命令行终端中的界面
下面是一个最基本的示例:
import { createApp } from 'vue'
createApp({
data() {
return {
count: 0
}
}
}).mount('#app')
<div id="app">
<button @click="count++">
Count is: {{ count }}
</button>
</div>
结果展示
上面的示例展示了Vue的两个核心功能:
- 声明式渲染:Vue 基于标准HTML拓展了一套模板语法,使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
- 响应性:Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
单文件组件(即Vue项目内的文件)
在大多数启用了构建工具的 Vue 项目中,我们常常使用一种类似 HTML 格式的文件来书写 Vue 组件,它被称为单文件组件 (也被称为 *.vue
文件)。顾名思义,Vue 的单文件组件会将一个组件的逻辑 (JavaScript),模板 (HTML) 和样式 (CSS) 封装在同一个文件里。下面博主将用单文件组件的格式重写上面的计数器示例:
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<style scoped>
button {
font-weight: bold;
}
</style>
如上所示:.vue文件由template、script、style三部分构成
这里注意一下,template标签内vue2只能有一个根元素,vue3则没有这个限制
template 编写html的地方
- 使用{{ }} 存放变量,并且,在里面可以做基本的逻辑,注意:不能使用map循环
- 双花括号中存放变量 变量放在script标签内的data方法内return出去的对象中定义
script 编写逻辑的地方
- 必须要export default一个对象,vue的语法就在这个对象里面写
- data是一个方法,(所有数据都放在data里) data 是用来存放当前组件状态的属性,是一个方法,必须有返回值,返回的值就是这个组件的状态,template里面可以直接使用,并且这些数据是响应式的数据,也就说,改变后所有引用的地方都会同步改变。改变data里面的数据直接用 this.属性名 即可
- methods用来存放方法的,包括自己定义的方法,事件方法,这里面方法可以直接使用this访问当前组件的实例,即直接使用this获取data里面的数据,并修改它,还可以调用其它methods里面的方法
style 编写样式的地方
- style里面的样式默认作用到全局,上方代码中scoped的作用: 使当前组件的样式不会和其它组件冲突。
单文件组件是 Vue 的标志性功能。如果你的用例需要进行构建,我们推荐用它来编写 Vue 组件。你可以在后续相关章节里了解更多关于单文件组件的用法及用途,关注博主后即可第一时间收到更新文章~你暂时只需要知道 Vue 会帮忙处理所有这些构建工具的配置就好。