Vue.js

Vue.js dropdown nested menu (keep parent open when child active)

由 我的未来我决定 提交于 2021-02-16 12:23:13
问题 I'm starting my journey with Vue.js, and stumbled upon some problem. I wanted to create a simple sidebar with dropdown menu, and already got this: new Vue({ el: '#app', data() { return { openedItems: {}, selectedSub: '', userMenu: false, items: [{ icon: './src/assets/img/icons/dashboard.svg', text: 'Element 1', path: '#1' }, { icon: './src/assets/img/icons/orders.svg', text: 'Element 2', path: '#2' }, { icon: './src/assets/img/icons/products.svg', text: 'NestedElement', path: '', children: [{

vue 表单校验（二）

由 我的梦境 提交于 2021-02-16 12:21:57
vue 表单校验（二） vue element-ui表单校验 由于现在使用 element-ui 进行form表单校验，因而使用其自带的校验规则进行校验，发现有些并不是那么好校验，或者说是校验起来很繁琐，因而一直在研究中 表单校验分类 前后端校验 前端校验 后端校验 这种目前一般是结合起来使用，很少单纯前端校验，或者单纯后端校验的 前端检验 数据录入时校验 数据回显时校验 动态创建时校验 数据是否必填时校验 接下来所谈论的校验都是基于前端进行校验，若是后天校验，只是统一校验规则而已，这样前后便可以统一了。其实这里并不是很简单，但是不得不细心，而已最好，前后台都要其校验规则，以及校验话术放在一个公共的地方，避免在每个具体文件内进行修改。若是能更好的话，类似 google email 那样，通过后台返回规则类型，以及对应前台的具体编号，进行显示即可（比如1： 不能为空， 2：校验规则不合...） 这样的好处，前台只认这个数字即可，不然后台返回什么，前台出什么错误，都是统一显示（这个扯远了），讲今天的重点 基于 element-ui 自带的 表单校验 数据录入时校验 element-ui form validate el-form 标签 属性 model 对象 却只能是一维 { a: 1, b: 2 }, 不能是 { a: { b: 2 } }, 不然关联不到 rules

VS Code 的常用快捷键

由 匆匆过客 提交于 2021-02-16 11:32:03
VS Code 的常用快捷键和插件 一、vs code 的常用快捷键 1、注释 ： 　　a) 单行注释：[ctrl+k,ctrl+c] 或 ctrl+/ 　　b) 取消单行注释：[ctrl+k,ctrl+u] (按下ctrl不放，再按k + u) 　　c) 多行注释：[alt+shift+A] 　　d) 多行注释：/** 2、 移动行 ：alt+up/down 3、显示/ 隐藏左侧目录栏 ctrl + b 4、 复制当前行 ：shift + alt +up/down 5、 删除当前行 ：shift + ctrl + k 6、 控制台终端显示与隐藏 ：ctrl + ~ 7、查找文件/安装vs code 插件地址 ：ctrl + p 8、 代码格式化 ：shift + alt +f 9、新建一个窗口 : ctrl + shift + n 10、行增加缩进: ctrl + [ 11、行减少缩进: ctrl + ] 12、裁剪尾随空格(去掉一行的末尾那些没用的空格 ) : ctrl + shift + x 13、字体放大/ 缩小: ctrl + ( + 或 - ) 14、拆分编辑器 : ctrl + 1/2/3 15、切换窗口 : ctrl + shift + left/right 16、关闭编辑器窗口 : ctrl + w 17、关闭所有窗口 : ctrl + k + w 18、切换全屏

秋招面试

由 自作多情 提交于 2021-02-16 10:49:00
2019/7/16 字节跳动文娱 凉面 一面： （1）Vue和Angular 有什么区别？ 他们的双向绑定原理 观察者模式有哪些应用？我说的是事件监听 Vue组件之间的传值，我说的同级之间用Vuex状态管理，还有一个是EventBus？ （2）PC端的浏览器，让一个块元素水平垂直居中于浏览器窗口。 fixed position定位有哪些？这里新增了一个定位是： sticky （3）为什么块级元素在不同的浏览器之间显示会不同？（盒模型） （2）判断数据类型有哪几种方式？基本数据类型与复杂数据类型的区别 （3）隐式类型转换 （4）数组去重的方法 注意set结构怎么写 set与数组的区别 （5）js写快速排序以及时间复杂度怎么算的 （6）TCP与UDP的区别，有哪些应用 （7）计算机网络中的五层和七层，都有哪些应用。 一面完了之后直接过了几分钟二面 自我介绍以及项目经历； （1）了解rem吗？rem的根元素设置的font-size是多大 ？？？？？ （2）跨域知道吗？为什么会出现跨域？jsonp用callback参数包裹数据会出现什么问题？代理的方式是怎么实现的？ （3）继承怎么实现？ （4）深拷贝 （5）有序数组m与有序数组n，要求将两个数组concat成一个有序数组，时间复杂度为O（m+n） （6）实现一个DateParser，要求var timestamp = 2019-07-14

vue 手机端 ios 复制链接

由 醉酒当歌 提交于 2021-02-16 10:04:07
之前用vue开发了一个单页应用，后台嵌入微信公众号里了,在商品详情收藏该商品地址是 安卓是： http://XXXXX.com.cn/demandDet... ios是： http://XXXXX.com.cn/ 很是好奇为ios 为什么不更新url呢? 多次测试时,当你刷新ios 再次复制链接发现是自己想要的地址; 这是就想到能不能重新构建url呢? 方法一: 在路由导航守卫... router.beforeEach((to, from, next) => { if (to.path !== global.location.pathname) { location.href = location.origin +'/'+ location.hash; } next(); }); 方法二: 个别界面 beforeDestory(){ //清理标识 sessionStroage.replaceItem('flag') }, mounted(){ 　　if( sessionStroage.getItem('flag') === null ){ 　　sessionStroage.setItem('flag',1) 　　location.href = location.origin + +'/'+ location.hash; } } 来源： oschina 链接： https://my

How to check if an object is a Vue component?

由 折月煮酒 提交于 2021-02-16 09:46:32
问题 Is there a reliable way to check if an object is a Vue.js component? 回答1: You can use instanceof, as following code: var isVueComp = vuecomp instanceof Vue If it isVueComp is true, it is a Vue.js componeny otherwise not. You can also use vuecomp.prototype.constructor, which will return reference to the Object constructor function that created the instance object. Check this fiddle. 回答2: Like Saurabh wrote, instanceof is probably the best way to be sure. However, in case you don't want to

Data scope in Vue.js

由 点点圈 提交于 2021-02-16 09:34:10
问题 I'm new to vue.js I'm working with the code below and run into some problem. I was trying to access data myData within a for loop within a method myFunction in the method object using this.myData but it is inaccessible/out of scope export default MyComponent.extend({ data:function(){ return { myData: [] } }, ready:function(){ this.myFunction(); }, methods:{ myFunction:function(){ Vue.http.get('/getdata').then((response) => { for (var i = 0; i < response.data.info.length; i++) { this.myData

Data scope in Vue.js

由 对着背影说爱祢 提交于 2021-02-16 09:32:13
问题 I'm new to vue.js I'm working with the code below and run into some problem. I was trying to access data myData within a for loop within a method myFunction in the method object using this.myData but it is inaccessible/out of scope export default MyComponent.extend({ data:function(){ return { myData: [] } }, ready:function(){ this.myFunction(); }, methods:{ myFunction:function(){ Vue.http.get('/getdata').then((response) => { for (var i = 0; i < response.data.info.length; i++) { this.myData

Data scope in Vue.js

由 蹲街弑〆低调 提交于 2021-02-16 09:32:07
问题 I'm new to vue.js I'm working with the code below and run into some problem. I was trying to access data myData within a for loop within a method myFunction in the method object using this.myData but it is inaccessible/out of scope export default MyComponent.extend({ data:function(){ return { myData: [] } }, ready:function(){ this.myFunction(); }, methods:{ myFunction:function(){ Vue.http.get('/getdata').then((response) => { for (var i = 0; i < response.data.info.length; i++) { this.myData

VueJS with normal JavaScript

由 泪湿孤枕 提交于 2021-02-16 07:54:53
问题 I want to add count down timer to my vue component. I have found a script which is written in normal JavaScript. this is my JavaScript file. var upgradeTime = 7200; var seconds = upgradeTime; function timer() { var days = Math.floor(seconds/24/60/60); var hoursLeft = Math.floor((seconds) - (days*86400)); var hours = Math.floor(hoursLeft/3600); var minutesLeft = Math.floor((hoursLeft) - (hours*3600)); var minutes = Math.floor(minutesLeft/60); var remainingSeconds = seconds % 60; if
订阅 Vue.js