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

一、Vue程序调式方法

1.1 console调试

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

1.2 alert调试

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

1.3 debugger调试

使用debugger打断点调试程序：

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

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

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

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

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:按钮

2.4 更多用法

更多页面组件用法，可参看elemnet-ui文档：
https://element.eleme.cn/2.0/#/zh-CN/component/installation

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

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

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