默认插槽
具名插槽 <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声明
获取：this.$refs.名字
<router-link :to='{path:'路径'，query:{传递的参数}}'></router-link>
<router-link :to='{name: '路由里面的name属性'，params:{传递的参数} }'></router-link>
配置路由 在路径后面加上要传递的参数
<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': ''
// // }
// }
}
}
})
使用 和data methods平级
computed：{ 计算的属性（）{}} computed：{ 计算的属性：{get(){},set(){}}}
使用 和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>