Vue.js
关注
分享
扫一扫
Vue.js学习过程
学而不思则忘
一切都可以
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue父子组件生命周期顺序以及父子组件的异步通信
生命周期顺序可以随便写一对父子组件，然后打印出他们所有的生命周期：加载渲染过程：父组件的beforeCreate、created、beforeMount ——> 子组件的beforeCreat、created、beforeMount、mounted ——> 父组件的mounted更新数据过程：父组件的beforeUpdate ——> 子组件的beforeUpdate、updated ——> 父组件的 updated销毁过程：父组件beforeDestroy ——>原创 2020-10-25 16:29:44 · 1128 阅读 · 0 评论 -
父子组件通过props传参，子组件在created中接收props不能实时更新
问题背景：父组件为index.vue， 两个子组件为home-header.vue和home-sidebar.vue。现在需要在父组件中请求完数据后，两个子组件才去发生请求数据。解决方案一：在父组件index.vue中定义两个变量，用来确定父组件中的请求是否完毕，然后在子组件中使用v-if：index.vue:<template> <div id="index"> <home-header v-if="homeHeader" /> <.原创 2020-10-25 12:25:08 · 2876 阅读 · 0 评论 -
element-ui的Loading组件使用问题记录
这里我使用的是以服务方式引入的Loading，参考网上给的全局配置文件，整理了一下。在使用过程中发现了一些问题。在vue项目文件夹中，这里我就在utils中创建了一个loading.js文件，用来写全局配置：以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的Loading 实例，而是返回现有全屏 Loading 的实例所以，下面设置了一个needLoadingRequestCount 变量来记录创建Loadi.原创 2020-10-20 10:22:20 · 4958 阅读 · 0 评论 -
Vue路由跳转到同一组件后，路由参数更新但是数据不更新
当多个路由指向同一组件时，回出现路由跳转后，但是页面数据不刷新的问题。查看官方文档，这是因为原来的组件实例被复用了。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。这时可以使用下面方法对路由参数变化作出响应：watch(检测变化)$route对象：const User = { template: '...', watch: { $route(to, from) { // 对路由变化作出响应... .原创 2020-10-12 10:30:22 · 1478 阅读 · 0 评论 -
Vue组件间的数据传递
使用props给组件定义一些属性，用来接收数据。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/vue.js"></script></head><body><div id="app">原创 2020-07-23 21:07:08 · 153 阅读 · 0 评论 -
与v-model等价的写法
使用下面的两个操作，可以等价于v-model的双向绑定:value进行message到input的传参@input进行input到message的传参<body> <div id="app"> <input type="text" :value="message" @input="changeValue"> <!-- <input type="text" v-model="message"> --> <原创 2020-07-09 20:44:35 · 1025 阅读 · 0 评论 -
Vue实例：购物车功能完善
一、先设置价格的格式发现价格显示的信息不是很完善。添加价格过滤器： filters: { showPrice (price){ //价格过滤器 return '￥' + price.toFixed(2); } }在html中使用过滤器代码有省略，只给出相关部分。<td>{{book.price | showPrice}}</td><p>总价格：{{totalPrice | showPrice}}</p>原创 2020-07-08 22:47:25 · 499 阅读 · 0 评论 -
Vue实例：购物车的搭建——界面设计
HTML<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>购物车</title> <link rel="stylesheet" href="style.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scri原创 2020-07-07 22:36:22 · 570 阅读 · 0 评论 -
vue中虚拟复用的一个小例子
在下面的代码中，如果input后面不加key属性的话，则在切换登录方式时，原本输入在input框里的字符不会消失。这是vue底层的实现。当希望input框里面的内容因为切换登录方式而消失时，可以在后边加上key属性，用来标识不同的input标签。<body> <div id="app"> <span v-if="isUser"> <label for="username">用户账号</label> <原创 2020-07-06 22:24:50 · 232 阅读 · 0 评论 -
Vue获取浏览器点击事件作为函数参数
<body> <div id="app"> <!-- 浏览器会默认传递事件属性 --> <button @click="btnClick1">按钮1</button> <!-- 当需要传递事件属性时，需要加上 $ 符号，才能被解析为事件 --> <button @click="btnClick2(123, $event)">按钮2</button> </div>原创 2020-07-06 10:51:50 · 727 阅读 · 0 评论 -
Vue实例——点击v-for的某个元素，消除其它元素关联
实现这样的一个需求：使用v-for生成一个列表，点击列表中的某个元素，该元素改变其样式（也就是字体变红），其它元素不变解决方法通过设置一个点击事件btnClick(index)获取点击元素的下标，将被点击的元素的下标与列表中元素进行匹配，相等的进行css渲染，这样就避免了其它元素全部一起渲染。这里的active设置为-1，是因为如果是0或空的话，第一个元素就默认被渲染了样式，也就是变红色 <style> .red { color: re.原创 2020-07-05 21:04:13 · 882 阅读 · 0 评论