vue3与vue2的不同内容
一、main.js入口文件的不同
// 引入的不再是构造函数，引入了一个名为creacteApp的工厂函数
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 创建应用示例对象--->app
const app = createApp(App)
//把组件APP挂载到#app节点上
app.mount('#app')
二、组件中的模板结构允许没有跟标签
三、setup(这个非常重要)
组件中用到的：数据、方法等等，均要配置配置在setup中
setup中的变量不用this.变量获取了 因为本身就在同一个方法中(同一个作用域)
setup返回一个对象，则对象中的属性、方法，在模板中均可以直接使用（重点）
<template><h1>一个人的信息</h1><h2>姓名：{{name}}</h2><h2>年龄：{{name}}</h2><button @click="sayHello">说话</button>
</template><script>
export default {name: 'App',// 此时只是测试一下setup, 暂时不考虑响应式的问题。setup() {// 数据let name = '张三'let age = 18// 方法function sayHello() {alert(`我叫${name}. 我${age}岁了, 你好呀`)}//返回一个对象(常用) 对象里的属性可以直接在模板中使用return {name: name,age: age,sayHello,}}
}
</script>效果：
四、ref函数
作用： 定义一个响应式的数据
语法： const xxx = ref(initValue)
创建一个包含响应式数据的引用对象（reference对象，简称ref对象）
操作数据： xxx.value
模板中读取数据不需要.value， 例如; <div>{{xxx}}</div>
<template><h1>一个人的信息</h1><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h2>职业：{{obj.type}}</h2><h2>职业：{{obj.salery}}</h2><button @click="changeInfo">修改人员信息</button>
</template>
<script>
import {ref} from 'vue'
export default {name: 'App',setup() {// 数据let name = ref('张三')let age = ref(18)let obj = ref({ // 这里对象用的是reftype: '前端工程师',salery: '30k',})// 方法function changeInfo() {name.value = "李四", age.value = 48,obj.value.type = 'UI设计师', // 由于用的是ref 所以修改值才用obj.value.typeobj.value.salary = '60k', // 由于用的是ref 所以修改值才用obj.value.salary}//返回一个对象(常用) 对象里的属性可以直接在模板中使用return {name: name,age: age,obj,changeInfo,}}
}
</script>效果：
每天晚上更新 因为白天上班
相关文章：
基于Python实现的推箱子小游戏
Python贪吃蛇小游戏实现: 推箱子曾经在我们的童年给我们带来了很多乐趣。推箱子这款游戏现在基本上没人玩了，甚至在新一代人的印象中都已毫无记忆了。。。但是，这款游戏可以在一定程度上锻炼自己的编程能力。 运行效果如图所示： 游戏关卡有点…...
【网络安全】安全事件管理处置 — 事件分级分类
专栏文章索引：网络安全 有问题可私聊：QQ：3375119339 目录 一、安全事件分级 二、应急事件分级 三、安全事件分类 四、常见安全事件原因分析 1.web入侵 2.漏洞攻击 3.网络攻击 一、安全事件分级 在对安全事件的应急响应过程中…...
Qt Creator Pro文件添加库和源文件
在项目的pro文件所在的文件夹中添加源文件lib_header ，entityobject 如下图所示： 在 pro 文件里面添加源文件的路径如下所示： 这个英文符号点，表示当前目录，因为这个文件是和pro文件在同一个目录下，所以用…...
python读取xml，添加节点
采用minidom读取， 在dom上创建新节点， dom.createElement(item) 再将节点挂在对应节点下 byCardNo.appendChild(item) 将修改后的dom重新写入，建议换一个文件名再测试，避免覆盖def add(filename):# 创建dom文档dom=minidom.parse(filename)root=dom.documentElementbyCardN…...
记录收集博客园美化代码
记录了一些好看实用的博客园美化主题🌃 初始微改版预览页面点击查看代码 /* 全局字体设定 */ #cnblogs_post_body {font-family: Roboto, sans-serif;color: #333; /* 增强字体颜色对比度，提高可读性 */ }/* 一级标题 */ #cnblogs_post_body h1 {font-size: 30px;font-weigh…...
Linux下的UDEV机制/守护进程
一. Udev机制概念引入 ( 需要在 etc/udev/rules.d/ 下创建设备的相关规则，不然有可能udev机制生成的设备文件不具备可读可写的权限，adb无法成功通过该设备文件访问设备 ) a. 创建文件夹 sudo vim Xiaomi-audroid.rules b. 添加规则 …...
vue3与vue2的不同内容
一、main.js入口文件的不同 // 引入的不再是构造函数，引入了一个名为creacteApp的工厂函数 import { createApp } from vue import ./style.css import App from ./App.vue // 创建应用示例对象--->app const app createApp(App) //把组件APP挂载到#app节点上 …...
疫情可视化(后续)
前言 这是疫情可视化最开始的文章，有需要了解的可前往查看：https://blog.csdn.net/xi1213/article/details/126824752。 本来说有时间就把这个项目完结了的，结果后面一直有事拖着，直到现在十一月份了才搞完。老样子，先…...
刷题记录:牛客NC17193简单瞎搞题
传送门;牛客 题目描述: 一共有 n个数，第 i 个数是 xi xi 可以取[li,ri][li , ri][li,ri] 中任意的一个值。 设 S∑xi2S \sum{{x_i}^2}S∑xi2 ，求 S 种类数。 输入: 5 1 2 2 3 3 4 4 5 5 6 输出: 26 这道题目还是挺有意思的.首先我们看到这道题目想到…...
C++笔记 16 （STL常用容器 - deque）
三. STL常用容器 3.deque容器 3.1 deque容器基本概念 双端数组，可以对头端进行插入删除操作。 deque和vector区别： 1）vector对于头部的插入删除效率低，数据量越大，效率越低； 2）deque相对而言…...
python:基础知识
环境： window11python 3.10.6vscodejavascript、c/c/java/c#基础（与这些语言对比） 注释 一、数据类型 基础六大数据类型，可以使用 type()查看，如下图： 1.1 数字（Number） 支持 整…...
智工教育：每年必考！教师编制这些考点必背！
夸美纽斯的教育思想 （1）著作：《大教学论》，是近代最早的一部教育学著作，是近代独立形态教育学的开端，标志着教育学开始成为一门独立学科。 （2）观点： 对学年制、班级授…...
C++基础——输入输出和缺省参数讲解
上篇文章中，我们学习了C的域名空间，这次继续来学习C的基础知识。 目录 一.C的输入输出 总结： 二.缺省参数 全缺省案例： 部分缺省案例： 一.C的输入输出 例： #include<iostream> using std::co…...
Git使用详细教程
1. cmd面板的常用命令 clear：清屏cd 文件夹名称----进入文件夹cd … 进入上一级目录(两个点)dir 查看当前目录下的文件和文件夹(全拼:directory)Is 查看当前目录下的文件和文件夹touch 文件名----创建文件echo 内容 > 创建文件名----创建文件并写入内容rm 文件名…...
11月新书预告——GNN、深度学习和元宇宙
11月的新书聚焦AI的前沿主题——GNN，另外，还有两本重磅的深度学习好书，也不乏元宇宙、智能驾驶和硬件产品经理等全新技术主题的好书。 1. 图神经网络：基础、前沿与应用 吴凌飞 崔鹏 裴健 赵亮 编著 张钹、韩家炜、…...
YOLOv5 PyQt5 | PyQt5快速入门 | 2/3
YOLOv5 PyQt5 快速入门 2/3 文章目录 YOLOv5 PyQt5 快速入门 2/31. 设计页面2. PyQt5 打开图片3. PyQt5 打开视频4. PyQt5 打开摄像头源码1. 设计页面 首先我们利用QtDesigner来设计一个页面。这个页面比较简单，包含三个PushButton、两个GroupBox、两个Textlabel。 设计好后我…...
Java为什么吧String设计为不可变类？
文章目录那么为什么要这么设计呢？防止被篡改，保证信息数据的安全性不变的对象和值是线程安全的哈希值的唯一性来挺好性能提高常量池的可用性在Java中String类由final修饰，所以不能被继承。被final修饰主要是为了让String成为一个不可变类因为…...
【javaEE】多线程进阶（Part1 锁策略、CAS、synchronized ）
目录前言/补充4. 描述一下线程池的执行流程和拒绝策略有哪些？【面试题！】一、常见锁策略一）乐观锁VS悲观锁二）读写锁VS普通互斥锁三）重量级锁VS轻量级锁四）自旋锁VS挂起等待锁五）公平锁VS非公平…...
deepin（深度）系统下qt5.12.0的程序打包发布到linux云服务器上
做项目时要求，要求做一个用于QT客户端更新提供更新的服务器，服务器弄好啦，要测试一下，在发布时，发现了一些问题，在此记录一下。 这个打包和我的前一篇博客步骤一样，打包可参考https://blog.csd…...
精读大型网站架构：前端架构模块化的方法及困境，自研框架Trick
模块化的方法 网页和网页之间有很多相似或者相同的模块，模块化就是把这些模块抽离并独立管理。而模块化的方法，就是把模块的HTML、CSS和JavaScript文件独立出来，然后通过某种方法关联到使用这些模块的网页上。 在介绍模块化的具体方法之前&…...
用Python实现的这五个小游戏，你真的学会了嘛？
游戏名称1、五子棋 2、雷霆战机 3、贪吃蛇 4、坦克大战 5、俄罗斯方块 开发环境 Python版本：3.6.4 相关模块： pygame模块； 以及一些Python自带的模块。 环境搭建 安装Python并添加到环境变量，pip安装需要的相关模块即可。 一&am…...
linux环境下查询主板、CPU、内存等硬件信息
文章目录前言dmidecode常用参数-t参数测试-q参数测试-s参数测试总结前言 如果是在windows系统下，查询电脑硬件会容易的多，可以通过电脑属性、计算机管理等多种图形化界面中查到，如果安装了各种电脑管家，那查询这类信息就更方便了…...
查看日志.
如果查看比较小的日志文件：cat xxx.log 一般常用：view xxx.log/vi xxx.log查找关键字，如“木叶”：编辑，/木叶，确定，然后按“n”键就能往下找。 如果想往上找，输入:$到最后一行&#…...
vue3 生命周期函数，都改了啥？
vue2到3常用生命周期钩子函数的变化 Ⅰ. 实例化 和 数据初始化 （beforeCreate，created > setup） 1. new Vue 从开始 > 结束 [vue2和3 、两版本区别处] vue2的写法> export default {beforeCreate(){console.log(vue的实例 还没ne…...
基于springboot的医院管理系统
项目描述 临近学期结束，还是毕业设计，你还在做java程序网络编程，期末作业，老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里，你想解决的问题࿰…...
Django + Nginx https部署实战（第一辑）
WebServer和WebAPP 之前对于nginx的了解都只是听说，根本就不知道nginx对于整个网站的作用。经历了数个项目之后，我本人逐渐对nginx有了更深入的了解，也希望把这段经历拿出来分享给大家！ 由于我本人之前接触的都是Python的Django…...
Pycharm+服务器运行代码
Pycharm服务器运行代码服务器的连接与Anaconda环境配置ssh连接安装Anaconda创建虚拟环境安装代码所需的库Pycharm上传代码到服务器服务器的连接与Anaconda环境配置 ssh连接 我使用的是MobaXterm，新建一个会话，选择SSH，输入主机IP地址自己的…...
【Spring】IDEAspring-mybatis的整合----关于配置文件的整合
文章目录spring-mybatis的整合过程步骤1.导包，spring的jar包，mybatis的jar包2.mybatis.xml配置3.spring-mybatis.xml配置4.dao、service层、代码测试spring-mybatis的整合过程步骤 1.导包，spring的jar包，mybatis的jar包 <!--统…...
ssm技术
ssm ssm框架配置 maven项目–》webquickstart pom文件 <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLo…...
MQ消息队列
MQ消息队列 消息队列（Message Queue，简称MQ），指保存消息的一个容器，本质是个队列 消息队列是大型分布式系统不可缺少的中间件，也是高并发系统的基石中间件 使用消息队列还可以实现异步处理 下图便是消息…...
【JVM技术专题】精心准备了一套JVM分析工具的锦囊「JConsole补充篇」
前提概要 本篇文章主要针对于之前本系列文章的补充版，之前落下了Jconsole分析工具，所以为了了却这个遗憾，所以小编又开了这篇文章，主要针对于Jconsole工具进行相关的应用性能分析。 初识JConsole 【Jconsole（Java Moni…...
基于PHP的高效协同办公管理系统
有需要请私信或看评论链接哦 可远程调试 基于PHP高效协同办公管理系统一 介绍 高效协同办公管理系统基于Yii框架开发，数据库mysql，可以稳定用于商业以及门户级的开发和使用。 二 系统功能 用户 1 办公门户(邮件/日志/汇报/日程/信息中心/通知公告/微博…...
第十四届蓝桥杯（Web应用开发）模拟赛1期-大学组
数据类型检测 请看这篇数据类型检测 渐变色背景生成器 html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name&…...
【遥感科学】遥感科学绪论
第一章 绪论 本系列适用于梅安新老师的遥感导论复习，也可以作为遥感领域的快速入门文章 一、遥感的基本概念 啥子是遥感？借用童庆禧院士的理解，那就是欲穷千里目，更上一层楼，遥感可以看做人的眼睛或者感知的延伸&…...
Tensorflow图像识别 Tensorflow手写体识别（二）
资源介绍 我们从 MNIST handwritten digit database, Yann LeCun, Corinna Cortes and Chris Burges 这条链接（MNIST官网）中下载好数据集，如下： 下载下来以后整理成包含四个压缩包的文件MNIST_data（不要解压&#x…...
盘点上海IB国际学校，你会选哪一所呢？
之前，小编给大家盘点了上海热门的AP学校和Alevel学校，同时也介绍了国际课程的具体情况；今天就和大家聊聊上海的IB国际学校。IB即是国际文凭组织IBO(International Baccalaureate Organisation)为全球学生开设从幼儿园到大学预科的课程&#x…...
Android ViewModel使用模板
1，创建ViewModel类 //MainViewModel.kt import androidx.lifecycle.LiveData import androidx.lifecycle.MutableLiveData import androidx.lifecycle.ViewModel import com.example.myapplication.entity.Banner import com.example.myapplication.network.BaseRes…...
python获取文件路径
文件：allpath_parameter.py # 获取当前目录路径 # current_dir os.getcwd() # 获取当前目录路径 realpath00 os.path.abspath(os.path.join(os.path.dirname(os.path.split(os.path.realpath(__file__))[0]), .)) print(realpath00)# 获取当前目录的上级目录路…...
JavaScript云LIS系统概述 前端框架JQuery+EasyUI+Bootstrap医院云HIS系统源码 开箱即用
云LIS系统概述JavaScript前端框架JQueryEasyUIBootstrap医院云HIS系统源码 开箱即用 云LIS（云实验室信息管理系统）是一种结合了计算机网络化信息系统的技术，它无缝嵌入到云HIS（医院信息系统）中，用于连…...
输入法重大漏洞曝光，仅华为幸免，近10亿用户受影响
近日，Citizenlab研究人员调查了多家厂商的输入法应用安全漏洞并报告称：除华为以外，百度、荣耀、科大讯飞、OPPO、三星、腾讯、Vivo和小米等供应商的九款应用程序中有八款均存在安全漏洞。 随着用户规模的不断增长，云输入法应用的…...
用html画一个四叶草
<!DOCTYPE html> <html lang"en" > <head> <meta charset"UTF-8"> <title>四叶草</title> <link href"" rel"stylesheet"> <link rel"stylesheet" href"css/style.css&q…...
汕头联想 ibm x3500 M5服务器上门维修记录
汕头联想服务器现场检修；汕尾IBM服务器故障维修；揭阳戴尔服务器维修；汕头ERP服务器维修；潮阳地区各种服务器故障维修；各类服务器主板齐全； 分享一例从东莞到汕头某染料厂维修ibm system x3500 M5服务器的真…...