TIC例会-vue

什么是vue？

Vue.js (通常简称为 Vue) 是一个用于构建用户界面 (UI) 的渐进式JavaScript 框架

它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
vue的核心特性
  • 声明式渲染
  • 响应性

vue的官方网站

https://cn.vuejs.org/

vue的安装

首先确保你的电脑中安装了Node.js

  • 使用命令行或终端，运行node -v检查Node.js的版本
  • 如果没有安装Node.js，前往Node官网进行安装

关于npm

Node.js的安装过程中可以顺带安装npm。
同样的，你可以通过npm -v检查npm是否安装成功。
yarn和pnpm的使用同样是可行的。

vue的初始化

在终端/命令行中运行 npm create vue@latest
确保所在的目录是希望创建项目的目录！！！
自行选择需要使用的功能，如Typescript等
不确定是否需要使用的功能可以直接选择不开启，创建好项目后仍然有办法开启这些功能
随后进入项目所在文件夹
运行npm install以安装依赖
运行npm run dev以启动开发服务器
恭喜你运行起来了你的第一个 Vue 项目！

vue基础

vue单文件的组成

  • template：写界面结构（Vue 模板，HTML 风格 + 指令/组件，最终会被编译）
  • script(推荐script setup)：写组件逻辑（状态、方法、生命周期、props/emits，支持 TS）
  • style：写组件样式（可 scoped/模块化，支持 SCSS/LESS）
  • 使用createApp函数创造应用实例并传入根组件
  • 使用.mount挂载应用（放在所有app.use()、app.component() 注册之后；mount 返回根组件实例而不是应用实例。）
  • 使用双大括号作为文本插值绑定数据。双大括号会自动对 HTML 转义,避免XSS。
  • 若要渲染原始 HTML 则使用 v-html（注意安全）
  • v-bind:(可简写为:):绑定属性
  • v-if/v-else-if：条件式渲染
  • v-else:与别的语言中的else作用基本相同
  • v-show：需要频繁切换时更推荐
  • v-for:接收遍历表达式，vue3中优先级低于v-if,不推荐同一元素上同时使用
    • 一定要配 :key，且使用稳定唯一值，避免状态错乱与重渲染.

响应式基础

  • ref：可包任何类型，JS 用 .value，模板自动解包.也用于 DOM 引用（onMounted 后访问）。
  • reactive:对象/数组/Map/Set 响应式。整体替换用 Object.assign 或用 ref 包对象。
  • computed 用于派生状态（能算出来就不存）

关于二者的选择：
想“整体替换一坨数据” → 用 ref 包对象
只是改对象内部字段 → 用 reactive
  • v-on（可简写为@）：监听事件并执行对应javascript
  • v-model:表单输入绑定
  • watch:侦听函数
  • onMounted,onUpdated等:生命周期钩子函数

vue的拓展

Vue Router

官网：https://router.vuejs.org/
Vue.js的官方路由，便于使用Vue.js构建单页应用

Vuex

官网：https://vuex.vuejs.org/
专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Pinia

官网：https://pinia.vuejs.org/
Pinia更适合在新项目使用，但是维修旧项目时不乏使用Vuex的情况。二者区别不太大，很容易上手另一个。

Nuxt

官网：https://nuxt.com/
Nuxt 是一个免费的开源框架，它提供了一种直观且可扩展的方式来创建类型安全、高性能和生产级的全栈 Web 应用程序和网站，并结合了Vue.js。