vue3基础知识

目录

一、学前准备工作

1、准备工作

1.1 环境准备

1.2开发工具

2、创建第一个Vue应用

二、属性方法

1、模板语法

三、响应式基础

1、声明响应式

---

一、学前准备工作

1、准备工作

1.1 环境准备

熟悉命令行

已安装16.0 或更高版本的 Node.js

1.2开发工具

推荐使用vscode；也可以使用WebStorm、 IDEA

配套的vscode 插件安装：

1.Chinese (Simplified) (简体中文)

2.Prettier - Code formatter

3.ESLint

4.Auto Close Tag

5.TypeScript Vue Plugin (Volar)

6.Vue Language Features (Volar)

7.Vue VSCode Snippets

2、创建第一个Vue应用

2.1 在命令行输入 npm create vue@latest ， 这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
​
Scaffolding project in ./<your-project-name>...
Done.

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

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

你现在应该已经运行起来了你的第一个 Vue 项目！请注意，生成的项目中的示例组件使用的是组合式 API 和 <script setup>，而非选项式 API。

二、属性方法

1、模板语法

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。
​
在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。
​

文本插值 ：“Mustache” 即 双括号

<div class="home">
    <!-- 模板语法 基本使用 -->
    <span>{{ text }}</span>
</div>

原始HTML：使用v-html 进行渲染

<span v-html="text"></span>

v-bind 指令属性绑定：可以理解为动态绑定的属性值

<!-- Attribute 绑定 -->
 <span v-bind:id="id"></span>
 <!-- Attribute 绑定 简写 -->
 <span :id="id"></span>

模板中还是支持使用 JavaScript 表达式

{{ number + 1 }}
​
{{ ok ? 'YES' : 'NO' }}
​
{{ message.split('').reverse().join('') }}
​
<div :id="`list-${id}`"></div>

除了上面这些，还有其他的一些指令和修饰符：

v-on事件绑定 比如点击事件click，简写方式@；修饰符.prevent，会告知 v-on 指令对触发的事件调用 event.preventDefault()

三、响应式基础

1、声明响应式

1.1 ref()

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

import { ref } from 'vue'
​
const count = ref(0)
​
console.log(count) // { value: 0 }
console.log(count.value) // 0

上面是一个简单的响应式，获取count的值需要.value 的形式来获取。

注意，在模板中使用 ref 时，我们不需要附加 .value。为了方便起见，当在模板中使用时，ref 会自动解包 (有一些注意事项)。

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

1.2为什么要使用 ref？

当你在模板中使用了一个 ref，然后改变了这个 ref 的值时，Vue 会自动检测到这个变化，并且相应地更新 DOM。这是通过一个基于依赖追踪的响应式系统实现的。当一个组件首次渲染时，Vue 会追踪在渲染过程中使用的每一个 ref。然后，当一个 ref 被修改时，它会触发追踪它的组件的一次重新渲染。

ref 可以处理任何类型的值，包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构，所以尽量使用ref来定义响应式数据，而reactive 函数只能接受对象作为参数，不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失：

let state = reactive({ count: 0 })
​
// 上面的 ({ count: 0 }) 引用将不再被追踪
// (响应性连接已丢失！)
state = reactive({ count: 1 })

四、计算属性

模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。

对比普通js和计算属性

<!-- 普通js写法 -->
    <span>
      {{ author.books.length > 0 ? 'Yes' : 'No' }}
    </span>
    <!-- 计算属性 -->
    <span>
      {{ postMessageMake }}
    </span>
    
    const author = reactive({
      name: 'John Doe',
      books: [
        'Vue 2 - Advanced Guide',
        'Vue 3 - Basic Guide',
        'Vue 4 - The Mystery'
      ]
    })
    //一个计算属性
   const postMessageMake = computed(() => {
    	return author.books.length > 0 ? 'YES' : 'NO'
   })

如果是比较复杂的逻辑，就可以使用计算属性

五、Class 与 Style 绑定

很多情况下我们需要在标签上操作样式，就需要用到数据绑定

1.绑定 HTML class

<div :class="{ active: isActive }"></div>

上面的语法表示 active 是否存在取决于数据属性 isActive 的真假值。

2.绑定计算属性

const isActive = ref(true)
const error = ref(null)
​
const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

<div :class="classObject"></div>

同时我们也可以绑定一个数组

const activeClass = ref('active')
const errorClass = ref('text-danger')

<div :class="[activeClass, errorClass]"></div>

也可以使用三元表达式

<div :class="[isActive ? activeClass : '', errorClass]"></div>

持续更新中，未完待续.....