(vue3)create-vue 组合式API

news/2024/2/27 13:50:35

优势:

更易维护:组合式api,更好的TS支持

之前是选项式api,现在是组合式,把同功能的api集合式管理

复用功能封装成一整个函数

更快的速度

更小的体积

更优的数据响应式:Proxy

create-vue 新的脚手架工具,底层切换到了vite 

node -v检查node.js16.0以上

npm init vue@latest

vuter禁用(vue2的插件),启用volar

App.vue中script加上setup允许在script中直接编写组合式api

template中不再要求唯一根元素

组件不用注册

组合式API-setup

setup 执行时机比beforeCreate还早,获取不到this(以后不用this),this指向undefined

setup中数据或函数需要return,也麻烦,所以直接在script上写setup

<script setup>语法糖原理

 reactive()

接收一个对象,返回一个响应式对象

导入import {reactive} from ‘vue’            const state=reactive({})

reactive:只能接收对象。那简单类型?

ref()接收一个简单类型或者对象,返回一个响应式对象

import {ref} from ‘vue’             const count=ref(0)

在script区,需要加上.value,在template中,.value不用加

推荐:统一用ref()

computed计算属性函数

 异步请求,操作dom放watch

watch 侦听一个或多个数据的变化

导入import {watch} from ‘vue’ 

watch(
[count,nickname],//第一个参数位置放监视的ref对象
(newArr,oldArr)=>{//第二个参数位置放回调console.log(newArr,oldArr)
},{//第三个位置传入配置对象
immediate:true
deep:true
})
//(2) [0, 'lisa'] (2) [0, '张三']

immediate:true一进页面就触发

deep:true监视不到复杂对象内部变化,除非整个对象地址变了,比如一个新对象赋值给它,加上deep:true就监听得到了

如何精确侦听对象中某个属性

watch(()=>userInfo.value.age,//第一个参数处放函数,返回要侦听的具体属性
(newValue,oldValue)=>{
console.log(newValue,oldValue)})

注:作为watch函数的第一个参数,ref对象不需要添加.value

Vue3的生命周期

每调一个函数调配了一个小的生命周期逻辑

onmounted演示

以前往created里面写的直接写,以前写mounted里的写onmounted,可以写多次,不会冲突,按照顺序执行,以前写destroyed里的写onUnmounted

父子通信

vue2父传子,父给子绑属性,子props接收

vue3使用defineProps、defineEmits编译器宏

const props=defineProps({})子template中可以直接使用

vue3子传父子组件通过@绑定事件,子组件内部通过emit方法触发

const emit=defineEmits([‘changeMoney’]),然后template中某函数中emit(‘changeMoney’,5)然后父@changeMoney=“changeFn”

模版引用的概念

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

生成ref对象,通过ref标识绑定,.vaue即可访问到绑定的元素


http://www.ppmy.cn/news/1128997.html

相关文章

4、图像标签

4、图像标签 图像标签主要解决的是如何在网页中放一个图像 一、常见图片格式 JPGGIFPNGBMP 网页中用的最多的图片格式是JPG、PNG、GIF 二、图像标签 img <img src"path" alt"text" title"text" width"x" height"y"…

人员重识别:Person Re-Identification without Identification via Event Anonymization

论文作者&#xff1a;Shafiq Ahmad,Pietro Morerio,Alessio Del Bue 作者单位&#xff1a;Istituto Italino di Tecnologia;Universita degli Studi di Genova 论文链接&#xff1a;http://arxiv.org/abs/2308.04402v1 内容简介&#xff1a; 1&#xff09;方向&#xff1a;…

关于Blob链接的一些开发应用

一、什么是Blob链接 Blob链接是一种基于URL.createObjectURL(blob)生成的链接&#xff0c;可以将文件或数据的内容转换为URL的形式&#xff0c;方便进行下载或者展示。Blob链接可以是二进制数据、音频、视频、图像等。 二、Blob链接的生成方式 1. 创建Blob对象 // data为文件…

java进阶-Netty

Netty 在此非常感谢尚硅谷学院以及韩顺平老师在B站公开课 Netty视频教程 Netty demo代码文件 I/O 说NIO之前先说一下BIO&#xff08;Blocking IO&#xff09;,如何理解这个Blocking呢&#xff1f;客户端监听&#xff08;Listen&#xff09;时&#xff0c;Accept是阻塞的&…

一朵华为云,如何做好百模千态?

点击关注 文丨刘雨琦、郝鑫 2005年华为提出网络时代的“All IP”&#xff0c;2011年提出数字化时代的“All Cloud”&#xff0c;2023年提出智能时代的“All Intelligence”。 截至目前&#xff0c;华为的战略升级经历了三个阶段。 步入智能化&#xff0c;需要迎接的困难依然…

分式理想 对偶群 对偶空间

参考文献&#xff1a; Deitmar A. A first course in harmonic analysis[M]. 2005.Ideal quotient | encyclopedia article by TheFreeDictionaryFractional ideal | encyclopedia article by TheFreeDictionaryPontryagin duality | encyclopedia article by TheFreeDictiona…

win10默认浏览器改不了怎么办,解决方法详解

win10默认浏览器改不了怎么办&#xff0c;解决方法详解_蓝天网络 在使用Windows 10操作系统时&#xff0c;你可能会遇到无法更改默认浏览器的情况。这可能是因为其他程序或设置正在干扰更改。如果你也遇到了这个问题&#xff0c;不要担心&#xff0c;本文将为你提供详细的解决…

5.wifi开发【智能家居:上】,开发准备:智能开关灯,智能采集温湿,智能调彩灯

一。wifi智能家居项目开发 【开发准备1】&#xff1a;继电器控制开发 1.智能开关 器件准备&#xff1a;wifi&#xff08;esp8266&#xff0c;使用CP2102&#xff09;继电器 结果&#xff1a; 2.继电器工作原理 &#xff08;1&#xff09;继电器是一种自动电气开关 &#xff…

k8s部署gin-vue-admin框架、gitlab-ci、jenkins pipeline 、CICD

测试环境使用的jenkins 正式环境使用的gitlab-ci 测试环境 创建yaml文件 apiVersion: v1 kind: ConfigMap metadata:name: dtk-go-tiktok-admin-configlabels:app.kubernetes.io/name: dtk-go-tiktok-adminapp.kubernetes.io/business: infrastructureapp.kubernetes.io/run…

[FineReport]安装与使用(连接Hive3.1.2)

一、安装(对应hive3.1.2) 注&#xff1a;服务器的和本地的要同时安装。本地是测试环境&#xff0c;服务器的是生产环境 1、服务器安装 1、下载 免费下载FineReport - FineReport报表官网 向下滑找到 2、解压 [rootck1 /home/data_warehouse/software]# tar -zxvf tomcat…

只是因为上了那个网站,就被公安局没收百万财产!

事件简介 9 月 24 日&#xff0c;有人在某社交网站发文称其为境外公司提供工作&#xff0c;访问国际互联网&#xff0c;被河北承德双桥公安处罚 105.8 万元&#xff0c;国庆之后在当地提起行政诉讼&#xff0c;并寻求律师的帮助&#xff1a; 这篇帖子一经发出&#xff0c;就引…

刘强东再次拿起低价武器,杀入这个万亿市场

京东的低价策略也要在汽车后市场打起来了&#xff1f; 9月26日&#xff0c;途虎养车于港交所挂牌上市当天&#xff0c;京东集团副总裁、京东零售汽车事业部总裁缪钦在朋友圈发文祝贺&#xff0c;同时表示京东养车“所有‘震虎价’商品都比友商低5%”。贺词与战书&#xff0c;同…

中秋特辑——3D动态礼盒贺卡(可监听鼠标移动)

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 「推荐专栏」&#xff1a; ★java一站式服务 ★ ★ React从入门到精通★ ★前端炫酷代码分享 ★ ★ 从0到英雄&#xff0c;vue成神之路★ ★ uniapp-从构建到提升★ ★ 从0到英雄&#xff…

Windows下使用pybind11教程(python调用C++代码)

1. 下载pybind11 gittub中下载&#xff0c;pybind下载后解压 2. C生成库文件 2.1.VS新建空白工程&#xff0c;工程名随意起 - 2.2更改目标文件名和配置类型 - 2.3更改目标文件拓展名 2.4添加include路径和库路径 包含目录中添加刚刚下载好的pybind的include路径以及pyhon的…

将labelme的红色标签改成白色

import numpy as np import os from PIL import Image np.set_printoptions(thresholdnp.inf) 这个函数用于将红色标签图转为白的的标签&#xff08;其实红色的标签表示灰度值为1(也是只有一个通道&#xff09;&#xff09;&#xff0c;但不知道为何会显示出红色 def RedToW…

LeetCode算法二叉树—226. 翻转二叉树

目录 226. 翻转二叉树 代码&#xff1a; 运行结果&#xff1a; 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1]示例 2&#xff1a; 输入…

英语——分享篇——每日100词——501-600

hill——will愿意——他不愿意去小山里 Easter——east东方(熟词)er儿(拼音)——东方的儿子都过复活节 exhibition——ex前夫(熟词)hi嗨(熟词)bition比神(谐音)——展览会上前夫很嗨&#xff0c;比神还开心 chase——vt.追捕&#xff0c;追逐&#xff0c;追赶——cha茶se色——…

DevSecOps 将会嵌入 DevOps

通常人们在一个项目行将结束时才会考虑到安全&#xff0c;这么做会导致很多问题&#xff1b;将安全融入到DevOps的工作流中已产生了积极结果。 DevSecOps&#xff1a;安全正当时 一直以来&#xff0c;开发人员在构建软件时认为功能需求优先于安全。虽然安全编码实践起着重要作…

蓝桥等考Python组别五级002

第一部分:选择题 1、Python L5 (15分) 用“True”和“False”对以下内容进行判断,结果是“False”的是( )。 Python的每行语句前面都不能有空格25 // 2的结果是12Python不能用保留字作为变量名Python的创始人是荷兰人吉多范罗苏姆正确答案:A 2、Python L5 (15分)…

再生之术:遗忘 Root 密码的 CentOS8 Stream 解决方案

文章目录 大魔头 RootGRUB 引导界面BootLoaderGRUB主要功能选择启动的操作系统编辑内核启动参数 进入GRUB 引导界面编辑内核启动参数单用户模式 进入内核编辑界面rd.break进入单用户模式 大魔头 Root 哈哈&#xff0c;你好&#xff01;今天&#xff0c;让我们来聊聊 Linux 系统…
最新文章