暑期项目实训 2021-7-9

vue前端学习笔记----------组建通讯及webpack

组件通讯

父子组件的通讯
父组件通过props向子组件传递数据

<div id="app">
    <cpm v-bind:cmovies="movies" v-bind:cmessage="message"></cpn>
</div>

<template id="cpn">
    <div>
        <li v-for="item in cmovies">{{item}}</li>
        <h2>{{cmessage}}</h2>
    </div>
</template>


const cpn = {
    template: '#cpn',
    // 把数组里的当变量来看了
    props: ['cmovies', 'cmessage'],
    data () {
        return {}
    }
}

const app = new Vue({
    el: '#app',
    data: {
        meassage: '哈哈哈',
        movies: ['哈喽', '嗨', '哟哟']
    },
    components: {
        cpn
    }
})

子组件通过事件向父组件发送数据

// 父组件模板
<div id="app">
    // 2.父组件监听一个事件
    // 不能写驼峰
    <cpm @itemclick="cpnClick"></cpn>
</div>

// 子组件模板
<template id="cpn">
    <div>
        <button v-for="item in categories" 
                @click="btnClick(item)">
            {{item.name}}
        </button>
    </div>
</template>


// 子组件
const cpn = {
    template: '#cpn',
    data() {
        return {
            categories: [
                {id: 'aaaa', name: '热门推荐'},
                {id: 'bbbb', name: '手机数码'},
                {id: 'cccc', name: '家用家电'},
                {id: 'dddd', name: '电脑办公'},
            ]
        }
    },
    methods: {
        btnClick(item) {
            // 要把item传给父组件
            // 1. 发送一个事件 (自定义事件)
            // 会把item当成默认的传到父组件去
            this.$emit('itemclick', item)
        ]
    }
}

// 父组件
const app = new Vue({
    el: '#app',
    data: {
        meassage: '哈哈哈'
    },
    components: {
        cpn
    },
    methods: {
        // 3. 父组件监听的事件 
        cpnClick(item) {
            console.log('成功了', item);
        }
    }
})

webpack

是一个JS应用的静态模块打包工具

webpack配置

创建: webpack.config.js 文件

// 为了动态获取打包后的路径, path 在node包里面 -- 看下面一段代码 装包
const path = require('path')

module.exports = {
    entry: './src/main.js', // 要打包的文件
    output: {
        path: path.resolve(__dirnmae, 'dist'), // 打包后的文件  要写绝对路径--动态获取路径
        filename: 'bundle.js'
    }
}

node装包

// 初始化--生成
npm init

// 生成的文件可能有中文 / 符号  可以改名 
meetwebpack 

... 后面全部回车, 一路通过. OK就行  
... 生成 package.json文件

// package.json文件里面也有依赖的文件