![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue.js
但心情怎会无恙
以梦为码
展开
-
Vue组件通信大全
1.$emit 和 props2.$emit 和 $on(事件总线eventBus)3.$parent 和 $children4.$root 和 $refs5.inject 和 provide6.v-model7.Vuex原创 2020-04-21 11:36:24 · 161 阅读 · 0 评论 -
vue的事件总线--eventBus用法
容器新建store/eventBus.jsimport Vue from 'vue'const eventBus = new Vue()export default eventBus引入import eventBus from "../store/eventBus";监听(接收)eventBus.$on("search", val => { });触发(发送)eve...原创 2020-04-21 11:10:20 · 188 阅读 · 0 评论 -
使用screenfull.js在vue中实现浏览器全屏显示
1.安装npm install --save screenfull2.引入import screenfull from 'screenfull'3.调用screenfull.toggle()示例<template> <div class="home"> <button @click="open">全屏</button>...原创 2020-04-06 10:22:23 · 581 阅读 · 0 评论 -
Vue2.0webpakc打包注意
1.静态资源路径config – index.js – build – assetsPublicPath改为:assetsPublicPath: './'2.如果使用了box-orient属性build – webpack.prod.conf.js注释掉下面这段代码 new OptimizeCSSPlugin({ cssProcessorOptions: con...原创 2018-09-19 11:16:18 · 231 阅读 · 0 评论 -
Vue常用第三方模块
1.Element-ui安装 npm install element-ui -S全局引入(main.js) import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);按需引入1.首先安装插件babel-plugin-component...原创 2018-09-19 13:57:28 · 578 阅读 · 0 评论 -
Vuex基础
安装npm n install vuex --save新建仓库新建vuex文件夹新建store.js文件写入内容import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({ const state={ count:1 }, ...原创 2018-09-20 09:32:32 · 123 阅读 · 0 评论 -
前端面试题汇总(vue.js)
原生JS操作DOM节点三列布局HTML5/CSS3新特性webStoragevue父子组件传值,兄弟组件传值vue生命周期,应该在哪个生命周期中请求数据v-text和v-html单页面实现原理前端三大异步ES6vue项目中页面的加载顺序vue路由的两种模式xml和json的区别get请求和post请求的差别...原创 2018-10-26 13:16:56 · 143 阅读 · 0 评论 -
根据图片形状计算图片尺寸
/*计算图片尺寸*/function caculateImgSize(url) { //限制最大尺寸 let max_width = 690; let max_height = 600; let results; return new Promise((resolve, reject)=>{ uni.getImageInfo({ src: url, success...原创 2019-05-09 16:49:29 · 769 阅读 · 0 评论 -
uni-app或小程序图片视频上传至七牛云
//上传至七牛云 uploadFile(user_id, path, success, fail) { console.log('开始上传') let time = new Date() let name = user_id + String(time.getTime()); //获取token return new Promise((resolve, reject) =&g...原创 2019-06-13 08:57:33 · 3681 阅读 · 0 评论 -
Vue监听组件的生命周期
通过监听组件的生命周期从而进行某些操作常规做法 // Parent.vue<Child @mounted="doSomething"/>// Child.vuemounted() { this.$emit("mounted");}简易做法<Child @hook:mounted="doSomething"/><Child @hook:up...原创 2019-10-11 17:14:47 · 297 阅读 · 1 评论 -
watch的初始立即执行
摘自掘金_Dreams的《6个有用的Vue开发技巧》传送门当 watch 一个变量的时候,初始化时并不会执行,如下面的例子,你需要在created的时候手动调用一次。created() { this.fetchUserList();},watch: { searchText: 'fetchUserList',}上面这样的做法可以使用,但很麻烦,我们可以添加immediat...原创 2019-10-11 17:19:53 · 5403 阅读 · 0 评论 -
vue-quill-editor富文本编辑器
安装:npm install vue-quill-editor --savemain.js:import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubb...原创 2018-09-05 19:45:53 · 172 阅读 · 0 评论 -
在Vue中实现打字机的效果
前一段时间找工作做网页简历,想实现打字机的效果。按理说像打字机这种动画效果的实现首选是jquery,毕竟jquery还是以操作dom为主,而vue是数据驱动,但是jquery并没有能狗满足我设想的功能的插件,又偷懒不想自己实现双向绑定,只好自己用vue实现。代码写的不是很漂亮,希望大家不喜勿喷,这里只是提供一个思路。最终效果: I‘m ByPunk! I‘m looking for...原创 2018-09-05 19:17:08 · 7761 阅读 · 1 评论 -
vue路由跳转后执行滚动条初始化
router.afterEach((to,from,next) => { window.scrollTo(0,0);});原创 2018-08-29 15:13:04 · 2004 阅读 · 0 评论 -
Vue中的组件传值
父传子父组件: 在引入子组件的时候绑定属性&lt;template&gt; &lt;div&gt; &lt;child :money="moneyCount"&gt;&lt;/child&gt; &lt;/div&gt;&lt;/templat原创 2018-08-10 20:09:21 · 110 阅读 · 0 评论 -
数据双向绑定原理及实现
现在主流JavaScript各有差异,但是都有的一个特性就是数据双向绑定。以Vue.js为例,MVVM模式,细致地来分析,M(Model)数据层,V(View)视图层,VM(ViewModel)Vue实例。利用观察者模式,利用ViewModel这个中间桥梁,将完全分离的视图层和数据层连接起来。再通过JavaScript的数据劫持机制实现一方更新,另一方也随之更新的效果。首先介绍一下什么是数...原创 2018-08-10 20:21:28 · 475 阅读 · 0 评论 -
Vue实例三个对象(methods,computed,watch)的差别
methods:只要进行调用就会执行,不管依赖的值有没有改变。无缓存。computed:监听其所有依赖的变化,如果有变化会执行,没有变化不执行。有缓存,不用每次重新算。不支持异步。watch:观察某一个变量,发生变化会执行。支持异步。a(newVal,oldVal){ //观察谁就是谁,a改变就会触发}小结:1.主动调用的方法写在methods里,...原创 2018-08-10 20:24:45 · 800 阅读 · 0 评论 -
使用computed实现购物车的全选和总价功能
挂载在vue实例上 计算对象,只要依赖的值有变化就会执行,计算属性写成函数,默认调get方法,但是它不支持异步。computed{ checkAll(){ get(){ return this.products.every(p=>p.isSelected) }, set(val){ ...原创 2018-08-10 20:25:56 · 968 阅读 · 0 评论 -
使用filter实现购物车的删除功能
给删除按钮绑定删除事件:@click=remove(product)methods:{ remove(p){ this.products = this.products.filter(item=>item!==p) }}原创 2018-08-10 20:26:44 · 524 阅读 · 0 评论 -
Vue自定义指令
自定义指令实现还是依据操作DOM,在directives里定义,指令放在那个元素身上 el就是哪个dom:变色v-colorcolor(el,bindings){ el.style.background= bindings.value},拖拽v-dragdrag(el){ el.onmousedown= function(e){ var d...原创 2018-08-10 20:27:39 · 275 阅读 · 0 评论 -
Vue中实现过渡效果
过渡效果,当然只有dom从显示要隐藏或隐藏到显示才能用。Vue.js为我们提供了内置的过渡组件transition和transition-group。过渡阶段:Vue将元素的过渡分为四个阶段,进入前,进入后,消失前,消失后。但是往往进入后的状态等同于消失前的状态,即元素的默认正常状态。所以四个阶段可以理解为三个阶段:进入前,正常态,消失后。三个状态分别对应不同的class,如下可以对不同阶...原创 2018-08-10 20:31:19 · 1945 阅读 · 0 评论 -
Vue指令大全
v-text将指定内容渲染成字符串例:v-text=”name”v-html将指定内容渲染成html的标签例:v-html=”name” v-once数据变化不会导致视图刷新v-ifv-show以上两个指令都是控制元素的显示和隐藏,但是实现的原理不同。v-if 通过操作dom来控制显隐v-show通过操作样式display属性如果一开始就能确定数...原创 2018-08-11 11:18:05 · 147 阅读 · 0 评论 -
在Vue中给网站设置头像ico
ico文件要放在static下。 在头部标签中引入:<link rel="shortcut icon" type="image/x-icon" href="/static/web-avatar.ico">原创 2018-08-15 09:38:25 · 691 阅读 · 0 评论 -
Vue打包后box-orient消失
从‘哎呦喂勒’博客转载 博客链接注释掉webpack.prod.conf.js中下面的代码new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true ...转载 2018-08-15 13:37:51 · 264 阅读 · 0 评论 -
JQuery和Vue.js的区别
JQuery:只是对原生JS的API选择器等等进行了封装,便于操作DOM,本质还是操作DOM实现逻辑,数据和界面还是连接在一起的。适用于需要操作DOM的业务:动画,交互效果,页面特效。Vue.js:MVVM模型,将数据层和视图层完全分离开,不仅对API进行封装, 还提供了一系列的解决方案。这是一个思想的转变。数据驱动的机制,主要操作的是数据而不是频繁操作DOM(导致页面频繁重绘)。适用...原创 2018-08-10 20:10:40 · 5812 阅读 · 0 评论