vue命名视图实现经典布局
vue命名视图实现经典布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<style>
.header{
background-color: orange;
height: 80px;
}
h1{
margin: 0;
padding: 0
}
.container{
display: flex;
flex: 2
}
.left{
background-color: red;
height: 800px
}
.main{
background-color: aqua;
flex: 8;
height: 800px
}
</style>
<body>
<div id="app">
<router-view ></router-view>
<div class="container">
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
</div>
<script>
var header={
template:'<h1 class="header">头部区域</h1>'
}
var leftBox={
template:'<h1 class="left">left区域</h1>'
}
var mainBox={
template:'<h1 class="main">main区域</h1>'
}
var router=new VueRouter({
routes:[
{ path: '/', components: {
'default':header,
'left':leftBox,
'main':mainBox
}
}, ]
})
var vm=new Vue({
el:'#app',
data:{},
methods: { },
router:router//将路由规则对象，注册到vm实例，用来监听URL地址的变化，然后展示对应的组件
})
</script>
</body>
</html>
vue命名视图实现经典布局的更多相关文章
- Vue路由-命名视图实现经典布局
Vue路由-命名视图实现经典布局 相关Html: <!DOCTYPE html> <html lang="en"> <head> <met ...
- Vue学习笔记【29】——Vue路由（命名视图实现经典布局）
命名视图实现经典布局 标签代码结构: <div id="app"> <router-view></router-view> < ...
- Vue系列之 => 命名视图实现经典布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- vue 命名视图
命名视图 有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了.你可以在界面中拥有多个单独命 ...
- VUE router-view 页面布局 （嵌套路由+命名视图）
嵌套路由 实际生活中的应用界面,通常由多层嵌套的组件组合而成.同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如: /user/foo/profile /user/foo/posts ...
- vue 中 命名视图的用法
今天主要记录 vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...
- vue路由--命名视图
有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了.你可以在界面中拥有多个单独命名的视图, ...
- 062——VUE中vue-router之命名视图的实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [Vue 牛刀小试]：第十三章 - Vue Router 基础使用再探（命名路由、命名视图、路由传参）
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
随机推荐
- conda和pip相关操作
1.conda创建.删除.激活和退出环境 创建:conda create -n [name] python=[version] 删除:conda remove -n [name] --all 激活:s ...
- PyCharm 项目删除
Pycharm 删除项目具体操作如下: 1.选择菜单 File close project 2.选择要删除的项目右上角选择× 3.找到项目所在目录,删除相应文件夹 之后再次打开pycharm 发现 ...
- mysql tp5 find_in_set写法
[['','exp',"FIND_IN_SET(".$data['type'].",place_category)"]]
- docker简单介绍---部署私有docker仓库Registry
1. 关于Registry 官方的Docker hub是一个用于管理公共镜像的好地方,我们可以在上面找到我们想要的镜像,也可以把我们自己的镜像推送上去.但是,有时候,我们的使用场景需要我们拥有一个私有 ...
- VUE中/deep/深度作用域
vue中css样式不起作用,用!important也不起作用,此时需要用 /deep/ ,没加之前是 加了之后起作用了,此时这个deep是深度作用域
- 【Ubuntu 18.04 搭建VNC服务器】
https://www.jianshu.com/p/f58fe5cdeb5f 桌面共享 Ubuntu 18.04自带桌面共享,可以将物理桌面共享给VNC.但是无法创建新的桌面. 具体参考 https: ...
- Http协议入门、响应与请求行、HttpServletRequest对象的使用、请求参数获取和编码问题
1 课程回顾 web入门 1)web服务软件作用: 把本地资源共享给外部访问 2)tomcat服务器基本操作 : 启动: %tomcat%/bin/startup.bat 关闭: %tomcat%/ ...
- bzoj 5495
今年省选题... 表示当时还没学可持久化trie,所以打60分暴力走人... 现在学了可持久化字典树,就可以搞一搞了嘛! 首先看到题目描述,很容易想到首先搞出异或前缀和,然后建起可持久化字典树 然后考 ...
- python绘制等边三角形
定义一个函数,参数为三角形的边长和颜色,并调用该函数绘制两个边长颜色不同的等边三角形 def draw(l,color): import turtle turtle.setup(900,600,200 ...
- Zabbix（二）
zabbix 监控第一台服务器 https://blog.51cto.com/5001660/2136303 一.搭建一台测试服务器 1.安装一台centos7操作系统 配置网络: vim /etc/ ...