Introduction(介绍)

What is Vue?

什么是Vue

Vue(pronounced/vju:/,like view) is a javascript framework for building user interfaces.It builds on top of standard HTML,CSS and JavaScript,and provides a declarative and component-based programming model that helps you efficiently develop user interfaces,be it simple or complex
vue是一个JavaScript框架用来搭建用户界面.它构建在标准的HTML,CSS和JavaScript之上,并提供了一个声明性和基于组件的编程模型可以帮助你高效的开发用户界面,无论是简单还是复杂的

here is a minimal example;
下面是一个简单的示例

import {createApp} from 'vue'
createApp({
  data(){
    return {
      count:0
    }
  }
}).mount('#pp')

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

The above example demonstrates the two core features of Vue:
上述例子演示了Vue的两个核心功能

• Declarative Rendering:Vue extends standrad HTML with a template syntax that allow us to declaratively describe HTML output based on JavaScript state.
• 声明性渲染:Vue通过template语法扩展了标准的HTML,允许我们基于JvavScript状态声明性的描述HTML输出
• Reactivity:Vue automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen
• 双向绑定:Vue自动追踪JavaScript状态的改变,并在发生更改时高效地跟新DOM

you may already have questioins - don't worry.We will cover every little detail in the rest of the documentation.For now,please read along so you can have a high-level understanding of what Vue offers.
你可能已经有问题了-别担心.我们将在其余文档中介绍每一个小细。现在，请阅读全文，以便对Vue提供的
内容有一个高层次的了解。

---

The Progressive Framework

渐进式框架

Vue is a framework and ecosystem that covers most of the common feature needed in frontend development.But the web is extremely diverse - the things we build on the web may vary drastically in form and scale.With that in mind,Vue is designed to be flexible and incrementally adoptable.Depending on your use case,Vue can be used different ways:
Vue是一个框架也是一个生态系统,它包括了前端开发所需要的大多数功能。但是web是极其多样化的-我们在web上构建的东西在形式和规模上可能会有很大的不同。有鉴于此，Vue的设计是灵活的，可以逐步采用。根据您的使用情况，Vue可以已不同方式使用

• Enhancing static HTML without a build step
• 无需构建步骤即可增强静态HTML
• Embedding as Web Components on any page
• 在任何页面上嵌入web组件
• Single-Page Application(SPA)
• 单页面应用
• Fullstack/Server-Side-Rendering(SSr)
• 服务端渲染
• Jamstack/Static-Site-Generation(SSG)
• 静态站点生成
• Targeting desktop,mobile,WebGL or even the terminal
• 针对台式机，移动设备，WebGl甚至终端

If you find these concepts intimidating,don't worry!The tutorial and guide only require basic HTML and JavaScript knowledge,and you should be able to follow along without being an expert in any of these.
If you are an experienced developer interested in how to best integrate Vue into you stack,or you are curious about what these terms mean,we discuss them in more details in Ways of Useing Vue

Despite the flexibility,the core knowledge about how Vue works is shared across all these use cases.Even if you are just beginner now.the knowledge gained along the way will stay useful as you grow to track more ambitious goals in the future.if you are a veteran,you can pick the optimal way to leverage Vue bases on the problems you are trying to solve,while retaing the smae productivity.This is why we call Vue "The Pregressive Frameword":it's a framework that can grow with you and adpat to your needs

---

API Styles

Vue components can be authored in two different API styles: Options API and Composition API.

With Options API, we define a component's logic using an object of options such as data, methods, and mounted. Properties defined by options are exposed on this inside functions, which points to the component instance:

<script>
export default {
  // Properties returned from data() becomes reactive state
  // and will be exposed on `this`.
  data() {
    return {
      count: 0
    }
  },

  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event listeners in templates.
  methods: {
    increment() {
      this.count++
    }
  },

  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

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

Composition API

With Composition API, we define a component's logic using imported API functions. In SFCs, Composition API is typically used with <script setup>. The setup attribute is a hint that makes Vue perform compile-time transforms that allow us to use Composition API with less boilerplate. For example, imports and top-level variables / functions declared in <script setup> are directly usable in the template.
通过CompositionAPI,我们使用导入API函数定义组件的逻辑,在SFCs中,Composition API通常与<script setup>一起使用。setup属性是一个提示,它使Vue执行编译时转换,使我们能够使用较少
Here is the same component, with the exact same template, but using Composition API and <script setup> instead:

<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>

Which to Choose?

First of all, both API styles are fully capable of covering common use cases. They are different interfaces powered by the exact same underlying system. In fact, the Options API is implemented on top of the Composition API! The fundamental concepts and knowledge about Vue are shared across the two styles.

The Options API is centered around the concept of a "component instance" (this as seen in the example), which typically aligns better with a class-based mental model for users coming from OOP language backgrounds. It is also more beginner-friendly by abstracting away the reactivity details and enforcing code organization via option groups.

The Composition API is centered around declaring reactive state variables directly in a function scope, and composing state from multiple functions together to handle complexity. It is more free-form, and requires understanding of how reactivity works in Vue to be used effectively. In return, its flexibility enables more powerful patterns for organizing and reusing logic.

You can learn more about the comparison between the two styles and the potential benefits of Composition API in the Composition API FAQ.

If you are new to Vue, here's our general recommendation:

• For learning purposes, go with the style that looks easier to understand to you. Again, most of the core concepts are shared between the two styles. You can always pick up the other one at a later time.

• For production use:

  • Go with Options API if you are not using build tools, or plan to use Vue primarily in low-complexity scenarios, e.g. progressive enhancement.

  • Go with Composition API + Single-File Components if you plan to build full applications with Vue.

You don't have to commit to only one style during the learning phase. The rest of the documentation will provide code samples in both styles where applicable, and you can toggle between them at any time using the API Preference switches at the top of the left sidebar.