Vue实战：简易布局Dome

一、show

1、介绍

组件：App、MyHeader、Mybody、MyNav、MyMain、MyFooter（App是所有的父组件，Mybody是 MyNav和MyMain 的父组件）
数据data：[{name: ‘bty’, age: 12}, {name: ‘张三’, age: 13}, {name: ‘oppen’, age: 14}]
传值：将全局数据data传给App组件、App再传给MyBody组件、MyBody再传给MyNav组件，并在其中把传来的数据展示出来。

2、展示

点击显示数据后，导航栏显示数据：

二、code

dome.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>test</title><script type="text/javascript" src='./src/js/vue.js'></script><link rel="stylesheet" type="text/css" href="./src/css/index.css"></head><body><div id="app"></div><script type="text/javascript" src='./src/js/index.js'></script></body>
</html>

./src/js/index.js

let MyHeader = {template: `<div id="header">我是头部</div>`,
};let MyNav = {template: `<div id="nav">我是导航栏<br/><button @click="changeShow">点我显示数据</button><ul v-if="dataShow"><li v-for="(item, index) in data">{{index}}、{{item.name}} ：{{item.age}}</li></ul></div>`,data() {return {dataShow: false};},methods: {changeShow() {this.dataShow = !this.dataShow;}},props: ['data'],
};let MyMain = {template: `<div id="main">我是正文</div>`,
};let MyBody = {components: {'my-nav': MyNav,'my-main': MyMain,},template: `<div id="body"><my-nav :data="data"></my-nav><my-main></my-main></div>`,props: ['data'],
};let MyFooter = {template: `<div id="footer">我是底部</div>`,
};let App = {components: {'my-header': MyHeader,'my-body': MyBody,'my-footer': MyFooter,},template: `<div><my-header></my-header><my-body :data="data"></my-body><my-footer></my-footer></div>`,props: ['data'],
};let vm = new Vue({el: document.getElementById('app'),components: {'app': App,},template: '<app :data="data"/>',data() {return {data: [{name: 'bty', age: 12}, {name: '张三', age: 13}, {name: 'oppen', age: 14}]};}
});

./src/css/index.css

* {margin: 0;padding: 0;box-sizing: border-box;
}
#header,
#body,
#footer {width: 100%;border: 1px solid #000;
}
#header,
#body,
#nav,
#footer {float: left;
}
#header {height: 60px;
}
#body {margin: 10px 0;height: 400px;
}
#nav,
#main {display: inline-block;height: 100%;
}
#nav {width: 25%;border: 2px solid blue;
}
#main {width: 70%;float: right;border: 2px solid red;
}
#footer {height: 50px;
}

Vue实战：简易布局Dome相关推荐

Vue实战篇二十九：模拟一个简易留言板
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Vue实战篇三十：实现一个简易版的头条新闻
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Vue实战篇三十三：实现新闻的浏览历史
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Vue实战篇三十一：实现一个改进版的头条新闻
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Vue实战狗尾草博客后台管理系统
Vue实战狗尾草博客后台管理系统第一章这里准备采用的技术栈为:vue全家桶+element-ui 这里因为是后台管理系统,没有做SSR的必要.所以这里就采用前后端分离来昨晚这个项目~ 项目搭建 vu ...
Android实战简易教程-第三十九枪（第三方短信验证平台Mob和验证码自动填入功能结合实例）
用户注册或者找回密码时一般会用到短信验证功能,这里我们使用第三方的短信平台进行验证实例. 我们用到第三方短信验证平台是Mob,地址为:http://mob.com/ 一.注册用户.获取SDK 大家可以 ...
Vue实战电商系统-五商品管理
Vue实战电商系统-五商品管理商品管理 1.新建goods_cate子分支并上传码云 2.商品管理-商品分类 1.新建文件并配置路由 2.页面布局 3.获取分类列表数据 4.将数据渲染在树形表格控件 ...
Vue实战篇二十八：实现一个手机版的购物车
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
vue实战项目：电商管理系统实现步骤笔记(一)
vue实战项目视频地址以及项目文件一.项目概述 1.1电商项目基本业务概述 1.2电商后台管理系统的功能 1.3电商后台管理系统的开发模式(前后端分离) 1.4电商后台管理系统的技术选型 1.4. ...

Vue实战：简易布局Dome

一、show

1、介绍

2、展示

二、code

dome.html

./src/js/index.js

./src/css/index.css

Vue实战：简易布局Dome相关推荐

最新文章

热门文章