vue总结

官网

英文官网：https://vuejs.org/

中文官网：https://cn.vuejs.org/

简介

Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型

单文件组件：Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。

特点：

组件化：
响应式数据绑定：

开发工具

官网推荐的为 Visual Studio Code + Vue - Official 扩展

创建Vue项目

Vue 的官方工具链（如 create-vue、Vue CLI、Vite）均依赖 Node.js 环境运行，所以本地要安装Node.js

在打算创建项目的目录

npm create vue@latest

它是 Vue 官方的项目脚手架工具

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

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

语法

Vue 使用一种基于 HTML 的模板语法，允许在 HTML 中嵌入动态数据和逻辑。

插值表达式：{{ }}

<template>
  <div>
    <p>Hello, {{ name }}!</p> <!-- 动态显示 name 的值 -->
  </div>
</template>

<script>
export default {
  data() {
    return { name: 'Vue' };
  }
};
</script>

原始 HTML：v-html

双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：

v-html：用于将数据作为 HTML 代码渲染到元素中，如下p的内容被渲染为rawHtml的html内容

<div id="app">
  <p v-html="rawHtml"></p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    rawHtml: '<span style="color: red">这是红色的文本</span>'
  }
})
</script>

页面会显示红色的"这是红色的文本"，而不是显示 HTML 标签字符串。

使用 v-html 时要特别注意 XSS（跨站脚本攻击）风险，因为它会直接渲染原始 HTML。

属性绑定：v-bind

双大括号不能在标签属性上使用，需要使用 v-bind 指令

v-bind 或简写 :：动态绑定 HTML 属性

<div id="app">
  <!-- 绑定 title 属性 -->
  <a v-bind:href="url" v-bind:title="tooltip">Vue 官网</a>
  
  <!-- 使用简写 -->
  <a :href="url" :title="tooltip">Vue 官网（简写）</a>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    url: 'https://cn.vuejs.org',
    tooltip: '点击访问 Vue.js 中文官网'
  }
})
</script>

同名简写，仅支持 3.4 版本及以上

如果 attribute 的名称与绑定的 JavaScript 变量的名称相同，那么可以进一步简化语法，省略 attribute 值：

<!-- 与 :id="id" 相同 -->
<div :id></div>

<!-- 这也同样有效 -->
<div v-bind:id></div>

对于 class 和 style，Vue 做了特殊增强，支持数组、对象等多种格式

<div id="app">
  <!-- 对象语法 -->
  <div :class="{ active: isActive, 'text-danger': hasError }">
    对象语法示例
  </div>
  
  <!-- 数组语法 -->
  <div :class="[activeClass, errorClass]">
    数组语法示例
  </div>
  
  <!-- 结合对象和数组 -->
  <div :class="[{ active: isActive }, errorClass]">
    结合语法示例
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    hasError: false,
    activeClass: 'active-class',
    errorClass: 'text-danger'
  }
})
</script>

<div id="app">
  <!-- 对象语法 -->
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
    对象语法示例
  </div>
  
  <!-- 数组语法 -->
  <div :style="[baseStyles, overridingStyles]">
    数组语法示例
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeColor: 'red',
    fontSize: 16,
    baseStyles: {
      color: 'blue',
      fontSize: '13px'
    },
    overridingStyles: {
      fontWeight: 'bold'
    }
  }
})
</script>

绑定对象（批量绑定）通过不带参数的 v-bind，你可以将指定属性都绑定到单个元素上：

<div id="app">
  <!-- 一次性绑定多个属性 -->
  <button v-bind="buttonAttrs">按钮</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    buttonAttrs: {
      id: 'submit-btn',
      class: 'btn btn-primary',
      disabled: false,
      title: '点击提交表单'
    }
  }
})
</script>

动态绑定属性名，在 Vue 2.6.0+ 中支持

需要包含在一对方括号内

<div id="app">
  <div v-bind:[attributeName]="value">动态属性名</div>
  <button @click="changeAttribute">切换属性</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    attributeName: 'data-status',
    value: 'active',
    isId: false
  },
  methods: {
    changeAttribute() {
      this.attributeName = this.isId ? 'data-status' : 'id';
      this.value = this.isId ? 'active' : 'main-content';
      this.isId = !this.isId;
    }
  }
})
</script>

还可以将一个函数绑定到动态的事件名称上

<a v-on:[eventName]="doSomething"> ... </a>

<!-- 简写 -->
<a @[eventName]="doSomething"> ... </a>

使用 JavaScript 表达式

所有的数据绑定中都支持完整的 JavaScript 表达式：

JavaScript 表达式可以被使用在如下场景上：

在文本插值中 (双大括号)
在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

调用函数

可以在绑定的表达式中使用一个组件暴露的方法：

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

事件绑定：v-on

v-on 或简写 @：监听 DOM 事件并触发方法。

<button @click="handleClick">Click me</button> <!-- 点击触发方法 -->
methods: {
  handleClick() {
    alert('Button clicked!');
  }
}

修饰符

修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()：

<form @submit.prevent="onSubmit">...</form>

条件渲染：v-if / v-show

v-if：根据条件动态添加/移除 DOM 元素。

<p v-if="isVisible">Visible only if isVisible is true</p>

v-show：通过 CSS display 切换显示/隐藏（始终渲染 DOM）。

<p v-show="isVisible">Toggled via CSS</p>

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

v-else/v-else-if

可以使用 v-else 为 v-if 添加一个“else 区块”

<button @click="awesome = !awesome">Toggle</button>

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

<template> 上的 v-if

因为 v-if 是一个指令，他必须依附于某个元素。但如果我们想要切换不止一个元素呢？在这种情况下我们可以在一个 <template> 元素上使用 v-if，这只是一个不可见的包装器元素，最后渲染的结果并不会包含这个 <template> 元素。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-else 和 v-else-if 也可以在 <template> 上使用。

v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。

列表渲染：v-for

<li v-for="item in items">
  {{ item.message }}
</li>

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

也支持使用可选的第二个参数表示当前项的位置索引。从0开始

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

data() {
  return {
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' }
    ]
  };
}

对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。每个 v-for 作用域都可以访问到父级作用域：

<li v-for="item in items">
  <span v-for="childItem in item.children">
    {{ item.message }} {{ childItem }}
  </span>
</li>

你也可以使用 of 作为分隔符来替代 in

<div v-for="item of items"></div>

也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.values() 的返回值来决定。

<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})

可以通过提供第二个参数表示属性名 (例如 key)：

<li v-for="(value, key) in myObject">
  {{ key }}: {{ value }}
</li>

第三个参数表示位置索引：

<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

在 v-for 里使用范围值

v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。

<span v-for="n in 10">{{ n }}</span>

<template> 上的 v-for

与模板上的 v-if 类似，你也可以在 <template> 标签上使用 v-for 来渲染一个包含多个元素的块。

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

v-for 与 v-if

当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：

<!--
 这会抛出一个错误，因为属性 todo 此时没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

在外先包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)：

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

v-for通过 key 管理状态

ue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况。

为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute：

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

推荐在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能。

key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key。

响应式数据

Vue 通过数据劫持和发布-订阅模式实现响应式更新，能够自动追踪数据变化并更新相关视图。

声明响应式状态

在组合式 API 中，推荐使用 ref() 函数来声明响应式状态：

import { ref } from 'vue'

const count = ref(0)

ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回

const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

要在组件模板中访问 ref，请从组件的 setup() 函数中声明并返回它们：

import { ref } from 'vue'

export default {
  // `setup` 是一个特殊的钩子，专门用于组合式 API。
  setup() {
    const count = ref(0)

    // 将 ref 暴露给模板
    return {
      count
    }
  }
}

<div>{{ count }}</div>

在模板中使用 ref 时，我们不需要附加 .value。为了方便起见，当在模板中使用时，ref 会自动解包

可以直接在事件监听器中改变一个 ref：

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

可以在同一作用域内声明更改 ref 的函数，并将它们作为方法与状态一起公开：

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      // 在 JavaScript 中需要 .value
      count.value++
    }

    // 不要忘记同时暴露 increment 函数
    return {
      count,
      increment
    }
  }
}

暴露的方法可以被用作事件监听器

<button @click="increment">
  {{ count }}
</button>

可以通过使用单文件组件 (SFC) 来避免在 setup() 函数中暴露大量的状态和方法

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

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

组件

组件是 Vue 实例的封装，允许开发者将 UI 拆分为独立、可复用的部分，每个组件包含自己的模板、逻辑和样式。

可以包含：模板（HTML），数据（data），方法（methods），计算属性（computed），侦听器（watch），生命周期钩子，子组件

组件注册

全局注册：

// 定义组件
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

// 在根实例中使用
new Vue({ el: '#app' })

局部注册（推荐）

// 定义组件
const ComponentA = {
  template: '<div>Component A</div>'
}

// 在父组件中注册
new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA
  }
})

posted @ 2026-01-16 11:27 星光闪闪阅读(0) 评论(0) 收藏举报

刷新页面返回顶部