内容：生命周期、vue-cli脚手架、组件传值

购物车bug解决：

watch中改变了每一个商品的选中状态，此时，计算属性也会重新执行，造成数据冲突。

解决办法：把监听去掉，给全选增加一个单独的点击事件

checkAll(){
    this.goods.map(d=>{
        d.checked = !this.allChecked
    })
}

一、生命周期

vue实例从创建、挂载、更新、销毁的一个完整的过程叫生命周期，在整个vue的生命周期中，有一些特殊的方法叫钩子函数。

(1)页面渲染期

beforeCreate vue实例创建之前

created vue实例创建完成

beforeMount 挂载之前（准备好html结构，并不会解析vue语法）

mounted 挂载完成（*****），一般在此生命周期函数中执行ajax请求

(2)页面更新期

beforeUpdate 数据更新之前

updated 数据更新完成

(3)页面销毁期

beforeDestroy 销毁之前

destroyed 销毁完成

二、vue-cli脚手架

2.0 （主讲）

3.0

需要有Node环境，自行下载nodejs进行安装即可

1.安装webpack

npm i webpack -g

2.安装vue-cli

npm i vue-cli -g

3.初始化项目

vue init webpack 项目名称

注意：项目名称不能包含中和空格，并且不能包含vue全家桶中的关键字（vuex、vue-router）

vue init webpack mydemo

[图片上传失败...(image-466985-1581578757189)]

4.运行项目

npm run dev

或者npm start

5.项目目录结构

mydemo
    build               webpack目录，进行项目打包等
    config              项目配置目录
    node_modules        项目依赖目录
    src                 项目程序目录（主战场）
        main.js         项目启动文件
        App.vue         根组件
        assets          静态资源
        components      组件目录
    static              静态资源
    .babelrc            babel配置文件
    .editorconfig       代码规范配置文件
    .gitignore          git忽略文件的配置文件
    .postcssrc.js       postcss插件配置文件
    index.html          首页
    package.json        依赖配置文件
    README.md           说明

项目运行流程：

index.html > src/main.js > App.vue > components/HelloWorld.vue

三、vue-tools工具

1.谷歌浏览器开启开发者模式

2.安装谷歌访问助手

(1)拿到谷歌访问助手压缩包后进行解压

(2)在谷歌浏览器右侧三个点按钮处点击后找到扩展程序，点击加载已解压扩展程序，选择解压后的谷歌访问助手文件夹即可

3.安装vue-devtools

在谷歌应用商店中搜索vue，搜索到之后添加到chrome即可使用。

四、组件传值【重点】

1.父子组件传值

第一步：在父组件上，使用子组件时，通过自定义属性来给子组件传递数据

第二步：在子组件上，需要主动的接收数据，通过props来接收（props的数据类型是一个数组，数据与数据之间用逗号隔开）

父组件：

<template>
    <div>
        <h1>王爸爸，我有一辆{{ car }}</h1>
        <my-child :gift="car" :fee="10000"></my-child>
    </div>
</template>
<script>
import myChild from './Child'
export default {
    data(){
        return{
            car:'劳斯莱斯'
        }
    },
    components:{
        myChild
    }
}
</script>

子组件：

<template>
    <div>
        <h3>这是一个子组件，父组件给的礼物是:{{ gift }},生活费：{{ fee }}</h3>
    </div>
</template>
<script>
export default {
    props:["gift","fee"]
}
</script>

2.子父组件传值

第一步：子组件执行自己的函数来主动发送数据

第二步：在父组件使用子组件时，需要传递一个自定义事件，方便子组件来出发这个自定义事件对应的函数

第三步：子组件中通过this.$emit("自定义事件名")来触发父组件中的函数，来进行数据的传递。

<template>
    <div class="box">
        <h3>这是一个子组件，父组件给的礼物是:{{ gift }},生活费：{{ fee }}</h3>
        <button @click="toParent">回馈</button>
    </div>
</template>
<script>
export default {
    props:["gift","fee"],
    methods:{
        toParent(){
            console.log('to parent')
            //$emit 用来触发父组件传递过来的自定义事件
            this.$emit("getChild",500000)
        }
    }
}
</script>

3.兄弟组件传值

第一步：设置一个公用的容器，来进行数据的传递

/src/main.js

Vue.prototype.bus = new Vue();

第二步：在需要发送数据的组件中通过这个公用的容器来进行数据的发送。

this.bus.$emit("变量名",变量值)

第三步：在其他兄弟组件中接收兄弟组件传递的数据

mounted(){
    this.bus.$on("变量名",(形参)=>{...})
}

第一个兄弟组件：

<template>
    <div class="box">
        <h3>这是一个子组件，父组件给的礼物是:{{ gift }},生活费：{{ fee }}</h3>
        <button @click="toParent">回馈</button>
        <button @click="toBrother">给兄弟分享</button>
    </div>
</template>
<script>
export default {
    props:["gift","fee"],
    methods:{
        toParent(){
            console.log('to parent')
            //$emit 用来触发父组件传递过来的自定义事件
            this.$emit("getChild",500000)
        },
        toBrother(){
            console.log(this)
            console.log('第一个兄弟发送数据')
            this.bus.$emit("getBrother","兄弟，接着")
        }
    }
}
</script>

其他兄弟组件：

<template>
    <div class="box">
        <h3>我是兄弟组件</h3>
        <p>兄弟给的数据：{{ msg }}</p>
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:''
        }
    },
    mounted(){
        //组件挂载完成后，一直监听某个事件，用来接收数据
        this.bus.$on("getBrother",(e)=>{
            console.log(this)//注意，这里要使用箭头函数来保持this指向
            this.msg = e
        })
    }
}
</script>

作业：

用vue-cli脚手架创建后台管理系统页面，并且用bootstrap写一个表格页面和表单页面。