为您找到搜索结果：2016个
vue中的$on,$emit,$once,$off源码实现
这几种模式是基于订阅观察者模式的，维护一个事件中心，on的时候将事件按名称存在事件中心里，称之为订阅者，然后emit将对应的事件进行发布，去执行事件中心里的对应的监听器。第一步就是创建一个构造构造，维护一个事件中心eventsfunctionEventEmiter(){this.events={}}$on//event可以是事件名数组EventEmiter.prototype.on=function(event,cb){//多个事件if(eventinstanceofArray){event.forEach(fn=>this.on(fn,cb))}//单个事件if(this.events[event]){this.events[event].push(cb)}else{this.events[event]=[cb]}}$emit //cb参数：单个事件名，args参数this.emit('evt',a,b,c)EventEmiter.prototype.emit=function(event){letargs=Array.from(arguments).slice(1)...
ont color='red'>vue ont>登录插件引来的后续问题
上次介绍了下写的登录弹框插件，过了几天发现点击去注册或者改密码的跳转失效。报错this.$router.pushisnotafunction,继续打印this.$router也是undefined（可以先看一下上一篇博客提到的弹框登录插件）this.$router.push({path:'/register'})尝试了很久，试了三种方法。需要注意的是：登录弹框是通过this.$login调用方法来动态插入组件的，这个登录弹框不在路由的组件管理范围内。第一：引入子路由，需要加router-view但是这样是作为子路由的方式，给当前赋值了路由对象。页面会出现重叠。第二种：在main.js里把路由对象设为window对象下的某值然后再loginBod.ont color='red'>vue ont>里调用。结果也能跳转。但是弹框还在，上面解释过了，路由切换卸载和动态加载不同的组件，但登录弹框是手动挂载上去的，所以需要手动去卸载。第三种：直接用window.replace路由router跳转的话，会根据路由对象动态的卸载挂载组件，所以弹框会保留。这种做法是提高性能减少消耗的。默认的路由哈希模式，是去操作哈希值重新定位路径，但是始终是由...
vue项目中的函数封装
项目中一般都会有fun.js这类的文件，里面有各种的如转换时间格式的，处理转换的等等函数方法。其实经常用到的去获取基本数据的接口也可以封装成一个方法，方便复用。如上面所标，获取列表数据之前需要先获取维护的规格选项以及对应的选项值的id集合来进行转换。而且用到这一块的地方还有很多，如商品列表，我的商品等等。关于异步的话，可以采取async await去做。比如：为了方便参数的命名，所以在await函数里resolve返回对应的规格集合。都知道await是返回一个promise函数来实现的。那么不用await的时候也是可以正常使用的。在这个fun.js里需要 importVuefrom'vue' var_this=Vue.prototype; 方便使用全局的参数。总结：通过这样的方法，整个项目里很多地方需要调同样的参数的，就可以多处复用了，如果需要对数据做不同的梳理，也可以函数传参，然后再参数里去做对应的处理。 ...
vue中登录模块的插件封装
一个电商城的项目，场景是：在未登录的情况下点击收藏或者加入购物车等操作，执行一个方法如this.$login()来动态插入登录组件。第一步：写好关于这个登录弹窗的单文件组件loginBox.vue第二部：编写loginBox.js文件，输出一个函数方法，如下图关于$mount()需要注意 第三步：在Vue的prototype下全局赋值这样，在点击加入到购物车的时候，判断localstroage里有无用户信息。未登录则执行this.$login()方法，生成弹窗。当时在写的时候一个劲报错模板找不到。找了很久才找到解决办法：require('./loginBox.vue')后缀需要加.default。这样才能成功引入组件。是vue-loader的问题，有兴趣可以看看：https://github.com/vuejs/vue-loader/releases/tag/v13.0.0然后弹出组件后，需要禁止浏览器滚动。登录成功后销毁实例，在销毁实例前需要解决禁止浏览器滚动，所以在beforeDestory里进行事件解绑。销毁实例只是从虚拟dom中移除，元素在页面还是存在的，只不过是断开...
vue2.X心得
VUEJS学习网址：https://cn.vuejs.org/此文章是用来记录自己的学习和实践心得。关注点：父子组件之间的通信看图说话：PassProps子组件本身与父组件是孤立的，通过子组件中显示声明的props属性，接收父组件数据;父组件的数据更新时，子组件的prop会跟着更新；此数据流动是单向的（看着）;EmitEvents子组件使用$.emit(fn)向外抛出自己的内部触发的事件;父组件是否监听？如果父组件需要监听，使用v-on绑定监听，触发对应事件;以上为通用语，具体分析子组件可以接收一个字符串，在子组件内部可以用{{label}}使用 <v-inputlabel="姓名"></v-input>子组件可以接收动态参数<inputv-model="msg"/><v-profile:message="msg"></v-profile>子组件接收到数据之后想处理一下不小心改了怎么办？给prop创建一个副本（建议深拷贝），处理副本，不动prop;父组件的数据改变后，子组件的prop会自动更新，但是这个prop的副本不会啊？使...
Vue常用开源项目汇总
Vue常用开源项目汇总前言：Vue(读音/vjuː/，类似于 view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。易用（已经会了HTML,CSS,JavaScript 即可轻松上手）、灵活（简单小巧的核心，渐进式技术栈，足以应付任何规模的应用）、性能（17kbmin+gzip 运行大小、超快虚拟DOM、最省心的优化）、渐进式JavaScript 框架。Vue相关网站参考： Vue中文网站：http://cn.vuejs.org/ Vuegithub开源地址：https://github.com/vuejs/vue Vue.js专业中文社区：http://www.vue-js.com/ 前端开发Vue相关：...
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin
场景：.webpack2.4.*集成vue-loader@15.7.2报错原因：参考官方文档https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-requiredVue-loader在15.*之后的版本都是vue-loader的使用都是需要伴生VueLoaderPlugin的解决方法：在webpack.config.js中加入如下:varpath=require('path');constVueLoaderPlugin=require('vue-loader/lib/plugin');varExtractTextPlugin=require('extract-text-webpack-plugin');varconfig={//配置入口entry:{main:'./main'},//配置出口output:{//path用来存放打包后的文件输出目录，必填path:path.join(__dirname,'./dist'),//publicPath指定资源文件引用的目录publicPath:'/dist/',//filena...
vue的计算属性与方法的不同
vue的模板里可以使用表达式，但是它的设计初衷是用于简单计算，在模板中放入太多逻辑会让模板过重且难以维护。例如：<divid="example">{{message.split('').reverse().join('')}}</div>这里很难一眼看出是要显示什么，而且要多次使用的话也很麻烦，因此对于复杂逻辑应使用计算属性错误示例<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><!--开发环境版本，包含了有帮助的命令行警告--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><divid="app"><p>{{message.split('').reverse().join('')}}</...
vue 中使用 watch 出现了如下的报错
vue中使用watch出现了如下的报错报错:Method"watch"hastype"object"inthecomponentdefinition.DidyoureferencethefunctionMethod"watch"hastype"object"inthecomponentdefinition.Didyoureferencethefunctioncorrectly? 原因:watch是一个对象,应该以键值对的形式来使用,但是我将watch放到了methods:{}中,导致了这个问题; 解决办法:将watch对象拿出来,与methods平级; ...
Vue内敛模板
在学习《Vue实战》一书时，学习到组件高级应用-内联模板这一小节时，照着书上的例子敲了一遍，发现未达到预期，切报错。书上源代码如下：1<!DOCTYPEhtml>2<html>3<head>4<metacharset=”utf-8”>5<title>内联模板</title>6<scriptsrc="../../vue.js"type="text/javascript"></script>7</head>8<body>9<divid="app"v-cloak>10Vue提供一个内联模板的功能，在使用组件时，给组件标签使用inline-template特性，组件就会把它的内容当作模板，而不是把它当作内容分发。11<child-componentinline-template>12<div>13<h2>在父组件中定义子组件的模板</h2>14<p>{{message}}</...
vue自定义组件添加原生事件监听
注：全局或局部注册的组件称为子组件，其中声明的组件名称（如下demo中的child）是一个自定义组件Demo1-直接给父组件添加事件监听1<!DOCTYPEhtml>2<html>3<head>4<metacharset="UTF-8">5<title></title>6<scriptsrc="../../vue.js"></script>7</head>8<body>9<divid="root"@click="handleClick">10Child11</div>12<script>13Vue.component('child',{14template:'<div>Child</div>'15})1617varvm=newVue({18el:'#root',19methods:{20handleClick:function(){21alert(1);22}23}24})25</script>...
vue 组件开发 props 验证
在Vue中父组件向子组件中传送数据是通过props实现的，一个简单的使用props的例子：1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8">5<title>VueStudy</title>6</head>7<body>89<divid="app">10<foo-component:foo-message="fooMessage"></foo-component>11</div>1213<scripttype="text/javascript"src="lib/vue.js"></script>14<scripttype="text/javascript">1516varfooComponent={17props:['fooMessage'],18template:'<div>{{fooMessage}}</div>'19};2021v...
Vue中子组件数据跟着父组件改变和父组件数据跟着子组件改变的方法
父组件的代码1<template>2<divclass="home">3<imglogo"src="../assets/logo.png">4<!--<HelloWorldmsg="WelcometoYourVue.jsApp"/>-->5父组件的值<inputtype="text"v-model="parentVal">6<div>7<child-test:inputData="parentVal"></child-test>8</div>9</div>10</template>11<script>12//@isanaliasto/src13importHelloWorldfrom'@/components/HelloWorld.vue'14importChildTestfrom'@/components/child-test.vue'15exportdefault{16name:'home',17components:{18He...
vue之使用cookie
vue资源库中有个插件很好用vue-cookiesgithub地址：https://github.com/cmp-cc/vue-cookies使用起来也很方便，将vue-cookies.js引入$cookies.config()设置默认值this.$cookies.config(expireTimes,path)expireTimes默认1dpath默认'/',$cookies.set()this.$cookies.set(key,value[,expireTimes[,path[,domain[,secure]]]])key:cookie名注意$cookieskeynamesCannotbesetto['expires','max-age','path','domain','secure']value:cookie值vue-cookie会自动帮你把对象转为jsonif(value&&value.constructor===Object){value=JSON.stringify(value)}expireTimes:cookie有效时间，默认时间为1d可以为到期时间点...