本文最后更新于259 天前，其中的信息可能已经过时。

chapter1(初始化)

node.js工具

下载地址：https://nodejs.org/zh-cn

Node包管理器（NPM）是Node的默认包管理器。默认情况下，它将与Node.js一起安装。它允许开发人员轻松下载和安装其他远程Node包。Vue和其他前端框架是有用的Node包的例子。NPM是开发复杂JavaScript应用程序的强大工具，能够创建和运行任务脚本（例如启动本地开发服务器）并自动下载项目包依赖项。与Node版本检查类似，您可以通过npm命令执行NPM版本检查

node -v检查node版本

npm -v 检测npm版本

vue.js devtools 工具

谷歌商店插件下载地址：https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN&utm_source=ext_sidebar

一款开发者工具

vite.js

Vite.js（或Vite）于2020年推出，是一款JavaScript开发服务器，在开发过程中使用原生ES模块4导入，而不是将代码捆绑到Webpack、Rollup等JavaScript文件中。从现在开始，我们将使用术语Vite来表示Vite.js。这种方法允许Vite在开发过程中以疯狂的速度执行热重载5，使开发体验无缝。它还提供了许多开箱即用的功能，如TypeScript支持和按需编译，这在开发人员社区中迅速流行和适应。Vue社区已经用Vite取代了Vue CLI工具6（它在后台使用Webpack），成为创建和管理Vue项目的默认构建器工具。

初始化一个新的vue项目

npm init vue@latest

typeScript:

TypeScript一种基于JavaScript的类型化编程语言。

JSX

JSX（JavaScript XML）是一种看起来类似于 XML 或 HTML 的 JavaScript 语法扩展。它允许你在 JavaScript 代码中编写类似 HTML 的结构，从而使代码更直观和易于维护。JSX 不是浏览器或 JavaScript 引擎的一部分，而是一个编译器将 JSX 转换为 JavaScript 对象的过程。

Vue Router

Vue Router在第8章中，我们将使用Vue Router在应用程序中实现路由。

Pinia

在第9章中，我们将讨论如何使用Pinia在应用程序中管理和共享数据。

Vitest

Vitest是任何Vite项目的官方单元测试工具，我们将在第11章中进一步探讨。

ESLint

ESLint此工具根据一组ESLint规则检查您的代码，帮助维护您的编码标准，使其更具可读性，并避免隐藏的编码错误。

prettier

Prettier这个工具会自动格式化你的代码样式，以保持你的代码整洁、美观，并遵循编码标准。

文件项目结构

assets

assets文件夹，您可以在其中放置项目图像、图形和CSS文件。

components

components文件夹，您可以在其中按照单个文件组件（SFC）的概念创建和编写Vue组件。一般用来存放自定义的全局组件。

router

router所有路由配置所在的文件夹。

stores

存储文件夹，您可以在其中使用Pinia通过存储来创建和管理项目全局数据。

App.vue

App.vue 是一个 Vue 项目中的核心文件，通常被视为应用的根组件。它包含了整个应用的结构和逻辑。App.vue 是 Vue 应用的入口点，通过它你可以组织和管理整个应用的结构和逻辑。

views

views绑定到已定义路线的所有Vue组件所在的文件夹。写页面的地方。

package.json

package.json 是一个 JSON 格式的文件，用于存储和管理 JavaScript 项目（包括 Vue 项目）的各种元数据和配置信息。通过 package.json 文件，你可以轻松地管理项目的依赖、配置脚本和元数据，确保项目的可维护性和可移植性。

main.ts

每个Vue应用程序都以一个Vue组件实例作为应用程序根启动，同一个应用程序中创建的任何其他Vue组件都需要嵌套在这个根组件中。从Vue 3开始，你不能再直接调用new Vue（）了。相反，您可以使用vue包中的createApp（）方法创建应用程序实例。然后您需要使用app.mount（）方法将根组件应用挂载到所需的HTML元素（将 Vue 应用实例挂载到 DOM 上，#app是应用程序根元素的唯一id选择器）。

chapter2(基础知识)

双向绑定v-model

默认情况下，v-model 会在输入框的 input 事件触发时同步数据。数据绑定是实时的，即用户在输入框中每输入一个字符，绑定的数据就会立即更新。

v-model.lazy使用 .lazy 修饰符后，v-model 不会再监听 input 事件，而是监听 change 事件。数据绑定会在输入框失去焦点（blur）或用户按下回车键时才更新。这种方式适合需要减少不必要的实时更新场景，例如表单提交前校验。

如果要绑定到v-model的数据模型应该是数字类型，则可以使用修饰符v-model.number将输入值转换为数字。类似地，如果您想确保字符串数据模型没有尾随空格，则可以使用v-model.trim。

单向绑定v-bind

v-bind 是 Vue.js 中的一个指令，用于将数据绑定到 HTML 元素的属性上。它允许你动态地将组件或元素的属性与 Vue 实例中的数据进行绑定，从而实现响应式的数据更新。

<img :src="imageSrc" alt="Example Image">

v-bind 可以简写为 :，上面的例子可以简化为 <img :src="imageSrc">。

v-for

使用v-for动态列表呈现对减少重复代码、提高代码可重用性以及维护一组相似元素类型之间的格式一致性至关重要。Vue提供了一个v-for指令来实现迭代数据集合的目标，例如数组或对象。我们直接在元素上使用此指令，遵循以下语法：

v-for = "elem in list"

elem只是数据源列表中每个元素的别名。例如，如果我们想遍历一个数字数组[1，2，3，4，5]并打印出元素值，我们使用以下代码：

import { createApp } from 'vue'
const List = {
template: `
<ul>
<li v-for="number in numbers" :key="number">{{number}}</li>
</ul>
`,
data() {
return {
numbers: [1, 2, 3, 4, 5]
};
}
};
const app = createApp({
components: { List },
template: `<List />`
})
app.mount('#app')

在这里，我们必须为每个迭代的元素定义一个唯一的键属性。Vue使用这个属性来跟踪每个渲染的元素，以便以后更新。键属性的有效值键应该是字符串或数值。对象或数组不是可使用的有效键。

此外，v-for还支持可选的第二个参数index，即当前元素在迭代集合中的外观索引。

<li v-for="(task, index) in tasks" :key="task.id">{{title}} {{index}}: {{task.description}}</li>

迭代对象属性在JavaScript中，对象是一种键值映射表，每个对象的属性都是该表的唯一键。要遍历对象的属性，我们使用类似的语法与数组迭代：v-for =“（value，name）in collection”这里value代表属性的值，name代表该属性的键。下面显示了我们如何遍历对象集合的属性，并根据以下格式打印出每个属性的名称和值<name>: <value>：

import { createApp } from 'vue'
const Collection = {
data() {
return {
collection: {
title: 'Watch Moonknight',
description: 'Log in to Disney+ and watch all the chapters',
priority: '5'
}
}
},
template: `
<ul>
<li v-for="(value, name) in collection" :key="name">
{{name}}: {{value}}
</li>
</ul>
`,
}
const app = createApp({
components: { Collection },
template: `<Collection />`
})
app.mount('#app')

我们仍然可以访问当前对的索引外观作为第三个参数，如以下语法所示：v-for = “(value, name, index) in collection”

v-on

使用v-on向元素添加事件监听器要将DOM事件绑定到监听器，Vue为元素标记公开内置指令v-on（简称@）。v-on指令接受以下值类型：·一些字符串形式的内联JavaScript语句·在methods属性下的组件选项中声明的组件方法的名称.

v-on 是 Vue.js 中用于绑定事件监听器的指令。它允许你将 DOM 事件（如点击、提交等）与 Vue 实例中的方法或表达式关联起来，从而实现用户交互和事件处理。<button v-on:click="handleClick">Click me</button>

这里 v-on:click 将 click 事件绑定到 Vue 实例中的 handleClick 方法。
当按钮被点击时，handleClick 方法会被调用。
v-on 可以简写为 @，上面的例子可以简化为 <button @click="handleClick">。 <button @click="counter += 1">Increase Counter</button>

修饰符

v-on 指令可以附加一些修饰符（modifiers）来改变事件处理的行为。以下是这些修饰符的作用和用法：

1`.stop`

作用：阻止事件冒泡。
用法：v-on:click.stop="methodName"
示例：

  <div @click="outerClick">   <button @click.stop="innerClick">点击我</button> </div>

当点击按钮时，innerClick 会被调用，但 outerClick 不会被调用。

2. `.prevent`

作用：阻止事件的默认行为。
用法：v-on:submit.prevent="methodName"
示例：

  <form @submit.prevent="submitForm">  <button type="submit">提交</button> </form>

当点击提交按钮时，表单不会被提交，而是调用 submitForm 方法。

3. `.self`

作用：只有当事件是从监听器绑定的元素本身触发时才触发回调。
用法：v-on:click.self="methodName"
示例：

  <div @click="outerClick">   <div @click.self="innerClick">点击我</div> </div>

只有当点击内部的 div 时，innerClick 才会被调用。如果点击外部的 div，则不会触发 innerClick。

4. `.once`

作用：事件只触发一次。
用法：v-on:click.once="methodName"
示例

  <button @click.once="handleClick">点击我</button>

第一次点击按钮时，handleClick 会被调用，之后的点击不会再次调用该方法。

5. `.capture`

作用：使用事件捕获模式而不是冒泡模式。
用法：v-on:click.capture="methodName"
示例

  <div @click.capture="outerClick">
    <div @click="innerClick">点击我</div>
  </div>

当点击内部的 div 时，outerClick 会在 innerClick 之前被调用。

6. `.passive`

作用：告诉浏览器你不想阻止事件的默认行为（主要用于移动端的滚动事件）。
用法：v-on:scroll.passive="methodName"
示例

  <div @scroll.passive="handleScroll">
    <!-- 内容 -->
  </div>

浏览器可以提前知道你不会调用event.preventDefault()，从而提高滚动性能。

常用的键修饰符

1`.enter`

作用：监听 Enter 键。
用法：v-on:keydown.enter="methodName"
示例

  <input @keydown.enter="submitForm" />

2`.tab`

作用：监听 Tab 键。
用法：v-on:keydown.tab="methodName"
示例

  <input @keydown.tab="handleTab" />

3`.delete`

作用：监听 Delete 和 Backspace 键。
用法：v-on:keydown.delete="methodName"
示例

  <input @keydown.delete="handleDelete" />

4`.esc`

作用：监听 Esc 键。
用法：v-on:keydown.esc="methodName"
示例

  <input @keydown.esc="closeModal" />

5`.space`

作用：监听 Space 键。
用法：v-on:keydown.space="methodName"
示例

  <input @keydown.space="handleSpace" />

组合键

<!-- Ctrl + Enter -->
<input @keyup.ctrl.13=”onCtrlEnter”>
<!-- Shift + S -->
<input @keyup.shift.83=”onSave”>

此外，为了捕获触发事件的确切组合键，我们使用.exact修饰符：

<button @click.shift.exact=”onShiftEnter” />

将.shift和.exact结合使用可确保在用户仅按Shift键时点击按钮触发click事件。

v-if, v-else,v-else-if

我们还可以从DOM中生成或删除一个元素，这种情况称为条件渲染。

1. `v-if`

作用：根据表达式的值来决定是否渲染元素。如果表达式的值为真（truthy），则渲染元素；如果为假（falsy），则不渲染元素。
用法：v-if="expression"
示例

  <template>
    <div>
      <p v-if="isLoggedIn">欢迎回来，{{ username }}！</p>
    </div>
  </template>

  <script setup lang="ts">
  import { ref } from 'vue'

  const isLoggedIn = ref(true)
  const username = ref('Alice')
  </script>

2. `v-else`

作用：与 v-if 配合使用，当 v-if 的表达式为假时，渲染 v-else 包裹的元素。
用法：v-else
示例

  <template>
    <div>
      <p v-if="isLoggedIn">欢迎回来，{{ username }}！</p>
      <p v-else>请登录。</p>
    </div>
  </template>

  <script setup lang="ts">
  import { ref } from 'vue'

  const isLoggedIn = ref(false)
  const username = ref('Alice')
  </script>

3. `v-else-if`

作用：与 v-if 和 v-else 配合使用，提供多个条件分支。当 v-if 的表达式为假时，检查 v-else-if 的表达式，如果为真，则渲染 v-else-if 包裹的元素。
用法：v-else-if="expression"
示例

  <template>
    <div>
      <p v-if="status === 'success'">操作成功！</p>
      <p v-else-if="status === 'loading'">加载中...</p>
      <p v-else-if="status === 'error'">操作失败，请重试。</p>
      <p v-else>未知状态。</p>
    </div>
  </template>

  <script setup lang="ts">
  import { ref } from 'vue'

  const status = ref('loading')
  </script>

虽然使用v-if方法来有条件地呈现元素，但在某些情况下，频繁地从DOM挂载/卸载元素并不有效。在这种情况下，最好使用v-show。

v-show

`v-show`

作用：根据表达式的值来决定是否显示元素。如果表达式的值为真（truthy），则显示元素；如果为假（falsy），则隐藏元素。
实现方式：通过切换元素的 CSS display: 属性来控制元素的显示和隐藏。
用法：v-show="expression"
示例

  <template>
    <div>
      <p v-show="isVisible">这是一个可见的段落。</p>
      <button @click="toggleVisibility">切换显示</button>
    </div>
  </template>

  <script setup lang="ts">
  import { ref } from 'vue'

  const isVisible = ref(true)

  const toggleVisibility = () => {
    isVisible.value = !isVisible.value
  }
  </script>

与 `v-if` 的区别

特性	`v-if`	`v-show`
初始渲染	如果初始条件为假，则不会渲染元素，不会在 DOM 中存在。	即使初始条件为假，元素也会被渲染到 DOM 中，只是通过 `display: none` 隐藏。
切换性能	切换开销较大，适用于条件不经常变化的场景。	切换开销较小，适用于条件频繁变化的场景。
内存占用	条件为假时，元素不会存在于 DOM 中，内存占用较少。	条件为假时，元素仍然存在于 DOM 中，内存占用较多。
初始状态	如果初始条件为假，元素不会被渲染，不会在 DOM 中存在。	即使初始条件为假，元素也会被渲染到 DOM 中，只是通过 `display: none` 隐藏。
适用场景	条件不经常变化的场景，例如根据用户权限显示或隐藏某些元素。	条件频繁变化的场景，例如根据用户输入切换显示不同的内容。

v-html

我们使用v-html以字符串的形式动态地将纯HTML代码注入DOM。

作用：将字符串形式的 HTML 内容渲染为实际的 HTML 元素。
用法：v-html="expression"
示例

  <template>
    <div>
      <div v-html="htmlContent"></div>
    </div>
  </template>

  <script setup lang="ts">
  import { ref } from 'vue'

  const htmlContent = ref('<p>这是一个 <strong>加粗</strong> 的段落。</p>')
  </script>

渲染后的 DOM 结构如下：

  <div>
    <p>这是一个 <strong>加粗</strong> 的段落。</p>
  </div>

性能：

v-html 会导致 Vue 无法对插入的内容进行编译优化，因此在性能敏感的场景中应谨慎使用。

v-text

介绍

v-text 是 Vue.js 中用于将文本内容动态插入到 DOM 元素中的指令。它类似于 {{ }} 插值语法，但 v-text 提供了一些额外的功能和优势。

作用：将字符串形式的文本内容插入到指定的 DOM 元素中，并覆盖该元素的所有内容。
用法：v-text="expression"
示例

  <template>
    <div>
      <p v-text="message"></p>
    </div>
  </template>

  <script setup lang="ts">
  import { ref } from 'vue'

  const message = ref('这是一个段落。')
  </script>

v-text 会覆盖元素内的所有内容。如果元素内已经有其他内容，这些内容会被移除。

与插值语法 `{{ }}` 的区别

特性	`v-text`	`{{ }}` 插值语法
覆盖内容	会覆盖元素内的所有内容。	不会覆盖元素内的其他内容，只是将插值表达式的值插入到指定位置。
性能	在初始渲染时性能稍好，因为不会创建额外的文本节点。	在初始渲染时性能稍差，因为会创建额外的文本节点。(但在大多数情况下性能差异可以忽略不计)
安全性	与插值语法相同，不会自动转义 HTML 内容，需要手动处理。	会自动转义 HTML 内容，防止 XSS 攻击。
适用场景	适用于需要完全替换元素内容的场景，特别是当元素内容非常大时。	适用于需要在元素中插入动态文本的场景，特别是当元素中还有其他静态内容时。

v-once and v-memo

v-once 和 v-memo 是 Vue.js 中用于优化性能的指令。它们可以帮助你减少不必要的重新渲染，提高应用的性能。下面详细解释这两个指令的作用、用法及其区别。

1. `v-once`

作用：渲染元素和组件一次后，将其视为静态内容，不再响应数据的变化。
用法：v-once
示例

  <template>
    <div>
      <p v-once>这是静态内容，不会更新。</p>
      <p>这是动态内容，会更新：{{ dynamicMessage }}</p>
      <button @click="changeMessage">更改消息</button>
    </div>
  </template>

  <script setup lang="ts">
  import { ref } from 'vue'

  const dynamicMessage = ref('初始消息')

  const changeMessage = () => {
    dynamicMessage.value = '更新后的消息'
  }
  </script>

2. `v-memo`

作用：用于缓存一个子树，只有当依赖的响应式数据发生变化时，才会重新渲染该子树。
用法：v-memo="[dependency1, dependency2, ...]"
示例

  <template>
    <div>
      <ul v-memo="items">
        <li v-for="item in items" :key="item.id">{{ item.text }}</li>
      </ul>
      <button @click="addItem">添加项</button>
      <button @click="changeItem">更改项</button>
    </div>
  </template>

  <script setup lang="ts">
  import { ref } from 'vue'

  const items = ref([
    { id: 1, text: '项 1' },
    { id: 2, text: '项 2' }
  ])

  const addItem = () => {
    items.value.push({ id: items.value.length + 1, text: `项 ${items.value.length + 1}` })
  }

  const changeItem = () => {
    items.value[0].text = `项 1 更新`
  }
  </script>

详细解释

基本用法：

v-memo 指令用于缓存一个子树，只有当依赖的响应式数据发生变化时，才会重新渲染该子树。
在这个示例中，<ul v-memo="items"> 会缓存整个 <ul> 子树，只有当 items 发生变化时，才会重新渲染该子树。

渲染结果：

初始渲染时，DOM 结构如下： <div> <ul> <li>项 1</li> <li>项 2</li> </ul> <button>添加项</button> <button>更改项</button> </div>

动态更新内容：

添加项
- 当点击“添加项”按钮时，addItem 方法会被调用，items 的值会被更新，<ul> 子树会被重新渲染，新的项会被添加到列表中。
更改项
- 当点击“更改项”按钮时，changeItem 方法会被调用，items 的值会被更新，但由于 v-memo 只依赖于 items 的引用变化，而 items 的引用没有变化（只是内部元素发生了变化），<ul> 子树不会重新渲染。

app.component 注册全局组件

app.component 是 Vue 3 中用于全局注册组件的方法。通过 app.component，你可以在整个应用中使用某个组件，而不需要在每个需要使用该组件的文件中单独导入和注册。

作用：全局注册一个组件，使其在应用的任何地方都可以使用。
用法

  app.component(name, component)

name：组件的名称，字符串类型。
component：组件的定义，可以是选项对象或函数式组件。
示例

  javascriptimport { createApp } from 'vue'
  import App from './App.vue'
  import MyComponent from './components/MyComponent.vue'

  const app = createApp(App)

  // 全局注册组件
  app.component('MyComponent', MyComponent)

  app.mount('#app')

chapter1(初始化)

node.js工具

vue.js devtools 工具

vite.js

初始化一个新的vue项目

typeScript:

JSX

Vue Router

Pinia

Vitest

ESLint

prettier

文件项目结构

assets

components

router

stores

App.vue

views

package.json

main.ts

chapter2(基础知识)

双向绑定v-model

单向绑定v-bind

v-for

v-on

修饰符

1.stop

2. .prevent

3. .self

4. .once

5. .capture

6. .passive

常用的键修饰符

1.enter

2.tab

3.delete

4.esc

5.space

v-if, v-else,v-else-if

1. v-if

2. v-else

3. v-else-if

v-show

v-show

与 v-if 的区别

v-html

v-text

介绍

与插值语法 {{ }} 的区别

v-once and v-memo

1. v-once

2. v-memo

app.component 注册全局组件

发送评论 编辑评论

推荐文章

1`.stop`

2. `.prevent`

3. `.self`

4. `.once`

5. `.capture`

6. `.passive`

1`.enter`

2`.tab`

3`.delete`

4`.esc`

5`.space`

1. `v-if`

2. `v-else`

3. `v-else-if`

`v-show`

与 `v-if` 的区别

与插值语法 `{{ }}` 的区别

1. `v-once`

2. `v-memo`

发送评论编辑评论