Vue程序调试方法以及页面美化

妖狐艹你老母 2024-03-27 15:57 73阅读 0赞

### 一、Vue程序调式方法 ###

###### 1.1 console调试 ######

使用console.log在浏览器控制台打印信息调试程序:

![在这里插入图片描述][e436792f3b5945e39ace383e02e8015e.png]

![在这里插入图片描述][c79181bfc6b64abc87bb9f69343dc2ef.png]

###### 1.2 alert调试 ######

使用alert弹窗提示信息调试程序：

![在这里插入图片描述][b4e2a0927c5f465c8a97e4ad9d4a4ffd.png]

![在这里插入图片描述][486f497c21534388b1d35e736302e9e9.png]

###### 1.3 debugger调试 ######

使用debugger打断点调试程序：

![在这里插入图片描述][98c1043807db41e581f96100a5ba17c1.png]

![在这里插入图片描述][bd6bf972c33444a0a37306efb4bab8e5.png]

### 二、前端脚本美化通用方法 ###

###### 2.1 实现页面loading效果，等待方法调用成功时关闭loading ######

![在这里插入图片描述][355a896ab33b45ce9ecaca806d70aa47.png]  
![在这里插入图片描述][709e763a204344edafda9e7c26fc6c27.png]

###### 2.2 操作按钮后，顶部message消息提示样式 ######

this.$message({
        
      message: '恭喜你，这是一条成功消息',
      type: 'success'
    });

![在这里插入图片描述][3b9ff1aa3fe74a2ea648c66fd25f43dd.png]

###### 2.3 操作按钮后，弹窗展示结果 ######

1、安装依赖

npm install --save sweetalert

2、main.js 全局引入

import swal from 'sweetalert'

3、使用组件

swal({
         
      title: "Good job!", 
      text: "You clicked the button!", 
      icon: "success", 
      button: "Aww yiss!", 
    });

*  title:标题
 *  text:内容文字
 *  icon:图标 “warning”, “error”, “success”, “info”
 *  button:按钮

![在这里插入图片描述][e51a9f8d94e843208f3e19f40b14c673.png]

![在这里插入图片描述][ccbede51a7bd410e86c6631e58a9ae0e.png]

###### 2.4 更多用法 ######

更多页面组件用法，可参看elemnet-ui文档：  
[https://element.eleme.cn/2.0/\#/zh-CN/component/installation][https_element.eleme.cn_2.0_zh-CN_component_installation]

==============================================================================  
以上就是本次的全部内容，都看到这里了，如果对你有帮助，麻烦点个赞+收藏+关注，一键三连啦~

关于Vue的前两篇内容参看：  
[Vue入门介绍][Vue]  
[Vue页面组成及常用属性][Vue 1]

欢迎关注下方我的公众号：程序员杨叔，各类文章都会第一时间在上面发布，持续分享全栈测试知识干货，你的支持就是作者更新最大的动力~

[e436792f3b5945e39ace383e02e8015e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/ccc2d3b842d44a99bb6eaf133d7f0695.png
[c79181bfc6b64abc87bb9f69343dc2ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/8006c54a01ad42e5850851d18e687bfe.png
[b4e2a0927c5f465c8a97e4ad9d4a4ffd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/73da7515669f44e9b83da31f3a1075cc.png
[486f497c21534388b1d35e736302e9e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/303f22a730f64590adae5dc6e213b6c4.png
[98c1043807db41e581f96100a5ba17c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/c03415b374c14f1fba121d7731be8b59.png
[bd6bf972c33444a0a37306efb4bab8e5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/3fe74c77886d4fde9e5e83390f3e81cc.png
[355a896ab33b45ce9ecaca806d70aa47.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/7461e86365c64173bde35405d04a267b.png
[709e763a204344edafda9e7c26fc6c27.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/02c9d0c510454cf09a02ec9f754e7617.png
[3b9ff1aa3fe74a2ea648c66fd25f43dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/a62da32b65b442e38209f10b82e1d986.png
[e51a9f8d94e843208f3e19f40b14c673.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/f42dc31b662d4743941eed2db31abfb2.png
[ccbede51a7bd410e86c6631e58a9ae0e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/6e74370d7a404c63b4dced094ff6b0be.png
[https_element.eleme.cn_2.0_zh-CN_component_installation]: https://element.eleme.cn/2.0/#/zh-CN/component/installation
[Vue]: https://blog.csdn.net/baidu_28340727/article/details/128822997
[Vue 1]: https://blog.csdn.net/baidu_28340727/article/details/128942792