学习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,一经查实,立即删除!

相关文章

玩转centos 下的core 文件

玩转centos 下的core 文件 ------------------------------------------------------------ author: hjjdebug date: 2024年 03月 06日 星期三 12:38:35 CST description: 玩转centos 下的core 文件 ------------------------------------------------------------ 一: 准备一…

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;中的文件。这个应用程序具有…

C++语言入门

1.Hello&#xff0c;World&#xff01; #include <iostream> //使用cout&#xff0c;可调用iostream库 using namespace std; int main() {cout << "Hello,Wordl!" << endl; //输出 Hello World&#xff01;return 0; //结束整个程序 } #in…

【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…

docker中的具名和匿名挂载

1. 匿名挂载 -v 容器内路径 [rootwq ~]# docker run -d -P --name nginx01 -v /etc/nginx nginx b250dffbd5f0d1cb0e4717dab6bf5212ae378869099aa1a6ece08a25519554a7查看所有的volume的情况 [rootwq ~]# docker volume ls DRIVER VOLUME NAME local 2bc73b32eed4d0…

贪心刷题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中的类

_init_()函数 所有类都有一个名为__init__()的函数&#xff0c;它在每次使用类创建新对象时都会自动执行&#xff0c;可用于将用户指定的值在初始就赋给对象的属性&#xff0c;或者在创建对象时执行一些固定操作&#xff0c;如下&#xff1a; class Person:def __init__(self…

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

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

网络学习:Vlan原理

目录 一、交换机对数据帧的处理 1、Access&#xff1a; 2、Trunk&#xff1a; 3、Hybrid&#xff1a; 二、VLAN的划分方式 三、VLAN信息的传播技术&#xff08;MVRP协议&#xff09; 1、VLAN动态注册背景&#xff1a; 2、MVRP技术&#xff1a; 3、MVRP注意点&#xff…

前缀和与差分——练习(一维+二维)

一、前言 前缀和与差分算是很常用的算法&#xff0c;熟记是有必要的。 ——题目来源y总每日一题&#xff0c;感觉正适合模板分块讲解系列。 二、浅谈 我们可以用a数组作为前缀和数组&#xff0c;b数组作为差分数组&#xff0c;因为二者互为逆运算。 他们常常用做优化&#xff…

Python爬虫——Selenium

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

7-Zip:一款免费开源但强大的压缩软件

名人说:莫道桑榆晚,为霞尚满天。——刘禹锡(刘梦得,诗豪) 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 目录 一、什么是7-zip?①为什么选择7-Zip?②7-Zip的主要特点二、下载安装三、如何使用7-Zip?四、总结很高兴你打开了这篇博客,如有疑问,欢迎评论…

密码学之椭圆曲线

引言 DH(Diffie-Hellman)密钥交换算法于1976年提出,是第一个公开密钥交换算法。其基础是数学中的群论,群论也是大多数公开密钥密码的基础。简单来说,群是一组元素的集合以及在这些元素上定义的特殊二元运算。 一个群需要满足如下性质: 封闭性:群中两个元素的运算结果仍…

用于生成环境噪声的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…