Vueday05-2

1.全局组件定义的是三种方法

 <!-- 2、视图层 -->
    <div id="app">
        <!-- 不要将内置或保留的HTML元素用作组件id：div -->
        <!-- 组件名 -->
        <login></login>
        <register></register>
        <account></account>
        <mine></mine>
    </div>
    <div id="app1">
        333233
        <mine></mine>
    </div>
    <!-- // 3.将模板字符串，定义到script标签种： -->
    <script id="account" type="x-template">
    <div>账户</div>
    </script>
    <!-- 组件模板仅包含一个根元素 -->
    <template id="mine">
        <div>第四种方式
            <div>12223</div>
            <div>12245352</div>
        </div>
    </template>


    <script>
        //    3、实例化
        // 1.使用 Vue.extend 配合 Vue.component 方法：
        // 全局声明
        var login = Vue.extend({
            template:
                ' <h1>明天放假！！</h1>  '
        });
        // 全局定义
        // （自己定义的名字，声明）
        Vue.component('login', login)

        //   2.直接使用Vue.component方法
        Vue.component('register', {
            template: "<h1>注册</h1>"
        })
        // 前两类就是以组件名为标签
        // 3.同时，需要使用 Vue.component 来定义组件：
        Vue.component('account', {
            template: '#account'
        })
        // 4.
        Vue.component('mine', {
            template: '#mine'
        })
        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        })
        const nvm = new Vue({
            el: '#app1',
            data: {},
            methods: {}
        })
    </script>

2.私有组件

    <div id="app">
        <!-- 不要将内置或保留的HTML元素用作组件id：div -->
        <!-- 组件名 -->
        <!-- <login></login>
        <register></register>
        <account></account>
        <mine></mine> -->
        <my-header></my-header>
    </div>
    <div id="app1">
        333233
        <!-- <my-header></my-header> -->

    </div>
    <!-- // 将模板字符串，定义到script标签种： -->
    <script id="account" type="x-template">
    <div>账户</div>
    </script>
    <!-- 组件模板仅包含一个根元素 -->
    <template id="mine">
        <div>第四种方式mine
            <div>mine12223</div>
            <div>mine12245352</div>
        </div>
    </template>


    <script>
        //    3、实例化
        Vue.component('mine', {
            template: '#mine'
        })
        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            components: {
                'my-header': {
                    template: '#mine'
                }
            }
        })
        const nvm = new Vue({
            el: '#app1',
            data: {},
            methods: {}
        })
    </script>script

3.组件中显示数据和响应

<!-- 2、视图层 -->
    <div id="app">
        <!-- 定义在实例 -->
        <button @click="flag1">flag1</button>
        <!-- model只能应用于组件 -->
        <!-- <transition mode="out-in">
            <login v-if="flag"></login>
            <mine v-else></mine>
        </transition> -->
        <!-- 使用component标签，来引用组件，并通过:is属性来指定要加载的组件： -->
        <component :is="flag?'login':'mine'"></component>


        <!-- flag是变量 -->
    </div>
    <template id="login">
        <div>
            <!-- 变量定义在组件 -->
            <button @click="add(4)">add</button>
            登录{{msg}}{{num}}

        </div>
    </template>
    <template id="mine">
        <div>
            个人中心
        </div>
    </template>
    <script>
        Vue.component('mine', {
            template: '#mine'
        }
        )
        Vue.component('login', {
            template: '#login',
            // 为什么组件中的data属性必须定义为一个方法并返回一个对象
            // 数据隔离 保证每个login都是自己用
            data({ }) {
                return {
                    msg: 'hello',
                    num: 6

                }
            },
            // 方法
            methods: {
                add(n) {
                    this.num += n
                }
            },
            beforeCreate() {
                console.log('beforeCreate');
            },
            created() {
                console.log('created');
            },
            beforeDestroy() {
                console.log('beforeDestroy');
            },
            destroyed() {
                console.log('destroyed');
            }
        })




        //    3、实例化
        const vm = new Vue({
            // 控制区域
            el: '#app',
            // 存放数据
            data: {
                flag: true
            },
            // 方法
            methods: {
                flag1() {
                    this.flag = !this.flag
                }
            },

        })

    </script>

4.云课堂首页数据

<!-- 2、视图层 -->
    <!-- app是父组件，course是子组件 -->
    <div id="app">
        <h2>免费课程</h2>
        <course :type="type" page-size="10" page-num="1"></course>
        <h2>精品课程</h2>
        <course type="boutique" page-size="5" page-num="1"></course>
        <h2>折扣课程</h2>
        <course type="discount" page-size="5" page-num="1"></course>

    </div>
    <template id="course">
        <div>
            <ul>
                <li v-for="(item,index) in courseList" :key="item.couseId">
                    <img :src="item.coverFileUrl" alt="" srcset="">
                    <div>{{item.courseTitle}}</div>
                    <div>共有{{item.learningNum}}人</div>
                    <div>免费</div>
                </li>
            </ul>
        </div>
    </template>
    <script>
        Vue.component('course', {
            template: '#course',
            data() {
                return {
                    courseList: []
                }
            },
            props: {
                // 自定义参数
                type: String,
                // 定义多种类型
                pageNum: { Number, String },
                pageSize: {
                    type: [String, Number],
                    // default: 20
                    default() {
                        return 20
                    }
                }
            },
            methods: {
                getCourseList(type, pageSize, pageNum) {
                    let url = new URLSearchParams
                    url.append('type', type)
                    url.append('pageSize', pageSize)
                    url.append('pageNum', pageNum)
                    return axios.post('http://wkt.shangyuninfo.cn/weChat/applet/course/list/type', url)
                }
            },
            created() {
                console.log(this.type);
                console.log(this.pageSize);
                console.log(this.pageNum);
                this.getCourseList(this.type, this.pageSize, this.pageNum).then(res => {
                    console.log(res);
                    this.courseList = res.data.rows
                })
            }
        })




        //    3、实例化
        const vm = new Vue({
            // 控制区域
            el: '#app',
            // 存放数据
            data: {
                type: 'free'
            },
            // 方法
            methods: {}
        })

    </script>

5.首页数据 —slot

<!-- 2、视图层 -->
    <div id="app">

        <course :type="type" size="10" page-num="1">
            <h2>免费课程</h2>
            <template v-slot:header>
                头部
            </template>
            <template v-slot:footer>
                底部
            </template>
        </course>
        <course type="boutique" size="5" page-num="1">
            <h2>精品课程</h2>
        </course>

        <course :type="discount" size="5" page-num="1">
            <h2>折扣课程</h2>
        </course>


    </div>
    <template id="course">
        <div>
            <!-- 默认插槽 -->
            <!-- 占位置 -->
            <slot></slot>

            <!-- 具名插槽 -->
            <slot name="header"></slot>
            <ul>
                <li v-for="(item,index) in courseList" :key="item.courseId">
                    <img :src="item.coverFileUrl" alt="">
                    <div>{{item.courseTitle}}</div>
                    <div>共有{{item.learningNum}}人</div>
                    <div>免费</div>
                </li>
            </ul>
            <slot name="footer"></slot>

        </div>
    </template>
    <script>
        Vue.component('course', {
            template: '#course',
            data() {
                return {
                    courseList: []
                }
            },
            props: {
                // 自定义参数
                type: String,
                // 定义多种类型
                pageNum: { Number, String },
                pageSize: {
                    type: [String, Number],
                    // default: 20
                    default() {
                        return 20
                    }
                }
            },
            methods: {
                getCourseList(type, pageSize, pageNum) {
                    let url = new URLSearchParams
                    url.append('type', type)
                    url.append('pageSize', pageSize)
                    url.append('pageNum', pageNum)
                    return axios.post('http://wkt.shangyuninfo.cn/weChat/applet/course/list/type', url)
                }
            },
            created() {
                console.log(this.type);
                console.log(this.pageSize);
                console.log(this.pageNum);
                this.getCourseList(this.type, this.pageSize, this.pageNum).then(res => {
                    console.log(res);
                    this.courseList = res.data.rows
                })
            }
        })




        //    3、实例化
        const vm = new Vue({
            // 控制区域
            el: '#app',
            // 存放数据
            data: {
                type: 'free'
            },
            // 方法
            methods: {}
        })

    </script>

6.事件对象
点击add出现相加

    <!-- 2、视图层 -->
    <div id="app">
        <button @click="add($event,4)">add</button>
        {{num}}
    </div>
    <script>
        //    3、实例化
        const vm = new Vue({
            // 控制区域
            el: '#app',
            // 存放数据
            data: {
                num: 22

            },
            // 方法
            methods: {
                add(event, n) {
                    console.log(event);
                    console.log(n);
                    this.num += n
                }
            }
        })