1.创建完成一个初始项目后,通过 npm install stylus -D命令,在项目内安装stylus.(注意:命令结尾 -D 即是 --save-dev 的简写形式) 2.需要安装loader,通过 npm install stylus-loader css-loader style-loader --save-dev  命令. 3.找到 webpack.base.conf.js 文件,并在其中的rules中写入配置: { test:/\.css$/, loader:'style-load

关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释 当前文章主要讲述directives怎么用,directives做权限按钮的功能 ###1. directives 怎么用###不错的示例,可以参考下,点击访问 directives 在生命周期内用 export default { data() { return { }; }, directives:{ 'local-test':function(el,binding,vnode){ /**

概述 什么是Stylus Stylus是一个CSS预处理器. 什么是CSS预处理器 关于CSS预处理器,推荐先行阅读这篇文章:为您详细比较三个 CSS 预处理器(框架):Sass.LESS 和 Stylus现在你应该对CSS预处理器有个大概的认识了,总的来说,CSS预处理器为CSS提供了更多的更加灵活的可编程性,是不是很棒! 选型 那么在SaaS,Less和Stylus中,为什么选择后者呢?因为Stylus是来源于Node.js社区,与js关系密切,所以基于Vue.js的开发,我们选择使用Sty

1.keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会大大的节省性能. 2.keep-alive的基本用法 在app.vue中 <!-- 缓存所有的页面 --> <keep-alive>  <router-view v-if="$route.meta.keep_alive"&

在项目中我们经常会遇到多个组件调用同一个方法的问题,为了避免每次都在.vue文件中定义并调用,我们可采用vue的mixin的用法: 具体使用如下: 我们需要在main.js中引入mixins文件夹下的index.js文件, 这样,我们准备工作就做好了,那么在.vue文件中,我们就可以调用啦: 大功告成,其实很好理解的!

指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 例如: <p v-if="seen">现在你看到我了</p> 如上所示:其中,v-是Vue的标识,if是指令ID,yes是expression.yes是MVVM中的VM即ViewModel,当它的值发生变化,就会触发指令,改变View视图的显示.

1.跳转用法 @1.在template模板中通常使用router-link to='url' @2.在js中 1.this.$router.push({path: ''/order/index''}); 2.this.$router.push({path: '/order/page1',query:{ id:'2'}}); 3.this.$router.push({name: '/order/page2',params:{ id:'6'}}); 第一种不传参直接跳转到某一个页面,第二种,第三种传

Object.assign()是浅拷贝. 合并对象 var o1 = { a: 1 }; var o2 = { b: 2 }; var o3 = { c: 3 }; var obj = Object.assign(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变. 注意,具有相同属性的对象,同名属性,后边的会覆盖前边的. Vue

v-cloak 的作用和用法 用法: 这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕. <div id="app"> {{msg}} </div> HTML 绑定 Vue实例,在页面加载时会闪烁 然后才会出现 加载完成 字样,为了效果更明显,我们可以延后加载 Vue 实例 setTimeout(() => { n

首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化,或者是data中的某个变量. 值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值. 值也可以是函数名:不过这个函数名要用单引号来包裹. 第三种情况厉害了. 值是包括选项的对象:选项包括有三个. 1.第一个handler:其值是一个回调函数.即监听到变化时应该执行的函数. 2.第二个是deep

数组: this.$set(Array,index, newValue) 对象: this.$set(Object, key, value)

一.首先确认watch是一个对象,一定要当做对象来用 watch:{ } 对象:有键,有值. 1.键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化.或者是data中的某个变量. 2.值: ① 可以是[函数]:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值. ② 可以是[函数名]:不过这个函数名要用单引号来包裹. ③ 可以是[包括选项的对象]:选项包含有三个,如下: a. 第一个handler:其值是一个回调函数.即监听到变

说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D

简介 vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架.本人比较喜欢用之.在我们用vue时,我们经常用到一个方法是this.$nextTick,相信你也用过.我常用的场景是在进行获取数据后,需要对新视图进行下一步操作或者其他操作时,发现获取不到dom.因为赋值操作只完成了数据模型的改变并没有完成视图更新.在这个时候我们需要用到本章介绍的函数. 为什么要用nextTick 请看如下一段代码 new Vue({ el:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slot</title> <script src="./node_modules/vue/dist/vue.js"></script> </head> <body> <div id=&

本文转载于時間蒼白了誓言_49b9 使用vue单页开发项目时遇到一个问题:在列表页进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用解决这个问题,下面是我的使用心得. 是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 1.在app.vue页面中把替换成下图所示: <keep-alive> <router-view v-if="$route.meta.keepLive"></router-

说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素)使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods添加ref属性<div id="app"> <h1 ref="h1Ele">这是H1</h1> <hello ref="ho"></h

<template> <div> <div class="content clearfix" v-on:click="goorderingDetail(v)" v-for="(v,index) in anylist" :key="index"> <div class="clearfix"> <div class="fl dingnumber&q

一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值. 但是使用了ref绑定之后,我们就不需要再获取dom节点了,可以直接在上面的input上绑定input1,然后$refs里面调用就行. 在JavaScript里面通过this.$refs.input1去调用,这样的做法实际上是访问VUE虚拟出来的DOM,可以有效减少获取/操作DOM节点的性能消耗. HTML <div id="app"

安装步骤 cnpm install stylus --save-dev cnpm install stylus-loader --save-dev 写法如下: <style lang="stylus"> .goods display flex position absolute top 174px bottom 46px width 100% overflow hidden .menu-wrapper flex 0 0 80px width 80px background