Vue Note

Vue.js 中文文档

API

什么是 API ？
API（Application Programming Interface，应用程序接口）是一组定义和协议，用于构建和集成软件应用程序。API 允许不同软件系统之间进行通信和数据交换。通过使用 API，开发者可以利用现有的功能，而无需从头开始编写代码。

响应式

响应式（reactivity）是指系统能够自动监测数据的变化并做出相应的反应。例如，当数据变化时，Vue 会自动重新渲染相关的 DOM 元素，以确保用户界面始终与数据保持同步。这种能力是 Vue 的核心特性之一，使得开发过程更加简洁和高效。

结构

<scirpt setup>
// JS
</script>

<template>
// HTML
</template>

<style scoped>
// CSS
</style>

每一个 .vue 文件是一个组件，不同的组件拼接成一个网页应用。

里面有三部分，分别是我们熟悉的 HTML CSS JS。

在之前的写法中，我们需要告诉 Vue 这是个组件以及定义组件逻辑的地方，如：

<script>
import { ref } from 'vue'
export default {
	setup() {
	//
	//
	//
	}
}
</script>

setup 用于初始化组件的逻辑、状态、数据，返回值将给模板使用。

但在 Vue3 中，我们有更方便的定义数据和方法的方式：

<script setup>
//
//
//
</script>

这样的写法就方便许多。

当我们想在某一个 .vue 文件中导入其它组件时，这样写：

import {name} form '{path}'

{name} 是组件的名字，可以任意取，'{path}' 是一个字符串，代表组件所在路径。

使用时，在 <template> 中使用 <{name}></{name}> 即可，像是你自定义了一个新的 HTML 标签。

当我们只想给 CSS 添加到当前组件时，可以给 <style> 添加一个属性 scoped。

Variable

在 script 中，创建变量需要先引入 ref/reactive API。

import { ref, reactive } from 'vue'

然后创建变量：

const str = ref()

ref() 内是变量值，可以是字符串、数组、数字、对象等等。

返回的是一个带有 value 属性的对象。

在 script 内访问变量值时，需要使用 var.value，而在 template 中访问变量值时，只需要 var，比如一个标题可以是 <h2>{{ str }}</h2>。这样标题的内容就可以随着变量的变化而变化。

ref 创建的是单一的值，而 reactive 创建的是更为复杂的深度响应式对象，里面有很多键值对。

而由于返回的是一个对象，所以哪怕这个变量在定义时为 const，你依然可以修改它的 value。

如果想要创建一个常量的话，可以使用 ref(Object.freeze({value}))

也可以使用 computed API，它可以用于创建一个计算属性，计算属性的值会自动缓存，只有它里面的变量发生变化时才会重新计算，那么我们只需要让里面没有变量就可以实现返回一个常量。

const computeValue = computed(() => 'This is a computed constant');

动态绑定

动态绑定，在需要绑定的元素属性前加上冒号即可，属性值改为变量。

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

监听器

import { watch } from 'vue';

watch() 是一个方法，第一个参数是监听的变量，第二个参数是执行的函数。

当这个变量的值发生变化时，函数就会执行一次。

同时这个执行的函数可以传入两个参数，一个是监听得到的新值，另一个是旧值。

当监听的元素为一个对象时，修改对象中的某一个值，并不会触发监听函数。

如果想监听对象中的值，可以再加入一个参数：

watch(object, add, { deep: true })

一个对象 { deep: true }，此为深度监听。

defineProps

defineProps 是一个函数，用于声明当前组件接收的 props。它返回一个包含所有 props 的对象，可以在组件的逻辑中使用。

import { defineProps } from 'vue';

const props = defineProps(['name']);

函数的参数是一个字符串数组，里面的字符串就是可以接收的 props，可以让父组件（调用组件的组件）通过属性将属性值传递给子组件（被调用的组件）的 props 中。

子组件调用这个值，通过 {{ props.name }} 即可。

举例：

子组件：

<script setup>
...
const props = defineProps(['text']);
</script>
<template>
	<h2>{{ props.text }}</h2>
</template>

父组件：

<Mybutton text="Title"></Mybutton>

这样，父组件的数据就传递到子组件中了。

defineEmits

在 Vue 3 中，defineEmits 是一个组合式 API，用于在组件中定义可以触发的事件。其参数是一个数组，包含了该组件可以触发的事件名称，返回值是一个函数，用于触发事件。

const emit = defineEmits(['ok']);

而 emit 函数的第一个参数表示触发的事件（这个事件必须是可触发的），后续参数表示传递给事件处理函数的数据。

此时，就可以通过子组件中的一个定义的事件，向父组件中传递相应的数据。

子组件：

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps(['text']);

const emit = defineEmits(['ok']);

function send() {
  emit('ok', 'hello');
}
</script>

<template>
  <div @click="send" class="button">{{ props.text }}</div>
</template>

<style scoped>
.button {
  width: 100px;
  height: 50px;
  border-radius: 10px;
  line-height: 50px;
  background-color: aliceblue;
  text-align: center;
  margin: 100px;
}
</style>

父组件：

<script setup>
import Mybutton from '...';
...
</script>
<template>
<Mybutton @ok="function"></Mybutton>
</template>
...

这样，当点击父组件中引用的子组件（按钮）时，就会触发子组件中的 send() 函数，从而触发 ok 事件，并像父组件中的 function 函数传递了 hello 的参数。

Vue 指令

在 Vue.js 中，以 v- 开头的属性是 Vue 指令（directives）。指令是特殊的标记，添加在元素上的属性，用于在 DOM 上做特定的操作。

v-model

在 input 标签中添加属性 v-model=“var"

变量值与输入框内的值便是双向绑定的。

即修改其中一个必然会影响另一个值。

不仅仅文本输入框可以进行双向绑定，checkbox 也可以，需要将绑定的值设为布尔类型。

v-for

<div v-for="(i, index) in list" :key="index">

这里通过遍历 list 并且按照其中元素个数渲染多个 div，i 是形参，代表 list 中的值，index 表示数组下标。

:key 作用是提供唯一标识，防止渲染错误。

v-show

控制一个元素是否显示，属性值为布尔值。

v-if

与 v-show 用法相同，区别在于，如果元素不显示，不会创建这个元素，而 v-show 只是单纯利用 CSS 将元素进行隐藏。

Falling Blog