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

Vue3 学习

news 2026/3/31 12:02:12

基础

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

FreeRTOS数据通信避坑指南：为什么我的MessageBuffer总是接收失败？

FreeRTOS消息缓冲区实战&#xff1a;从接收失败到高效通信的深度解析 第一次在FreeRTOS项目中使用MessageBuffer时&#xff0c;我遇到了一个令人抓狂的问题——明明发送端显示消息已成功写入&#xff0c;接收端却总是返回0字节。调试器显示缓冲区非空&#xff0c;但xMessageBuf…...

编程新知 2026/3/31 9:34:07

Mojo加速Python科学计算：如何在72小时内将AI推理速度提升8.6倍（附完整可运行代码）

第一章&#xff1a;Mojo与Python混合编程概述Mojo 是一种为 AI 系统量身打造的现代系统编程语言&#xff0c;兼具 Python 的易用性与 C/C 的执行效率。它原生兼容 Python 生态&#xff0c;允许开发者在同一个项目中无缝调用 Python 模块、复用现有 NumPy/Torch 代码&#xff0c…...

编程新知 2026/3/31 8:45:48

stealth.js全解析：40+反检测补丁的配置与优化技巧

Stealth.js全解析&#xff1a;40反检测补丁的配置与优化技巧 在当今的Web自动化领域&#xff0c;反检测技术已成为开发者必须掌握的核心技能之一。无论是数据采集、自动化测试还是其他需要模拟真实用户行为的场景&#xff0c;如何让脚本"隐形"都是决定成败的关键因素…...

编程新知 2026/3/31 8:27:40

FORK客户端与GitHub高效协作指南

1. 为什么选择FORK客户端与GitHub协作 作为一个常年混迹在代码仓库的老司机&#xff0c;我试过几乎所有主流的Git图形化工具。FORK客户端给我的第一印象就是——清爽。没有复杂的界面&#xff0c;没有多余的功能&#xff0c;就像它的名字一样&#xff0c;专注做好代码分支管理…...

编程新知 2026/3/31 7:29:17

嵌入式系统中SipHash轻量级哈希实现与优化

1. SipHash 嵌入式底层实现技术解析SipHash 是一种基于加法-循环-异或&#xff08;Add-Rotate-Xor, ARX&#xff09;结构的伪随机函数族&#xff0c;专为短输入消息设计&#xff0c;在嵌入式系统中广泛用于哈希表键值保护、拒绝服务&#xff08;DoS&#xff09;防护、安全计数器…...

编程新知 2026/3/31 3:46:42

从YOLO到A*：手把手教你用PyTorch和OpenCV搭建一个简易的自动驾驶避障仿真器

从YOLO到A*&#xff1a;用PyTorch和OpenCV构建自动驾驶避障仿真器 想象一下&#xff0c;你正坐在一辆自动驾驶汽车里&#xff0c;车辆能够自动识别前方的行人、车辆和障碍物&#xff0c;并规划出安全的行驶路径。这种看似科幻的场景&#xff0c;如今正逐渐成为现实。本文将带你…...

编程新知 2026/3/31 2:42:04

STM32G4基本定时器TIM6/TIM7入门：从CubeMX配置到1秒精准中断（附代码）

STM32G4基本定时器实战&#xff1a;用CubeMX配置TIM6实现精准秒闪LED 第一次拿到STM32G4开发板时&#xff0c;最让人兴奋的莫过于让板载LED按照自己的意愿闪烁。这看似简单的需求&#xff0c;却是理解微控制器定时器系统的绝佳切入点。本文将带您从零开始&#xff0c;通过STM32…...

编程新知 2026/3/31 0:38:46

linux-系统函数

Linux 系统函数详解 Linux 系统函数是用户程序与内核交互的底层接口&#xff0c;通过系统调用&#xff08;syscall&#xff09;实现。以下是核心分类及典型函数&#xff1a; 1. 文件操作函数 #include <fcntl.h> int open(const char *pathname, int flags, mode_t mode)…...

编程新知 2026/3/31 0:34:45

KV260视觉AI套件到手后，我跳过了图形界面，直接用SSH搞定了网络配置（附详细命令）

KV260视觉AI套件极简配置指南&#xff1a;从串口到SSH的全命令行实战 拿到KV260开发板的第一天&#xff0c;我就决定抛弃图形界面——毕竟在嵌入式开发领域&#xff0c;真正的效率永远来自命令行。本文将分享如何通过纯命令行完成从开箱到网络配置的全过程&#xff0c;包括串口…...

编程新知 2026/3/30 23:37:07

Proteus仿真C51单片机：用汇编实现一个简易的脉冲计数器（附完整代码和电路图）

Proteus仿真C51单片机&#xff1a;用汇编实现一个简易的脉冲计数器&#xff08;附完整代码和电路图&#xff09; 当你第一次接触单片机编程时&#xff0c;可能会被各种寄存器、中断和端口配置搞得晕头转向。今天&#xff0c;我们就用一个实实在在的脉冲计数器项目&#xff0c;带…...

编程新知 2026/3/30 23:22:30