最近还没来得及更新文章，就发现vue-cli已经更新到3.0版本了。 //想了想还是用升级吧，反正最终都逃不掉，不如在这个项目上实验一下3.0的威力(并不会)。 升级vue-cli npm install -g vue@cli vue -V 使用图形化界面创建项目 这里需要到自定义目录下，方便以后的项目管理；执行命令后，会打开一个localhost:8080的窗口，是vue项目的图形化管理界面 cd targetFolder vue ui 创建新项目 这里不一一介绍了，随便截了两张图看看这里配置...
本文实例讲述了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...
用过VUE的童鞋都知道，vue在改变data里面参数可以以直接用this.XXX=XXX，并且视图层也会立即更新呈现，但是这里我想介绍一下微信小程序是怎样操作data里面参数并在视图层及时更新的 一、简单参数 XX.wxml <view><text>{{str}}</text> </view> <button bindtap="change">改变</button>XX.js Page({data: {str:早上好},change: function() {this.setData({str:"晚上好"})} })二、已知下标的数组 XX.wxml <view><text>{{array[0].text...
最近在做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...
这两天在看webpack，今天卡在webpack-dev-server上了，折腾了一下午，一直无法正常运行，每次服务器也提示正常启动了，但是浏览器一输入localhose:8080/admin就提示Get/...,反正就是无法打开页面。最后找到一个帖子，发现原来是我启动服务器的代码有问题。 先安装webpack相关组件 cnpm i webpack-dev-server --save-dev cnpm i webpack --save-dev代码如下： 1.项目结构如下： 2.webpack.config.js配置文件 因为我定义了两个js，...
本文介绍了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...
vue官网关于此解释说明如下： vue2.0里面的深入响应式原理的异步更新队列 官网说明如下： 只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会一次推入到队列中。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际（已去重的）工作。Vue 在内部尝试对异步队列使用原生的 Pro...
前言 Mongoose是在node.js异步环境下对mongodb进行便捷操作的对象模型工具 那么要使用它，首先你得装上node.js和mongodb,关于mongodb的安装和操作介绍可以参考：//www.gxlcms.com/article/80296.htm 演示描述场景 更新购物车数量与勾选状态 业务逻辑 查询到当前用户的购物车对象Cart，更新前端传递过来的quantity与selected字段 方法一 var _ = require(underscore); Cart.findOneAndUpdate({_id: req.body.cart._id,user: user}, ...
axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： 从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止 CSRF/XSRF引入方式： $ npm install axios //使用淘宝源 $ cnpm install axios //或者使用cdn： <script src="https://unpkg.com/axios/dist/axios.min.js"></script>安装其他插件...