Vue 3.0 文档翻译 Introduction
引言
原文地址: http://blog.duhbb.com/2022/02/11/translation-of-introduction-in-vue-3-offiicial-doc/
欢迎访问我的博客: http://blog.duhbb.com/
Vue 3.0 文档翻译 Introduction
什么是Vue?
Vue的发音和view相似,是一个构建用户界面的Java框架. 在HTML,CSS和JavaScript的基础上提供了一个声明式(declarative)以及基于组件(component-based)的编程模型,能够帮你高效的开发用户界面, 不论是简单还是复杂的.
js代码如下:
import { createApp } from 'vue'
createApp({
data() {
return {
count: 0
}
}
}).mount('#app')
template代码如下:
上面的例子展示了Vue的两个核心特点:
- Declarative Rendering:
- Reactivity:
后面的部分将详细讲述这些内容.
前提:你需要对HTML,CSS和JavaScript有基本的了解,不然后面没法交流
The Progressive Framework
Vue包含了前端开发所需要的很多共同特性,但是web开发又多又杂,Vue被设计为flexible和incrementally adoptable.
- Enhancing static HTML without a build step
- Embedding as Web Components on any page
- Single-Page Application (SPA)
- Fullstack / Server-Side-Rendering (SSR)
- JAMStack / Static-Site-Generation (SSG)
- Targeting desktop, mobile, WebGL or even the terminal
Single-File Components
Vue组件使用类似HTML的文件格式,被称作Single-File Component,也就是那些*.vue的文件,简称为SFC.
Vue SFC,人如其名,它将组件的逻辑(JavaScript),模板(HTML),以及样式(CSS)柔和在单个文件中.
下面这个例子就是使用SFC格式编写的:
API Styles
Vue组件可以使用两种不同的API:Options API和Composition API.
Options API
在Options API中,我们使用可选的对象,比如data,methods和mounted来定义组件的逻辑.
options中定义的属性都会被暴露给函数中的this,而这个this正是指向组件实例的.
Composition API
在SFC中,Component API主要是和
为什么要让我做选择,我tm该选哪个?
首先这两种风格的API是足够支持日常的各种使用滴.事实上Options API是通过Composition API来实现的(大概是这个意思)!
Options API主要是围绕"component instance"这个概念,比较贴合面向对象的思想.通过将响应的细节抽象出来以及强制代码以option groups的形式进行组织,这样对新手更加友好.
Composition API则主要围绕声明式的响应状态,很多函数都可以修改状态,一起处理复杂性.这种的话格式更加自由,需要对Vue的响应式有更深入的理解.因此,它对于组织代码以及复用逻辑的能力更强.
更多:Composition API FAQ
如果你是个Vue的菜鸟,我们一般推荐:
- 学习的话,使用你更容易理解的方式,另外二者很多的核心概念都是互通的.
- 生产使用:
- 如果你不使用构建工具的话,就用Options API,或者是低复杂性的场景
- 如果你打算使用全应用的Vue,就是用Composition API + Single-File Components
学习阶段你不必拘泥于一种.
还有问题?
讲这么清楚还有问题,那你去看FAQ吧
选择你的学习路径
- Try the Tutorial, 上手做
- Read the Guide, 读文档了解框架的方方面面
- Check out the Example, 直接通过项目学习
结束语
原文地址: http://blog.duhbb.com/2022/02/11/translation-of-introduction-in-vue-3-offiicial-doc/
欢迎访问我的博客: http://blog.duhbb.com/