imooc 视频： vue-cli全集 https://www.imooc.com/learn/1173
1. 页面布局 及 引入图片
效果：
2. 完成页面布局效果
<template>
<div class="main">
<div class="left">
</div>
<div class="right">
<div class="top">
<img src="image/title.jpg">
</div>
<div class="bottom">
</div>
</div>
</div>
</template>
<style>
.main {
background-color: white;
margin: 20px auto;
width: 1200px;
}
* {
/*默认间距为零，所有组件自己设置间距*/
padding: 0;
margin: 0;
}
.left {
width: 100px;
height: 500px;
/*浮动*/
float: left;
margin-right: 10px;
}
.right {
width: 1000px;
height: 500px;
float: left;
margin-left: 10px;
}
.top img {
width: 1000px;
height: 200px;
}
.left,.right{
background-color: blue;
}
</style>
3. 导航设置
a. 创建 components/ left.vue
<template>
<div>
<div class="title">热门推荐</div>
<ul>
<li>笔记本电脑</li>
<li>手机</li>
<li>笔记本电脑</li>
<li>笔记本电脑</li>
<li>笔记本电脑</li>
<li>笔记本电脑</li>
<li>笔记本电脑</li>
<li>笔记本电脑</li>
<li>笔记本电脑</li>
<li>笔记本电脑</li>
<li>笔记本电脑</li>
<li>笔记本电脑</li>
<li>笔记本电脑</li>
</ul>
</div>
</template>
b. 把lefe.vue 加到 Shopping.vue的左侧
（在views/Shopping.vue中使用components/Left.vue）
c. 导航栏样式设置
<template>
<div>
<div class="title">热门推荐</div>
<ul class="menu">
<li>笔记本电脑</li>
<li>手机</li>
<li>服饰</li>
<li>手表</li>
<li>书籍</li>
<li>玩具</li>
<li>小家电</li>
<li>学习用品</li>
<li>办公用品</li>
<li>旅游必备</li>
<li>游戏卡通</li>
</ul>
</div>
</template>
<style>
.title{
width: 100px;
color: red;
}
.menu li{
/*去掉前面的点 ·*/
list-style: none;
height: 50px;
margin-bottom: 2px;
background-color: white;
/*将行高和li高度设置为一样，就会默认文字居中*/
line-height: 50px;
}
</style>
4. 右侧内容设置
实现组件复用， 一个模板，替换数据 组件之间的传值， 兄弟间传值 – 事件总线
a,创建事件总线 msg.js 传递消息，参数传递
b. 和Left.vue一样，创建Right.vue，并引用
c. 实现： 单击笔记本 显示 111111； 单击手机，显示 222222
Left 中，将1 赋值给val , 触发到 msg的on事件里 在Right里接收val的值
d. 单击某个菜单，显示对应的 111111， 22222 （接下来会改成商品列表）
5. 右侧列表显示
a. cnpm i axios -S
全局注册 axios
b. create GoodsList.vue
c. 在 Right.vue 中使用 GoodsList.vue
d. 排版布局
e. 单击1，显示笔记本；单击2，显示手机
Right —> GoodsList : 父–>子组件传值 1.传值 2. GoodsList 接收 3， 监听 goodId 的变化
<script>
//获取list 的值
export default {
name: "show",
data() { //处理第一次 初值
var _this = this;
var url = "";
if (_this.goodId == 1) {
url = "json/computer.json";
} else if (_this.goodId == 2) {
url = "json/phone.json";
}
this.$http.get(url).then(function (res) {
_this.list = res.data;
})
return {
list: []
}
},
//父子组件传值， 用 props
props: {
goodId: Number
},
//监听goodId的变化-- 已经有了一个数字，发生改变； watch 只负责第二次以后的变化
watch: {
goodId() {
var _this = this;
var url = "";
if (_this.goodId == 1) {
url = "json/computer.json";
} else if (_this.goodId == 2) {
url = "json/phone.json";
}
this.$http.get(url).then(function (res) {
_this.list = res.data;
})
return {
list: []
}
}
}
}
</script>
4.刷新后，初始化
