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

Vue3 学习

news 2026/5/22 3:14:15

基础

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

UPGEN Lighting HDRP：HDRP光照优化与自动化配置方案

1. 这不是又一个“开箱即用”的灯光插件&#xff0c;而是HDRP光照工程的系统性减负方案我第一次在项目里把UPGEN Lighting HDRP拖进Assets文件夹时&#xff0c;并没指望它能解决什么大问题——毕竟Unity官方HDRP模板里自带的Light Explorer、Light Probe Group、Reflection Pro…...

编程新知 2026/5/22 2:19:27

工具调用优化：减少API延迟对Agent性能的影响

《工具调用优化全指南：彻底解决API延迟拖累大模型Agent性能的痛点》 副标题：从原理到落地，覆盖缓存、并行、调度、轻量化改造全链路可复现方案 第一部分：引言与基础 1.1 摘要/引言 你有没有遇到过这种场景：辛辛苦苦开发的智能Agent功能非常强大，能查订单、搜资料、算数…...

编程新知 2026/5/22 2:15:04

商业设计复盘｜法式肉制品包装升级逻辑：如何用视觉解决进口品牌本土化痛点

&#x1f4d6; 前言&#xff1a;肉制品行业的视觉同质化困境在快消品商业设计领域&#xff0c;高端肉制品、法式肉制品一直是极具代表性的细分赛道。随着消费升级&#xff0c;用户选购逻辑从“看价格、看食材”转变为看视觉、看透明化、看品牌调性。但纵观目前国内市场&#xf…...

编程新知 2026/5/22 1:44:23

网页端嵌入 Agent 对接前端方案

本文将深入探讨「网页端嵌入AI」的核心概念与实战技巧&#xff0c;帮助你快速掌握关键要点。让我们开始吧&#xff01; 网页端嵌入 Agent 对接前端方案 1. 引言 当前前端项目正从被动展示走向主动交互&#xff0c;AI Agent 嵌入网页端可自动化 UI 操作、优化布局并辅助编码。…...

编程新知 2026/5/22 1:36:14

2026网盘横评：国民级云盘领衔，这几款备选也值得一看

前言作为长期接触AI资源、代码项目、大文件存储的从业者&#xff0c;日常高频使用各类网盘。很多朋友都会纠结主流网盘该如何选择&#xff0c;不同产品的存储能力、传输表现、功能适配差距明显。本文摒弃夸张测评&#xff0c;以客观分享的视角&#xff0c;从传输、存储、功能、…...

编程新知 2026/5/22 1:22:00

RAG 检索到了还是答错：从一个线上事故讲透 RAG 数据工程全链路

一个合同问答系统的线上事故 某企业法务团队上线了一套合同问答系统。用户问&#xff1a;“渠道商季度返点的计算条件是什么&#xff1f;” 系统返回了三段参考文档&#xff0c;生成了一段看起来完整的回答。法务审核时发现&#xff1a;引用的是 2024 年旧版渠道政策&#xf…...

编程新知 2026/5/22 1:00:34

终极歌词神器：5分钟学会用LDDC为你的音乐库添加完美歌词

终极歌词神器&#xff1a;5分钟学会用LDDC为你的音乐库添加完美歌词 【免费下载链接】LDDC 简单易用的精准歌词(逐字歌词/卡拉OK歌词)下载匹配工具|A simple and user-friendly tool for downloading and matching precise lyrics (word-by-word lyrics/Karaoke lyrics) 项目…...

编程新知 2026/5/21 23:30:47

如何用 polyfill-iconv 处理中文编码？GBK、BIG5、UTF-8 转换终极指南

如何用 polyfill-iconv 处理中文编码&#xff1f;GBK、BIG5、UTF-8 转换终极指南 【免费下载链接】polyfill-iconv This component provides a native PHP implementation of the php.net/iconv functions. 项目地址: https://gitcode.com/gh_mirrors/po/polyfill-iconv …...

编程新知 2026/5/21 23:24:41

2026年双语论文降AI攻略：中英文双语毕业论文AIGC超标免费4.8元达标完整指南

2026年双语论文降AI攻略&#xff1a;中英文双语毕业论文AIGC超标免费4.8元达标完整指南 双语论文降AI这件事&#xff0c;踩过坑的人都知道&#xff1a;工具选错、操作方式错&#xff0c;钱白花还耽误时间。 直接给结论&#xff1a;嘎嘎降AI&#xff08;www.aigcleaner.com&am…...

编程新知 2026/5/21 20:58:16

软考高项案例分析14：项目配置、变更管理

软考高项案例分析14：项目配置、变更管理 一、配置管理 1. 配置管理活动有哪些 制订配置管理计划 配置项识别 配置项控制 配置状态报告 配置审计 配置管理回顾与改进 2. 基线配置项和非基线配置项 基线配置项：包含所有的设计文档和源程序； 非基线配置项：包括项目的…...

编程新知 2026/5/21 19:03:53