• 等级
  • 34261 访问
  • 97 原创
  • 45 转发
  • 51438 排名
  • 8 评论
  • 5 获赞

vue-router路由元信息详解

在路由列表中,每个路由都有一个meta元数据字段,我们可以在这里设置一些自定义信息,供页面组件或者路由钩子函数中使用。下面通过样例进行演示。1,meta数据配置:这里我们将每个页面的title都写在meta中来统一维护。constrouter=newRouter({routes:[//配置路由,使用数组形式{path:'/...

2019-04-23 22:28:55

vue中$router和$route的区别

1、$route是一个对象:把this.$route打印出来如下:可以获取当前页面的路由的路径query、params、meta等参数;2、$router是VueRouter的一个实例对象:把this.$router打印出来如下:在options中可以获取路由的routes配置参数。我们使用this.$router可以不在每个独立需要封装路由的组件中都导入路由。...

2019-04-23 22:24:08

vue实例:element-ui导航栏通过vue-router配置多级导航菜单

{path:'/home',component:Home,name:'导航一',iconCls:'el-icon-menu',children:[{path:'/table',component:table,name:'表格'},{path:'/carousel',component:elC...

2019-04-22 22:34:38

Sass的使用

Sass是一种CSS预处理语言。首先要了解什么是CSS预处理器?CSS预处理语言是一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让css更加简洁、适应性更强,可读性更佳,更易于代码的维护等诸多好处。CSS预处理语言有Scss(Sass)和Less、Postcss。那么Scss和Sass有什么区别呢?...

2019-04-20 10:59:28

vue-cli中安装配置sass

一、安装对应依赖node模块:npminstallnode-sass--save-devnpminstallsass-loader--save-dev二、打开webpack.base.config.js在loaders里面加上:{test:/\.scss$/,loaders:["style","css","sas...

2019-04-20 09:24:50

vue路由:导航守卫

1.导航守卫是什么官方这么说:正如其名,vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。好吧,看不懂,就好(当)好(废)理(话)解(吧)下。其实,导航守卫就是路由跳转过程中的一些钩子函数,再直白点,路由跳转是一个大的过程,这个大的过程分为跳转前中后等等细小的过程,在每一个过程中都有一个函数,这个函数能让你操作一些其他的事儿,这就是导航守卫。2.导航守卫...

2019-04-17 21:45:37

es6中的模块化

在之前的javascript中是没有模块化概念的。如果要进行模块化操作,需要引入第三方的类库。随着技术的发展,前后端分离,前端的业务变的越来越复杂化。直至ES6带来了模块化,才让javascript第一次支持了module。ES6的模块化分为导出(export)与导入(import)两个模块。export的用法在ES6中每一个模块即是一个文件,在文件中定义的变量,函数,对象在外部是无法...

2019-04-17 20:48:34

Webstorm上配置Github和Git

1、首先你得有一个Github的账号,自行注册2、进入settings页,如图操作或者快捷键ctrl+alt+s3、配置Github填入你的github账号密码,不要忘记test一下,如果配置成功会出现如下弹框。4、进行Git配置快捷键ctrl+alt+s进入settings页如图设置5、配置密钥上述配置好之后是不够的,需要SSH...

2019-04-16 22:34:31

vue:vuex中mapState、mapGetters、mapActions辅助函数及Module的使用

一、普通store中使用mapState、mapGetters辅助函数:在src目录下建立store文件夹:index.js如下:importVuefrom'vue';importVuexfrom'vuex';Vue.use(Vuex);conststate={//要设置的全局访问的state对象showFooter:true,changabl...

2019-04-15 22:17:43

vue路由7:编程式的导航

页面跳转有两种方法Øa标签可以设置href之后,实现页面跳转。Ø另外,还有一种方法去实现页面跳转:写代码Window.location=“”如下:<aid="baidu">百度</a>添加click之后:document.getElementById("btn").onclick=function(){window....

2019-04-14 09:36:53

es6+vue+vue-cli+vue-router+vuex+axios+webpack+element-ui+sass+node.js实例

首先展示下呈现的效果图:一、目录结构:二、package.json:{"name":"vue-cli3","version":"1.0.0","description":"AVue.jsproject","author":"samve<samveduan@163.com>","private":true,"scr...

2019-04-06 22:21:56

Vue实例

一、购物车:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkhref="https://cdn.bootcss.com/bootstrap/4.1.1/css...

2019-03-20 22:04:53

使用于ztree的中国省市县区json数据

[{"id":0,"pId":0,"name":"中国"},{"id":2,"pId":0,"name":"北京市"},{"id":3,"pId":0,"name":"上海市"},{"id":4,"pId"

2019-03-06 22:07:24

ztree模糊搜索

<!DOCTYPEhtml><htmllang="zh-CN"><head><metahttp-equiv="X-UA-Compatible"content="IE=EDGE"><metahttp-equiv="Content-Type"content="text/html;

2019-03-06 22:05:43

ztree模糊搜索及ztree与bootstrapTable表格数据左右增加和删除

<!DOCTYPEhtml><htmllang="zh-CN"><head><metahttp-equiv="X-UA-Compatible"content="IE=EDGE"><metahttp-equiv="Content-Type"content="text/html;

2019-03-06 22:02:24

vm表单输入绑定之修饰符:.lazy、.number、.trim

.lazy:在输入框中,v-model默认是同步数据,使用.lazy会转变为在change事件中同步,也就是在失去焦点或者按下回车键时才更新。.number:修饰符可以将输入的值转化为Number类型,否则虽然你输入的是数字,但它的类型其实是String,在数字输入框中比较有用。.trim:修饰符会自动过滤掉输入的首尾空格。...

2019-02-24 10:49:17

vue之事件处理

事件冒泡:stop修饰符:阻止事件冒泡事件冒泡:当父元素和子元素同时绑定了事件时,子元素先触发事件,父元素再触发事件。<divid="app-3"><div@click="count">父元素<br><p@click.stop="count">子元素</p&a

2019-02-21 23:08:08

跨域请求携带cookie

functionajaxPostRequestCipherMachine(url,param){varurl=url;vardict={'ret':false,'errmsg':'请求失败'};varjsonData=param;...

2019-02-13 21:45:32

vue教程:模板语法

如果想显示{{}}标签,而不进行替换,使用v-pre即可跳过这个元素和它的子元素的编译过程。Vue.js只支持单个表达式,不支持语句和流控制。另外,在表达式中,不能使用用户自定义的全局变量,只能使用Vue白名单内的全局变量,例如Math和Date。文本:通过使用v-once指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定...

2019-02-12 21:09:17

vue教程:数据与方法

当一个Vue实例被创建时,它向Vue的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。//我们的数据对象vardata={a:1}//该对象被加入到一个Vue实例中varvm=newVue({data:data})//获得这个实例上的属性//返回源数据...

2019-02-12 18:19:11

duansamve

不懂android的java工程师不是好的web前端开发工程师!
关注
  • 计算机软件
  • 中国 湖南省 长沙市
奖章
  • 持之以恒
  • 勤写标兵Lv1
  • 粉丝 2
  • 关注 0