2022年8月10日

JavaScript: vue 中使用 async/await 将 axios 异步请求同步化处理

1. axios 常规用法: export default { name: 'Historys', data() { return { totalData: 0, tableData: [] } }, created () { this.getHistoryData() }, methods: { handleClick (tab) { let data = { status: tab.name, name: this.formInline.user, cid: this.formInline.identity, start_time: this.formInline.dateTime ? this.formInline.dateTime[0] : '', end_time: this.formInline.dateTime ? this.formInline.dateTime[1] : '' } this.g…
2022年8月6日

Vue: 官方文档

Vue 3 文档 https://staging-cn.vuejs.org/guide/introduction.html Vue 2.x 文档 https://v2.cn.vuejs.org/v2/guide/…
2022年7月28日

JavaScript: Vue Firefox 中 a标签 不执行v-on:clicked点击事件里的操作

问题: Vue项目中一组<a href="javascript:;">链接</a>添加点击事件,在Chrome浏览器中运行正常,在Firefox中不执行点击事件里的操作,直接跳转空白页面。 例如: <a href="javascript:;" v-on:click="github_login" class="github_login">GitHub</a> let vm = new Vue( { el: '#app', methods: { github_login: function () { let url = '/github/login/'; axios.get( url,{responseType:'json'} ).then( response=>{ location.href=response.data…
2022年7月18日

Vue: 回调函数内使用this无效

例如如下代码(部分),利用回调函数实现登录成功后隐藏会话。 then(function (resp) { console.log(resp); alert("登录成功"); that.dialogFormVisible = false; }).catch(function (error) { }) 其中:dialogFormVisible是data中定义的数据 一般来说可以直接通过this.调用dialogFormVisible。 但是回调函数中无法识别this。导致 that.dialogFormVisible = false 该语句失效 解决方法一 在方法中定义变量储存this,例如var that = this; 然后再回调函数中使用that调用 解决方法二: 使用ES6语句 本例中更改代码为: then((resp) => { console.log(resp…
2022年7月16日

Vue.js v-cloak指令

1)、使用背景 当网络受阻或页面加载完毕而没有初始化得到 Vue 实例时,DOM 中的 {{}} 则会展示出来,此时就会出现页面闪烁的问题。 为了防止此现象,可以使用 CSS 配合 Vue v-cloak 指令实现获取 Vue 实例前的隐藏。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 2)、语法 [v-cloak] { display: none; } <div v-cloak> {{ message }} </div> 以上代码,当 <div> 未编译结束时,<div> 标签不会显示,只有<div>编译完成时,<div> 标签才会被正常显示出来。…
2022年7月16日

Pycharm: vue.js 开启代码提示

打开【Language&Frameworks】,将version改为ECMAScript6;然后选择【settings-plugins】,搜索【vue.js】,点击install。 编辑器->文件类型,在vue.js Template下添加html格式文件类型。…
2022年7月15日

JavaScript: Vue v-model,v-bind,v-on

v-model v-model是进行动态双向绑定的(只能用在input, textarea, select上),以input为例,进行绑定后,vue对象中data的相应值会与input的输入同步变动。 // HTML <input type="text" v-model="message"> new Vue({ data { message: ' ', //最开始message为空 } }) 如果我们在input的输入框输入“打游戏”,则在data中message属性的值也会变为“打游戏”。 <input type="text" v-model="message"> / /在input中输入:打游戏 data { message: '今天好困 ', // 此时message中数据自动更新为"打游戏" } v-bind(缩写为 : ) 通常来说,当我们需要给一…
2022年7月9日

JavaScript: 练习 Vue.js

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <div id='app'> <span>{{message}}</span><br> <span v-bind:title="title">鼠标悬停查看</span><br> <a v-bind…