Vue学习笔记【29】——Vue路由(命名视图实现经典布局)
命名视图实现经典布局
标签代码结构:
<div id="app">
<router-view></router-view>
<div class="content">
<router-view name="a"></router-view>
<router-view name="b"></router-view>
</div>
</div>
JS代码:
<script>
var header = Vue.component('header', {
template: '<div class="header">header</div>'
});
var sidebar = Vue.component('sidebar', {
template: '<div class="sidebar">sidebar</div>'
});
var mainbox = Vue.component('mainbox', {
template: '<div class="mainbox">mainbox</div>'
});
// 创建路由对象
var router = new VueRouter({
routes: [
{
path: '/', components: {
default: header,
a: sidebar,
b: mainbox
}
}
]
});
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router
});
</script>
CSS 样式:
<style>
.header {
border: 1px solid red;
}
.content{
display: flex;
}
.sidebar {
flex: 2;
border: 1px solid green;
height: 500px;
}
.mainbox{
flex: 8;
border: 1px solid blue;
height: 500px;
}
</style>
Vue学习笔记【29】——Vue路由(命名视图实现经典布局)的更多相关文章
- Vue路由-命名视图实现经典布局
Vue路由-命名视图实现经典布局 相关Html: <!DOCTYPE html> <html lang="en"> <head> <met ...
- vue命名视图实现经典布局
vue命名视图实现经典布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 【Vue学习笔记】—— vue的基础语法 { }
学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...
- vue学习笔记:vue的认识与特点与获取
Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
- vue学习笔记—bootstrap+vue用户管理
vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...
- Vue系列之 => 命名视图实现经典布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- Vue学习笔记之Vue指令系统介绍
所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...
随机推荐
- git 往远端Dev推送
- UIView响应事件的两个方法
参考自:https://blog.csdn.net/mushaofeng1990/article/details/62434349 用户触摸屏幕后的事件传递过程: //方法A-(UIView *)hi ...
- 从xxxx检测到有潜在危险的 Request.Form 提示黄页
相信很多朋友都遇到过"从客户端xxxxxx"检测到有潜在危险的 Request.Form 然后给一个黄页提示.然后检测代码又找不到错误的代码提示. 原因:是因为在页面里边使用了富文 ...
- 异常的处理try-catch
Java异常处理 Java采用的异常处理机制,是将异常处理的程序代码集中在一起, 与正常的程序代码分开,使得程序简洁.优雅,并易于维护. * 异常的处理: 抓抛模型*** 过程一 : 抛, 程序在执行 ...
- xcodebuild自动打包上传到蒲公英的shell脚本
注意: ExportOptions.plist (包含了证书相关信息) 该plist 文件可以通过xcode手动导出ipa之后获取到, 区分appstore 和 development的情况 #! / ...
- PAT 2019-3 7-3 Telefraud Detection
Description: Telefraud(电信诈骗) remains a common and persistent problem in our society. In some cases, ...
- jQuery设置checkbox 为选中状态
1设置第一个checkbox 为选中值$('input:checkbox:first').attr("checked",'checked');或者$('input:checkbox ...
- 爬取拉勾网所有python职位并保存到excel表格 对象方式
# 1.把之间案例,使用bs4,正则,xpath,进行数据提取. # 2.爬取拉钩网上的所有python职位. from urllib import request,parse import json ...
- 01、python的基础-->while循环应用
1.简单的输出小程序 name = input('请输入你的名字:') age = input('请输入你的年龄:') print('我的名字叫'+name,'我今年'+ age + '岁') 2.w ...
- 系统安装2---BIOS设置
对于新的电脑通过U盘安装Windows系统,我们第一步绝对是修改BIOS设置.在这里面我们要修改几项比较重要的选项.如下介绍: 修改第一启动项:目的就是让电脑的第一启动项变为U盘启动. 调节引导方式: ...