Q-Logo 我的学习笔记分享

Entries for tag "vuejs"

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 方法直接提交即可。

Vue 相同路由跳转时通过key 属性强制刷新组件

通过this.$router.push 跳转到其他路由,当要跳转到的路由和当前路由相同时(例如都是跳转前后路由都是'/postlist/',但查询参数不同的情况),会出现组件页面不刷新的问题。例如,当前页面是文章列表'/postlist/',需要跳转到某一分类的文章列表'/postlist/?categories=1',跳转代码是这样的

this.$router.push({ path: '/postlist/', query: { categories: cid } }).catch(err => err)

代码执行后,对应的组件本身并没有被刷新。这是vue的默认行为,同样的一个路由,多次push时,页面不会再次刷新和发送请求 。

最简单的办法,就是将上面变化的参数绑定到<router-view/> 中key属性。例如:

<router-view :key="$route.path + $route.query.categories"></router-view>

这样修改之后,this.$router.push时,只要query 的categories参数发生变化,对应的<router-view/> 组件就会被刷新了。