vue3学习(二)

前言

       上一篇分享了vue的基础指令,这篇记录下vue3的核心内容,也是自己的学习笔记,可能有些核心还不全,大佬请略过。


一、核心内容

       分享这个之前,先声明下,我这里是用的脚手架的写法,分享的讲解截图是vue3js暴露的写法,刚好可以对比理解,我也是这样的,学习的是暴露的写法,自己code的示例是脚手架的写法,与大家共同进步。
先上我自己code的示例代码:(还是接着之前webstrom创建的项目code)
App.vue

<template><HelloWorld v-bind:msg="msg"/><!-- v-model更多用法 --><input type="text" v-model.number.lazy="inNum"><!-- 计算属性 --><p ref="msgTitle">msg:{{ msg }}</p><p>reversedMsg:{{ reversedMsg }}</p><p>doubleNum:{{ doubleNum }}</p><!-- watch监听 --><ul><li>name:{{ user.name }}</li><li>age:{{ user.age }}</li><li>school{{ user.school }}</li></ul><input type="text" @change="changeUserName($event.target.value)" v-model="user.name"><!-- 当前实例属性 --><p><span ref="aaa">aaa ref</span></p><button @click="changeMsg()">修改你好</button></template><script setup>
import {ref, computed, watch, getCurrentInstance, nextTick} from 'vue'
import HelloWorld from './components/HelloWorld.vue'// ref创建响应式数据
const msg = ref('Welcome to Your Vue.js App')
const inNum = ref(0)const user = ref({name: ref('John'),age: ref(25),school: ref('MIT')
})// methods
function changeUserName(newName) {user.value.name = newName;
}
function changeMsg(){console.log("---修改msg---");this.msg = "你好";//直接proxy.$refs.msgTitle可能慧出现页面还没有渲染完的情况//console.log("----",proxy.$refs.msgTitle)//使用nextTick,迭代页面渲染完,再取里面的内容proxy.$nextTick(function (){console.log("--msgRefHtml",proxy.$refs.msgTitle)})
}// computed
const reversedMsg = computed(() => {return msg.value.toUpperCase().split(" ").reverse().join(" ");
})const doubleNum = computed(() => {return inNum.value * 2;
})// watch
watch(inNum.value, (newVal, oldVal) => {console.log('newVal:', newVal, 'oldVal:', oldVal);
})watch(user.value, (newUser) => {console.log('new name:', newUser.name);
}, {deep: true, immediate: true})//vue3.2.0新增getCurrentInstance,获取当前实例
const dint = getCurrentInstance();
console.log(dint)//这种方式只能在开发环境下使用,生产环境下的ctx将访问不到
const {ctx} = getCurrentInstance();
console.log(ctx.$refs)//此方法在开发环境以及生产环境下都能放到组件上下文对象(推荐)
const {proxy} = getCurrentInstance();
console.log(proxy.$refs)//nextTick
nextTick(() =>{//var msgTitleRef = proxy.$refs.msgTitle;var msgRefHtml = proxy.$refs.msgTitle;console.log("--msgRefHtml",msgRefHtml)
})</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

计算属性

在这里插入图片描述

监视器

在这里插入图片描述

实例方法

在这里插入图片描述

模版

在这里插入图片描述

生命周期

在这里插入图片描述
注意:
beforeCreate并不是字面意思上的在创建前,具体还是看下vue官网给出的生命周期的解释图:

在这里插入图片描述

二、脚手架写法注意

       code的示例代码,大家有没有注意看<script后面跟了一个setup,这个实际就是与生命周期的steup(组合式API)对应的。


总结

  • vuejs暴露的写法基本会html,js就可以上手干了
  • 脚手架写法才是新阶段的开始
           就是笔记备忘,希望跟大家一起进步,uping!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/842826.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Springboot项目——网页版本五子棋

网页五子棋&#xff1a;本项目简单实现了网页版本的五子棋对战功能&#xff0c;同时会根据用户的天梯分数来匹配&#xff0c;可供多位用户同时提供对战功能。大致可分为三个模块&#xff0c;用户模块&#xff0c;匹配模块&#xff0c;对战模块&#xff0c;下面重点介绍以下三个…

Json读写文件工具类封装

一、概述 在json的读写中主要涉及两种数据类型&#xff0c;字符串和json文件&#xff0c;读取后的数据主要用于传参&#xff0c;由于json文件读取到的数据无法进行直接传参&#xff0c;参数化的数据格式一般为元组格式&#xff0c;所以文件类型的格式读取后还要再做数据类型转…

如何进行数据要素制度建设?

“让数据放心‘供’出来&#xff0c;让更多数据‘活’起来&#xff0c;让数据安全‘动’起来。”11月10日&#xff0c;国家数据局党组书记、局长刘烈宏出席北京数据基础制度先行区启动会议并作重要讲话。 这是刘烈宏履新国家数据局局长以来&#xff0c;首次在公开场合就数据要…

磁力搜索器,磁力链接,磁力狗

磁力链接是一种特殊的下载链接&#xff0c;磁力链接可以理解为一个文件识别码&#xff0c;而并非具体的资源地址&#xff0c;下载软件需要拿着这个识别码去整个互联网(DHT网络)去寻找持有该资源的用户(节点)&#xff0c;如果找到则可以进行传输下载。一般年代越久远的磁力链接下…

腾盾科创无人机亮相第二十四届新疆农机博览会引发观展热潮

5月25日&#xff0c;第二十四届新疆农业机械博览会、2024“一带一路”智慧农业大会&#xff08;以下简称新疆农机博览会&#xff09;在新疆国际会展中心开幕。展会现场多种农牧业的新装备、新技术集中亮相&#xff0c;其中首次在新疆农机博览会上亮相的腾盾科创无人机产品引发观…

C语言——基于stm32G030的温湿度传感器项目实验

一、功能要求&#xff1a; 设备自检功能&#xff1a; 设备上电自检&#xff08;检查传感器采集是否正常&#xff0c; DHT11有存在响应&#xff0c; 可以自检使用&#xff0c; &#xff09;自检通过后&#xff0c;由串口打印设备状态信息。 自动控制功能&#xff1a; 进入自动控…

Clickhouse MergeTree 存储引擎架构总结——Clickhouse 架构篇(二)

文章目录 前言MergeTree存储引擎的三大特点MergeTree 的数据组织MergeTree的文件组织数据文件、元数据文件、索引文件和其他文件分区数据库和表 索引与事务数据库存储引擎的对比存储引擎如何影响查询速度MergeTree存储引擎的工作过程 前言 存储引擎是ClickHouse非常重要的一个…

小易大数据:大数据报告查询领域的黑马,这些优势让你无法忽视!

随着大数据技术被运用到各行各业&#xff0c;风控领域也不例外&#xff0c;形成了基于大数据技术的大数据信用&#xff0c;也就是我们常说的大数据报告或者网贷大数据&#xff0c;在众多的查询平台中&#xff0c;小易大数据平台在市面上是比较受欢迎的&#xff0c;那在小易平台…

windows内存管理

一 windows系统的内存管理涉及哪些 1.1 虚拟内存管理机制 windows操作系统使用虚拟内存技术&#xff0c;将磁盘文件&#xff0c;通过映射对象&#xff08;存储在物理内存&#xff09;关联&#xff0c;映射到虚拟内存作为文件试图。即用户操作"虚拟内存中File View Objec…

Spring AOP:使用Spring AOP进行切面编程的实例,解释不同类型的advice(advice类型)以及何时使用它们

I. Spring AOP 简介 AOP的含义和用途: AOP,全称Aspect Oriented Programming,即面向切面编程,是一种编程范式,与面向对象编程(OOP)并列。AOP是一种处理程序中横切关注点的技术,这些横切关注点包括日志记录,安全控制,缓存,事务管理等。 AOP提供了在软件组件的行为…

C-数据结构-树状存储基本概念

‘’’ 树状存储基本概念 深度&#xff08;层数&#xff09; 度&#xff08;子树个数&#xff09; 叶子 孩子 兄弟 堂兄弟 二叉树&#xff1a; 满二叉树&#xff1a; 完全二叉树&#xff1a; 存储&#xff1a;顺序&#xff0c;链式 树的遍历&#xff1a;按层遍历&#xff0…

Kibana(一张图片胜过千万行日志)

Kibana&#xff08;一张图片胜过千万行日志&#xff09; Kibana是一个开源的分析和可视化平台&#xff0c;设计用于和Elasticsearch一起工作。 你用Kibana来搜索&#xff0c;查看&#xff0c;并和存储在Elasticsearch索引中的数据进行交互。 你可以轻松地执行高级数据分析&a…

LangChain 0.2 - 基于 SQL 数据构建问答系统

本文翻译整理自&#xff1a;Build a Question/Answering system over SQL data https://python.langchain.com/v0.2/docs/tutorials/sql_qa/ 文章目录 一、项目说明⚠️ 安全说明⚠️架构 二、设置三、Chains1、将问题转换为 SQL查询2、执行 SQL查询3、回答问题 四、Agents1、S…

TiDB学习3:TiKV

目录 1. TiKV架构和作用 2. RocksDB 2.1 写入 2.2 查询 2.3 Column Families列簇 3. 分布式事务 3.1 事务流程 3.2 分布式事务流程 3.3 MVCC 4. Raft与Multi Raft 4.1 Raft日志复制 4.2 Raft Leader选举 5. TiKV- 读写 5.1 数据的写入 5.2 数据的读取ReadIndex …

夏日防晒笔记

1 防晒霜 使用方法&#xff1a;使用前上下摇晃瓶身4至5次&#xff0c;在距离肌肤10至15cm处均匀喷上。如在面部使用&#xff0c;请先喷在掌心再均匀涂抹于面部。排汗量较多时或擦拭肌肤后&#xff0c;请重复涂抹以确保防晒效果。卸除时使用普通洁肤产品洗净即可。

leetcode-主持人调度(二)-110

题目要求 思路 1.先将开始时间和结束时间拆分放到两个数组中进行排序 2.如果开始的时间小于结束时间&#xff0c;说明目前没有空闲的人&#xff0c;需要增加人&#xff0c;如果大于等于&#xff0c;说明有人刚结束了主持&#xff0c;可以进行新的主持了&#xff0c;变更到下一…

winform中通过PictureBox控件显示图像的代码

using System; using System.Drawing; using System.Windows.Forms; namespace DisplayImageExample { public partial class Form1 : Form { private PictureBox pictureBox1 new PictureBox(); public Form1(){InitializeComponent();// 初始化PictureBox控件pictureBox1.S…

驱动开发的分离与分层

1.概念 1.1.分层 分层就是将一个复杂的工作分成了多层, 分而做之,降低难度。在驱动里面&#xff0c;每一层只专注于自己的事情, 系统已经将其中的核心层和事件处理层写好了&#xff0c;我们只需要来写硬件相关的驱动层代码即可。可能驱动里面大家都不是很熟悉&#xff0c;比如…

ubuntu18.04 报错:fatal error: execution

一、问题描述 在ubuntu18.04上编译Faster-lio 报错&#xff1a; fatal error: execution: 没有那个文件或目录#include <execution> 二、解决方法 需要将g编译器更新到9.0 sudo add-apt-repository ppa:ubuntu-toolchain-r/test sudo apt update sudo apt install g…

深度学习-序列模型

深度学习-序列模型 1. 定义2. 应用领域3. 典型模型4. 技术细节5. 总结 序列模型是一种处理序列数据的机器学习模型&#xff0c;其输入和/或输出通常为序列形式的数据。以下是关于序列模型的详细解释&#xff1a; 1. 定义 序列模型是输入输出均为序列数据的模型&#xff0c;它…