(17)打鸡儿教你Vue.js
vue-router
<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
<a class="list-group-item" v-link="{ path: '/about'}">About</a>
/* 创建路由器 */
var router = new VueRouter()
创建组件:
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
创建Router:
var router = new VueRouter()
映射路由:
router.map({
'/home': { component: Home },
'/about': { component: About }
})
key是路径,value是组件
<div class="list-group">
<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
<a class="list-group-item" v-link="{ path: '/about'}">About</a>
</div>
v-link指令跳转到指定路径
<router-view></router-view>
启动路由
var App = Vue.extend({})
router.start(App, '#app')
router.start(App, ‘#app’) 表示router会创建一个App实例
创建组件:创建单页面应用需要渲染的组件
创建路由:创建VueRouter实例
映射路由:调用VueRouter实例的map方法
启动路由:调用VueRouter实例的start方法
使用v-link指令
使用标签
router.redirect
html
使用v-link指令
使用标签
router.redirect
router.redirect({
'/': '/home'
})
router.redirect方法用于为路由器定义全局的重定向规则
路径/home/news和/home/message
一个路径映射一个组件
<div>
<h1>home</h1>
<p>{{msg}}</p>
</div>
<ul class="nav nav-tabs">
<li>
<a v-link="{path: '/home/news'}"> News </a>
</li>
</ul>
组件构造器:
var Home = Vue.extend({
template: '#home',
data: function(){
return {
msg: 'hello'
}
}
})
var News = Vue.extend({
template: '#news'
})
var Message = Vue.extend({
template: '#message'
})
路由映射
router.map({
'/home': {
component: Home,
// 定义子路由
subRoutes: {
'/news': {
component: News
},
'/message': {
component: Message
}
}
},
'/about': {
component: About
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="//bootswatch.com/flatly/bootstrap.css"/>
<link rel="stylesheet" href="assets/css/custom.css" />
</head>
<body>
<div id="app">
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header">
<h2>Router Basic - 02</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
<a class="list-group-item" v-link="{ path: '/about'}">About</a>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
<template id="home">
<div>
<h1>Home</h1>
<p>{{msg}}</p>
</div>
<div>
<ul class="nav nav-tabs">
<li>
<a v-link="{ path: '/home/news'}">News</a>
</li>
<li>
<a v-link="{ path: '/home/message'}">Messages</a>
</li>
</ul>
<router-view></router-view>
</div>
</template>
<template id="news">
<ul>
<li>News 01</li>
<li>News 02</li>
<li>News 03</li>
</ul>
</template>
<template id="message">
<ul>
<li>Message 01</li>
<li>Message 02</li>
<li>Message 03</li>
</ul>
</template>
<template id="about">
<div>
<h1>About</h1>
<p>This is the tutorial about vue-router.</p>
</div>
</template>
</body>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
var Home = Vue.extend({
template: '#home',
data: function() {
return {
msg: 'Hello, vue router!'
}
}
})
var News = Vue.extend({
template: '#news'
})
var Message = Vue.extend({
template: '#message'
})
var About = Vue.extend({
template: '#about'
})
var router = new VueRouter()
router.redirect({
'/': '/home'
})
router.map({
'/home': {
component: Home,
// 定义子路由
subRoutes: {
'/news': {
component: News
},
'/message': {
component: Message
<a v-link="'home'"> home </a>
<a v-link="{ path: 'home' }">home</a>
<a v-link="{name: 'detail', params: {id: '01'} }">home</a>
$route.path
当前路由对象的路径
$route.params
包含路由中的动态片段和全匹配片段的键值对
$route.query
包含路由中查询参数的键值对
$route.router
路由规则所属的路由器
$route.name
当前路径的名字
执行以下命令安装vue cli
npm install -g vue-cli
使用vue-webpack-simple模板
运行Git Bash Here
vue init webpack-simple my-webpack-simple-demo
安装项目依赖
cd my-webpack-simple-demo
npm install
运行示例
npm run dev
发布
npm run build
使用vue-webpack模板
vue init webpack my-webpack-demo
安装依赖
cd my-webpack-demo
npm install
运行示例
npm run dev
发布
npm run build
请点赞!因为你的鼓励是我写作的最大动力!
吹逼交流群:711613774
(17)打鸡儿教你Vue.js的更多相关文章
- (29)打鸡儿教你Vue.js
web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器 实现阅读器的基础功能 字号选择,背景颜色 有上一页,下一页的功能 设置字号,切换主题,进度按钮 电子书目录 ...
- (26)打鸡儿教你Vue.js
weex框架的使用 1.weex开发入门 2.weex开发环境搭建 3.掌握部分weex组件模块 4.了解一些vue基本常见语法 5.制作一个接近原生应用体验的app weex介绍 安装开发环境 We ...
- (22)打鸡儿教你Vue.js
vue.js 单页面,多页面 Vue cli工具 复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代码实现,线上测试 git clone,git int 创建分支,推送分支,合并分支 ...
- (21)打鸡儿教你Vue.js
组件化思想: 组件化实现功能模块的复用 高执行效率 开发单页面复杂应用 组件状态管理(vuex) 多组件的混合使用 vue-router 代码规范 vue-router <template> ...
- (19)打鸡儿教你Vue.js
了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...
- (18)打鸡儿教你Vue.js
介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...
- (15)打鸡儿教你Vue.js
组件化vue.js 组件单向绑定 组件双向绑定 组件单次绑定 创建组件构造器 注册组件 使用组件 Vue.extend() Vue.component() 使用组件 <div id=" ...
- (13)打鸡儿教你Vue.js
一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...
- (12)打鸡儿教你Vue.js
组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...
随机推荐
- go 学习笔记(3) 基础结构
package main import ( "fmt" ) const NAME string = "imooc" var a string = "慕 ...
- resnet的理解-- 面试笔记
上周参加了XX大学研究生推免的面试,面试老爷问到了resnet主要解决了什么问题,我下意识的回答到解决了当网络加深的时候会出现的vanishing/exploding gradients,然后面试老爷 ...
- NEST 增删改查
/// <summary> /// HEAD /employee/employee/1 /// </summary> public void DocumentExists() ...
- winform实现图片的滑动效果
使用winform实现图片的滑动效果(类似网站首页图片滑动切换效果),结果实现了,但是效果其实不是很理想.也许有更好的方法. Timer timerSlide = null; //当前 ...
- iOS - 静态库的导入和头文件路径的设置
开发过程中,免不了要用到一些第三方或者是别人写好的一些Demo,这时就经常会用到别人写的一些静态库(.a文件)和n多个头文件(.h文件),这些文件不是简单地把它们拉到自己的工程里面就行的,还要设置一些 ...
- adb server is out of date. killing... ADB server didn't ACK * failed to start daemon *……
问题 使用 adb 命令的时候报错如下: adb server is out of date. killing... ADB server didn't ACK * failed to start d ...
- js中for循环点击事件(闭包)
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...
- Tomcat - 控制台乱码
1.找到${CATALINA_HOME}/conf/logging.properties 2.找到java.util.logging.ConsoleHandler.encoding = UTF-8 修 ...
- Appscan漏洞之Authentication Bypass Using HTTP Verb Tampering
本次针对 Appscan漏洞 Authentication Bypass Using HTTP Verb Tampering(HTTP动词篡改导致的认证旁路)进行总结,如下: 1. Authentic ...
- ISCC之msc5他们能在一起吗?
如题,开始分析,附件是一个二维码,读出来一串base64 拿去解密,PASS{0K_I_L0V3_Y0u!} 提交几次不对, 继续hxd分析图片,最后在文件末尾发现一个txt 修改后缀,是加密的, 拿 ...