第一天 学习了 vue 基础语法以及 vue3 的组合式 API
一、vue 基础
1、引入 vue
基础不使用任何脚手架,直接在头部使用<script src="https://unpkg.com/vue@3"></script>
引入 vue
在 body 标签里建立一个 id 为 app 的 div,随后在 script 标签里使用Vue.createApp().mount('#app')
这就是 vue 的最基础的引入
2、最简单的使用
在 Vue.createApp()中传入对象,对象里添加 data 方法,return 的就是 vue 基本数据。
1 | Vue.createApp({ |
随后便可以在那个绑定的 div 中使用基础 vue 语法。
并且这里的对象不只有 data 方法,还有若干别的方法,方便拆分管理
3、v-for v-bind v-model
v-for 指令
v-for
用于渲染列表,基本语法如下:
1 | <ul> |
v-for
会遍历 items
数组,并为每个元素生成一个 <li>
元素。每个元素都通过 item
变量可以在模板中访问。key
属性是必需的,用于提高 Vue 追踪每个节点的能力,从而提高渲染性能。
v-bind 指令
v-bind
用于绑定元素属性,基本语法如下:
1 | <button v-bind:disabled="isButtonDisabled">Button</button> |
v-bind
将元素的 disabled
属性绑定到 Vue 实例的 isButtonDisabled
属性。如果 isButtonDisabled
属性的值是 true
,则按钮会被禁用。它常用来动态设置 HTML 属性。
简写形式是 :
:
1 | <button :disabled="isButtonDisabled">Button</button> |
非常常用的是绑定数据,还有绑定 class 类名
v-model 指令
v-model
用于实现双向数据绑定,基本语法如下:
1 | <input v-model="message" /> |
v-model
将 input
的 value
属性和 input
的 oninput
事件绑定到 Vue 实例的 message
属性。这样当 input
值发生变化时,message
属性也会随之更新;反之亦然。
v-model
是 Vue 提供的一种特殊语法糖,本质上它是 v-bind
和 v-on
的结合。
4、v-on v-if
v-on 指令
能在 html 上绑定方法。所绑定的方法写在 App 对象里的 methods 属性里。比如
1 | <form v-on:submit="add"></form> |
可以缩写成@。然后再加上 form 表单触发 submit 事件的时候默认会刷新页面,但是我们不需要它提交表单,所以用 vue 提供的方法之间阻止,写成:
1 | <form @submit.prevent="add"></form> |
v-if 指令
就是把 js 能做的判断能写到 html 标签里,如果满足才显示这个标签。比如
1 | <div v-if="items.length > 3"></div> |
满足 items 的长度的时候才显示这个 div 标签
还有 v-else-if 与 v-else 可以用,不过多赘述
5、拆分组件
这是 vue 最核心的思想。比如首先可以把基础导入写成Vue.createApp(App).mount('#app')
,然后就可以新建一个文件 App.js,把东西都写在这里。然后使用 es6 的导出导入语法挂载
在 App 对象里,添加 template 属性,属性是反引号字符串,然后就可以把所有之前写在 id 为 app 的 div 里的 html 写在反引号里了。vue 会为我们挂载并使用
6、细化拆分
再在这个 app.js 写多了东西感觉复杂,还能细化拆分。把 App 对象里的所有东西都删除,只留一个 template 属性,再加一个 components 方法,用 es6 的导入对象,这就是要引入的东西。再新建个文件,写和 app.js 类似的对象导出。把传入的对象写成 html 标签写入 App 的 template 里,实现了组件进一步细化拆分
7、父子组件通信
父传子
在父组件的 template 里,写子组件的 html 标签时,添加一个属性。比如
1 | <son :message="mes1"></son> |
然后在子组件里添加一个 props 属性,是个对象,对象里是信息的名加上信息类型,就能传入信息了。比如
1 | { |
子传父
使用$emit
方法,子组件可以向父组件发送事件。这个方法接收两个参数,第一个参数是事件的名称,第二个参数是随事件一起发送的数据。当子组件调用 $emit
方法时,会触发一个事件,这个事件会向上冒泡到父组件,父组件可以通过 v-on
或者 @
对这个事件进行监听,并在回调函数中接收数据,完成子组件到父组件的通信。举例:
子组件:
1 | { |
父组件:
1 | import ChildComponent from './ChildComponent.vue'; |
能够点击子组件按钮,控制台输出 Hello, parent!
感觉这个语法比较费解,大致过程是:
首先,在最终要点击的子组件上绑定函数
然后在这个函数上,使用$emit 方法,第一个参数是传递的名称,第二个参数是传递的信息。这样做等于是向调用它的人暴露出了第一个参数命名的属性
再然后,在父组件里,导入子组件,在 template 中使用此组件,并用 v-on,父组件的方法监听暴露出来的属性。
这时候,父组件监听函数的定义里参数便是子组件传递的信息(即第二个参数),便能在父组件做一些事情。每当子组件的函数被调用,父组件的监听函数也就跟着被调用,完成了子传父。
二、vue3 组合式 API 基础
1、安装运行
使用 creat-vue 脚手架构建(基于 Vite)
1 | npm init vue@latest |
2、基本文件结构
根目录
index.html 是最终入口,最后 vue 会把东西挂载至此
其他都是一些工程的配置文件
src
在这里进行主要代码的书写
App.vue 根组件文件
main.js 项目的入口文件
components 文件夹 存放项目使用的公共组件
assets 文件夹 存放每个页面对应的 css、js 公共函数以及图片文件
public
公共资源目录
dist
存放打包好生成的文件
3、基本使用
从 App.vue 开始
vue3 使用了组合式语法,简化了 vue2 的语法。在 <script>
标签内编写 JavaScript,<template>
标签内编写 HTML。使用双大括号 {{ }}
包含变量或语句。
响应式数据
使用 reactive()
和 ref()
使 HTML 中的变量可变,即 JavaScript 更改变量后,HTML 会重新渲染新值。
ref()
:创建一个响应式数据对象。ref()
返回的对象包含一个.value
属性用于获取或设置内部值。reactive()
:接受一个普通对象并返回其代理,等同于 Vue 2.x 的Vue.observable()
。
计算属性
用于影响响应式数据。定义一个函数来更改响应式数据,得到的结果仍然是响应式的,可以在 HTML 中实时渲染。
- 使用
computed()
函数创建计算属性,这个函数接收一个 getter 函数并返回一个不可变的响应式 ref 对象。当依赖的响应式数据发生变化时,getter 函数会自动重新计算。
最好不要传入有副作用的函数。计算属性是只读的
监听
使用 watch()
函数监听数据变化,数据发生变化时会触发回调函数。
1 | watch(xxx, (newVal, oldVal) => {}); |
immediate
参数:放在最后,如果指定了这个参数,将首先立即执行一次回调函数。- 默认为浅层监听,即如果监听的是一个对象,对象的属性发生变化不会调用回调函数。如果要进行深度监听,需要指定
deep
参数。 - 如果需要精确监听某个属性,可以将回调函数改写为两个,第一个返回需要监听的属性。
生命周期函数
onBeforeMount()
: 在挂载开始之前调用。onMounted()
: 在组件挂载到 DOM 后调用,可以访问和操作 DOM 元素。onBeforeUpdate()
: 在数据更新,导致的虚拟 DOM 重新渲染和打补丁之前调用。onUpdated()
: 在组件 DOM 已经更新,即数据的更改已经体现在 DOM 中之后调用。onBeforeUnmount()
: 新的生命周期函数,在组件卸载之前被调用,可以进行一些清理工作。onUnmounted()
: 在组件卸载并从 DOM 中移除后被调用。
注意: beforeCreate
和 created
在 Vue 3 的组合式 API 中没有直接的等价物。
组件父子通信
- 父传子:在调用子组件时,添加一个属性,即要传递的信息。子组件使用
defineProps()
来接收。如果是响应式数据,需要在添加属性时前面加一个冒号:
。 - 子传父:在父组件中定义变量,然后在使用子组件时添加一个属性来传递,子组件使用后可以传递信息。注意,使用子组件时需要在方法前加
@
,然后子组件通过defineEmits()
函数来生成传递方法。
模板引用
为了获取 DOM 组件。
首先调用 ref()
函数,传入 null
,然后在模板 HTML 中,用 ref
属性绑定该变量。这样我们就可以通过这个变量获取到 DOM。注意,需要在组件挂载完成后才能获取,所以要在 onMounted
生命周期或者之后。
跨层传递数据
层组件使用 provide()
函数提供数据,provide('别名', 数据)
。
底层组件使用 inject()
函数获取数据,inject('别名')
。