vue 项目案例 慕课 - vue-cli全集 [https://www.imooc.com/learn/1173]

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.刷新后，初始化