环境搭建

本地环境

nvm安装和配置node版本 (opens new window)

nvm是node.js的版本管理工具，可以同时按照不同nodejs的版本并在不同项目中切换

node.js是服务端的 JavaScript 运行时环境

npm是node.js自带的包管理工具，用于安装相关依赖工具，例如vue、react等

npm install vue

create-vue是vue的自动化工具，可以快速构建vue项目，基于vite。可以代替webpack这类的前端资源打包加载工具

从实现上来说，webpack是对项目资源生成关系依赖图，遍历查看是否有更新并显示到html上，因此生效较慢。vite是通知机制

ES Module是js的官方模块化标准

vue项目结构

编译后端静态文件结构

assets内是静态文件，index.html是入口

需要修改index.html中的css、js连接路径

CDN导入

使用全局构建版本，这样所有的api都会以属性的形式暴露在全局vue对象上

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

无法使用单文件组件 (SFC) 语法

也可以使用es模块构建

import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

或者

一个基本的vue应用

当在本地构建的vue项目中，为了导入vue的组件，import { ref,createApp} from 'vue';，

导入的内容可以理解成是一个js对象，vue组件位于node_modules文件中

createApp创建一个vue实例:

起到对实例做全局配置，包括注册插件、指令和配置等，通过在一个页面中创建多个vue应用，使用不同的配置和全局资源来开发不同页面元素

应用的配置包括配置错误处理

应用的资源注册：app.component('TodoDeleteButton', TodoDeleteButton)。比起import的方式导入到当前组件使用，component的方式能对参与这个应用的全部组件生效

mount根组件实例挂载:

通过mount来将app应用实例生成一个根组件实例挂载到 DOM 元素，（必须要对应用配置完成后），mount()里的参数为DOM元素或css选择器，根元素的内容将渲染在容器元素中

一个根组件实例对应一个应用实例，管理整个组件树的渲染

根组件实例的一些操作

组件实例对象里的$data对象包含了在data（）定义的数据，vm.$data.count，或直接vm.count

vm.increment()，包含了methods中定义的方法

API风格有组合和选项式API，下面两个例子中分别使用

单文件html写法

选项式API，其定义了一些vue属性

单文件组件

组合式风格有两种写法

<script setup></script>

这个例子用组合式风格，实现同上一个例子同样的功能

结合单文件组件写法，单文件组件以.vue后缀，允许将HTML、js、css代码放到一个文件中

注意需要使用<script type="module">才能正确使用import关键字

语法基础

模板

.vue文件将html+css+js同时显示，其中html的内容以<template>标签包裹，

如果一个标签元素同时有主html设置的内容，vue又通过mount挂载了：

• 优先使用主html本身就写好了的内容
• 主HTML没有设置内容，才会被vue挂载显示模板内容
• 如果vue挂载的组件没有模板内容，则使用默认的innerHTML渲染

被vue挂载了的对象可以被vue语法修饰，

文本差值和指令两种方式中，都支持嵌套单一的***js表达式*** (可以被放到return后面的被称为js表达式)，也支持***调用组件暴露的方法***

注意每次刷新组件的时候都会重新调用方法渲染，因此调用的方法应当是可重入的 模板中的表达式只能访问到组件里暴露出来的对象列表(例如Date())，其他全局对象，例如window属性可以在app.config.globalProperties对象加上后，供vue表达式使用 例如 data() {return {globalValue: window.globalValue // 显式引入};}

文本插值，{{}}表示将模块里用data定义的数据显示

指令，前缀v-的特殊属性

指令

v-html=: 绑定原始HTML

<span v-html="rawHtml"></span>,直接输入html标签内容，但这个方法不安全，会有xss漏洞问题

v-bind:属性或:属性 添加属性

<a v-bind:href="url">Link</a> 简写为<a :href="url">Link</a>

当属性名和绑定的js对象名称相同，也可以<div :id></div>,等同于id="id"

当需要绑定多个值时，不需要：,

条件渲染：

条件渲染同样适用于整个<template>对象

v-show动态显示或隐藏元素：<h1 v-show="ok">Hello!</h1>。不支持在template上使用

v-show是先渲染再切换display属性的，v-if是更局条件决定是否渲染。因此，如果需要频繁切换使用v-show，否则v-if

列表渲染：

v-for和v-if通常不建议同时使用，两者会有优先级问题

共有三个参数<li v-for="(value, key, index) in object"> </li>。key表示属性名，index表索引

循环指定次数

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

和v-if一样可以用于template

key是v-for的一个特殊属性，可以用于跟踪每个遍历的对象，应该绑定一个基础类型而不是对象

v-for按照就地更新原则，当数据改变时，不会移动DOM元素，而是重新渲染，因此用key能跟踪每个节点

在组件上使用v-for时，并不会自动将数据传递给组件，因此需要手动添加

双向数据绑定:

对于一些常用标签，v-model自动对数据做绑定

对于用输入法的键入方式，v-model不会在拼写阶段触发更新，如果需要拼写阶段触发更新需要用input

和选框结合，能自动记录删除更新哪些框被选中了。复选框记录多个，单选框记录一个

当选中时设置自定义的数据，true-value和false-value只能和v-model使用

一些修饰v-model属性的修饰符：

• .lazy： 默认每次输入后更新，添加lazy表明每次change事件后更新
• .trim：自动去除用户输入中的两段的空格

事件监听器。

<button v-on:click="doSomething">Click me</button> 简写：<button @click="doSomething">Click me</button>

可以使用内联函数使得事件绑定更灵活

对于事件的操作，可以在函数内完成，但为了在方法内集中处理数据而不是DOM，因此vue提供了事件修饰符,支持链式表达

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

@click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为，而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。

鼠标按键修饰符

• .left
• .right
• .middle

按键别名: ……

动态参数

<a v-bind:[attributeName]="url"> ... </a>

在data中定义了attributeName属性的值后，查看attributeName的值并在这里设置。

例如<a @[eventName]="doSomething"> ... </a>，可以实现根据情况绑定一个函数在不同事件上

动态参数应该为字符串或NULL，其他类型报错。attributeName名称将会被浏览器转为小写，因此避免大写

修饰符

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

用于表明指令以特殊的方式被绑定

响应式基础

在vue中直接定义的变量不能暴露给template使用，定义响应式的数据使得当数据发生改变时，vue能修改视图重新渲染

ref方法

使用ref(参数)函数来返回一个类似如下的引用对象，从而为vue实现当数据修改时重新刷新视图的能力

在js中需要用.value来访问值，在template中不需要通过.value。

一个使用ref的例子：

使用setup属性可以不用手动暴露方法和属性

DOM将在下一次的tick中更新数据的修改，如果要在修改后再执行些工作，可以使用nextTick()

reactive方法

比起ref，reactive返回的是一个proxy对象，对其原始对象的修改不会触发更新，而ref会（因此可以修改原始对象，再要提交的时候修改proxy对象来控制更新的时间，但最佳实践是只操作proxy对象）

对proxy对象调reactive方法不会新生成一个proxy对象，而是返回自己

当ref的值是一个对象时，内部也是调reactive的

reactive只能用于对象类型，不能用于原始内型

在模板渲染中，只有顶级的ref属性才会被解包

解构指从对象中提取属性

响应式数组

对响应数组提供了一些操作使得vue能监听到变化

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

下面的方法能对数组做些计算返回新的结果

• filter
• concat
• slice

计算属性

computed(getter方法，setter方法)函数能传入一个getter函数，返回一个ref计算属性。比起使用函数来实现这个功能，计算属性只会在这个值发生改变时才触发更新，函数只要有改变都会重新执行，可以有更好的性能。setter方法提供一个修改属性的方式

其中getter方法和setter方法时可以有参数的

class绑定

可以用v-bind绑定，vue提供了特俗的功能增强

style绑定

生命周期

• onMounted() 组件完成初始渲染并创建 DOM 节点后运行传入的回调函数
• onUpdated
• onUnmounted

侦听器

使用watch能注册一个ref对象改变时触发的回调函数。侦听器尽量用同步的方式创建

watch(监听对象，回调函数,可选参数)

监听对象可以是响应式对象，getter函数，计算属性

可以同时监听多个响应式属性，只要其中有一个改变就会触发回调

可选参数包括

组合式API

副作用清理

当回调函数执行副作用时，当前监听的对象又发生改变了，此时希望当前的回调函数结束，onWatcherCleanup函数能监听这种状态

第一种方式：

第二种方式：

模板引用ref ，一种指令

通过useTemplateRef函数和:ref属性能直接操作DOM对象

HTTP中:ref属性也可以直接绑定函数

v-model+watch更注重观测数据的变化并做相应的计算处理记录。:ref更关注DOM对象的改变，做动态挂载渲染等

组件中也可以使用:ref语法，如果是选项式 API或没有使用<script setup>，父组件对子组件有完全的访问权。而使用了<script setup>的组件默认私有的，可以通过defineExpose宏显示暴露

组件

Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC

通过<script setup>，导入的组件都在模板中直接可用。

每使用一个组件都是创建一个实例

父组件向子组件传递

如果要向组件内传递一些东西，那么需要经过props属性，子组件通过defineProps宏来表明这是一个props属性，由父组件传入

一个博客实例

如果子组件定义了但是父组件没有传入，那么并不会报错，而是为null值

子组件向父组件传递

子组件通过defineEmits(['enlarge-text'])声明一个自定义事件，通过$emit('enlarge-text', 'some txt')来触发这个自定义事件

父组件通过事件监听的方式来感知并处理@enlarge-text="postFontSize += 0.1"

或者传入一个回调函数，第一个参数为子组件传出来的消息@enlarge-text="（msg）=>{console.log(msg)}"

一个实例，子组件的按钮能控制父组件设置所有子组件的字体大小

通过插槽传递

父组件传入的内容自动渲染在子组件的指定部分

• 默认插槽：未指定名称的内容会进入 。
• 具名插槽：通过 name 属性或 v-slot:name 指定内容插入位置。
• 作用域插槽：动态传递数据给插槽，增强插槽的灵活性。

动态组件

<component :is="tabs[currentTab]"></component>

tabs是一个自定义的组件数组对象，tabs[currentTab]（可以是组件对象，或组件名字）确定一个组件传递给:is渲染

组件被切换时将触发组件卸载，可以用<KeepAlive> 组件强制被切换掉的组件仍然保持“存活”的状态