Vue3 学习笔记 第一课基础篇

声明响应式 变量两种api实现****

import { ref ,reactive } from 'vue'

ref可以接受任何值类型 例ref(1)，ref([1,2])等

ref 会返回一个包裹对象，并在 .value 属性下暴露内部值。

注：在单文件组件中

reactive() 只适用于对象 (包括数组和内置类型，如 Map 和 Set)

 

属性绑定 ， 事件绑定和表单值双向绑定****

v-bind:class 绑定属性class ,可简写 :class

v-on:click 绑定点击事件，可简写@click

表单值的双向绑定v-model=”text”

注：实质上是对一个组件属性:value,事件@input，修改同一值的语法糖，同理在自己封装的组件里实现属性:value,事件@input也可以使用实现v-model双向绑定

 

条件渲染****

使用指令v-if,v-else-if,v-else,v-show

一个 v-else 或v-else-if元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。

指令接收一个Boolean类型的值，true显示组件，false隐藏组件

注：v-show 只是做css隐藏显示处理，组件一致会被加载存在

v-if,v-else-if,v-else 显示时才会加载组件，隐藏时会销毁组件

 

列表渲染****

指令v-for 实现列表渲染

v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据，而 item 是迭代项的别名

源数据可为数组：

 变量的作用域和类似数组的forEach

( message ,index) in items

forEach((item, index) => {}

源数据可为对象：

遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定(value, key, index) in myObject

 

源数据可为整数：

从1开始取值v-for="n in 10"

 

为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute：<div v-for="item in items" :key="item.id">

 

 

注：同一标签同时使用v-if和v-for是不推荐的

计算属性****

API：computed()。它可以让我们创建一个计算属性 ref，

 

模板引用****

<p ref="p">hello

给需要引用的标签添加属性ref,同时声明一个同名的ref对象,对象初始值为null

const p = ref(null)

 

注：模板引用 ref 只能在组件挂载后访问

 

生命周期钩子****

常用的一下生命周期函数：

import { onBeforeMount } from 'vue'

onBeforeMount(()=>{

// 在组件被挂载之前被调用

})

import { onMounted } from 'vue'

onMounted(()=>{

// 在组件挂载完成后执行

})

import { onBeforeUpdate} from 'vue'

onBeforeUpdate(()=>{

// 在组件因为响应式状态变更而更新其 DOM 树之前调用

})**

import { onUpdated } from 'vue'

onUpdated(()=>{

// 在组件因为响应式状态变更而更新其 DOM 树之后调用

})**

import { onBeforeUnmount} from 'vue'

onBeforeUnmount(()=>{

// 在组件实例被卸载之前调用

})

import { onUnmounted } from 'vue'

onUnmounted(()=>{

// 在组件实例被卸载之后调用

})

侦听器****

有些情况下，我们需要在状态变化时执行一些“其他操作”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。我们可以用watch()监听器来实现

import { ref, watch } from 'vue' const count = ref(0) watch(count, (newCount) => { 

// 没错，console.log() 是一个 其他操作 

console.log(new count is: ${newCount}) 

})