VueRouter学习01-基本使用
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<title></title>
</head>
<body>
<div id='app'>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">网易云音乐</a>
</div> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<router-link to="/">首页</router-link>
</li>
<li>
<router-link to="/find">发现音乐</router-link>
</li>
<li>
<router-link to="/friend">我的朋友</router-link>
</li> </ul> </div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<router-view></router-view>
</div>
</div>
<script>
var index = Vue.extend({template:"<h1>首页</h1>"})
var find = Vue.extend({template:"<h1>发现音乐</h1>"})
var friend = Vue.extend({template:"<h1>我的朋友</h1>"}) let router = new VueRouter({
routes:[
{path:"/",component: index},
{path:"/find",component: find},
{path:"/friend",component: friend},
] }) new Vue({
el:'#app',
router
}
)
</script>
</body>
</html>
VueRouter学习01-基本使用的更多相关文章
- Python学习--01入门
Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...
- Java虚拟机JVM学习01 流程概述
Java虚拟机JVM学习01 流程概述 Java虚拟机与程序的生命周期 一个运行时的Java虚拟机(JVM)负责运行一个Java程序. 当启动一个Java程序时,一个虚拟机实例诞生:当程序关闭退出,这 ...
- Android Testing学习01 介绍 测试测什么 测试的类型
Android Testing学习01 介绍 测试测什么 测试的类型 Android 测试 测什么 1.Activity的生命周期事件 应该测试Activity的生命周期事件处理. 如果你的Activ ...
- Java学习01
Java学习01 第一章 1.JRE与JDK JDK(JAVA Develop Kit,JAVA开发工具包)提供了Java的开发环境和运行环境,主要用于开发JAVA程序,面向Java程序的开发者; J ...
- ThinkPhp学习01
原文:ThinkPhp学习01 一.ThinkPHP的介绍 MVC M - Model 模型 工作:负责数据的操作 V - View 视图(模板 ...
- 【iScroll源码学习01】准备阶段 - 叶小钗
[iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文 http://www.cnblogs.com/yexiaochai/p/3 ...
- JVM学习01:内存结构
JVM学习01:内存结构 写在前面:本系列分享主要参考资料是 周志明老师的<深入理解Java虚拟机>第二版. 内存结构知识要点Xmind梳理 案例分析 分析1 package com.h ...
- webservice学习01:wsdl文档结构
webservice学习01:wsdl文档结构 wsdl文档结构 WSDL文档示例 <wsdl:definitions xmlns:xsd="http://www.w3.org/200 ...
- spring学习(01)之IOC
spring学习(01)之IOC IOC:控制反转——Spring通过一种称作控制反转(IOC)的技术促进了低耦合.当应用了IOC,一个对象依赖的其它对象会通过被动的方式传递进来,而不是这个对象自己创 ...
- vue学习01
vue学习01 1. 创建一个Vue实例官网-学习-教程-安装-(开发/生产版本)-与jQuery的引用相似 <!DOCTYPE html> <html> <head ...
随机推荐
- JAVA开发 环境基础 IDEA 常用快捷键
java 源代码运行必须先用javac编译生成字节码文件 XXX.class运行 java XXX 进行运行 环境变量classpath:已编译的字节码文件搜索路径--临时配置: set classp ...
- JavaScript 判断变量是否为空---三元运算,元组获取值-重组.map()。
var from_days = getQueryString('from_days'); undefined {'from_days': (from_days) ? from_days : null} ...
- WinFrm中多线程操作窗体属性
首先声明一个委托. delegate void SetTextCallback(string text); 然后再写一个事件. private void SetInfo(string text) { ...
- Apache Shiro使用官方自带的生成AES密钥
package test; import org.apache.shiro.codec.Base64; import javax.crypto.KeyGenerator; import javax.c ...
- 【LeetCode】152. Maximum Product Subarray 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 双重循环 动态规划 参考资料 日期 题目地址:htt ...
- 【LeetCode】380. Insert Delete GetRandom O(1) 解题报告(Python)
[LeetCode]380. Insert Delete GetRandom O(1) 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxu ...
- 「算法笔记」旋转 Treap
一.引入 随机数据中,BST 一次操作的期望复杂度为 \(\mathcal{O}(\log n)\). 然而,BST 很容易退化,例如在 BST 中一次插入一个有序序列,将会得到一条链,平均每次操作的 ...
- 洛谷——P1980 [NOIP2013 普及组] 计数问题
题目描述 试计算在区间 11 到 nn的所有整数中,数字x(0 ≤ x ≤ 9)x(0≤x≤9)共出现了多少次?例如,在 11到1111中,即在 1,2,3,4,5,6,7,8,9,10,111,2, ...
- 深度探索 OpenStack Neutron:BGP(1) 【转载】
3.4 BGP 原文地址:http://mp.weixin.qq.com/s?src=3×tamp=1500043305&ver=1&signature=XwiIVV ...
- [opencv]二维码识别开发流程及问题复盘总结
项目复盘总结 开发需求: 在桌面机器人(向下俯视)摄像头拍摄到的图像中做条形码识别与二维码识别. 条形码在图像固定位置,二维码做成卡片的形式在固定区域内随意摆放. 开发环境及相关库:ubuntu 18 ...