vue2.0 路由知识一(路由的创建的全过程)

【vue2.0 路由知识一(路由的创建的全过程)】的更多相关文章

vue2.0学习笔记之路由（二）路由嵌套+动画

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue2.0学习笔记之路由(二)路由嵌套+动画</title> <link rel="stylesheet" href="animate.css"> </head> <body> &…

vue2.0学习笔记之路由（二）路由嵌套

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue2.0学习笔记之路由(二)路由嵌套</title> </head> <body> <div id="app"> <div> <router-link to="/home…

第1章路由选择原理 1.1 几个概念 1.1.1 被动路由协议用来在路由之间传递用户信息 1.1.2 主动路由协议用于维护路由器的路由表 R2#show ip route Codes: C - connected, S - static, I - IGRP, R - RIP, M - mobile, B - BGP D - EIGRP, EX - EIGRP external, O - OSPF, IA - OSPF inter area N1 - OSPF NSSA external t…

vue2.0 路由知识一(路由的创建的全过程)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../vue2.2.js"></script> <script src="../vue-router2.1.js"></script> </head> &…

vue2.0 vue-cli项目中路由之间的参数传递

1.首先配置路由, import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'home', component: require('../components/home.vue'), children: [ { path: 'user', name: 'user', component: requir…

vue2.0基础知识，及webpack中vue的使用

## 基础指令 ## [v-cloak]{ Display:none; } <p v-cloak>xx{{msg}}xx</p> //解决闪烁问题,xx显示 <p v-text='msg'>xxxx</p> //引入数据,默认没有闪烁问题,xxxx不显示 <p v-html='msg2'>xxxx</p> //引入html <p v-for='(item,i) in use…

vue2.0 之 douban （三）创建header组件

1.分析首页的header背景是绿色的,并且有一个搜索框,其他页面都是灰色的背景,在header的左侧,是一个返回按钮,右侧,有分享或者评论等图标,中间就是header的标题.我们先不做有搜索框的header. 我们先在components文件中创建一个header.vue文件,并且在less文件里新建一个颜色变量var.less(统一管理app的颜色,保持统一),我们先将有其他元素的组件的大致框架,以及样式先写出来.然后在Index.vue里面引入. var.less //APP默认颜色 @…

vue2.0 之 douban （四）创建Swipe图片轮播组件

swiper中文文档:http://www.swiper.com.cn 1.我们在components文件夹里创建一个swipe组件,将需要用到的js以及css文件复制到assets/lib文件夹下,如图: 然后根据swiper的使用方法:http://www.swiper.com.cn/usage/index.html 将html结构复制到swipe组件里,引入css文件,以及js <template> <div class="swiper-container"&g…

vue2.0 之 douban （二）创建自定义组件tabbar

1.大体布局这个组件分为两部分:第一个是组件的外层容器,第二个是组件的子容器item,子组件里面又分为图片和文字组合.子组件有2个状态,一个默认灰色的状态,一个选中状态,我们来实现一下这个组件的布局 Index.vue <template> <div class="m-tabbar"> <a class="m-tabbar-item is-active"> <span class="m-tabbar-item-i…

vue2.0 之 douban （五）创建cell,media-cell组件

1.组件cell 这里的cell分为三种样式,左侧带图标,不带图标,以及左侧带竖线的cell. 每一个组件都有一个底部边框: 这里我们采用了移动端1px像素问题的解决方法:父级元素设置相对定位,构建1个伪元素,设置绝对定位, 将它的长宽放大到2倍, 边框宽度设置为1px, 再以transform缩放到50%. &:before { content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; backgro…