|
1.列表过渡(是指变量的值是list[])
<transition-group v-for="item in list" :key="item">
{{item}}
</transition-group>
2.混合maxin(数据可以复用)(多个混合 相同的命名的数据会覆盖 先实例后混入 ,生命周期先执行混合 后执行实例里面的)
//定义一个mixin对象,里面可以放vue里面的选项
const myMixin={
data(){
return {msg:'ngs'}
},
template:` <div>xxxxxxx</div>`
}
//在vue中引用数据
const app=Vue.createApp(
mixins:[myMixIn],
template:` <div>xxxxxxx</div>`
);
app.mount("#app");
3.了解 通过 this.$options.msg
const myMixin={
msg:6;
}
<div>{{ this.$options.msg}}</div>
4.了解 要是mixin对象里面是同时存在 上面msg和选项 先用值还是用data里面的值
//配置
app.config.optionMergeStrategies.age=(mixinVal,appValue)=>{
return appValue || mixinVal;
}
5.自定义指令
1.全局指令(更多)
app.directive('focus',{
//生命周期
mounted(el){
el.focus();
}
})
使用
<input v-focus />
- 局部指令
const lkD={
focus:{
mounted(el){
el.focus();
}
}
}
const app=Vue.createApp({
directives:lkD,
data(){
return {msg:'ssww'}//使用混合器,数据优先使用app的,组件也是
},
});
6.自定义指令得到 app的data的值
<div id="box" v-sb="posData"></div>
const app=Vue.createApp({
// 局部自定义定义指令
// directives:lkD,
data(){
return {
posData:{
left:400,
top:500
}
};
}
});
// 全局自定义定义指令
//如果是钩子第二个参数就是{mounted(el,binding){}}
app.directive('sb',(el,binding)=>{
el.style.position='fixed';
el.style.left=binding.value.left+'px';
el.style.top=binding.value.top+'px';
});
7.teleport传送门 :把效果传送到那个元素 ,把要传送的东西放在传送门
to代表要传送到那个元素
<teleport to="#mytel">
<div v-show="flag" id="mask" >
</div>
</teleport>
- 选项api到组件api的过渡就是data methods…
使用
const app=Vue.createApp({
//取代data 不能调用生命周期的任何东西 在beforeCreate执行
const app=Vue.createApp({
setup(prop,context){
let msg='xxx';
return{
msg:'xxxx',
log:()=>{
alert("xxx");
}
}
}
});
app.mount("#app")
9.在setup使数据具有响应式(就是全部数据和数据来源的数据一致)
const app=Vue.createApp({
setup(props,context){
//在vue中拿到ref对象
const {ref}=Vue;
//通过代理proxy(value:'itLike.com') 创建
//代表传入可以改的值
let msg=ref('itLike.com');
//内部处理要.value
msg.value='xxxx';
return{ msg }
}
});
10.给对象或者数组(引用类型)加响应式 reactive
setup(prop,context){
// 使对象 数组 (引用数据类型)具有响应式
const {reactive}=Vue;
let obj=reactive({id:1,name:'ls'});
let objArr=reactive([1,'xxx']);
return{
obj,
objArr
}
log:()=>{
alert("xxx");
}
}
});
app.mount("#app")
11.readonly(数据不希望被人修改)
const {readonly}=Vue;
let msg=readonly('xxxx');
12.使解构对象的数据 具有响应式
```html
const app=Vue.createApp({
setup(prop,context){
const {toRefs,reactive}=Vue;
//reacive与toRefs配合使用
let obj=reactive({id:1,name:'ls'});
//修改变量的值
setTimeout(()=>{
obj.id=111;
},2000);
const {id,name}=toRefs(obj);
return{
id,
name
}
}
});
13.针对解构 可传可不传的参数用 toRef
let {reactive,toRefs,toRef}=Vue;
let obj=reactive({id:1,name:'ls'});
let{id,name}=toRefs(obj);
//如果没有age强行解构就会报错
//这个是解决引用单个变量的响应式
let age=toRef(obj,'age');
//修改变量的值
setTimeout(()=>{
age.value=222;
},2000);
return{
id,
name,
age
}
}
14.context有emit子向父传数据
|