mixin混入
mixin混入:
1.组件data优先级高于mixin data优先级
- 生命周期函数，先执行mixin里面的，再执行组件里面的
const myMixin={
data(){
return{
number:2,
count:1
}
},
created() {
console.log('mixin created');
},
methods:{
handleClick(){
console.log('mixin handleClick');
}
}
}
const app = Vue.createApp({
data(){
return{
number:1
}
},
created() {
console.log('created');
},
mixins:[myMixin],
methods: {
handleClick(){
console.log('handleClick');
}
},
template:`
<div>
<div>{{number}}</div>
<div>{{count}}</div>
<button @click="handleClick">增加</button>
</div>
`
});
const myMixin={
data(){
return{
number:2,
count:1
}
},
created() {
console.log('mixin created');
},
methods:{
handleClick(){
console.log('mixin handleClick');
}
}
}
const app = Vue.createApp({
data(){
return{
number:1
}
},
created() {
console.log('created');
},
mixins:[myMixin],
methods: {
handleClick(){
console.log('handleClick');
}
},
template:`
<div>
<div>{{number}}</div>
<div>{{count}}</div>
<child />
<button @click="handleClick">增加</button>
</div>
`
});
全局mixin
app.mixin({
data(){
return{
number:2,
count:1
}
},
created() {
console.log('mixin created');
},
methods:{
handleClick(){
console.log('mixin handleClick');
}
}
}
)
app.component('child',{
//mixins:[myMixin],
template:
`
<div>{{count}}</div>
`
});
自定义的属性，组件的属性优先级高于mixin中的
const myMixin={
number:1
}
const app = Vue.createApp({
number:2,
mixins:[myMixin],
template:`
<div>
<div>{{this.$options.number}}</div>
</div>
`
});
//改变自定义属性优先级
app.config.optionMergeStrategies.number = (mixinVal,appValue) => {
return mixinVal ||appValue;
}
自定义指令directive
const app = Vue.createApp({
number:2,
template:`
<div>
<input v-focus />
</div>
`
});
app.directive('focus', {
beforeMount(el) {
console.log('beforeMount');
},
mounted(el) {
console.log('mounted');
el.focus();
},
beforeUpdate() {
console.log('beforeUpdated');
},
});
const app = Vue.createApp({
data(){
return{
distance:110
}
},
template:`
<div>
<div v-pos:left="distance" class="header">
<input />
</div>
</div>
`
});
app.directive('pos',(el,binding)=>{
//console.log(binding.arg,'binding');
el.style[binding.arg]=(binding.value+'px');
});
app.directive('pos',(el,binding)=>{
//console.log(binding.arg,'binding');
el.style[binding.arg]=(binding.value+'px');
});
等价于
app.directive('pos', {
mounted(el,binding) {
el.style.top=(binding.value+'px');
},
updated(el,binding) {
el.style.top=(binding.value+'px');
},
});
teleport传送门
<style>
.area{
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
width: 200px;
height: 300px;
background: green;
}
.mask{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #000;
opacity: 0.5;
color: #fff;
font-size: 100px;
}
</style>
<body>
<div id="root"></div>
<div id="hello"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
show:false,
message:'hello',
}
},
methods: {
handleClick(){
this.show=!this.show;
}
},
template:`
<div class="area">
<button @click="handleClick">按钮</button>
<teleport to="#hello">
<div class="mask" v-show="show">{{message}}</div>
</teleport>
</div>
`
});
const vm = app.mount("#root");
</script>
render函数
render函数h(标签，标签的属性，标签上的内容)
1.render function:
template -> render -> 虚拟DOM(JS对象)-> 真实DOM -> 展示到页面上
const app = Vue.createApp({
template:`
<my-title :level="2">
hello
</my-title>
`
});
app.component('my-title',{
props:['level'],
render(){
const { h }=Vue;
//虚拟DOM
//<div>hello</div>
// {
// tagName:'div',
// text:hello,
// attribution:{}
// }
return h('h'+this.level,{},[
this.$slots.default(),
h('h4',{},['dell'])
]);
},
// template:`
// <h1 v-if="level===1"><slot /></h1>
// <h2 v-if="level===2"><slot /></h2>
// <h3 v-if="level===3"><slot /></h3>
// `
});
插件plugin
1.plugin插件:把通用型的功能封装起来
const myPlugin={
install(app,options){
app.provide('name','dell lee');
app.directive('focus',{
mounted(el) {
el.focus();
},
});
app.mixin({
mounted(){
console.log('mixin');
}
})
console.log(app,options);
app.config.globalProperties.$sayHello = "hello world";
}
}
const app = Vue.createApp({
template:`
<my-title >
hello
</my-title>
`
});
app.component('my-title',{
inject:['name'],
mounted(){
console.log(this.$sayHello);
},
template:`
<div>{{name}}<input v-focus /></div>
`
});
app.use(myPlugin,{name:'dell'});
2.实例：对数据作校验的插件
const myPlugin={
}
const app = Vue.createApp({
data(){
return{
name:'dell',
age:28
}
},
rules:{
age:{
validate:age => age>25,
message:'too young,too simple'
},
name:{
validate:name => name.length>=4,
message:'too short'
}
},
template:`
<div>name:{{name}},age:{{age}}</div>
`
});
const validatorPlugin=(app,options)=>{
app.mixin({
created() {
for(let key in this.$options.rules){
const item = this.$options.rules[key];
this.$watch(key,(value)=>{
console.log(value);
const result = item.validate(value);
if(!result) console.log(item.message);
});
//console.log(key,item);
}
},
});
};
app.use(validatorPlugin);
