初识vue

第一天 学习了 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
2
3
4
5
6
7
8
9
10
11

Vue.createApp({
    data() {
        return {
            foods: [
                { id: 1, name: '原味鱿鱼丝', image: './images/原味鱿鱼丝.png', purchased: false },
                { id: 2, name: '辣味鱿鱼丝', image: './images/辣味鱿鱼丝.png', purchased: false },
                { id: 3, name: '炭烧味鱿鱼丝', image: './images/炭烧味鱿鱼丝.png', purchased: false },
            ],
        };
    },
}).mount('#app');

随后便可以在那个绑定的 div 中使用基础 vue 语法。

并且这里的对象不只有 data 方法，还有若干别的方法，方便拆分管理

3、v-for v-bind v-model

v-for 指令

v-for 用于渲染列表，基本语法如下：

1
2
3

<ul>
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</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
2
3
4
5

{
    props: {
        mes1: String,
    }
}

子传父

使用$emit方法，子组件可以向父组件发送事件。这个方法接收两个参数，第一个参数是事件的名称，第二个参数是随事件一起发送的数据。当子组件调用 $emit 方法时，会触发一个事件，这个事件会向上冒泡到父组件，父组件可以通过 v-on 或者 @ 对这个事件进行监听，并在回调函数中接收数据，完成子组件到父组件的通信。举例：

子组件：

1
2
3
4
5
6
7
8
9
10

{
    template: `
      <button @click="notifyParent">Click me</button>
    `
    methods: {
        notifyParent() {
          this.$emit('childClicked', 'Hello, parent!');
        }
    }
}

父组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import ChildComponent from './ChildComponent.vue';
export default {
    components: {
        ChildComponent,
    },
    template: `
      <child-component @childClicked="handleChildClick"></child-component>
    `,
    methods: {
        handleChildClick(message) {
            console.log(message); // 输出 'Hello, parent!'
        },
    },
};

能够点击子组件按钮，控制台输出 Hello, parent!

感觉这个语法比较费解，大致过程是：

1. 首先，在最终要点击的子组件上绑定函数

2. 然后在这个函数上，使用$emit 方法，第一个参数是传递的名称，第二个参数是传递的信息。这样做等于是向调用它的人暴露出了第一个参数命名的属性

3. 再然后，在父组件里，导入子组件，在 template 中使用此组件，并用 v-on，父组件的方法监听暴露出来的属性。

4. 这时候，父组件监听函数的定义里参数便是子组件传递的信息（即第二个参数），便能在父组件做一些事情。每当子组件的函数被调用，父组件的监听函数也就跟着被调用，完成了子传父。

二、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('别名')。