Vue3（撩课学院）笔记04-高阶API-mixin混入，mixin自定义属性，全局配置mixin，自定义全局指令，自定义局部指令，自定义指令传入数据，teleport传送门

1、Mixin混入

将课复用代码独立出来用于复用
通过创建Mixin对象将复用代码放在Mixin对象中
在根组件中添加mixins属性，通过数组来存放多个minxin对象（也就是把minin内容混入根组件中）

基本案例：

<body>
<div id="app"></div><script>//定义一个minxin对象const myMixin={data () {return {msg:'测试文本',}},methods:{hello(){alert('hello world!')}},}//这里是根组件const app=Vue.createApp({mixins:[myMixin],template:`<div><h3>{{msg}}</h3><br/><button @click="hello">打个招呼</button></div>`})app.mount('#app')</script>
</body>

多个父组件复用mixin内容

<body>
<div id="app"></div>
<div id="app2"></div>
<script>//定义一个minxin对象const myMixin={data () {return {msg:'测试文本',}},methods:{hello(){alert('hello world!')}},}//这里是根组件const app=Vue.createApp({mixins:[myMixin],template:`<div><h3>{{msg}}</h3><br/><button @click="hello">打个招呼</button></div>`})const app2=Vue.createApp({mixins:[myMixin],template:`<div><h3>{{msg}}</h3><br/><button @click="hello">打个招呼</button></div>`})app.mount('#app')
app2.mount('#app2')
</script>
</body>

混入是一种融合而不是一种替换（根组件的原始data和methods等不会和新混入的mixin发生替代关系）
如果混入的data和methods和原始的data和methods重名，则，优先执行原始的data和methods
mixin也可以使用生命周期钩子，如果和原始重名，两者的钩子都会执行，并且mixin的钩子优先级大于原始钩子（即先执行mixin钩子）

<body>
<div id="app"></div>
<div id="app2"></div>
<script>//定义一个minxin对象const myMixin={data () {return {msg:'测试文本',}},methods:{hello(){alert('hello world!')}},}//这里是根组件const app=Vue.createApp({data(){return {site:'www.sina.com.cn',msg:'原始的message'}},methods: {change () {alert('hhaahah')}},mixins:[myMixin],template:`<div><h3>{{msg}}</h3><h2>{{site}}</h2><br/><button @click="hello">打个招呼</button><button @click="change">改变</button></div>`})app.mount('#app')
</script>
</body>

2、Mixin自定义属性的问题

直接定义的属性不会自动放入data里，而是进入到$optiona里面
通过this. $options.自定义属性名拿到具体的数据

<body>
<div id="app"></div>
<div id="app2"></div>
<script>//定义一个minxin对象const myMixin={//自定义属性不会放在data里面，而是在$option里面age:100}//这里是根组件const app=Vue.createApp({data(){return {msg:'原始的message'}},mounted(){console.log(this.$options)},methods: {hello () {alert('hello world')}},mixins:[myMixin],template:`<div><h3>{{this.$options.age}}</h3><br/><button @click="hello">打个招呼</button></div>`})app.mount('#app')
</script>
</body>

通过配置觉得使用自定义属性还是原始属性
实例名.config.optionMergeStrategies.age=（mixinValue，appValue）=>{
return mixinValue || appValue
}

<body>
<div id="app"></div><script>//定义一个minxin对象const myMixin={//自定义属性不会放在data里面，而是在$option里面age:100}//这里是根组件const app=Vue.createApp({data(){return {msg:'原始的message',}},//这里age是属性，不是dataage:99,mounted(){console.log(this.$options)},methods: {hello () {alert('hello world')}},mixins:[myMixin],template:`<div><h3>{{this.$options.age}}</h3><br/><button @click="hello">打个招呼</button></div>`})//这个age要和mixin里和app的属性名相同
app.config.optionMergeStrategies.age=(mixValue,appValue)=>{return mixValue || appValue
}
app.mount('#app')
</script>
</body>

3、全局配置mixin

直接对对应的app配置mixin

app.mixin({mixin数据内容
})

案例

<body>
<div id="app"></div><script>//这里是根组件const app=Vue.createApp({data(){return {msg:'原始的message',}},mounted(){console.log(this.$options)},methods: {hello () {alert('hello world')}},template:`<div><h3>{{this.$options.age}}</h3><br/><button @click="hello">打个招呼</button></div>`})//全局配置mixin
app.mixin({//自定义属性不会放在data里面，而是在$option里面age:100
})
app.mount('#app')
</script>
</body>

4、自定义指令–自定义全局指令

自定义全局指令

全局指令使用根组件名.directive（指令名，对象）

<body>
<div id="app"></div><script>//这里是根组件const app=Vue.createApp({data(){return {msg:'原始的message',}},//通过自定义指令名获得了焦点template:`<div><input placeholder="请输入一些内容" v-myfocus></div>`})//自定义全局指令,focus是指令名称app.directive('myfocus',{//可以有自己的钩子，传入的变量名为el，是其起作用的元素mounted(el){el.focus()//默认的获取焦点函数}})
app.mount('#app')
</script>
</body>

5、自定义指令–自定义局部指令

需要创建一个局部组件
局部组件需要包含挂载的指令定义
在父组件中通过directives挂载这个子组件
在父组件模板中使用这个组件

<body>
<div id="app"></div><script>//创建一个子组件const sub={data(){return {}},myfocus:{mounted(el){el.focus()}},template: `<h3>我是一个子组件</h3>`}//这里是根组件const app=Vue.createApp({data(){return {msg:'原始的message',}},components:{'subcom':sub},//挂载局部指令,这里传入具有局部指令的局部指令就行directives:sub,//通过自定义指令名获得了焦点template:`<div><subcom></subcom><input placeholder="请输入一些内容" v-myfocus></div>`})app.mount('#app')
</script>
</body>

6、自定义指令可以使用的钩子函数

<body>
<div id="app"></div><script>//创建一个子组件
const sub={myfocus:{created(){console.log('created')},beforeMount(){console.log('created')},mounted(el){el.focus()},beforeUpdate(){console.log('beforeUpdate')},beforeMount(){console.log('beforeMount')},beforeUnmount(){console.log('beforeUnmount')},}
}//这里是根组件const app=Vue.createApp({data(){return {isShow:true}},components:{'subcom':sub},//挂载自定义指令directives:sub,template:`<div v-show="isShow"><input placeholder="please input somthing" v-myfocus></div>`})app.mount('#app')
</script>
</body>

7、自定义指令传入数据

以beforeMounted为例，其参数为
beforeMounted（el,binding,vnode,prevVnode）{}
el:绑定的元素
binding：传来的数据

也可以是挂载自定义指令时传入输入数据
directive（el,binding,vnode,prevVnode）{}
el:绑定的元素
binding：传来的数据

<body>
<div id="app"></div><script>//这里是根组件const app=Vue.createApp({data(){return {postData:{top:100,left:100}}},//这里pos是自定义的属性，是v-myfiexed绑定一个属性，属性值是postDatatemplate:`<div class="box" v-myfixed:pos="postData">测试文本</div>`})app.directive('myfixed',(el,binding)=>{console.log(el,binding)console.log(binding.arg)el.style.position='fixed'//通过binding拿到绑定过来的值el.style.left=binding.value.left+'px'el.style.top=binding.value.top+'px'})app.mount('#app')
</script>
</body>

还可以绑定自定义指令时，使用不同的钩子函数

<body>
<div id="app"></div><script>//这里是根组件const app=Vue.createApp({data(){return {msg:'我的测试文本',postData:{name:'zhangsan',age:34}}},template:`<h3>我是模板</h3><div v-mymsg:pos="postData" v-mymm:pos="postData">{{mgs}}</div>`})
app.directive('mymsg',(el,binding)=>{console.log(el)console.log(binding.arg)console.log(binding.value.name)console.log(binding.value.age)
})app.directive('mymm',{mounted(el,binding){console.log(el)console.log(binding.arg)console.log(binding.value.name)console.log(binding.value.age)}
})
app.mount('#app')
</script>
</body>

8、teleport传送门

teleport通过 to元素名称的形式，将teleport的元素传送到指定元素上（css选择器），如同机器猫的传送门
比如传送到body上

<head><meta charset="UTF-8"><title>Title</title><script src="js/vue3.js"></script><style type="text/css">.box{width: 300px;height: 300px;position: absolute;left: 50%;top:50%;transform:translate(-50%,-50%) ;background-color: red;}.mask{position: absolute;left: 0;top:0;right: 0;bottom: 0;background-color: black;opacity: 0.5;color: #fff;justify-content: center;align-items: center;display: flex;}</style>
</head><body>
<div id="app">
</div>
<div></div>
<script>//这里是根组件const app=Vue.createApp({data(){return {msg:'我的测试文本',isShow:false}},methods:{btnClick(){this.isShow=!this.isShow}},//teleport通过 to元素名称的形式，将teleport的元素传送到指定元素上，如同机器猫的传送门template:`<div class="box"><button @click="btnClick">蒙版</button><teleport to="body"><div class="mask" v-show="isShow">{{msg}}</div></teleport></div>`})app.mount('#app')
</script>
</body>

比如传送到特定选择器上

<head><meta charset="UTF-8"><title>Title</title><script src="js/vue3.js"></script><style type="text/css">.box{width: 300px;height: 300px;position: absolute;left: 50%;top:50%;transform:translate(-50%,-50%) ;background-color: red;}.mask{position: absolute;left: 0;top:0;right: 0;bottom: 0;background-color: black;opacity: 0.5;color: #fff;justify-content: center;align-items: center;display: flex;}#root{position: absolute;width: 200px;height: 200px;background-color: green;}</style>
</head><body>
<div id="app">
</div>
<div id="root"></div>
<script>//这里是根组件const app=Vue.createApp({data(){return {msg:'我的测试文本',isShow:false}},methods:{btnClick(){this.isShow=!this.isShow}},//teleport通过 to元素名称的形式，将teleport的元素传送到指定元素上，如同机器猫的传送门template:`<div class="box"><button @click="btnClick">蒙版</button><teleport to="#root"><div class="mask" v-show="isShow">{{msg}}</div></teleport></div>`})app.mount('#app')
</script>
</body>

Vue3（撩课学院）笔记04-高阶API-mixin混入，mixin自定义属性，全局配置mixin，自定义全局指令，自定义局部指令，自定义指令传入数据，teleport传送门相关推荐

华为昇思高阶API套件迎来全新升级！解决无人驾驶疑难杂症真得靠它！
点击蓝字 MindSpore 关注我们对于程序员来说,拥有一款低门槛.易操作的深度学习开发工具包,可以说赢在了起跑线!来自华为的全场景AI框架昇思MindSpore在历经短短一年多时间的迭代,为专业 ...
TensorFlow高阶 API: keras教程-使用tf.keras搭建mnist手写数字识别网络
TensorFlow高阶 API:keras教程-使用tf.keras搭建mnist手写数字识别网络目录 TensorFlow高阶 API:keras教程-使用tf.keras搭建mnist手写数字 ...
Vue3（撩课学院）笔记09-axios简介，发起get请求的两种方式，发起带参的get及post请求，发起并发请求，并发请求结果将数组展开，axios全局配置，axios配置及封装，请求和响应拦截
1.axios简介 axios是基于promise可以用于浏览器和node.js的网络请求库,在服务器端使用原生node.js,在浏览气短使用ajax(即XMLHttpRequests) 2.axio ...
Vue3（撩课学院）笔记02-创建组件，全局组件，局部组件，父子组件，组件标签化，组件的data数据共享，组件间通讯，props，父传子$ref，子传父$parent
1.创建一个组件首先要创建一个根组件进行挂载再创建一个子组件,完成子组件的逻辑子组件主要使用template模板来完成布局和逻辑把子组件通过根组件.component的方法挂载到根组件上 &l ...
Vue3（撩课学院）笔记01-创建实例对象，v-for遍历，时间绑定，传参，时间修饰符，计算属性，v-if，v-show，深拷贝，v-model与各类表单的绑定
1.创建vue实例对象 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
【廖雪峰Python学习笔记】高阶函数
Higher-order function 高阶函数映射过滤算法排序算法高阶函数变量可指向函数 >>> abs # 函数 <built-in function abs ...
撩课python视频下载_2018年撩课学院-Python+人工智能/JavaEE/Web全栈/全学科下载_IT教程网...
教程名称: Python+人工智能/JAVAEE/Web全栈作为Python编程语言的一本指南或者教程.它主要是为新手而设计,不过对于有经验的程序员来说,它同样有用.即便你对计算机的了解只是如何在计 ...
廖雪峰讲python高阶函数求导公式_廖雪峰的学习笔记(三)高阶函数
1.所谓的"高阶函数":把函数对象作为参数的函数. 2.示例: map()函数: 我们先看map.map()函数接收两个参数,一个是函数,一个是Iterable,map将传入的函数 ...
Vue3（撩课学院）笔记07-vueRouter路由，创建路由，路由重定向，路由跳转，动态路由，路由懒加载，路由嵌套，路由参数穿传递的两种形式，通过事件来跳转路由
1.vueRouter路由的两种模式哈希模式:以#号分割,前端路由一般用hash模式比较多,可以兼容ie8以上,井号后面不发起请求历史模式:putstate()和replaceState()方法入 ...