插槽，路由的跳转传参，配置代理，计算属性和监听属性

插槽 在子组件里面写上 占位符

默认插槽
具名插槽 <template v-slot:名字><template #名字>
作用域插槽 可以拿到子组件的数据和方法

<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "courseView",
    data() {
        return {
            list: [1, 2, 3, 4]
        }
    }
})
</script>

<template>
    <div>
        <!--        默认插槽-->
        <!--        <slot></slot>-->
        课程
        <!--        <slot></slot>-->
        <!--        具名插槽-->
        <slot name="footer"></slot>
        <slot name="footer1"></slot>
        <!--        作用域插槽-->
        <slot name="section" :list="list"></slot>
    </div>
</template>

<style scoped lang="less">

</style>

 mounted() {
        console.log(this.$refs)
        this.$refs.box.style.color = 'red'
        console.log(this.$refs.courseView.list)
    }

//res使用
<courseView ref="courseView">
           //默认插槽
            <template v-slot:default></template>
            <div>
                <div>免费</div>
                <img src="https://online-course.nos-eastchina1.126.net/1%E5%A4%87%E4%BB%BD%2014-1630366194873663488.png"
                     alt="">
            </div>
        </courseView>
        <courseView>
            <div>头部</div>
            折扣
           //具名插槽
            <template v-slot:footer>
                底部
            </template>
             //具名插槽
            <template #footer1></template>
        </courseView>
        <courseView>
        //作用域插槽
            <template #section="type">
                <div>{{ type.list }}</div>
            </template>
        </courseView>

ref 可以拿到子组件的数据和方法

使用：标签或者组件起一名字 用ref声明
获取：this.$refs.名字

路由的跳转传参

声明式

<router-link :to='{path:'路径'，query:{传递的参数}}'></router-link> 
<router-link :to='{name: '路由里面的name属性'，params:{传递的参数}  }'></router-link> 
配置路由 在路径后面加上要传递的参数 

函数式

this.$router.push（）

this.$router.replace()

this.$router.back()

this.$router.go()

获取跳转的参数this.$route.query/params

<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "pageA",
    methods: {
        topageB() {
            // 页面栈
            // this.$router.push('/pageB')
            // this.$router.replace('/pageB')
            // this.$router.push({
            //     path: '/pageB',
            //     query: {id: 123}
            // })
            this.$router.push({
                name: 'pageB',
                params: {id: 123}
            })
        }
    }
})
</script>

<template>
    <div>
        <!--        声明式-->
        <router-link to="/pageB">pageB</router-link>
        <router-link :to="{path:'/pageB',query:{id:123}}">pageB111</router-link>
        <router-link :to="{name:'pageB',params:{id:123}}">pageB2222</router-link>
        <!--        函数式-->
        <button @click="topageB">topageB</button>
    </div>
</template>

<style scoped lang="less">

</style>

//page
<script>
import {defineComponent} from 'vue'
// import src from '../assets/logo.png'
export default defineComponent({
    name: "pageB",
    data() {
        return {
            // src: src,
            src: require('../assets/logo.png'),
            imgSrc:'/favicon.ico'
        }
    },
    methods: {
        back() {
            // this.$router.back()
            this.$router.go(1)
        }
    },
    created() {
        console.log(this.$route)
        console.log(this.$route.query.id)
        console.log(this.$route.params.id)
    }
})
</script>

<template>
    <div>
        pageB
        <button @click="back">back</button>
        <img src="../assets/logo.png" alt="">
        <img :src="src" alt="">

        <img src="/favicon.ico" alt="">
        <img :src="imgSrc" alt="">
    </div>
</template>

<style scoped lang="less">

</style>

配置代理

跨域：同源策略：浏览器的一种安全协议，只要主机 协议 端口号，有一个不一致就会产生同源策略，从而引发跨域

解决跨域

后台直接放开 不安全
JSONP script标签中src属性不受同源策略的影响 后端配合
配置代理

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    // If you are using less-loader@5 please spread the lessOptions to options directly
                    modifyVars: {
                        'primary-color': '#1DA57A',
                        'link-color': '#1DA57A',
                        'border-radius-base': '2px',
                    },
                    javascriptEnabled: true,
                },
            },
        },
    },
    //        https://course.myhope365.com/api/weChat/applet/course/banner/list?number=5
    devServer: {
        proxy: {
            //    代理的名称
            '/course-api': {
                // 代理的地址
                target: 'https://course.myhope365.com/api',
                // 是否跨域
                changeOrigin: true,
                // 路径重写
                pathRewrite: {
                    '^/course-api': ''
                }
            },
            //   https://course.myhope365.com/api/weChat/applet/course/banner/list?number=5
            '/api': {
                // 代理的地址
                target: 'https://course.myhope365.com',
                // 是否跨域
                changeOrigin: true,
                // 路径重写
                // pathRewrite: {
                //     '^/course-api': ''
                // }
            },
//                /api1
//             '/api1': {
//                 // 代理的地址
//                 target: 'https://course.myhope365.com',
//                 // 是否跨域
//                 changeOrigin: true,
//                 // 路径重写
//                 // pathRewrite: {
//                 //     '^/course-api': ''
//                 // }
//             }
        }
    }
})

计算属性 computed

使用 和data methods平级
computed：{ 计算的属性（）{}} computed：{ 计算的属性：{get(){},set(){}}}

监听属性 watch

使用 和data methods平级
watch:{监听的属性(newVal,oldVal){} }
watch:{监听的属性:{ handler(newVal,oldVal){} ,immediate:true(立即监听)，deep：true(深度监听)} }

计算属性和监听属性的区别

计算属性：结果会被缓存，当他依赖的响应式数据发生改变的时候才会重新计算
监听属性：当监听的数据发生改变的时候，就会触发监听

<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "computedWatch",
    data() {
        return {
            firstName: '',
            lastName: '',
            fullName: '',
            date: {
                name: 'zs'
            }
        }
    },
    methods: {
        getFull() {
            this.date.name ='ls'
            // this.fullName = this.firstName + this.lastName
        }
    },
    // 计算属性   计算属性里面的属性 不能和data里面的重复
    // computed: {
    // fullName() {
    //     return this.firstName + this.lastName
    // },
    // fullName: {
    // get() {
    //     return this.firstName + this.lastName
    // },
    // set(val) {
    //     console.log(val.split('-'))
    //     this.firstName = val.split('-')[0]
    //     this.lastName = val.split('-')[1]
    // }
    // }
    // },
    // 监听属性
    watch: {
        // firstName(newVal, oldVal) {
        //     console.log(newVal)
        //     console.log(oldVal)
        //     this.fullName = this.firstName + this.lastName
        // },
        // lastName(newVal, oldVal) {
        //     console.log(newVal)
        //     console.log(oldVal)
        //     this.fullName = this.firstName + this.lastName
        // }
        // firstName: {
        //     handler(newVal, oldVal) {
        //         console.log(newVal, oldVal)
        //     },
        //     // 立即执行监听
        //     immediate: true,
        //     // 深度监听
        //     deep: true
        // },
        date: {
            handler(newVal, oldVal) {
                console.log(newVal, oldVal)
            },
            // 立即执行监听
            immediate: true,
            // 深度监听
            deep: true
        }

    },
    updated() {
        // this.fullName = this.firstName + this.lastName
    }
})
</script>

<template>
    <div>
        {{date.name}}
        firstName: <input type="text" v-model="firstName">
        lastName: <input type="text" v-model="lastName">
                <button @click="getFull">getFull</button>
        fullName: <input type="text" v-model="fullName">
    </div>
</template>

<style scoped lang="less">

</style>