vue
Liu_Jun_Tao
这个作者很懒,什么都没留下…
展开
-
vue-cli的坑 Invail CSS after load the style
在使用scss时需要添加loader,例如{test: /\.scss$/,use: ['style-loader', 'css-loader', 'sass-loader'],}然而在使用vue-cli脚手架创建项目的时候,可能会出现报错:Invalid CSS after "...load the styles": expected 1 selector or at-r...转载 2018-07-30 19:56:01 · 2985 阅读 · 0 评论 -
Vue.nextTick的理解
官网说明:在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM。原理:当我们在一个Vue实例里面更新绑定的数据时,也就是data里面的值,可以分为两种情况,同步更新和异步更新。这里说下同步和异步,js是单线程的,从上至下执行到同步那里的代码时,数据就发生变化。当执行异步时,运行机制是:1.所有的同步都是在主线程上执行,形成一个执行栈2.主...原创 2019-04-28 14:42:26 · 352 阅读 · 0 评论 -
beforeRouteLeave在子组件中没有生效
考虑这么一种情况,在页面中存在父子组件,当需要离开当前页面时,要触发某个子组件中的事件。这里尝试了两种方式:1.添加路由守卫在子组件的.vue文件中,使用beforeRouteLeave钩子,然而并没有触发。debug测试发现,在父组件中添加的beforeRouteLeave可以触发。2.使用beforeDestory钩子子组件使用beforeDestory钩子,当离开页面时,...原创 2019-04-10 14:36:20 · 16196 阅读 · 3 评论 -
vue无限滚动插件使用记录
今天在看前同事做的项目时,了解到一款可以实现无限加载的vue插件vue-infinite-loading具体实现后的效果就是,当你在下拉一个菜单时,当下拉一定数量时,有一个加载等待的效果,然后再继续显示。并且利用插槽slot实现获取菜单完成后的提示。贴上链接:https://peachscript.github.io/vue-infinite-loading/#!/现在,我们通过一个简单的...原创 2018-09-28 21:27:14 · 1552 阅读 · 0 评论 -
vue的异步组件
在使用vue做单页应用或大型的网站时,随着功能的增多,组件文件也会随着增加,如果在第一次运行应用时,就加载所有的组件,就会造成性能影响,导致打开时间很长。在实际开发中,一个应用都是多个小组件组成的,对于一些非核心组件,不是立刻就需要加载的内容,就可以使用异步组件。vue允许使用一个工厂函数定义组件,这个工厂函数会异步解析组件。只有在这个组件被渲染的时候,才会触发这个工厂函数,且会把结果...原创 2018-08-21 21:13:38 · 1485 阅读 · 0 评论 -
vue中static文件夹
使用vue-cli创建项目时,发现文件结构中有一个叫做static的文件夹。图片一类的静态文件,应该放在这个static文件夹下,这个文件夹下的文件(夹)会按照原本的结构放在网站根目录下。这时我们再去使用/static绝对路径,就可以访问这些静态文件了例如在head.vue组件中使用图片时:...原创 2018-08-15 16:19:02 · 24340 阅读 · 1 评论 -
vue组件中样式的scoped属性
在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措一个公共组件button,为了样式模块化,给其加上scoped属性//button.vue<template> <div class="button-warp"> <button class="...转载 2018-07-31 23:13:39 · 615 阅读 · 0 评论 -
修饰符sync
sync修饰符只是作为一个编译时的语法糖存在,会被扩展为一个自动更新父组件属性的v-on监听器<child-component :foo.sync="bar"></child-component>会被扩展为:<child-component :foo="bar" @update:foo="val => bar = val"><转载 2018-07-31 22:46:42 · 152 阅读 · 0 评论 -
vue2使用bus.js进行兄弟组件通信
前言,父子组件中可以用props和$emit()如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,在相互通信的兄弟组件之中,都引入Bus,之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递创建一个bus.js文件,导出一个vue的实例import Vue from 'vue'export default new Vue()接下来就是要组...转载 2018-07-31 20:40:22 · 317 阅读 · 0 评论 -
router.push()
除了使用<router-link>创建a标签来定义导航链接,还可以借助router的实例方法,使用router.push方法。当点击<router-link>时,这个方法会在内部调用,所以说,点击<router-link :to="...">等同于调用router.push(...)该方法的参数可以是一个字符串路径,也可以是一个描述地址的对象 r...转载 2018-07-30 19:58:33 · 1587 阅读 · 0 评论 -
vue的model选项
今天在看vue-property-decorator时,遇到了@Model选项,也就是vue2.2中新增的实例model选项。原来只知道v-model属性实现双向绑定,对这个model选项突然不是很理解。所以这里重新对v-model和自定义组件的v-model做一个回顾,加深印象后,再去理解model选项到底是做什么的,有什么作用。vue中的v-model指令实现了表单的双向...原创 2019-05-15 15:01:08 · 29404 阅读 · 12 评论