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

Vue3 学习

news 2025/9/15 2:34:36

基础

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 学习

基础

引入变量

原理

vue2原理：

vue3原理

相关文章：

Vue3 学习

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

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

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

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

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

c++之枚举

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

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

【UE 材质】模型部分透明

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

【Android】ARouter新手快速入门

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

Oracle Scheduler学习

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

vue3动态路由警告问题

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

SpringBoot集成WebSocket

Linux服务器部署JavaWeb后端项目

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

SpringBoot-17-MyBatis动态SQL标签之常用标签

HTML 语义化

【Java学习笔记】Arrays类

IGP（Interior Gateway Protocol，内部网关协议）

java 实现excel文件转pdf | 无水印 | 无限制

LeetCode - 394. 字符串解码

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

MySQL用户和授权

深度学习习题2

MySQL 部分重点知识篇