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

Vue3 学习

news 2026/2/11 7:12:47

基础

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

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2026/2/10 23:40:48

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/12/9 0:22:01

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

编程新知 2026/2/5 4:17:42

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2026/1/31 11:13:53

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/12/12 6:01:17

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/9/25 18:41:38

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2026/2/8 21:57:26

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/11/8 15:39:00

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2026/1/31 4:26:17

绕过 Xcode？使用 Appuploader和主流工具实现 iOS 上架自动化

iOS 应用的发布流程一直是开发链路中最“苹果味”的环节&#xff1a;强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说&#xff0c;这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发&#xff08;例如 Flutter、React Na…...

编程新知 2026/1/10 11:35:24