vue基于vue-cli脚手架简单后台案例

vue基于vue-cli脚手架简单后台案例

|-- build// webpack配置文件|-- config// 项目打包路径|-- src// 源码目录||-- components// 公共的组件||--login.vue// 登陆组件||-- footer.vur// 底部公共组件||-- header.vue// 头部公共组件||-- lib// 库(自己封装的/第三方的)||-- utils.js// 工具
浏览:1193 标签: vue-cli vue 时间: 2017-12-07 15:39
vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)

vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)

beforeRouteEnter(to,from,next)        beforeRouteEnter 函数内部 this 是undefined,这是因为在执行路由钩子函数beforRouteEnter时候,组件还没有被创建出来;先执行beforRouteEnter,再执行组件周期钩子函数beforeCreate。我们可以通过 next 获取组件的实例对象,如:next
浏览:22883 标签: 钩子函数 vue 时间: 2017-12-07 11:36
vue全局钩子函数(beforeEach/afterEach)

vue全局钩子函数(beforeEach/afterEach)

导航钩子函数        导航发生变化时,导航钩子主要用来拦截导航,让它完成跳转或者取消。执行钩子函数位置        router全局        单个路由        组件中钩子函数        router 实例上:beforeEach、afterEach        单个路由中:beforeEnter        组件内的钩子:befor
浏览:1742 标签: beforeEach afterEach 钩子函数 vue 时间: 2017-12-06 17:59
vue借助于router实例方法实现编程式导航(back/forward/go/push/replace)

vue借助于router实例方法实现编程式导航(back/forward/go/push/replace)

编程式导航        借助于 router 的实例方法,通过编写代码来实现导航的切换。back:回退一步forward:前进一步go:指定前进/回退的步数push:导航到不同的 url,向 history 栈添加一个新的记录replace:导航到不同 url,替换 history 栈中当前记录        每一次点击链接都会把地址存在历史纪录栈。<div>
浏览:3975 标签: router 编程式 vue 时间: 2017-12-06 17:12
vue中transition动态设置name属性左右切换

vue中transition动态设置name属性左右切换

        了解vue过渡动画transition使用/过渡模式:http://www.menvscode.com/detail/5a266cc010c98d0e654c1bca        代码片段一<template><divid="app"><divclass="nav-box"><ulclass="f-cb"><li><router-linkto="/"exac
浏览:6251 标签: transition vue 时间: 2017-12-06 11:47
vue过渡动画transition使用/过渡模式

vue过渡动画transition使用/过渡模式

过渡效果        提供了 transition 的封装组件,添加过渡动画;通过添加删除css类名来实现。过渡的css类名:默认的前缀是 "v-"开头        v-enter:定义进入过度的开始状态;        v-enter-active:定义进入活动状态;        v-enter-to:定义进入的结束状态;        v-leave:定义
浏览:1888 标签: transition 过渡动画 vue 时间: 2017-12-05 17:54
vue路由query字符串传参

vue路由query字符串传参

方式一:to="?info=follow"<template><div> 我是user<hr><div><router-link:to='"/user/"+item.tip+"/"+item.id'key='index'v-for="item,index in userList"style="display:inline-block;padding:0 10px;mar
浏览:1119 标签: query vue 路由 时间: 2017-12-05 16:30
vue路由中动态路径参数/监控$route路由信息对象

vue路由中动态路径参数/监控$route路由信息对象

动态路劲        匹配到的所有路由,全部映射到同一组件。路劲:/user/:userId,其中userId为动态路劲参数。        获取参数:通过路由信息对象的 params 。对组件注入        通过在 Vue 根实例的 router 配置传入 router 实例;        $router:router的实例对象;        $rout
浏览:5222 标签: 路由 $route vue 时间: 2017-12-04 14:12
vue路由中设置滚动行为(scrollBehavior)

vue路由中设置滚动行为(scrollBehavior)

        在文档页面(http://localhost:8080/document)拉动滚动条,然后刷新浏览器会发现滚动条依然在原来的位置,这是浏览器的默认行为,会记录浏览器滚动条默认位置。        但是点击浏览器“前进/后退”按钮,会发现当初那个页面的滚动条从0开始了,没有记录上一次滚动条的位置。现在要求点击浏览器“前进/后退”按钮,页面滚动条要记录上一次的位置
浏览:5798 标签: vue 滚动行为 路由 scrollBehavior 时间: 2017-12-02 10:39
vue命名视图(router-view)

vue命名视图(router-view)

命名视图:在同级同时展示多个视图,而不是嵌套展示。展示多个视图,需要写多个<router-view name=""></router-view>,通过name属性来区分。App.vue<template><divid="app"><divclass="nav-box"><ulclass="f-cb"><li><router-linkto="/"exacttag="div"e
浏览:1737 标签: vue 命名视图 router-view 时间: 2017-12-02 9:52
vue路由嵌套

vue路由嵌套

App.vue<template><divid="app"><divclass="nav-box"><ulclass="f-cb"><li><router-linkto="/"exacttag="div"event="mouseover">home</router-link></li><li><router-link:to="{path:'/document'}"event="
浏览:953 标签: 路由 vue 时间: 2017-12-01 17:10
vue路由重定向(redirect)和别名(alias)

vue路由重定向(redirect)和别名(alias)

1、redirect : ' /路劲名字 'let router =new VueRouter({ mode:'history',//默认是hash模式 linkActiveClass:'menvscode-active', routes:[ { path:'/home', component:Home }, { path:'/about', com
浏览:1848 标签: 重定向 别名 redirect vue 时间: 2017-12-01 16:10

邮箱快速注册

忘记密码