在前面的文章 《Vue笔记:基础入门(前篇)》https://blog.csdn.net/Naisu_kun/article/details/126760242 中已经介绍了Vue的基础概念与在前端开发中的使用方式等内容。这篇文章将接着简单介绍Vue提供的API的一些使用方法。(基于 Vue3
,当前版本为 3.2.45
)
Vue提供的各种API可以在官方页面进行查看:
https://cn.vuejs.org/api/ 或 https://vuejs.org/api/
可以看到Vue提供的API官方将它分为下面一些:
虽然从功能和适用范围上可以进行分类,但是实际使用时是没办法分的那么开的,往往各种类型的都需要使用到,本文将以基础入门过程为切入点对涉及的各类API的部分内容进行介绍,完整详细的信息可以参考官方文档。
基础准备:使用 npm init vue@latest
初始化项目,进行项目文件夹后使用 npm install
安装相关依赖。
Vue工作的时候会全权接管它所控制的数据、组件等,可以看作是一个独立的应用实例或者说应用程序,即一个App。使用 createApp()
方法可以创建Vue App,Vue App需要挂载到页面上的某个组件上才会渲染出来,使用 mount()
方法进行挂载:
这里的 .vue
文件就是Vue的单文件组件功能了,其内部有一些属于单文件组件的语法,会在后面进行介绍。单文件组件可以更好的体现Vue的特性,下面将主要以单文件组件形式进行介绍。如无其它更改下文将保持当前index.html和main.js不变,所以配图中可能就不再展示它俩。
应用实例除了挂载外还可以进行一些操作与设置,比如使用 app.unmount()
来卸载组件,使用 app.use()
来安装插件,使用下面方式可以捕获Vue实例的错误:
app.config.errorHandler = (err, instance, info) => {
// 处理错误
}
可以使用 app.config.globalProperties
来挂载能够被应用内所有组件实例访问到的全局属性的对象,就好比window对象,挂在其上面的对象可以被全局访问到。
一个页面中可以有多个Vue App。
下面是个组合式API使用的例子:
下面的 {{ message }}
是一种常见的模板语法,再实际渲染时它会被替换成 message
变量内容。
上面例子中 setup()
钩子是在组件中使用组合式API的入口,当然很多时候都会使用单文件组件的 语法糖,
中所有顶层的变量、函数等默认都会返回给模板,比如下面这样:
这里的 @
是内置指令 v-on
的简写形式, @click
就差不多相当于 onclick
的意思,相关内容会在后面进行介绍。之后的例子都会使用 方式来简化编写。
上面例子中 ref()
函数用于创建单个值的响应式对象,其内部有个 value
,当 value
修改时视图中用到该响应式对象的地方会动态的变化:
除了 ref()
组合式API中还有很多响应式方法,比如可以使用 reactive()
创建对象的响应式代理:
可以使用 watchEffect()
立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行:
watchEffect()
可以通过给它一个空函数来停止,比如 watchEffect(()=>{})
,它函数更多可输入的参数,详细内容可以参考官方文档。
Vue组件在使用时分为很多生命周期,可以使用代码对各个生命周期进行操作,在组合式API中体现为各个生命周期钩子函数,比如组件挂载之前执行 onBeforeMount()
,组件挂载完成时执行 onMounted()
,组件因为响应式状态变更而更新其DOM树之后调用 onUpdated()
,等等有好些生命周期钩子函数。下面是个简单的演示:
选项式API是基于组合式API,相当于在后者基础上再对代码进行组织,使开发者只需要聚焦具体组件具体的数据和方法等。选项式API虽然没有组合式API那么灵活,但是使用起来更加简单明了,下面是个简单的演示:
上面演示了响应式对象、函数、监听器等内容,这些内容在前面组合式API中也出现过。在组合式API中对这些内容的处理就和普通写JS代码差不多,而在选项式API中就只是填写一个对象,这个对象中顶层的属性名是选项式API本身规定好的,我们只需要填写对应属性中的内容即可。
选项式API和组合式API一样也可以对组件生命周期各个阶段进行处理,在这里被叫做生命周期选项,下面是个简单的演示:
前面提到几次单文件组件这里就介绍下这块内容。
一个Vue单文件组件 (SFC),通常使用 *.vue
作为文件扩展名,它是一种使用了类似HTML语法的自定义文件格式,用于定义Vue组件。单文件组件在语法上是兼容HTML的。
每一个 *.vue
文件都由下面一些语言块构成:
*.vue
文件最多可以包含一个顶层
块,这个块其实和H5原生的功能差不错,它里面主要就是写Html标签的;
*.vue
文件最多可以包含一个
块(不包括
),它里面就是写JS代码了;
*.vue
文件最多可以包含一个
(不包括一般的
),这个在前面已经介绍过了,是组合式API的一个语法糖;
*.vue
文件可以包含多个
标签,这里面就是写CSS代码了。*.vue
文件中可以为任何项目特定需求使用额外的自定义块,自定义块的处理需要依赖工具链;可以看到单文件组件是将组件所对应的结构、脚本、样式代码都整合到一个文件中了,这样逻辑上比较清晰,管理起来也比较方便。当然想要从外部引入这几块内容也是可以的,可以使用下面方式:
<template src="./template.html">template>
<style src="./style.css">style>
<script src="./script.js">script>
在传统的前端开发中CSS样式污染是个比较容易碰到的问题,对于原生开发来说使用 Shadow DOM 来处理这个问题,在Vue单文件组件中CSS语言块也有差不多的机制可以让它只会影响当前组件的元素,加上 scoped
属性即可,比如下面这样:
<style scoped>
style>
使用 scoped
后,父组件的样式将不会渗透到子组件中。不过,子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。
处于 scoped
样式中的选择器如果想要做更 “深度” 的选择,也即:影响到子组件,可以使用 :deep()
这个伪类:
<style scoped>
.a :deep(.b) { ... }
style>
同样的还有 :slotted()
和 :global()
可以分别用于作用于插槽和全局。
内置内容中指令部分内容比较多,所以这里单独提出来说。
指令是带有 v-
前缀的特殊属性,Vue提供了许多内置指令。
指令属性的期望值为一个 JavaScript 表达式 (除了少数几个)。一个指令的任务是在其表达式的值变化时响应式地更新DOM。
某些指令会需要一个 参数 ,在指令名后通过一个 冒号 隔开做标识。
某些指令因为非常常用,所以有一些简写形式。
前面提到过 {{ message }}
这种模板语法,在Vue中还有很多指令可以扩展丰富模板语法。
v-text
用于更新元素的文本内容。
其设置的是textContent,将更新元素中所有内容(有点类似于innerText)。
<span v-text="msg">span>
<span>{{msg}}span>
v-html
更新元素的 innerHTML。
在单文件组件,scoped
样式将不会作用于 v-html
里的内容。
v-bind
动态的绑定一个或多个属性,也可以是组件的 prop。
简写: :
或者 .
(当使用 .prop
修饰符)。
如果需要绑定多个类可以使用数组:
<div :class="[activeClass, errorClass]">div>
<div :class="[{ active: isActive }, errorClass]">div>
上面只演示了绑定class属性,但其实大部分元素属性都是可以用来绑定处理的,比如下面等情况:
<img v-bind:src="imageSrc" />
<button v-bind:[key]="value">button>
<img :src="imageSrc" />
<button :[key]="value">button>
<img :src="'/path/to/images/' + fileName" />
<div :class="{ red: isRed }">div>
<div :class="[classA, classB]">div>
<div :class="[classA, { classB: isB, classC: isC }]">div>
<div :style="{ fontSize: size + 'px' }">div>
<div :style="[styleObjectA, styleObjectB]">div>
<div v-bind="{ id: someProp, 'other-attr': otherProp }">div>
<MyComponent :prop="someThing" />
<MyComponent v-bind="$props" />
<svg><a :xlink:special="foo">a>svg>
v-if
基于表达式值的真假性,来条件性地渲染元素或者模板片段;
v-else
表示 v-if
或 v-if
/ v-else-if
链式调用的 else块 ;
v-else-if
表示 v-if
的 else if块 , 可以进行链式调用。
上面几个指令用于条件渲染,用法就和普通编程语言里的 if else 用法差不多,下面是个简单的演示:
v-show
基于表达式值的真假性,来改变元素的可见性。
和上面不同的是这个不管表达式结果如何元素都会被渲染,差异只是可见性不同(display属性):
v-on
给元素绑定事件监听器。
简写: @
。
事件修饰符: 用于处理事件细节。
<a @click.stop="doThis">a>
<form @submit.prevent="onSubmit">form>
<a @click.stop.prevent="doThat">a>
<form @submit.prevent>form>
<div @click.self="doThat">...div>
按键修饰符:
<input @keyup.enter="submit" />
<input @keyup.page-down="onPageDown" />
<input @keyup.alt.enter="clear" />
<div @click.ctrl="doSomething">Do somethingdiv>
<button @click.ctrl="onClick">Abutton>
<button @click.ctrl.exact="onCtrlClick">Abutton>
<button @click.exact="onClick">Abutton>
鼠标修饰符:
我们可以同时使用 v-bind 和 v-on 来在表单的输入元素上创建双向绑定,比如下面代码:
<template>
<input :value="text" @input="onInput" placeholder="Type here">
<p>{{ text }}p>
template>
<script>
export default {
data() {
return {
text: ''
}
},
methods: {
onInput(e) {
this.text = e.target.value
}
}
}
script>
使用下面标签可以简化这个操作:
v-model
在表单输入元素或组件上创建双向绑定。
对于单选按钮或是多选按钮来说 v-model
绑定的可以是一组数组或是集合:
v-model
支持设置动态设置单选、复选按钮的值,另外有少量修饰符可用。
内置内容除去指令之后的剩余内容不多这里暂时先不进行介绍了,更多内容可以参考官网文档。
Vue总体来说入门还是不复杂的,它提供的核心功能是 声明式渲染 和 响应性 ,Vue的很多API都是围绕前端开发和这两个特性展开的。Vue的API看似不少,但是基本上了解前端开发基础内容以及Vue的这两个特性的情况下,这些API很多都有点类似于语法糖性质的东西,方便开发。
本文只是对API部分内容进行介绍,完整详细的信息可以参考官方文档。