vue 使用技巧总结 18.11
前言:
在大概学完 vue 整体框架后,有幸接触到花裤衩大神写的 vue-elementUI-admin 模板框架,把这个模板框架当作 demo,跟着 code 一遍,最大的收获是在以逻辑简单的模板熟悉了一个项目的 code 流程,其中对页面的分割、组件间的通信、路由的设置、vuex和请求的结合以及 axios 的封装等都是收获颇丰。
在目前这个项目中,我又接触到了一些其他技巧,现此纪录。
一、父子组件的生命周期
1.加载渲染过程中:
父 beforeCreate -> 父 created -> 父 beforeMount ->
子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted ->
父 mounted
2.子组件更新:
父 beforeUpdate ->
子 beforeUpdate -> 子 updated ->
父 updated
3.父组件更新:
父 beforeUpdate -> 父 updated
4.销毁:
父 beforeDestroy ->
子 beforeDestroy -> 子 destroyed ->
父 destroyed
以上过程均为同步。如果想在父组件 beforeCreate
/created/
beforeMount 时发送获取如用户 id 等之类了关键信息以供子组件作为请求参数,注意如果这里是异步请求,那么该请求会落后于子组件的渲染。
二、父组件内子组件的切换
在 vue-ele-admin 模板框架中,所有的页面级组件均是在路由中配置,由路由控制页面的切换,在目前项目中我遇见了如下的切换方法:
<template>
<button @click="changeMod"></button>
<component :is="yourMod"></component>
</template> <script>
import Amod from 'xxx'
import Bmod from 'xxx'
export default {
data() {
return {
yourMod: 'Amod'
}
},
methods: {
changeMod() {
if(this.yourMod === 'Amod') {
this.yourMod = 'Bmod';
return
}
this.yourMod = 'Amod';
}
}
}
</script>
这个方法可以在组件内自行控制组件的切换,降低了对路由的依赖,这也算是切换组件的一种方法吧。
三、路由参数
1.在 vue-ele-admin 框架中,路由的形式都是 /path1/path2/path3 ... 的形式,而在目前的项目中,使用的路由形式是 /path1?key=value 的形式,于是,在某一个子页面中,我们可以通过 this.$route.query.key 来获取 value;
2.在一个页面1( /path1?key=value )中一个按钮,点击后跳转至里一个页面2( /path2/... )中,同时想把页面1中的某些数据同时传递给页面2,
在页面1中按钮点击事件中使用如下:
this.$router.push({name: 'xxx' ,params: { key1: value1, key2: value2 }})
需要注意的是,如果使用 params ,则一定要使用 name,而使用 path 的话, params 会被忽略。query 无影响。
在页面2中需要的地方可以直接从路由中获取:
if(this.$route.params.key1 === xxx){
this.xxx = this.$route.params.key2
}
注意,在页面1中用的是 this.$router,页面2中的用的是 this.$route。
四、vue 中的 $refs
1.在 vue 中我们可以通过 $ref 来获取 dom 节点,但是不推荐这样。
<template>
<input type="text" ref="A">
</template> <script>
export default {
created() {
this.$refs.A.value = "admin"
}
}
</script>
2.当 ref 用在子组件上时,this.$refs.refName 就会指向子组件实例。
<template>
<div id="parent">
<child ref="ref-Child"></child>
</div>
</template> <script>
import child from 'xxxxxx'
export default {
components: { child },
mounted() {
let childComponent = this.$refs.ref-Child;
}
}
</script>
3.当 ref 和 v-for 一起使用时,this.$refs.refName 获取到的时一个数组,包含和循环数据源对应的 子组件 / dom 节点。
总结:基本上,在 vue 中我们就可以用 ref / refs 代替 JQuery 中的 $('xx')。
vue 使用技巧总结 18.11的更多相关文章
- 帮助你提高排版技巧的18个 PS 文字特效教程
Photoshop 文字特效教程对于学习基础的和高级的排版思维有很大的帮助.在这篇文章中,你会发现一组最新发布的文字效果教程.这些高品质的 Photoshop 教程可以帮助你设计出惊人的2D,3D,木 ...
- [CareerCup] 18.11 Maximum Subsquare 最大子方形
18.11 Imagine you have a square matrix, where each cell (pixel) is either black or white. Design an ...
- vue的技巧代码
转载:https://segmentfault.com/a/1190000014085613 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList ...
- 日本IT行业劳动力缺口达22万 在日中国留学生迎来就业好时机 2017/07/18 11:25:09
作者:倪亚敏 来源:日本新华侨报 发布时间:2017/07/18 11:25:09 据日本政府提供的数据,日本2018年应届毕业生的“求人倍率”已经达到了1.78倍.换言之,就是100名大学生 ...
- [18/11/11] java标识符及变量
一.标识符规范 1.必须以字母.下划线 .美元符号开头. 即数字不能作为开头,其它位随便 2.不可以是java关键字(即保留字), 如static .class.new 等 . 注:int 年 ...
- Vue 开发技巧或者说Vue知识点梳理(转,自个学习)
Vue 组件通讯 ——常见使用场景可以分为三类: 父子通信: 父向子传递数据是通过 props,子向父是通过 events($emit):通过父链 / 子链也可以通信($parent / $child ...
- 原生JavaScript技巧大收集(11~20)-(终于又被我找到这篇文章了)
11.原生JavaScript加入收藏夹 function AddFavorite(sURL, sTitle) { try { window.external.addFavorite(sURL, sT ...
- highgui.h备查 分类: C/C++ OpenCV 2014-11-08 18:11 292人阅读 评论(0) 收藏
/*M/////////////////////////////////////////////////////////////////////////////////////// // // IMP ...
- vue小技巧之偷懒的文件路径——减少不必要的代码
众所周知,我们写vue项目的时候都会创建很多个文件,尤其是一些中大型项目,会有很深的文件夹,当你去引入的时候,要写很长的路径比如我要引入一个css文件, 必须得 import '../../../s ...
随机推荐
- gcc 找不到 boot python 链接库的问题: /usr/bin/ld: cannot find -lboost_python
问题: Ubuntu 14.04,gcc 4.8.4,以默认方式编译 boost 1.67 后,使用 Boost.Python 时,gcc 提示找不到 boost python 链接库. 方案: 查看 ...
- pyspider环境部署2--pyspider安装
接上篇文章,在python3.6.4安装完成的基础上,安装相关依赖模块及pyspider. 依赖安装 1.setuptools和pip setuptools和pip是python的包管理工具,pyth ...
- Python学习总结 10 自动化测试Selenium2
一, 配置 Selenium2 1 Selenium是什么? Selenium是一个用于Web应用程序测试的工具.Selenium 测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括I ...
- BZOJ1061 NOI2008 志愿者招募 线性规划、费用流
传送门 一道思路很妙的线性规划网络流 设\(X_i\)表示第\(i\)天需要的人数,\(P_i\)表示第\(i\)种人雇佣的个数 那么我们可以列出一系列式子 比如说样例就可以列出三个式子: \(P_1 ...
- 在Bootstrap开发中解决Tab标签页切换图表显示问题
在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...
- Fastreport.net 如何在开发MVC应用程序时使用报表
当你使用MVC模板创建自己的Web项目,会出现一个合理的问题 - 如何在其中使用FastReport.Net Web报表? 在这篇文章中,我会为你演示如何做到这一点. 由于在MVC体系结构中,视图与逻 ...
- ASP.NET项目开发
ASP.NET项目开发 1.C/S模式 (client 客户端 server 服务器):QQ.证券.酷狗.旺旺...需要下载响应软件: 工作原理:客户端请求--ASP.net服务器端应用(<-- ...
- ARC 066D Xor Sum AtCoder - 2272 (打表找规律)
Problem Statement You are given a positive integer N. Find the number of the pairs of integers u and ...
- ajax相关问题
1.contentType和dataType contentType 主要设置你发送给服务器的数据格式 dataType设置你收到服务器数据的格式(如text,json等),最常用的为json. 2. ...
- PT与PX区别
字体大小的设置单位,常用的有2种:px.pt.这两个有什么区别呢? 先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点: pt就是point,是印刷行业常用单位,等于1/72英 ...