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>

<script src="./lib/vue.js"></script>

<script src="./lib/vue-router.js"></script>

</head>

<style>

.header {

font-size: 16px;

width: 100%;

color: #fff;

text-align: center;

background-color: red;

padding: 10px 0;

margin: 0;

}

.box {

display: flex;

}

.leftBox {

flex: 2;

height: 500px;

color: #fff;

background-color: rosybrown;

margin: 0;

}

.mainBox {

flex: 8;

height: 500px;

color: #fff;

background-color: slateblue;

margin: 0;

}

</style>

<body>

<div id="app">

<router-view></router-view>

<div class="box">

<router-view name="left"></router-view>  //只需要添加name属性就会去匹配相应的名字的组件

<router-view name="main"></router-view>

</div>

</div>

<script>

// 组件

var header = {

template: "<h3 class=‘header‘>header头部区域</h3>"

}

var leftBox = {

template: "<h3 class=‘leftBox‘>left区域</h3>"

}

var mainBox = {

template: "<h3 class=‘mainBox‘>main区域</h3>"

}

//路由规则

var router = new VueRouter({

routes: [

{

path: ‘/‘, components: {  //components加s表示有多个组件,他为一个对象

‘default‘: header,   //表示默认的情况下显示

‘left‘: leftBox,   // 页面中占位符,中的name要与字符串(left名字随便起)一样 leftBox表示组件名

‘main‘: mainBox,  // 页面中占位符,中的name要与字符串(left名字随便起)一样 leftBox表示组件名

}

}

]

})

var vm = new Vue({

el: "#app",

data: {},

methods: {},

router: router

})

</script>

</body>

</html>

原文地址:https://www.cnblogs.com/Progress-/p/12209170.html

时间: 2024-10-10 07:48:26

vue中命名视图实现经典布局的相关文章

Vue路由-命名视图实现经典布局

Vue路由-命名视图实现经典布局 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="

Vue系列之 =&gt; 命名视图实现经典布局

1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 7 <meta http-equiv="Content-Type&quo

vue中数据更新视图不更新的问题

遇到这样一个问题, 代码如下: this.memberLevelList.forEach(item => { item.levelDate = [item.startTime, item.endTime]; }) startTime和endTime是从后台获取的数据, 但是模板中需要levelDate, 于是直接赋值, 最后打印的memberLevelList结果中也有levelDate的数据, 但是页面上始终不渲染; 看了一下memberLevelList的observer(观察者), 发现并

vue中什么样的数据可以是在视图中显示

1. Vue中不可以添加不存在的属性,因为不存在的属性是没有getter和setter的. <div id="app"> {{msg.a}} {{msg.b}} </div> <script src="js/vue.js"></script> <script> let vm = new Vue({ el: "#app", data: { msg: { a: 1 } } }) vm.msg

阿里矢量图的应用--flex布局--vue中$router和$route的方法

1.阿里矢量图字体图标的用法 2.flex布局 display:flex:设置父容器为伸缩盒子,会使每一个子元素自动变成伸缩项 接着设置子元素主轴方向上的排列方式 justify-content: flex-start让子元素从父容器的起始位置开始排列: flex-end:让子元素从父容器的结束位置开始排列: ? center:让子元素从父容器的中间位置开始排列: ? space-between:左右对齐父容器的开始和结束,中间平均分页,产生相同的间距: ? space-around:将多余的空

Vue 中视图更新

当vue的data中的值发生变化后,视图中引用部分的值是否会同时发生变化呢?首先,我们要知道有哪些更新的类型. 更新的类型 1.直接赋值更新.this.heros=[' '],模板会立即更新. 2.通过函数更新.this.heros.push("xx). 更新的函数: push():在数组最后添加元素: pop():删除最后一个元素: shift():删除最后一个元素: unshift():在开头添加一个元素: splice():可以增加.修改.删除元素.splice函数使用方法:其需要传递开始

关于 ASP.NET MVC 中的视图生成

在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据. 从控制器到视图 通常,在 Controller 中,我们定义多个 Action ,每个 Action 的返回类型一般是 ActionResult,在 Action 处理的最后,我们返回对于视图的调用. public ActionResult Index() { return this.View(); } 默认情况下,

007.Adding a view to an ASP.NET Core MVC app -- 【在asp.net core mvc中添加视图】

Adding a view to an ASP.NET Core MVC app 在asp.net core mvc中添加视图 2017-3-4 7 分钟阅读时长 本文内容 1.Changing views and layout pages 修改视图和布局页 2.Change the title and menu link in the layout file 在布局文件中修改标题与菜单 3.Passing Data from the Controller to the View 从控制器向视图

New UI-&lt;merge&gt;标签减少视图层级,让布局更高效

New UI-<merge>标签减少视图层级,让布局更高效  --转载请注明出处:coder-pig,欢迎转载,请勿用于商业用途! 小猪Android开发交流群已建立,欢迎大家加入,无论是新手,菜鸟,大神都可以,小猪一个人的 力量毕竟是有限的,写出来的东西肯定会有很多纰漏不足,欢迎大家指出,集思广益,让小猪的博文 更加的详尽,帮到更多的人,O(∩_∩)O谢谢! 小猪Android开发交流群:小猪Android开发交流群群号:421858269 新Android UI实例大全目录:http://