vue是一款轻量级的mvvm框架，追随了面向对象思想，使得实际操作变得方便，但是如果使用不当，将会面临着到处踩坑的危险，写这篇文章的目的是我遇到的这个问题在网上查了半天也没有发现解决方案，最终研究了vue的源码中有关select元素的部分找到了答案，下面简单介绍我踩的关于select的一个坑： 使用场景：有两个select元素，一个select元素变动时，动态修改另一个select中填充的内容，并默认选择第一项，问题来了，每次当我提交for...
引文 vue文档列表渲染中有条注意事项：这里提到的两种情况实际改变了数据但是没有触发视图更新。 由此引出Vue.set()，先上文档API： this.$set()和Vue.set()本质方法一样，前者可以用在methods中使用。 set方法调用时，可以触发页面全部重新渲染。 比如在vue中有个data数组arr：//arr=[1,2,3]arr[1]=bconsole.log(arr) // [1,2,3]Vue.set(arr,2,c)console.log(arr) // [1,b,c]可以看出set触发了整个页面的重新渲染，连arr[1]=b的效...
我们有时候常碰到vue中明明修改了数据，但是视图无法更新，因此我总结了一点点碰到此类的情况： 1、v-for遍历的数组，当数组内容使用的是arr[0].xx =xx更改数据，vue无法监测到 数组数据变动：我们使用某些方法操作数组，变动数据时，有些方法无法被vue监测，有些可以 Vue包装了数个数组操作函数，使用这些方法操作的数组去，其数据变动时会被vue监测： push() pop() shift() unshift() splice() sort() reverse() vue2.0还增加个...
最近还没来得及更新文章，就发现vue-cli已经更新到3.0版本了。 //想了想还是用升级吧，反正最终都逃不掉，不如在这个项目上实验一下3.0的威力(并不会)。 升级vue-cli npm install -g vue@cli vue -V 使用图形化界面创建项目 这里需要到自定义目录下，方便以后的项目管理；执行命令后，会打开一个localhost:8080的窗口，是vue项目的图形化管理界面 cd targetFolder vue ui 创建新项目 这里不一一介绍了，随便截了两张图看看这里配置...
1. 引入jquery和vue.js <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>2. JS <script type="text/javascript"> $(function(){vm = new Vue({el:#lst,data:{mcs : []}});getmc(); });function getmc(){$.get("getJsonData.action",function(msg){vm.mcs = msg}); } </script...
最近在做一个跟美团同样一套预约系统，由于一个商家会有很多主题，而每个主题下面会有很多场次。 那怎么在一个页面把这些数据很好的动态展示出来呢？我首先想到了VUE的动态绑定数据。 由于第一次使用VUE，很多东西不懂，只能靠百度。服务器端返回的数据直接是JSON数据，初始数据完美的通过VUE渲染了出来，但是在切换主题显示场次信息的时候，出现了问题。发现数据是获取到了，但是VUE并没有对它进行渲染。 var ndata = new Vue({...
本文实例讲述了vue.js实现格式化时间并每秒更新显示功能。分享给大家供大家参考，具体如下： <!doctype html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>www.gxlcms.com vue格式化时间</title><!-- Vue.js --><script src="htt...
如图，我要实现点击关注之后列表及时更新成最新的列表。 思路很简单，主要是两点： 1、在点击关注之后去执行一个请求新的关注列表的action； 2、在vue组件中watch监听已关注列表和推荐关注列表 主要代码如下： 组件： 关注的methods: followMethod(item){if(this.token){this.$store.dispatch(follow,{followUserId:item.pubId,page:this.page,size:this.size});this.$set(item,"followStatus",true); // this.$store.dispatc...
前言看文档不认真，开发也没有多注意，总是hack。忽悠忽悠就过去，但怎么说，歪门邪道还是不太好，现在就亡羊补牢，总结总结。 数组索引使用下标更新数组元素；使用赋值方式改变数组长度；使用下标增删数组元素；正文使用下标更新数组元素data: {arrs: [0, 1, 2, 3] } 直接使用this.arrs[0] = 'zero';虽然数组确实是被更新了，但是更新不会被渲染到视图（html页面）上。因为Vue没有检测到数组的更新。 由于 JavaScript 的限制，Vue...
最近在做vue2.0的项目遇到一个移动端实时检索搜索更新列表的效果，当用户在搜索框输入客户的电话或姓名的时候，客户列表内容会做相应的更新，下面给大家看下图~html <input type="text" id="getval" class="flex-1" @blur="serchhide" v-model="val" v-focus v-on:input ="inputFunc">用v-on:input ="inputFunc" 来监听input框value内容的变化，如果内容更新会调用inputFunc函数~~ js：在vue的method方法中写下inpuFunc函数，获取...
场景： 我实际用到的是这样的，我父组件引用子组件related,父组件调用获取页面详情的方法，更新了state值related，子组件根据该related来渲染相关新闻内容，但是页面打开的时候总是先加载子组件，子组件在渲染的时候还没有获取到更新之后的related值，即使在子组件中watch该值的变化依然不能渲染出来子组件的相关新闻内容。我的解决办法： 父组件像子组件传值，当父组件执行了获取页面详情的方法之后，state值related更新，然后传给...
由于 JavaScript 的限制，Vue 不能检测以下变动的数组： 当利用索引直接设置数组的某一项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength，不会更新数组。 当然vue中给了解决方法，就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice，caoncat等修改数组，同时也将触发状态更新： ex：所以如果在实例创建后添加新的属性到实例上，则不会触发更新。 ps：现在有两个数...
父子组件之间的数据关系，我这边将情况具体分成下面4种： 父组件修改子组件的data，并实时更新 子组件通过$emit传递子组件的数据，this.$data指当前组件的data(return{...})里的所有数据， this.$emit(data,this.$data);之后通过父组件的getinputdata方法来接收数据 @data=getinputdata其中的data就是传过来的数据，通过修改这个数据就可以通过父组件实时更新子组件 getinputdata(data) {console.log(data);data.background = {bac...
常规情况下我们在vue实例的data中设置响应数据。但当数据为对象，我们增加或删除对象属性值时，视图并不触发更新，如何解决这个问题呢？ 实例代码如下： let vm = new Vue{el: #app,data: {obj: {k: v}},... } 有三种解决方案： 方案一：利用Vue.set(object,key,val) 例：Vue.set(vm.obj,k1,v1) 方案二：利用this.$set(this.obj,key,val) 例：this.$set(this.obj,k1,v1) 方案三：利用Object.assign({}，this.obj)创建新对象 例： t...
本文介绍了vue的props，data，computed变化对组件更新的影响，分享给大家，废话不多说，直接上代码 /** this is Parent.vue */ <template><div><div>{{parent data : + parentData}}</div><div>{{parent to children1 props : + parentToChildren1Props}}</div><div>{{parent to children2 props : + parentToChildren2Props}}</div><div><el-button @click="changeParentData">change parent data</el-button><el-button @clic...