Vue--第八天

Vue3

1.优点:

Vue--第八天_第1张图片Vue--第八天_第2张图片

2.创建:

Vue--第八天_第3张图片

Vue--第八天_第4张图片

3.文件:

Vue--第八天_第5张图片

Vue--第八天_第6张图片

换运行插件:

Vue--第八天_第7张图片Vue--第八天_第8张图片

4.运行:

setup函数:

setup函数中获取不到this(this 在定义的时候是Undefined)

Vue--第八天_第9张图片

Vue--第八天_第10张图片

Vue--第八天_第11张图片

Vue--第八天_第12张图片

reactive()和ref():

Vue--第八天_第13张图片

Vue--第八天_第14张图片

代码:

computed:

有读和写两种方法:get 和 set ,但是我们一般用只读,改的话另外写函数

Vue--第八天_第15张图片

Vue--第八天_第16张图片

watch函数:

侦听不要加value,我们侦听对象,不是单个数字

Vue--第八天_第17张图片

Vue--第八天_第18张图片

immediate:
Vue--第八天_第19张图片
deep:

代码:

精准监听:

Vue--第八天_第20张图片

代码:

// 5.对于对象中的属性,进行精准监听,不确定加没加imediate函数

watch(() => userInfo.value.age,(newValue, oldValue) => {

  console.log(oldValue, newValue)

})

5.周期函数:

Vue--第八天_第21张图片

代码:

6.父子通信

Vue--第八天_第22张图片

Vue--第八天_第23张图片

Vue--第八天_第24张图片

代码:

7.模板引用:

通过ref标识获取真实的dom对象或者组件实例对象

Vue--第八天_第25张图片Vue--第八天_第26张图片

代码:

8.provide 和inject 

Vue--第八天_第27张图片

Vue--第八天_第28张图片

Vue--第八天_第29张图片

Vue--第八天_第30张图片

Vue--第八天_第31张图片

10.defineOptions:

Vue--第八天_第32张图片Vue--第八天_第33张图片11. v-model 和 defineModel:

Vue--第八天_第34张图片

需要有如下配置:

Vue--第八天_第35张图片

Vue--第八天_第36张图片

Vue--第八天_第37张图片

你可能感兴趣的:(vue.js,前端,javascript)