vue入门笔记

以下为hana在初学vue时综合各处资料的笔记详见参考资料
不全也不一定正确，欢迎讨论！

CDN方法

全局构建版本（UMD）

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  Vue.createApp({ /* 配置 */ }).mount('#app');
</script>

ES 模块构建版本（ESM）

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
  createApp({ /* 配置 */ }).mount('#app');
</script>

install node.js

npm version manager

nvm-windows: https://github.com/coreybutler/nvm-windows/releases

nvm-setup.exe

nvm -v 验证安装

常用命令

命令	说明
`nvm list available`	查看可安装的 Node.js 版本
`nvm install <version>`	安装指定版本的 Node.js（如 `nvm install 16.18.0`）
`nvm use <version>`	切换到指定版本（如 `nvm use 16.18.0`）
`nvm list` 或 `nvm ls`	查看已安装的 Node.js 版本
`nvm current`	查看当前使用的 Node.js 版本
`nvm uninstall <version>`	卸载指定版本的 Node.js
`nvm alias default <version>`	设置默认版本
`nvm on`	启用 NVM
`nvm off`	禁用 NVM
`nvm arch`	查看当前系统和 Node.js 的位数
`nvm proxy [url]`	查看和设置代理

npm

安装最新版 nvm install latest

查看已安装版本 nvm ls

切换到已安装版本 nvm use <版本号>

create

vue create vue-app or vue ui

vue 项目结构（参考）

my-vue-app/
├── src/
│   ├── App.vue
│   ├── main.js
│   └── components/
├── public/
│   └── index.html
├── package.json
└── (其他配置文件)

App.vue基本结构

<template>
<!--html代码-->
</template>

<script>
/*js代码*/
</script>

<style>
/*css代码*/
</style>

main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')//创建 Vue 应用实例并挂载到 DOM

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>标题</title>
  </head>
  <body>
    <div id="app">
        <!--App.vue内容挂载在这-->
    </div>
  </body>
</html>

run

npm run serve

API风格

选项式 API (Options API)

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

组件配置对象

选项	作用	示例
`data()`	定义组件的响应式数据	`data() { return { count: 0 } }`
`methods`	定义组件的方法	`methods: { increment() { this.count++ } }`
`props`	接收父组件传递的数据	`props: ['title']`
`computed`	定义计算属性	`computed: { doubled() { return this.count * 2 } }`
`watch`	监听数据变化	`watch: { count(newVal) { ... } }`
生命周期钩子	在组件不同阶段执行代码	`mounted() { console.log('组件已挂载') }`

生命周期钩子

钩子	触发时机	用途示例
`beforeCreate`	组件实例刚创建，数据未初始化	极少使用
`created`	数据已初始化，但 DOM 未渲染	发起异步请求
`beforeMount`	模板编译完成，但未挂载到 DOM	极少使用
`mounted`	组件已挂载到 DOM	操作 DOM、初始化第三方库
`beforeUpdate`	数据变化后，DOM 更新前	手动控制更新逻辑
`updated`	DOM 更新完成后	依赖 DOM 的操作
`beforeUnmount`	组件卸载前	清除定时器、取消事件监听
`unmounted`	组件已卸载	资源清理

组合式 API (Composition API)

<script setup>
import { ref, reactive, onMounted } from 'vue'

// 响应式状态
const count = ref(0) // 基本类型用 ref
const user = reactive({ name: 'Alice' }) // 对象用 reactive

// 用来修改状态、触发更新的函数
function increment() {
  count.value++ // ref 需要通过 .value 访问
  user.name = 'Bob' // reactive 直接修改属性
}

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

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

常见响应式 API 对比

API	适用场景	示例	注意事项
`ref()`	基本类型（数字、字符串等）	`const count = ref(0)`	通过 `.value` 访问
`reactive()`	对象或数组	`const state = reactive({ ... })`	直接修改属性，不可重新赋值
`computed()`	派生状态	`const doubled = computed(() => count.value * 2)`	基于依赖缓存结果
`watch()`	监听变化	`watch(count, (newVal) => { ... })`	可监听多个数据源

v-属性表

v-bind

动态绑定 HTML 属性

<a v-bind:href="url"> ... </a>

<!-- 简写 -->
<a :href="url"> ... </a>

v-on

监听 DOM 事件

<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->
<a @click="doSomething"> ... </a>

v-model

创建双向数据绑定（表单输入与应用状态）

<input v-model="message">

v-if / v-else-if / v-else

条件渲染元素

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>其他</div>

v-show

基于条件显示/隐藏元素（通过 CSS display 属性）

<div v-show="isVisible">可见内容</div>

v-for

基于数组或对象渲染列表

<li v-for="(item, index) in items" :key="item.id">
  {{ index }} - {{ item.text }}
</li>

v-text

更新元素的 textContent

<span v-text="message"></span>
<!-- 等同于 -->
<span>{{ message }}</span>

v-html

更新元素的 innerHTML

<div v-html="rawHtml"></div>

v-pre

跳过该元素及其子元素的编译

<div v-pre>{{ 这里的内容不会被编译 }}</div>

v-cloak

在编译完成前隐藏未编译的 Mustache 标签

v-cloak 是 Vue.js 提供的一个特殊指令，用于解决页面初始化时出现的模板闪烁问题。

什么是模板闪烁问题？

当使用 Vue 的模板语法（如 {{ }}）时，在 Vue 实例完成编译之前，这些模板表达式会短暂地以原始形式显示在页面上，然后才会被替换为实际数据。这种现象被称为"模板闪烁"或"未编译模板闪现"。

v-cloak 的作用:

隐藏未编译的模板：在 Vue 完成编译前，隐藏带有 v-cloak 的元素

自动移除：当 Vue 完成编译后，自动移除 v-cloak 属性

提升用户体验：避免用户看到原始的模板语法

<div v-cloak>{{ message }}</div>

[v-cloak] { display: none; }

v-once

只渲染元素和组件一次，后续不再更新

<span v-once>{{ 这个值永远不会改变 }}</span>

v-if 和 v-show

特性	`v-if`	`v-show`
DOM 操作	条件为假时从 DOM 中移除元素	始终保留在 DOM 中，仅切换 CSS `display` 属性
初始渲染成本	更高的初始渲染成本（频繁创建/销毁）	更高的初始渲染成本（总是渲染）
切换成本	更高的切换成本（DOM 操作）	更低的切换成本（仅 CSS 变化）
编译过程	是真正的条件渲染	只是 CSS 显示控制
与 `v-else` 配合	支持	不支持
生命周期	切换时会触发组件的生命周期钩子	不会触发组件的生命周期钩子

参考资料

[1] https://cn.vuejs.org/guide/introduction.html

[2] https://www.runoob.com/vue2/vue-install.html

[3] 腾讯元宝deepseek v3 给出的答案

#计算机

#vue #计算机 #笔记

vue入门笔记

https://blog.hananya.cafe/archives/vue-note-beginner

作者

HanazonoSerenya

发布于

2025年07月02日

更新于

2025年07月02日

许可协议

莱工白嫖指南的一种设计（？下一篇