当前位置： 首页 > news >正文

Vue3 学习

news 2026/2/10 12:49:07

基础

js:https://www.bilibili.com/video/BV15T411j7pJ/?spm_id_from=333.337.search-card.all.click&vd_source=9747207be61edfe4ec62226fc79b3589
官方文档： https://cn.vuejs.org/     版本之间差异在关于---》版本发布  https://cn.vuejs.org/about/releases.html   
vue3支持选项式和组合式 ，选项式基本等于vue2
vue文件：国内镜像： https://unpkg.zhimg.com/vue@3.3.4/dist/vue.global.js

  工具 vscode :安装  Preview on Web Server     Live server   volar（禁用掉vue2 的vetur）

   Chrome安装插件 vue-devtools.crx
Vue引入的验证 
   1)  控制带输入Vue ,就会出现这个全局变量的信息
   2)也可以使用帮助文档API中验证，比如在控制台输入Vue.version
入门：{{}}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="vue3-20230826.js"></script><title>Document</title>
</head>
<body>{{10+20}}<div id="box">{{ 10+20 }}</div><script>Vue.createApp().mount("#box")   //虽然上面引入了vue，但是需要再启动Vue，//让全局变量Vue创建APP,并且指明应用 挂在哪里,也就是去管理哪里//因为是id="box",所以前面要加#</script>
</body>
</html>

并且支持多个挂载，也就是还可以再写一行Vue.createApp().mount("#box2")

但是不能挂载 body节点，一般用div

引入变量

    在createApp()中增加

      

 <script>Vue.createApp({data:function(){}}).mount("#box1")</script>

 data:function(){ }  zai ES6中简写为

 <script>Vue.createApp({data(){}}).mount("#box1")</script>

在data()重定义变量及返回值

  <script>Vue.createApp({data(){return{myname:"i7i8i9"     //实际是一个变量，后续可以叫做状态}}}).mount("#box1")

为了方便在控制台查看，也可以定义一个全局变量

    <script>var app= Vue.createApp({data(){return{myname:"i7i8i9"}}}).mount("#box1")</script>

这样就有了app这个变量，可以在控制台输入app.myname查看和调试

原理

vue2原理： 

用js原生代码模拟，创建一个obj对象，js提供了defineProperty来感知变量操作

缺点是只针对单个对象的属性，要实现其他属性，只能嵌套循环，不能对数组等操作，故需要hack等技术包装

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>var obj={}Object.defineProperty(obj,"myname",{get(){console.log("get")},set(value){console.log("set",value)}})//可以在控制台利用obj.myname尝试</script></body>
</html>

测试：

再加一个对dom元素操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="box"></div><script>var obj={}Object.defineProperty(obj,"myname",{get(){console.log("get")},set(value){console.log("set",value)box.innerHTML=value}})//可以在控制台利用obj.myname尝试</script></body>
</html>

效果

vue3原理

    如果浏览器支持ES6,  使用ES6的proxy,否则使用vue2拦截原理

   上文只能拦截对象的制定属性，而下文则可以拦截对象本身，也就不用限定对象

<body><div id="box"></div>hello<script>// Ed6  Proxy  代理var obj={}var vm=new Proxy(obj,    //vm就是代理人{get(obj,key){console.log("get方法")return(obj[key])},set(obj,key,value){console.log("set方法")obj[key]=valuebox.innerHTML=value}})</script>
</body>

 

模版语法

相关文章：

Vue3 学习

基础 js:https://www.bilibili.com/video/BV15T411j7pJ/?spm_id_from333.337.search-card.all.click&vd_source9747207be61edfe4ec62226fc79b3589 官方文档&#xff1a; https://cn.vuejs.org/ 版本之间差异在关于---》版本发布 https://cn.vuejs.org/about/release…...

编程日记 2023/9/1 15:14:11

Error obtaining UI hierarchy Error taking device screenshot: EOF/NULL 解决办法

RT&#xff1a;Error obtaining UI hierarchy Error taking device screenshot: EOF/NULL 解决办法 关于monitor开发神器我就不多说了&#xff0c;但是假如我们在开发中遇到如上问题该怎么处理呢&#xff1f;别慌下面会有方法&#xff0c;不过不是对任何机型都有效&#xff0c…...

编程日记 2023/9/1 15:13:10

Java框架之王：Spring的崛起与进化

在Java世界中&#xff0c;Spring框架无疑已经成为了一个传奇。它为开发者提供了强大的工具和丰富的功能&#xff0c;使得构建高质量、可扩展的Java应用程序变得轻松便捷。本文将带您领略Spring的魅力&#xff0c;以及它在过去几年中的崛起和进化。 一、Spring的崛起 Spring框…...

编程日记 2023/9/1 15:12:08

【位运算】位运算常用技巧总结

目录 前言 一.常见的小问题 1.给定一个数n,确定它的二进制表示中的第x位是0还是1 2.给定一个数n&#xff0c;将它的二进制表示中的第x位修改成1 3.给定一个数n&#xff0c;将它的二进制表示中的第x位修改成0 4.给定一个数n&#xff0c;提取它的二进制表示中最右侧的1&…...

编程日记 2023/9/1 15:11:07

【STM32】IIC使用中DMA传输时 发送数据总少一个的问题

问题描述 在使用STM32 I2C数据发送过程中&#xff0c;发现每轮实际发送出去的数据总比在DMA配置中设定的传输数据个数要少一个。比方说&#xff1a;DMA配置里设定的传输数据个数是10个&#xff0c;结果发现在总线上只能发出9个&#xff0c;经过进一步发现是少了最后一个数据。…...

编程日记 2023/9/1 15:10:06

记录layui数据表格使用文件上传按钮

一、前言 虽然用到这种的情况不多&#xff0c;但是还是记录下 二、相关代码 <!DOCTYPE html> <html> <head><meta http-equiv"Content-Type" content"text/html;charsetutf-8"/><meta name"renderer" content&quo…...

编程日记 2023/9/1 15:09:05

c++之枚举

1、背景 在开发代码的过程中&#xff0c;vector类型数组a的index取了一个枚举值CTR&#xff0c;eg&#xff1a;a[CTR]&#xff0c;刚开始以为是map类型&#xff0c;后面看不是&#xff0c;简单的看了下c的enum类型&#xff0c;原来enum按顺序默认为数字。 2、enum简介 2.1、…...

编程日记 2023/9/1 15:08:04

LeetCode 热题 100（七）：105. 从前序与中序遍历序列构造二叉树、14. 二叉树展开为链表

题目一&#xff1a; 105. 从前序与中序遍历序列构造二叉树https://leetcode.cn/problems/construct-binary-tree-from-preorder-and-inorder-traversal/ 思路&#xff1a;依据前序遍历的根左右和中序遍历的左根右&#xff0c; 且根左长度&#xff1d;左根 代码&#xff1a; …...

编程日记 2023/9/1 15:07:03

机器学习笔记 - 在表格数据上应用高斯混合GMM和网格搜索GridSearchCV提高分类精度的机器学习案例

1、需求及数据集说明 这是一项二分类任务，评估的是分类准确性（正确预测的标签百分比）。训练集有1000个样本，测试集有9000个样本。你的预测应该是一个9000 x 1的向量。您还需要一个Id列（1到9000），并且应该包括一个标题。格式如下所示： Id,Solution 1,0 2,1 3,1 ... 900…...

编程日记 2023/9/1 15:06:02

【UE 材质】模型部分透明

材质节点如下&#xff0c;这里简单解释一下。首先通过“Mask”节点将"Texture Coordinate" 节点中的“G”通道分离出来&#xff0c;然后通过“if”节点进行判断&#xff0c;当值小于0.5时为透明&#xff0c;当颜色不小于5时为不透明。可以通过一个参数来控制模型透明…...

编程日记 2023/9/1 15:04:59

Web3 社交平台如何脱颖而出？我们和 PoPP 聊了聊

能够颠覆 Web2 传统模式的社交产品有着怎样的特征&#xff1f;PoPP 作为专注于 Web3 的私域流量变现平台&#xff0c;为开发者和用户提供了社交产品发展的新路径&#xff0c;让社区用户充分实现互动交流&#xff0c;着力于创作内容的激励与变现。事实上&#xff0c;面对 Web3 社…...

编程日记 2023/9/1 15:03:57

【Android】ARouter新手快速入门

什么是ARouter ARouter是阿里巴巴推出的一款android界面路由框架 ARouter解决的核心问题是什么 在大型的模块化项目中&#xff0c;一个模块&#xff0c;往往无法直接访问到其它模块中的类&#xff0c;必须通过其它方式来完成模块间的调用 ARouter的核心功能在于&#xff0c…...

编程日记 2023/9/1 15:02:57

基于VUE3+Layui从头搭建通用后台管理系统（前端篇）十一：通用表单组件封装实现

一、本章内容 本章实现通用表单组件，根据实体配置识别实体属性，并自动生成编辑组件，实现对应数据填充、校验及保存等逻辑。 1. 详细课程地址： 待发布 2. 源码下载地址： 待发布 二、界面预览 三、开发视频 3.1 B站视频地址：...

编程日记 2023/9/1 15:01:56

Oracle Scheduler学习

参考文档&#xff1a; Primary Note: Overview of Oracle Scheduler (Doc ID 1485539.1) Oracle Database Administrators Guide 12c Release 1 (12.1) E17636-21 Chapter(30) Administering Oracle Scheduler Examples of Using the Scheduler http://docs.oracle.com/cd/E166…...

编程日记 2023/9/1 15:00:53

用户体验地图是什么？UX设计心得分享

大家好&#xff0c;我是设计师l1m0身。本篇文章是关于UX设计中的用户体验地图。 对于新手设计师来说&#xff0c;建立用户体验地图会有一些难度。本篇文章中&#xff0c;我会以简单、易懂的语言分享UX设计师如何制作用户体验地图&#xff0c;希望对你的日常项目体验提升有所帮…...

编程日记 2023/9/1 14:59:52

vue3动态路由警告问题

{ path: "/:pathMatch(.*)*", // 必备 component: () > import("/views/error/404.vue"), }, 路由里添加...

编程日记 2023/9/1 14:58:50

17 Linux之大数据定制篇-Shell编程

17 Linux之大数据定制篇-Shell编程 文章目录 17 Linux之大数据定制篇-Shell编程17.1 Shell编程简介17.1.1 为什么要学习Shell编程17.1.2 Shell是什么17.1.3 执行Shell脚本 17.2 Shell的变量17.2.1 Shell变量介绍17.2.2 设置环境变量17.2.3 位置参数变量17.2.4 预定义变量 17.3 …...

编程日记 2023/9/1 14:57:48

SpringBoot集成WebSocket

SpringBoot集成WebSocket 项目结构图 项目架构图 前端项目 socket.js 注意前端这里的端口是9000, 路劲是ws开头 function createScoket(token){var socket;if(typeof(WebSocket) "undefined") {console.log("您的浏览器不支持WebSocket");}else{var ho…...

编程日记 2023/9/1 14:56:46

Linux服务器部署JavaWeb后端项目

适用于&#xff1a;MVVM前后台分离开发、部署、域名配置 前端&#xff1a;Vue 后端&#xff1a;Spring Boot 这篇文章只讲后端部署&#xff0c;前端部署戳这里 目录 Step1&#xff1a;服务器上搭建后端所需环境1、更新服务器软件包2、安装JDK83、安装MySQL4、登录MySQL5、修…...

编程日记 2023/9/1 14:55:45

原生小程序 wxs 语法（详细）

WXS WXS&#xff08;WeiXin Script&#xff09;是内联在 WXML 中的脚本段。通过 WXS 可以在模版中内联少量处理脚本&#xff0c;丰富模板的数据预处理能力。另外&#xff0c; WXS 还可以用来编写简单的 WXS 事件响应函数。 从语法上看&#xff0c; WXS 类似于有少量限制的 Java…...

编程日记 2023/9/1 14:54:44

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/12/9 21:15:58

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2026/2/7 13:17:38

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2026/2/7 8:31:55

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2026/2/5 14:15:13

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/8/11 1:05:59

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2026/2/4 16:17:25

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

【LeetCode】3309. 连接二进制表示可形成的最大数值（递归|回溯|位运算）

LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 题目描述解题思路Java代码 题目描述 题目链接&#xff1a;LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...

编程新知 2025/7/5 18:01:05

TSN交换机正在重构工业网络，PROFINET和EtherCAT会被取代吗？

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

编程新知 2026/1/26 5:57:43

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

编程新知 2026/2/2 11:58:16