一、胡说八道
Vue现有Vue 2.x版本和Vue 3.x两个大的版本。
Vue 2.x
其中 Vue 2.7 版本是Vue 2 最新的次级版本也是最后一个次级版本,这意味着 Vue 2 的终止支持时间将会在 2023 年 12 月 31 日后,且不再提供新特性。从Vue3中移植回了最重要的一些特性,使得 Vue 2 也能享有这些便利,例如:
- 组合式 API 单文件组件内的 <script setup>
- 单文件组件内的 CSS v-bind defineComponent()
- 以改善类型推断 (较之于 Vue.extend)
此外我们还支持了以下 API:
- defineComponent() 以改善类型推断 (较之于 Vue.extend)
- h()、useSlot()、useAttrs()、useCssModules()
- set()、del() 和 nextTick() 也在 ESM 构建版本中被导出为具名
- API 支持 emits选项,但仅以类型检查为目的 (并不会影响运行时的行为)
Vue 3
其中Vue 3.7.1版本是Vue 3 当前的默认主版本,每隔一段时间就会不断的迭代升级,推出更高的版本号
了解一下API 风格,要不然新手学习以及写代码都会感觉混乱
Vue 的组件可以按两种不同的风格书写:选项式 API 和组合式 API
- 选项式 API (Options API)
- 组合式 API(Composition API)
1、选项式 API个人认为就是data()、methods、computed、watch 的组合
<script>
export default {
data(){
return{
}
},
methods:{
},
watch:{
},
computed:{
}
}
</script>
二、搭建环境
1.安装nodejs
- 安装nodejs
在nodejs官网下载安装包,去安装。
使用如下命令,查看node和npm的版本号,如果正常打印出来则表示安装成功
node -v
npm -v
2.安装cnpm
如果安装依赖包卡顿、进度长时间不动,建议使用cnpm安装
cnpm网址https://npmmirror.com/
使用npm安装cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com
3.安装工具链(项目脚手架)
- Vite
- Vue CLI
3.1. Vite
兼容性注意
Vite 需要 Node.js 版本 >= 16.0.0。
使用vite创建项目:
npm create vite@latest
使用这个命令创建的项目会比vite创建的项目配置多
npm init vue@latest
这个命令会安装和执行 create-vue,它是 Vue 提供的官方脚手架工具。跟随命令行的提示继续操作即可
vite是一种新型前端构建工具.
它主要由两部分组成:
- 一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。
- 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。
3.2. Vue CLI
使用Vue CLI创建项目:
npm install -g @vue/cli
vue create demo
使用图形化界面创建项目
vue ui
使用vue add命令来安装插件
vue add eslint
Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链,它现在处于维护模式。Vue官方建议使用 Vite 开始新的项目,除非你依赖特定的 Webpack 的特性。在大多数情况下,Vite 将提供更优秀的开发体验
注意写法
vue2.x 安装使用vue-cli
vue3.x 安装使用vue/cli
vue2 的写法
npm install -g @vue-cli
vue3 的写法
npm install -g @vue/cli
准备用一个月的时间学习Vue,每天把学习的要点记录下来
四、学习目标:
- 应用实例、渲染、渲染函数
- 注册组件、组件实例、组件基础
- 模板语法
- 指令、事件修饰符
- 事件处理
- Data
- 生命周期、钩子(slot)
- Setup(props,Context)
- 单文件组件-SFC
- 路由( vue-router 库、Page.js、 Director)
- 状态( Flux、Vuex、Pinia)
- 服务端渲染(Nuxt.js、Vite )
4.1应用实例
每个应用都是通过createApp()实例创建的
const app = Vue.CreateApp({})
4.2组件 --components
注册组件
创建应用
const app = Vue.createApp({})
全局注册组件(注册搜索框组件)
app.component('SearchInput', SearchInputComponent)
4.3指令
指令 | 缩写 | 描述 | 注解 |
---|---|---|---|
v-html | 更新元素的 innerHTML | ||
v-text | 更新元素的文本内容 | ||
v-bind | : | 动态的绑定一个或多个 attribute,也可以是组件的 prop | |
v-on | @ | 给元素绑定事件监听器 | |
v-if | 基于表达式值的真假性,来条件性地渲染元素或者模板片段 | ||
v-else | 表示 v-if 的“else if 块”。可以进行链式调用 | 上一个兄弟元素必须有 v-if 或 v-else-if | |
v-else-if | 表示 v-if 或 v-if / v-else-if 链式调用的“else 块” | 上一个兄弟元素必须有 v-if 或 v-else-if | |
v-show | 基于表达式值的真假性,来改变元素的可见性 | ||
v-for | 基于原始数据多次渲染元素或模板块 | ||
v-model | 在表单输入元素或组件上创建双向绑定 | 仅限input、select、textarea、components | |
v-slot | # | 用于声明具名插槽或是期望接收 props 的作用域插槽 | |
v-cloak | 用于隐藏尚未完成编译的 DOM 模板 | ||
v-pre | 跳过该元素及其所有子元素的编译 | ||
v-memo | 期望的绑定值类型:any[] | ||
v-once | 仅渲染元素和组件一次,并跳过之后的更新 |
除了以上指令,还有特殊的attribute:
- key
- ref
- is
key 一般配合v-for使用
ref string | Function ;被用来给元素或子组件注册引用信息,$refs
is 动态模板
v-on 指令
缩写 @
< div id="app" v-on:click="myClick"></div>
可以写成
< div id="app" @click="myClick"></div>
v-bind 指令
缩写 : 或者 .(当使用 .prop 修饰符时)
<img v-bind:src="imageSrc" />
可以写成
<img :src="imageSrc" />
4.4单文件组件-SFC
单文件组件 (也被称为 *.vue 文件,英文 Single-File Components,缩写为 SFC),单文件组件模板。
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped>
button {
font-weight: bold;
}
</style>
单文件<script setup> | 描述 |
---|---|
defineProps() 和 defineEmits() | |
defineExpose() | |
defineOptions() | |
defineSlots() | |
useSlots() 和 useAttrs() |
五、API
5.1、全局API
应用实例
名称 | 描述 |
---|---|
createApp() | 创建一个应用实例 |
createSSRApp() | 以 SSR 激活模式创建一个应用实例。用法与 createApp() 完全相同 |
app.mount() | 将应用实例挂载在一个容器元素中 |
app.unmount() | 卸载一个已挂载的应用实例 |
app.component() | 如果同时传递一个组件名字符串及其定义,则注册一个全局组件;如果只传递一个名字,则会返回用该名字注册的组件 (如果存在的话) |
app.directive() | 如果同时传递一个名字和一个指令定义,则注册一个全局指令;如果只传递一个名字,则会返回用该名字注册的指令 (如果存在的话) |
app.use() | 安装一个插件 |
app.mixin() | 应用一个全局 mixin (适用于该应用的范围)。一个全局的 mixin 会作用于应用中的每个组件实例 |
app.provide() | 提供一个值,可以在应用中的所有后代组件中注入使用 |
app.runWithContext() | 使用当前应用作为注入上下文执行回调函数 |
app.version | 提供当前应用所使用的 Vue 版本号 |
app.config | 每个应用实例都会暴露一个 config 对象,其中包含了对这个应用的配置设定。你可以在挂载应用前更改这些属性 (下面列举了每个属性的对应文档)。 |
app.config.errorHandler | 用于为应用内抛出的未捕获错误指定一个全局处理函数 |
app.config.warnHandler | 用于为 Vue 的运行时警告指定一个自定义处理函数 |
app.config.performance | 设置此项为 true 可以在浏览器开发工具的“性能/时间线”页中启用对组件初始化、编译、渲染和修补的性能表现追踪。仅在开发模式和支持 performance.mark API 的浏览器中工作 |
app.config.compilerOptions | 配置运行时编译器的选项 |
app.config.globalProperties | 一个用于注册能够被应用内所有组件实例访问到的全局属性的对象 |
app.config.optionMergeStrategies | 一个用于定义自定义组件选项的合并策略的对象 |
通用
- version 暴露当前所使用的 Vue 版本
- nextTick() 等待下一次 DOM 更新刷新的工具方法
- defineComponent() 在定义 Vue 组件时提供类型推导的辅助函数
- defineAsyncComponent() 定义一个异步组件,它在运行时是懒加载的。参数可以是一个异步加载函数,或是对加载行为进行更具体定制的一个选项对象
- defineCustomElement() 这个方法和 defineComponent 接受的参数相同,不同的是会返回一个原生自定义元素类的构造器
5.2、组合式API
响应式: 核心 | 描述 |
---|---|
ref() | 接受一个内部值,返回一个响应式的、可更改的 ref 对象,此对象只有一个指向其内部值的属性 .value。 |
computed() | 接受一个 getter 函数,返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象 |
reactive() | 返回一个对象的响应式代理 |
readonly() | 接受一个内部值,返回一个响应式的、可更改的 ref 对象,此对象只有一个指向其内部值的属性 .value。 |
watchEffect() | 立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行 |
watchPostEffect() | |
watchSyncEffect() | |
watch() | 侦听一个或多个响应式数据源,并在数据源变化时调用所给的回调函数 |
响应式: 工具 | 描述 |
---|---|
isRef() | 检查某个值是否为 ref。 |
unref() | 如果参数是 ref,则返回内部值,否则返回参数本身。这是 val = isRef(val) ? val.value : val 计算的一个语法糖 |
toRef() | 可以将值、refs 或 getters 规范化为 refs |
toValue() | 将值、refs 或 getters 规范化为值。这与 unref() 类似,不同的是此函数也会规范化 getter 函数。如果参数是一个 getter,它将会被调用并且返回它的返回值 |
toRefs() | 将一个响应式对象转换为一个普通对象,这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的 |
isProxy() | 检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理 |
isReactive() | 检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理 |
isReadonly() | 检查传入的值是否为只读对象。只读对象的属性可以更改,但他们不能通过传入的对象直接赋值 |
响应式: 进阶 | 描述 |
---|---|
shallowRef() | |
triggerRef() | |
customRef() | |
shallowReactive() | |
shallowReadonly() | |
toRaw() | |
markRaw() | |
effectScope() | |
getCurrentScope() | |
onScopeDispose() |
生命周期钩子 | 描述 |
---|---|
onMounted() | |
onUpdated() | |
onUnmounted() | |
onBeforeMount() | |
onBeforeUpdate() | |
onBeforeUnmount() | |
onErrorCaptured() | |
onRenderTracked() | |
onRenderTriggered() | |
onActivated() | |
onDeactivated() | |
onServerPrefetch() |
5.3、选项式API
状态选项 | 描述 |
---|---|
data | |
props | |
computed | |
methods | |
watch | |
emits | |
expose |
生命周期选项 | 描述 |
---|---|
beforeCreate | |
created | |
beforeMount | |
mounted | |
beforeUpdate | |
updated | |
beforeUnmount | |
unmounted | |
errorCaptured | |
renderTracked | |
renderTriggered | |
activated | |
deactivated | |
serverPrefetch |
组件实例 | 描述 |
---|---|
$data | |
$props | |
$el | |
$options | |
$parent | |
$root | |
$slots | |
$refs | |
$attrs | |
$watch() | |
$emit() | |
$forceUpdate() | |
$nextTick() |
5.4、进阶API
渲染函数 | 描述 |
---|---|
h() | |
mergeProps() | |
cloneVNode() | |
isVNode() | |
resolveComponent() | |
resolveDirective() | |
withDirectives() | |
withModifiers() |
服务端渲染
渲染函数 | 描述 |
---|---|
h() | |
renderToString() | |
renderToNodeStream() | |
pipeToNodeWritable() | |
renderToWebStream() | |
pipeToWebWritable() | |
renderToSimpleStream() | |
useSSRContext() |
TypeScript 工具类型 | 描述 |
---|---|
PropType | |
MaybeRef | |
MaybeRefOrGetter | |
ExtractPropTypes | |
ExtractPublicPropTypes | |
ComponentCustomProperties | |
ComponentCustomOptions | |
ComponentCustomProps | |
CSSProperties |
六、Vue Router
Vue Router时Vue.js的官方路由
使用npm安装vue router
npm intsall vue-router@4
- router-link
- router-view
TS 接口 | 描述 |
---|---|
HistoryState | |
NavigationFailure | |
NavigationGuard | |
NavigationGuardNext | |
NavigationGuardWithThis | |
NavigationHookAfter | |
RouteLocation | |
RouteLocationMatched | |
RouteLocationNormalized | |
RouteLocationNormalizedLoaded | |
RouteLocationOptions | |
RouteMeta | |
RouteRecordNormalized | |
Router | |
RouterHistory | |
RouterLinkProps | |
RouterOptions | |
RouterScrollBehavior | |
RouterViewProps |
vue-router <function>方法 | |
---|---|
createMemoryHistory | |
createRouter | |
createWebHashHistory | |
createWebHistory | |
isNavigationFailure | |
loadRouteLocation | |
onBeforeRouteLeave | |
onBeforeRouteUpdate | |
useLink | |
useRoute | |
useRouter |