Vue3官方文档翻译之Introduction

引言

原文地址: http://blog.duhbb.com/2022/02/11/translation-of-introduction-in-vue-3-offiicial-doc/

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代码如下:

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

上面的例子展示了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格式编写的:

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

API Styles

Vue组件可以使用两种不同的API:Options API和Composition API.

Options API

在Options API中,我们使用可选的对象,比如data,methods和mounted来定义组件的逻辑.

options中定义的属性都会被暴露给函数中的this,而这个this正是指向组件实例的.

<script>
export default {
  // data()返回的属性成为可相应的状态并且会被暴露给this
  data() {
    return {
      count: 0
    }
  },

  // methods是用于mutate状态以及触发更新的函数
  // 他们可以被绑定template中的事件监听器
  methods: {
    increment() {
      this.count++
    }
  },

  // mounted函数将会在组件被mounted的时候被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

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

Composition API

在SFC中,Component API主要是和<script setup>一起使用.setup这个属性是告诉Vue执行编译期的转换,能让我们以更少的boilerplate来使用Composition API.

比如在<script setup>中引入以及定义的顶级变量/函数都可以在template中直接使用.

下面是Composition API的例子:

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>