学习vue3使用在线官方开发环境play.vuejs.org进行测试

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio

演示地址: http://122.227.135.243:9666

更多nbcio-boot功能请看演示系统

gitee源代码地址

后端代码: https://gitee.com/nbacheng/nbcio-boot

前端代码:https://gitee.com/nbacheng/nbcio-vue.git

在线演示(包括H5) : http://122.227.135.243:9888

1、输入地址Vue SFC Playground

2、在上面环境下输入自己的一些测试代码

如:

<script setup>import {reactive,watch} from 'vue'// 数据let person = reactive({name:'张三',age:18,car:{c1:'奔驰',c2:'宝马'}})// 方法function changeName(){person.name += '~'}function changeAge(){person.age += 1}function changeC1(){person.car.c1 = '奥迪'}function changeC2(){person.car.c2 = '大众'}function changeCar(){person.car = {c1:'雅迪',c2:'爱玛'}}// 监视,情况五:监视上述的多个数据watch([()=>person.name,person.car],(newValue,oldValue)=>{console.log('person.car变化了',newValue,oldValue)},{deep:true})</script><template><div class="person"><h1>情况五:监视上述的多个数据</h1><h2>姓名:{{ person.name }}</h2><h2>年龄:{{ person.age }}</h2><h2>汽车:{{ person.car.c1 }}、{{ person.car.c2 }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeC1">修改第一台车</button><button @click="changeC2">修改第二台车</button><button @click="changeCar">修改整个车</button></div>
</template>

3、F12打开控制台

用中间生成的界面进行按钮操作,相应的console的信息也会显示出来了。

这种对初学一些vue3相关新概念的知识测试还是不错的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/723546.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++ STL自定义排序

更具体的看【速记】C STL自定义排序 - 知乎 (zhihu.com) sort sort第三个位置放的greater<int>和less<int>萌新可能会弄错&#xff0c;这两个单词不是更大和更小的意思&#xff0c;而是大于和小于&#xff0c;并且比较就是自定义排序中的前者和后者。 如果是less…

如何使用DS file+cpolar内网穿透实现远程访问本地群晖NAS传输文件

文章目录 1. 群晖安装Cpolar2. 创建TCP公网地址3. 远程访问群晖文件4. 固定TCP公网地址5. 固定TCP地址连接 DS file 是一个由群晖公司开发的文件管理应用程序&#xff0c;主要用于浏览、访问和管理存储在群晖NAS&#xff08;网络附加存储&#xff09;中的文件。这个应用程序具有…

【BUG】Windows状态栏总卡死解决办法

屋漏偏逢连夜雨&#xff0c;正在赶deadline呢&#xff0c;Windows状态老卡死&#xff0c;一时间崩溃。 解决办法&#xff1a; 右键状态栏新闻和咨询关掉 这个烧笔新闻与资讯我真服了

java算法第十五天 | ● 层序遍历 ● 226.翻转二叉树 ● 101.对称二叉树

层序遍历 思路&#xff1a; 需要借用一个辅助数据结构即队列来实现&#xff0c;队列先进先出&#xff0c;符合一层一层遍历的逻辑&#xff0c;而用栈先进后出适合模拟深度优先遍历也就是递归的逻辑。 而这种层序遍历方式就是图论中的广度优先遍历&#xff0c;只不过我们应用在…

在nginx 服务器部署vue项目

以人人快速开发的开源项目&#xff1a;renren-fast-vue 为例 注&#xff1a;这里开始认为各位都会使用nginx 打包vue项目 npm run build 测试打包的项目是否可以运行 serve dist 可以正常运行 编译报错请移步到&#xff1a;renren-fast-vue1.2.2 项目编译报错: build g…

2024三掌柜赠书活动第十三期:API安全技术与实战

目录 前言 API安全威胁与漏洞 API安全技术与实践 API安全实战案例 关于《API安全技术与实战》 编辑推荐 内容简介 作者简介 图书目录 书中前言/序言 《API安全技术与实战》全书速览 结束语 前言 随着互联网的快速发展和应用程序的广泛使用&#xff0c;API&#xff…

贪心刷题3-合并果子

题目来源&#xff1a;[NOIP2004 提高组] 合并果子 / [USACO06NOV] Fence Repair G - 洛谷 参考书目&#xff1a;《深入浅出程序设计竞赛&#xff08;基础篇&#xff09;》 解题思路&#xff1a;这道题的关键在于每次选择合并时都要选择最小的两堆果子来合并&#xff0c;从而保…

MySQL 元数据锁及问题排查(Metadata Locks MDL)

"元数据"是用来描述数据对象定义的&#xff0c;而元数据锁&#xff08;Metadata Lock MDL&#xff09;即是加在这些定义上。通常我们认为非锁定一致性读&#xff08;简单select&#xff09;是不加锁的&#xff0c;这个是基于表内数据层面&#xff0c;其依然会对表的元…

Python之Web开发初学者教程—ubuntu下vi的使用

Python之Web开发初学者教程—ubuntu下vi的使用 vi\vim 文本编辑器 i 切换到输入模式&#xff0c;以输入字符。 x 删除当前光标所在处的字符。 : 切换到底线命令模式&#xff0c;以在最底一行输入命令。 vi 保存并退出&#xff1a;esc键退出编辑-…

Python爬虫——Selenium

简介 Selenium是一个自动化测试框架&#xff0c;可以通过编程语言控制浏览器进行各种操作。在Python中&#xff0c;可以使用Selenium实现爬虫。 首先&#xff0c;我们需要需要安装Selenium库。可以使用pip命令安装&#xff1a; pip install selenium要使用的话我们还需…

用于生成环境噪声的Noisedash

本文中关于音频的专业描述&#xff0c;来自于互联网和 ChatGPT&#xff1b; 什么是白噪声 &#xff1f; 白噪声&#xff08;White Noise&#xff09;是具有平均功率的随机信号&#xff0c;其功率在整个频谱范围内均匀分布。它的能量在所有频率上都是相等的&#xff0c;没有频率…

【Linux C | 网络编程】广播概念、UDP实现广播的C语言例子

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

伟大音乐家的伟大不朽作品,贝多芬一生的音乐作品全集

一、音乐描述 贝多芬一生创作题材广泛&#xff0c;重要作品包括9部交响曲、1部歌剧、32首钢琴奏鸣曲、5首钢琴协奏曲、多首管弦乐序曲及小提琴、大提琴奏鸣曲等。因为其对古典音乐的重大贡献&#xff0c;以及对奏鸣曲式和交响曲套曲结构的发展和创新&#xff0c;而被后世尊称为…

【比较mybatis、lazy、sqltoy、mybatis-flex、easy-query、mybatis-mp操作数据】操作批量新增、分页查询(四)

orm框架使用性能比较 比较mybatis、lazy、sqltoy、mybatis-flex、easy-query、mybatis-mp操作数据 环境&#xff1a; idea jdk17 spring boot 3.0.7 mysql 8.0测试条件常规对象 orm 框架是否支持xml是否支持 Lambda对比版本编码方式mybatis☑️☑️3.5.4lambda xml 优化sq…

Python乱码恢复

比如说网页是ISO-8859-1编码&#xff0c;然后requests得到的是乱码&#xff0c; 那么这样操作就可以还原数据&#xff1a;res.text.encode(‘ISO-8859-1’).decode(‘utf-8’) 乱码恢复网站&#xff0c;可以知道是什么编码http://www.mytju.com/classCode/tools/messyCodeReco…

Stable Diffusion——Animate Diff一键AI图像转视频

前言 AnimateDiff 是一个实用框架&#xff0c;可以对文本生成图像模型进行动画处理&#xff0c;无需进行特定模型调整&#xff0c;即可为大多数现有的个性化文本转图像模型提供动画化能力。而Animatediff 已更新至 2.0 版本和3.0两个版本&#xff0c;相较于 1.0 版本&#xff…

C#高级:Winform桌面开发中DataGridView的详解

一、每条数据增加一个按钮&#xff0c;点击输出对应实体 请先确保正确添加实体的名称和文本&#xff1a; private void button6_Click(object sender, EventArgs e) {//SQL查询到数据&#xff0c;存于list中List<InforMessage> list bll.QueryInforMessage();//含有字段…

tomcat安装及jdk安装

Tomcat 服务器是一个免费的开放源代码的Web 应用服务器&#xff0c;属于轻量级应用服务器&#xff0c;在中小型系统和并发访问用户不是很多的场合下被普遍使用&#xff0c;是开发和调试JSP 程序的首选。对于一个初学者来说&#xff0c;可以这样认为&#xff0c;当在一台机器上配…

C++ Qt开发:运用QThread多线程组件

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍如何运用QThread组件实现多线程功能。 多线程…

mac报错:zsh:command not found: brew

1、基本概述&#xff1f; 在使用brew安装程序的时候MAC提示&#xff1a; zsh:command not found: brew 本质就是brew没有安装&#xff0c;这个命令与linux系统中的yum命令类似。 使用的环境说明&#xff1a; 虚拟机版本&#xff1a;VMware Workstation 17 Pro mac os Ventu…