vue
前端恶霸
前端恶霸成长记
展开
-
vue子父组件数据互相传递
一父传子:父页面: <Category :message="msg" :mesageSty="msgSty"/>Category是子组件,msg和msgSty是父组件data的值,需要传给Category子组件 子组件:接收父组件消息<div>{{mesageSty}}</div>export default { pro...原创 2018-11-08 13:59:58 · 173 阅读 · 0 评论 -
Vuex简单使用学习三(Action)
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { debugger state.count++; }, decrease(state) { state.count-...原创 2019-02-12 10:46:35 · 638 阅读 · 0 评论 -
vue-cli
vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持,相当于启动了一个请求服务器,给你搭建了一个测试环境,只关注开发就OK。1.安装vue-cli① 使用npm(需要安装node环境)全局安装webpack,打开命令行工具输入:npm install webpack -g或者(npm install -g webpack),...转载 2019-02-11 14:01:53 · 390 阅读 · 0 评论 -
Vuex简单使用学习二(Getter)
假如Vuex定义某个数组llistconst store=new Vuex.Store({ state:{ list:[0,2,15,30,50] }, mutations:{ }, getters:{ filteredList(state){ return state.list.filter(item=>item<10) }, ...原创 2019-02-11 10:44:20 · 300 阅读 · 0 评论 -
Vuex简单使用学习一(State,Mutations)
最近在做一个vue项目发现一些组件间的存储有些混乱,抽了1.2天时间学习了Vuex做下学习记录介绍Vuex几个参数State 储存初始化数据Getters 对State 里面的数据二次处理(对数据进行过滤类似filter的作用)比如State返回的为一个对象,我们想取对象中一个键的值用这个方法Mutations 对数据进行计算的方法全部写在里面(类似c...原创 2019-02-11 10:02:47 · 367 阅读 · 0 评论 -
vue router-link点击事件无效解决方法
在router-link上使用@click无效是因为router-link的作用是单纯的路由跳转会影响阻止点击事件,使用@click.native就可以了原创 2019-01-22 10:26:39 · 6764 阅读 · 0 评论 -
vue定义全局Url
首先创建一个vue文件然后在main引用在挂载到实例上就可以使用的时候直接this.Api就等于https://blog.csdn.net/weixin_41916005,在更改测试url和发布url很方便...原创 2019-01-22 09:34:32 · 3860 阅读 · 0 评论 -
vue改变一个变量值关联的变量也变换解决方法(引用和传值)
最近公司项目做多订单下单是遇到一个问题,有一个公共变量的dataForm1用来记录单条订单信息,这时候有个变量dataForm2用于记录总订单信息,遍历方法每加一条dataForm1的时候push到dataForm2,发现dataForm2中的每条订单信息都和最后添加的数据是重复的,这里是因为涉及了一个值的引用和传递的问题 首先说下引用和传值的条件区别引用:object(对象...原创 2019-01-07 16:16:56 · 5358 阅读 · 3 评论 -
vue单页传值params 与 query两种方式的区别
params和query最主要的区别是url上是否有参数,如图paramsthis.$router.push({ name: 'Pay', params:{ orderOms: data.OmsNo, Amount:data.Amount }})query this.$router.push({ ...原创 2018-12-25 11:03:30 · 625 阅读 · 0 评论 -
vue 二维码制作三步上篮
一安装qrcodejs2npm install qrcodejs2 --save二引用qrcodejs2import QRCode from 'qrcodejs2'三使用走起<div id="canvas"></div>var qrcode = new QRCode('canvas', { wid...原创 2018-12-17 15:13:19 · 152 阅读 · 0 评论 -
vue watch用法及场景
这两天在做一个公司项目,遇到一个问题,一个子组件要改变父组件的data值,并且需要把这个值传给其他兄弟组件,这时候发现其他兄弟组件的data值没有变换还是最初父组件传的值,如下图 这时候就用到watch来进行监听了props: ['moneys'], data() { return { money:this.moneys, ...原创 2018-12-05 16:41:20 · 2426 阅读 · 1 评论 -
vue子组件调用父组件方法
父组件:<div><Design @MLdata="getML"></Design></div>Design是子组件MLdata是自定义调用名称getML是父组件的方法子组件:this.$emit('MLdata', { code: data.Code, });MLdata父组件自定义的调用名称...原创 2018-12-03 10:13:38 · 824 阅读 · 0 评论 -
vue axios CORS错误
如果data包含数组这可能会出现问题解决方法一var qs = require('qs');var that=this that.axios.post("" + that.APi + "/diy/GetTechUnit", qs.stringify(dataForm)).then(function(res){ ...原创 2018-11-30 10:55:45 · 16552 阅读 · 0 评论 -
Vue路由跳转新窗口打开
let Logistics= this.$router.resolve({ path:'/Logistics', query:{ Amount:10 } }) window.open(Logistics.hr...原创 2018-11-19 15:30:19 · 7024 阅读 · 0 评论 -
vue父级组件调用子级组件方法
父页面<Category ref="mychild"/>在父级周期定义事件比如点击执行子组件方法this.$refs.mychild.parentHandleclick(this.msgSty);上边的parentHandleclick就是子组件里的方法...原创 2018-11-08 14:05:05 · 5687 阅读 · 0 评论 -
Vuex简单使用学习四(modules)
一个项目足够大时,store(仓库)里面的state,getters,mutations,actions就会有很多,如果都放在一个store里面就感觉很混乱,使用modules可以把他们放到不同的文件中,每个modules都有自己的state,getters,mutations,actions例如 const moduleA={ ...原创 2019-02-12 12:31:30 · 311 阅读 · 0 评论