Q-Logo 我的学习笔记分享

Entries for category "vue"

二维码生成器

二维码生成器

如果想要生成二维码,可以访问本站提供的 https://act.qcloud.fun/qrcode/ ,此网站提供了极简版高级版两个版本的二维码生成器,都是完全免费使用的。可以直接用微信扫描下面的二维码在手机上打开使用

qcloud-qrcode.png

极简版二维码生成器

极简版二维码生成器使用非常简单,只需要在文本输入框中输入想要的文字,就会立即生成对应的二维码,界面如下:

qrcode-generator-simple.PNG

高级版二维码生成器

高级版二维码生成器,在极简版基础上,还提供了以下功能:

  1. 在中心添加文字Logo
  2. 在中心添加图片Logo
  3. 设置码点大小、容错级别、内边距
  4. 设置码点、背景、码眼框、码眼心的颜色
  5. 设置码点的特殊效果,如液化、圆化、点化
  6. 为二维码添加背景图片

具体使用起来也很简单,只需要打开二维码生成器(高级版)选项卡,在文本输入框中输入想要的文字后,根据需要进行高级设置,就会立即生成附加对应效果的二维码,界面如下:

qrcode-generator-advanced.PNG

如果使用过程中有任何问题,可以通过二维码生成器页面上的邮箱联系我。

Vue.js 中通过:key 属性强制刷新元素

通过在需要刷新的元素或子组件上设置key 属性,在需要刷新时,就更改该属性的值。例如

<!-- template -->

<div>

<button v-on:click="changedivkey">Update Canvas</button>

<canvas :key="divkey"></canvas>

</div>

// <script>

export default {

data() {

return {

divkey: 0

}

},

methods: {

changedivkey() {

this.key += 1

}

}

vue-devtools 安装和使用

https://github.com/vuejs/vue-devtools/ 下载Vue DevTools master 版本。

cnpm i

cnpm run build

打开Chrome,在地址栏输入chrome://extensions/ 或 “菜单->更多工具->扩展程序”,进入扩展程序页面,然后点击右上角打开“开发者模式”,再点击“加载已解压的应用程序”,选择vue-devtools-master\shells\chrome 目录加载。

使用时,在Chrome浏览器打开开发中的Vue 页面,F12,会出现Vue 选项卡,点击左边的组件树可以在右边检查数据。

Quasar 框架使用 axios 用 GET 方式提交简单表单

Template 部分

Quasar 框架使用<q-form> 组合<q-input> ,在<q-form> 中使用@submit 、@reset 指定监听submit 、reset等事件的方法,然后再用<q-btn> 添加type=”submit”、type=”reset” 等按钮,点击按钮后,会调用<q-form> 中指定的对应事件的方法。每个<q-input> 通过v-model 绑定到Vue中的某个数据(除type=”file”时外),通过type=”textarea” (默认type为text,可取值为 password、textarea、email、search、tel、file、number、url、time、date)设置需要的输入类型。

Script 部分

Script中,可以将需要通过表单提交的数据都绑定data 上,提交的方法名称须与<q-form> 的@submit 中指定的方法名称相同,在此方法中将表单数据组合成查询字符串,接到查询网址后面,通过 axios 的get 方法直接提交即可。