Vue框架介绍

1.什么是Vue

Vue是一个用于构建用户界面的 JavaScript 框架。它建立在标准 HTML、CSS 和 JavaScript 之上，并提供声明性和基于组件的编程模型，帮助开发者高效地开发用户界面，无论是简单的还是复杂的。

2.Vue 的两个核心特性：

• 声明式渲染：Vue 使用模板语法扩展了标准 HTML，允许我们根据 JavaScript 状态以声明方式描述 HTML 输出。

• 反应性：Vue 会自动跟踪 JavaScript 状态的变化，并在变化发生时有效地更新 DOM。

示例

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

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

 3.渐进式框架

Vue 是一个框架和生态系统，涵盖了前端开发所需的大多数常见功能。但是网络是极其多样化的——我们在网络上构建的东西在形式和规模上可能会有很大的不同。考虑到这一点，Vue 被设计为灵活且可逐步采用。根据你的用例，Vue 可以以不同的方式使用：

• 在没有构建步骤的情况下增强静态 HTML
• 在任何页面上嵌入为 Web 组件
• 单页应用程序 （SPA）
• 全栈/服务器端渲染 （SSR）
• Jamstack / 静态站点生成 （SSG）
• 面向桌面、移动设备、WebGL 甚至终端

 4.创建 Vue 应用程序

（1）应用程序实例

每个 Vue 应用程序都首先使用 createApp 函数创建一个新的应用程序实例：

import { createApp } from 'vue'

const app = createApp({
  /* root component options */
})

（2）根组件

每个应用都需要一个“根组件”，该组件可以包含其他组件作为其子组件。

如果使用的是单文件组件，通常会从另一个文件导入根组件：

import { createApp } from 'vue'
// 从单文件组件导入根组件应用程序。
import App from './App.vue'

const app = createApp(App)

 （3）挂载应用程序

应用程序实例在调用其方法之前不会呈现任何内容。它需要一个“容器”参数，它可以是实际的 DOM 元素或选择器字符串

<div id="app"></div>

app.mount('#app')

（4）In-DOM 根组件模板

根组件的模板通常是组件本身的一部分，但也可以通过直接将模板写入挂载容器中来单独提供模板

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

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

 （5）应用配置

应用程序实例公开了一个对象，该对象允许我们配置一些应用级选项

app.config.errorHandler = (err) => {
  /* 捕获来自所有后代组件的错误*/
}

（6）多个应用程序实例

const app1 = createApp({
})
app1.mount('#container-1')

const app2 = createApp({
})
app2.mount('#container-2')