Vue3学习笔记

组件基础：

类型：

根组件：

定义：

const RootComponent = { /* 选项 */ }

使用：

创建Vue应用对象：const app = Vue.createApp(RootComponent)

挂载到DOM元素中：const vm = app.mount('#app')

全局：

注册：

app.component('my-component-name',

               {{ data() {  return {  count: 0   }  },                           

                 template: ` <button @click="count++"> 点了 {{ count }} 次！ </button>` }})

使用：

<my-component-name></my-component-name>

复用：任意次数

使用范围：app 实例模板；

                  根实例组件树中的所有子组件的模板

局部：

定义：

创建js对象：

const ComponentA = {   /* ... */ }

const ComponentB = {  /* ... */ }

注册组件到实例：

components: {

    'component-a': ComponentA,

    'component-b': ComponentB

  }

使用：

<my-component-name></my-component-name>

复用：任意次数

使用范围：

注册局部组件的实例 

Prop（数据传递）：

定义：

子组件（显式声明prop）接受父组件（props）传递的数据的一个属性

动态：

用 v-bind 动态绑定 props 的值到父组件的数据中，父组件数据变化，会传导给子组件

验证：

可以指定prop验证要求； 验证失败产生一个控制台的警告(开发环境)

           type：（可多个可能的类型）

                   原生构造器： String、Number、Boolean、Array、Object、Date、Function、Symbol

                   自定义构造器： instanceof 检测。

          default: 默认值

单文件组件(SFC)

定义：

*.vue 文件

一个 Vue 组件的模板、逻辑JavaScript 与样式 CSS封装在单个文件中。

操作步骤：

main.js文件：创建一个简单的项目

import { createApp } from 'vue'

import App from './App.vue' 

createApp(App).mount('#app')

App.vue：定义一个简单组件

<template> //声明元素 </template>

<script> //数据与事件处理逻辑

//将组件定义导出为一个默认的对象（ Vue3）

export default {  data() {  return {  message: 'Hello, RUNOOB!'  }  } }

</script>

<style> //声明css样式 </style>

 ./src/components/ 目录下创建子组件文件，*.vue 文件

<template></template>

<script> </script>

 <style></style>

./src/main.js 文件，引入并定义子组件

import HelloRunoob from './components/HelloRunoob.vue'

App.vue在父组件的模板中，使用自定义标签的方式引入子组件   

<hello-runoob></hello-runoob>

组合式 API

setup() 函数：

时间：

组件创建 ，created() 之前执行。

参数：

第一个参数 props：响应式 。

第二个参数 contex：setup 中有用的值。

ref 函数：

生成任何响应式变量

在任何地方起作用

访问.value 属性

生命周期钩子

setup() 函数中，实现带有 on 前缀的钩子函数 

onBeforeMount：组件实例挂载之前

onMounted：组件实例挂载之后 

onBeforeUpdate：组件实例即将更新

onUpdated：组件实例更新完毕

onBeforeUnmount：组件实例即将销毁

onUnmounted：组件实例销毁完毕

模板引用

获得对模板内元素或组件实例，引用变量或方法

声明 ref ；从 setup() 返回。

v-for 中用法

模板引用没有特殊处理；引用函数执行自定义处理。

侦听 

watch() 和 watchEffect() ：

DOM 挂载或更新之前运行副作用；引用空元素。

添加flush: 'post' 选项：

DOM 更新后运行副作用；引用正确的元素。

标准指令

HTML 模板中以 v- 开头的特殊属性形式，

作用：

将响应式数据绑定到 DOM 元素上

在 DOM 元素上进行一些操作。

优点：

相比JavaScript，创建响应式页面要容易，代码更少。

常用的 Vue 指令：

指令                                   描述

v-bind           用于将 Vue 实例的数据绑定到 HTML 元素的属性上。

v-if               用于根据表达式的值来条件性地渲染元素或组件。

v-show           用于根据表达式的值来条件性地显示或隐藏元素。

v-for           用于根据数组或对象的属性值来循环渲染元素或组件。

v-on           用于在 HTML 元素上绑定事件监听器，使其能够触发 Vue 实例中的方法或函数。

v-model           用于在表单控件和 Vue 实例的数据之间创建双向数据绑定。

自定义指令

语法：

全局指令

全局实例对象名称.directive('指令名称', {

  // 指令逻辑

})

局部指令

const 实例名称 = { 

   directives: { 指令名称: {  // 指令逻辑   } }

}

钩子

钩子函数 

created :       在指令绑定元素的属性或事件监听器被应用之前调用

beforeMount :  指令第一次绑定到元素并且在挂载父组件之前调用

mounted :      在绑定元素的父组件被挂载后调用

beforeUpdate:  在更新包含组件的 VNode 前调用

updated:       在更新包含组件的 VNode 及其子组件的 VNode后调用。

beforeUnmount: 绑定指令的元素父组件，卸载之前调用，只调用一次。

unmounted:     当指令与元素解除绑定，且父组件已卸载时调用，只调用一次。

钩子函数参数

el

指令绑定到的元素。

可用于直接操作 DOM。

binding

一个对象

属性：

instance：使用指令的组件实例。

value：   传递给指令的值

oldValue：先前的值，仅在 beforeUpdate 和 updated 中可用。值是否已更改都可用。

arg：     参数传递给指令 (如果有)。

modifiers：包含修饰符 (如果有) 的对象。

dir：      一个对象，在注册指令时作为指令内容参数传递 

vnode 

el 参数收到的真实 DOM 元素的蓝图。

prevNode 

上一个虚拟节点，仅在 beforeUpdate 和 updated 钩子中可用。

模板语法

插值

文本

语法：

 {{...}}（双大括号）；内容为对应组件实例属性的值，

特点：

改变属性的值，{{...}} 标签内容也会更新 

使用 v-once 指令，执行一次性地插值

Html

使用 v-html 指令，用于输出 html 代码

属性

使用 v-bind 指令。 

特点：

布尔属性，常规值为 true 或 false，

属性值为 null 或 undefined，则该属性不会显示出来。 

表达式

在当前活动实例的数据作用域下，作为 JavaScript 被解析。

特点：

每个绑定都只能包含单个表达式

指令

带有 v- 前缀的特殊属性。

在表达式的值改变时，将某些行为应用到 DOM 上。

参数

在指令后以冒号指明。

v-bind 指令：响应地更新 HTML 属性：

v-on 指令：监听 DOM 事件

修饰符

以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

.prevent 修饰符，v-on 指令对于触发的事件调用 event.preventDefault()：

输入

使用 v-model 指令，来实现双向数据绑定

input、select、textarea、checkbox、radio 等表单控件元素

缩写

v-bind 缩写   

<a :href="url"></a>

v-on 缩写 

<a @click="doSomething"></a>

条件语句

v-if

条件判断，表达式返回 true 时显示元素或模版：

v-else-if

即 v-if 的 else-if 块，可链式使用多次：

v-else

给 v-if 添加一个 "else" 块：

v-show

根据条件展示元素：

循环语句

site in sites

sites 是源数据数组

site 是数组元素迭代的别名。

绑定数据到数组来：

一个可选的第二个参数，参数值为当前项的索引：

迭代对象

一个对象的属性来迭代数据：

第二个的参数为键名：

迭代整数

循环整数

显示过滤/排序后的结果

数组的元素进行处理，后再显示出来；

创建一个计算属性，来返回过滤或排序后的数组。

v-for/v-if 联合使用

select 设置默认值：

组件使用

元素上一样使用：

任何数据都不会被自动传递到组件里

把迭代数据传递到组件里使用props

计算属性

关键词: computed

作用：

声明计算属性。

提供的函数将用作属性的 getter

特点：

属性默认只有 getter，可以直接跟在属性名称后 ；

可以自定义一个 setter，在属性被赋值时会被调用；

在计算属性依赖发生改变时，计算属性也会更新。

联系与区别：

computed 是基于依赖缓存，只有依赖发生改变时才会重新取值。

methods在重新渲染的时候，函数总会重新调用执行

监听属性

关键字：watch

语法：

1、实例对象已经创建：

实例对象.$watch('属性名称', function(nval, oval) {

    //属性变化时，执行逻辑;

});

2、实例对象创建时：

const 实例对象名称 = {

  data() {

    return {

      属性名称:属性初始值

    }

  },

  watch : {

    属性名称:function(newValue, oldValue) {

      //属性变化时，执行逻辑;

    }

  }

}

作用：

监测响应式属性的变化；

改变时，执行自定义的逻辑，

优点：

更多的控制权和灵活性

异步加载

数据赋新值，自动调用监听函数的逻辑。

样式绑定

v-bind设置样式属性（class 和 style）

表达式：字符串、对象、数组、三元表达式

class 属性

语法：

<div :class="{ '样式名称1': 布尔属性1,'样式名称2': 布尔属性2}"></div>

<div :class="{对象名称}"></div>

<div :class="{ [样式名称1, 样式名称2]}"></div> 

<div :class="{[布尔属性? 样式名称1: 样式名称2, 样式名称3]}"></div>

特点：

多属性，动态切换多个 class

与普通的 class 属性共存

三元表达式来切换列表中的 class

style(内联样式)

语法：

<div :style="{样式属性名称1: 实例属性1, 样式属性名称2: 实例属性2 + 'px' }"></div>

<div :style="对象名称"></div>

<div :style="[样式属性名称1, 样式属性名称2]">菜鸟教程</div>

<div :style="{ 样式属性名称: [实例属性1, 实例属性2, 实例属性3] }"></div>

注：

渲染数组中最后一个被浏览器支持的值

组件使用 class 属性：

模版里添加：

添加class；已有 class 不会被覆盖

数据绑定 class

单根元素：作用根元素

多个根元素：$attrs 组件属性，决定接收类的元素。

:class="$attrs.class"

事件处理

v-on 指令监听 DOM 事件，从而执行 JavaScript 代码。

缩写为 @ 符号

语法格式：

v-on:click="methodName"

或

@click="methodName"

使用：

调用 JavaScript 方法

内联 JavaScript 语句

特点：

可以有多个方法，由逗号运算符分隔

修饰符：

可以串联

事件：

处理 DOM 事件细节：

.stop - 阻止冒泡

.prevent - 阻止默认事件

.capture - 阻止捕获

.self - 只监听触发该元素的事件

.once - 只触发一次

.left - 左键事件

.right - 右键事件

.middle - 中间滚轮事件

按键：

v-on:keyup.按键编码

v-on:keyup.按键别名

全部的按键别名：

.enter

.tab

.delete (捕获 "删除" 和 "退格" 键)

.esc

.space

.up

.down

.left

.right

系统修饰键：

.ctrl

.alt

.shift

.meta

鼠标按钮:

.left

.right

.middle

.exact ：

有且只有精确的系统修饰符组合或单个键被按下的时候才触发

表单

v-model 会根据控件类型，自动选取正确的方法来更新元素。

v-model 会忽略所有表单元素的属性初始值，使用data 选项中声明初始值。

v-model使用属性和事件类型：

表单元素                  属性        事件

text 、 textarea           value        input

checkbox 、 radio       checked     change

select                    value       change

值绑定

值类型：

复选框：只选一个为逻辑值，多个则绑定到同一个数组

单选按钮：一个字符串

select 列表：单选一个对象，多个则绑定到同一个数组

联系：

v-model：

绑定值，通常是静态字符串 (对于复选框也可以是布尔值)：

v-bind：

绑定值，绑到动态属性上；可以是非字符串。

修饰符

.lazy

不在input 事件中同步输入框的值与数据；在 change 事件中同步：

语法：

<input v-model.lazy="对象名称" >

.number

输入值自动转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），

语法：

<input v-model.number="对象名称" type="number">

.trim

自动过滤用户输入的首尾空格

语法：

<input v-model.trim="对象名称">

路由

通过不同的 URL 访问不同的内容。

多视图的单页 Web 应用（SPA）。

Vue Router 不重新加载页面的情况下，更改并处理 URL 的生成以及编码。 

安装 

1、直接下载 / CDN https://unpkg.com/vue-router@4

2、NPM

淘宝镜像（推荐）：

npm install -g cnpm --registry=https://registry.npmmirror.com

cnpm install vue-router@4

 

router-link

一个组件，设置一个导航链接，切换不同 HTML 内容。 

router-view

显示与 url 对应的组件。放在任何地方，适应布局。

设置步骤：

// 1. 定义路由组件.

// 也可以从其他文件导入

const Home = { template: '<div>Home</div>' }

const About = { template: '<div>About</div>' }

// 2. 定义一些路由

// 每个路由都需要映射到一个组件。 

const routes = [

  { path: '/', component: Home },

  { path: '/about', component: About },

]

// 3. 创建路由实例并传递 `routes` 配置 

const router = VueRouter.createRouter({

  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。

  history:’history ’,

  routes, // `routes: routes` 的缩写

})

// 5. 创建并挂载根实例

const app = Vue.createApp({})

//确保 _use_ 路由实例使整个应用支持路由。

app.use(router)

app.mount('#app')

// 现在，应用已经启动了！

<router-link> 相关属性 

to

表示目标路由的链接。

一个字符串或者是描述目标位置的对象。

replace

点击时调用，导航后不会留下 history 记录。

append

在当前 (相对) 路径前添加其路径

tag

渲染成某种标签，会监听点击，触发导航。

active-class

设置链接激活时使用的 CSS 类名 

exact-active-class

配置当链接被精确匹配的时候应该激活的 class 

event

声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

混入

定义：

定义了一部分可复用的方法或者计算属性。

联系：

混入对象，可以包含任意组件选项。

组件，使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

语法：

局部：

// 定义混入对象

const 混入对象名称= {

  data() { //混入对象属性},

  methods: { 混入对象方法名称1() { //混入对象方法逻辑}  }

} 

// 定义一个应用，使用混入

const app = Vue.createApp({

  mixins: [混入对象名称]

})

 // 挂载元素

app.mount('#app')

全局

影响之后创建的所有 Vue 实例

//创建vue应用实例

const app = Vue.createApp({

  自定义对象名称:自定义对象值

})

// 全局混入钩子函数，绑定自定义对象的处理。

app.mixin({created() {  //处理自定义对象逻辑  } })

// 挂载元素

app.mount('#app')

选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。

数据：

只赋值一个，组件优先。

钩子：

都将被调用；mixin优先。

对象：

合并为同一个对象。两个对象键名冲突时，取组件对象的键值对

Ajax(axios)

待续