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

Vue3 学习

news 2026/2/10 12:33:24

基础

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

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2026/1/31 6:04:01

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2026/1/31 4:37:39

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2026/2/1 3:20:44

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2026/1/21 12:29:04

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2026/2/6 16:59:24

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

编程新知 2026/2/6 6:02:51

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

编程新知 2026/2/4 17:33:27

6️⃣Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙

Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙 一、前言：离区块链还有多远？ 区块链听起来可能遥不可及，似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上，构建一个区块链的核心并不复杂，尤其当你已经掌握了一门系统编程语言，比如 Go。 要真正理解区…...

编程新知 2025/10/12 1:37:40