可以看完特色功能再决定学习也不迟

什么是Vue

Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面,无论任务是简单还是复杂。

提前必备技能点:

  • HTML
  • CSS
  • JS

渐进式框架

渐进式:可以与你共同成长、适应你不同需求的框架。

因为Web前端生态比较大千世界、百家争鸣、百花齐放,各种奇技淫巧,所以Vue 被设计成具有灵活性和可逐步集成的特点。根据你的需求场景,Vue 可以按不同的方式使用:

  • 增强静态的 HTML 而无需构建步骤
  • 在任何页面中作为 Web Components 嵌入
  • 单页应用 (SPA)
  • 全栈 / 服务端渲染 (SSR)
  • Jamstack / 静态站点生成 (SSG)
  • 目标为桌面端、移动端、WebGL,甚至是命令行终端

单文件组件

每个页面独立,类似一个页面一个HTML一样,模板 (HTML) 和样式 (CSS) 封装在同一个文件里

一般是 *.vue ,英文缩写为 SFC

API风格

Vue 的组件可以按两种不同的风格书写:选项式 API组合式 API

也可以说成是两种代码风格吧,语法糖的不同。

它们只是同一个底层系统所提供的两套不同的接口。

小知识:选项式 API 是在组合式 API 的基础上实现的,且一个单文件组件里面能同时用两种写法。

选项式API

用包含多个选项的对象来描述组件的逻辑,例如 datamethodsmounted。选项所定义的属性都会暴露在函数内部的 this 上,它会指向当前的组件实例。

在线运行

 <script>
 export default {
   // reactive state
   data() {
     return {
       count: 0
     }
   },
 ​
   // functions that mutate state and trigger updates
   methods: {
     increment() {
       this.count++
     }
   },
 ​
   // lifecycle hooks
   mounted() {
     console.log(`The initial count is ${this.count}.`)
   }
 }
 </script>
 ​
 <template>
   <button @click="increment">Count is: {{ count }}</button>
 </template>

组合式API

组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识,告诉 Vue 需要在编译时进行转换,来减少使用组合式 API 时的样板代码。例如,<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

在线运行

如下代码与选项式实现功能相同

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

API风格的选择

官方建议

  • 出于学习目的使用时,推荐采用更易于自己理解的风格。再强调一下,大部分的核心概念在这两种风格之间都是通用的。熟悉了一种风格以后,你也能轻松掌握另一种风格。
  • 出于生产目的使用时
    • 当你不需要使用构建工具,或者打算主要在低复杂度的场景中使用 Vue,例如渐进增强策略的应用场景,推荐采用选项式 API。
    • 当你打算用 Vue 构建完整的应用,推荐采用组合式 API + 单文件组件。
© 版权声明
箴言区 抢沙发
头像
达瓦里希请发言...
提交
头像

昵称

取消
昵称表情代码图片