你可能不知道的vue特性(开始篇)

简介

Vue: 一款用于构建用户界面 的JavaScript框架。它基于标准 HTML、CSS和JavaScript构建, 并提供了一套声明式 的、组件化的编程模型,帮助你高效地开发用户界面

核心功能:

  • 声明式渲染: 基于标准HTML拓展的模板语法,使得我们可以声明式地描述最终输出的HTML和JavaScript状态之间的关系

  • 响应性: 自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM

渐进式框架

Vue的设计非常注重灵活性和"可以被逐步集成"这个特点,根据你的需求场景,你可以用不同的方式使用Vue:

  • 无需构建步骤,渐进式增强静态的HTML

  • 在任何页面中作为Web Components嵌入

  • 单页应用 (SPA)

  • 全栈 / 服务端渲染 (SSR)

  • Jamstack / 静态站点生成 (SSG)

  • 开发桌面端、移动端、WebGL,甚至是命令行终端中的界面

单文件组件

Vue的单文件组件(Single-File Components, 缩写为SFC)会将一个组件的逻辑(JavaScript),模板(HTML)和样式(CSS)封装在同一个文件里

vue 复制代码
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

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

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

API风格

选项式API

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

vue 复制代码
<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

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

组合式API

可以使用导入的API函数来描述组件逻辑, 在单文件组件中,组合式API通常会与<script setup>搭配使用, 且<script setup>中的导入和顶层变量/函数都能够在模板中直接使用

vue 复制代码
<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

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

比较:两种API风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上,选项式API是在组合式API的基础上实现的

  • 选项式API以"组件实例"的概念为中心,这通常与基于类的心智模型更为一致。同时,它将响应性相关的细节抽象出来,并强制按照选项来组织代码,从而对初学者而言更为友好

  • 而组合式API的核心思想是直接在函数作用域内定义响应式状态变量,并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由,也需要你对Vue的响应式系统有更深的理解才能高效使用。相应的,它的灵活性也使得组织和重用逻辑的模式变得更加强大

快速上手

创建一个Vue应用

基于Vite的构建设置在本地搭建Vue单页应用:

sh 复制代码
npm create vue@latest

cd <your-project-name>
npm install
npm run dev

# 将应用构建、发布到生产环境中
npm run build

注: 推荐的IDE配置是 Visual Studio Code + Volar扩展

通过CDN使用Vue

借助script标签直接通过CDN来使用Vue,可以用于增强静态的HTML或与后端框架集成:

  • 全局构建版本 该版本的所有顶层API都以属性的形式暴露在了全局的Vue对象上
html 复制代码
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  • ES模块构建版本
html 复制代码
<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

启用导入映射表(Import Maps)

html 复制代码
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

注: ES模块不能通过file://协议工作,由于安全原因,ES模块只能通过http://协议工作

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试