vue
文章平均质量分 73
Leon_94
Just Code IT!
展开
-
vue2.0中 $emit() 和 $on() 的用法
简单粗暴直接上代码html>head> meta charset="utf-8" /> title>Leontitle> script src="https://cdn.jsdelivr.net/npm/vue">script>head> body> div id="box"> com-a>com-a>原创 2018-02-01 11:54:55 · 3004 阅读 · 0 评论 -
Vue实现tab切换效果
<!--这里是html结构--><div id="app"> <ul> <li v-for="(item,index) in tabs" :class="{active:index == num}" @click="tab(index)"&am原创 2018-05-07 22:08:57 · 2293 阅读 · 0 评论 -
vue中使用图片懒加载vue-lazyload插件指南
使用方式使用vue的 vue-lazyload 插件插件地址:https://www.npmjs.com/package/vue-lazyloadInstallation 安装方式1. npm $ npm i vue-lazyload -D2.CDNCDN:https://unpkg.com/vue-lazyload/vue-lazyload.js<script s...原创 2018-09-20 19:04:30 · 633 阅读 · 0 评论 -
vuex数据状态持久化
用过vuex的肯定会有这样一个痛点,就是刷新以后vuex里面存储的state就会被浏览器释放掉,因为我们的state都是存储在内存中的。所以我们通过 vuex-persistedstate这个插件,来实现将数据存储到本地用法很简单1.npm install vuex-persistedstateimport createPersistedState from 'vuex-pers...原创 2018-10-19 21:09:56 · 7161 阅读 · 3 评论 -
element-ui messagebox 自动关闭
最近做项目的时候发现element-ui 的messageBox 没有自动关闭的api,于是自己写了个,直接上代码window.alert = (txt,timer) =&amp;gt; { if(!txt){ txt = '哈哈哈哈哈哈哈' } let str = `&amp;lt;p&amp;gt;${txt}&amp;lt...原创 2018-10-26 18:20:55 · 13440 阅读 · 1 评论 -
Vue.js 用 $refs 定位 子组件的方法时 出现 undefined
使用 ref 来定位 DOM 节点很方便。但是期间遇到了一个问题,就是在生命周期 mounted 钩子函数里面使用 this.$refs.xx,打印出来的却是 undefined?如果在 DOM 结构中的某个 DOM 节点使用了 v-if、v-show 或者 v-for(即根据获取到的后台数据来动态操作 DOM,即响应式),那么这些 DOM 是不会在 mounted 阶段找到的。因为upd...原创 2018-11-22 20:12:55 · 7298 阅读 · 0 评论 -
vue中 computed 下使用箭头函数会报错
computed: { myPhone: () => { let num3 = this.mobile.slice(-4); let num1 = this.mobile.slice(0,-8); let str = `${num1}****${num3}`; return str; } }这种...原创 2018-11-29 11:12:07 · 4713 阅读 · 0 评论 -
webpack-DllPlugin优化打包性能(基于vue-cli)
1.介绍Dll这个概念应该是借鉴了Windows系统的dll。一个dll包,就是一个纯纯的依赖库,它本身不能运行,是用来给你的app引用的。打包dll的时候,Webpack会将所有包含的库做一个索引,写在一个manifest文件中,而引用dll的代码(dll user)在打包的时候,只需要读取这个manifest文件,就可以了。简单说将静态资源文件(运行依赖包)与源文件分开打包,先使用Dl...原创 2018-12-13 14:27:00 · 1262 阅读 · 0 评论 -
单元测试
单元测试单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作。测试框架所谓"测试框架",就是运行测试的工具。通过它,可以为 JavaScript 应用添加测试,从而保证代码的质量。类似的测试框架还有 Mocha、Jasmine、Karma、Tape 等MochaMocha(发音"摩卡")诞生于 2011 年,是现在最流行的 JavaScript 测试框架之一,在浏览...原创 2018-12-17 16:34:04 · 612 阅读 · 0 评论 -
vue父组件调用子组件的方法-$ref
说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素)使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods根据以上三条,我们就可以直接给子组件添加ref属性然后,通过vm.$refs来调用子组件的methods中的方法或者获得data...原创 2018-05-18 14:30:34 · 8722 阅读 · 0 评论 -
vue2——计算属性 computed
参考vue的官方文档如:<div id="example"> {{ message.split('').reverse().join('') }}</div>我们可以在模板内写表达式,但是如果表达式的逻辑过于复杂,我们的项目就会变得难以维护,这就想我们html中写了太多的行内样式一样,使项目变得繁琐。所以当我们碰到复杂的逻辑,可以用计算属性comput...原创 2018-03-06 17:40:08 · 343 阅读 · 0 评论 -
vue2——生命周期函数
根据官方给出的图示: Vue2.0的生命周期钩子一共有10个 对于上面有个大致的了解,可以用代码测试一下:<!DOCTYPE html><html><head> <title></title> <script type="text/javascript" src="https://cdn原创 2018-03-06 19:28:01 · 2145 阅读 · 0 评论 -
vue的组件之间的嵌套
第一步:初始化一个webpack项目,这里不再复述第二步:建立两个user.vue 和 userCreate.vue 两个文件这是user.vue文件<!--模板--><template> <div id="app"> <users></users> </div></原创 2018-02-27 18:00:51 · 6823 阅读 · 0 评论 -
vue2——基于element UI 的分页组件
1.模板 pagination.vue<template> <div class="pagination"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" ...原创 2018-03-07 18:19:25 · 2007 阅读 · 0 评论 -
vue—子组件修改父组件的值
如何在子组件中修改父组件的值第一步:首先得保证父组件中有值吧这是userManage.vuedata(){ return{ dialogCreate:'false' }}第二步:在父组件中引用子组件import Form from './userCreate'第三步:父组件中注册子组件并引用<template> ...原创 2018-02-28 17:50:02 · 53596 阅读 · 7 评论 -
vuex简单入门篇
最近一直在自学vuex,官方文档刚开始看不懂,网上又看了很多资料,但是却越看越迷糊。自己稍微有了一点感悟以后,把它写下来,一方面为了梳理,另一方面可以分享出来供大家参考。1.vuex的本质其实就是各个组件之间的响应式通信。比如我们有一个表单组件,表单组件又包含了几个子组件,当子组件的数据和父组件的数据或者各个子组件数据之间发生交互的时候,它们之间的通信就会变得很麻烦。2.安装、...原创 2018-03-15 20:00:35 · 209 阅读 · 0 评论 -
vue2.0的小坑——当Element UI 中的el-dialog包含子组件时,refs报undefind的问题
<el-dialog title="提示" :visible.sync="dialogCreate" width="30%" @open="look()" :before-close="handleClose"> <app-form ref="appForm" v-bind:row="row"原创 2018-03-05 18:05:17 · 11970 阅读 · 5 评论 -
vue2.0——slot 插槽
单个插槽<template> <div id="example"> <h1>我是父组件的标题</h1> <app-layout> <p>主要内容的一个段落。</p> <p>另一原创 2018-03-05 18:36:42 · 1497 阅读 · 0 评论 -
vue2.0的过滤器 Filters
过滤器的介绍vue1.0有自己的内置过滤器,大家可以点开查看,不过vue2.0已经废弃掉了。现在的过滤器只能自己定义,自己定义的话有两种方式,全局过滤器和局部过滤器全局过滤器或者在创建 Vue 实例之前全局定义过滤器:Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toS...原创 2019-01-09 21:44:30 · 825 阅读 · 1 评论