最新消息: 电脑我帮您提供丰富的电脑知识,编程学习,软件下载,win7系统下载。

Vue 3.2 新特性

IT培训 admin 1浏览 0评论

Vue 3.2 新特性

目录

一、模板语法

二、data数据定义以及函数的声明

三、computed、watch、watchEffect

 四、组件注册、父传子、子传父

 五、v-model

 六、slots、attrs (不常用)

七、style标签class中使用变量

八、对await的支持 

一、模板语法

<template>// 在Vue2中template标签中只能有一个根元素,在Vue3中没有这样限制 
</template><script setup> // 这里的setup是加在了script标签里 </script><style scoped>// 支持CSS变量使用 v-bind(变量)
</style>

二、data数据定义以及函数的声明

<template><div class="home"><div @click="msgClick">{{msg}} </div><div @click="stateMsgClick">{{state.reactive}}</div></div>
</template><script setup>
import { reactive, ref } from "vue";const msg = ref("声明的基本msg"); //ref声明的基本类型响应式数据
//reactive 声明复杂类型响应式数据 
const state =reactive({ stateMsg:"state的msg", 
})
//箭头函数的声明
const msgClick = ()=>{console.log(msg.value) // 结果:声明的基本msg/* 如果修改ref声明的数据时 可以用数据.value来进行赋值操作修改  例如: msg.value = "想要修改成的值" 即可*/
}
// function 关键字声明的函数
function  stateMsgClick (){console.log(state.stateMsg) // 结果: state的msg /* 如果修改reactive声明的数据时 可以直接进行赋值操作修改  例如: state.stateMsg = "想要修改成的值" 即可*/
}</script>

三、computed、watch、watchEffect

 computed:

<script setup>
import { reactive,computed} from "vue";const state = reactive({count: 1})const computedCount = computed(()=>state.count) 
//会自动计算state的count值  切记computed的值不能更改watchEffect(() => console.log(state.count))setTimeout(() => {state.count++}, 1000)</script>

  watchEffect:

<script setup>
import { reactive,watchEffect } from "vue";const state = reactive({count: 1})watchEffect(() => console.log(state.count))setTimeout(() => {state.count++}, 1000)</script>

   Watch:

<script setup>
import { reactive,watch } from "vue";const state = reactive({count: 1})// 监听countwatch(() => state.count,(newVal, oldVal) => {console.log(state.count)console.log(`watch监听变化前的数据:${oldVal}`)console.log(`watch监听变化后的数据:${newVal}`)},{immediate: true, // 立即执行deep: true // 深度监听})setTimeout(() => {state.count++}, 1000)</script>

 四、组件注册、父传子、子传父

  组件注册:

<template><div class="parent"><child></child>  </div>
</template><script setup>
// 这是引入的组件 路径是我本地的路径  
// 直接在template模板中使用即可
import child from "@/components/child"; </script>

  父传子:

<!-- 父组件 -->
<template><div class="parent"><child :msg="msg"></child>  </div>
</template><script setup>
import { ref } from "vue"
// 这是引入的组件 路径是我本地的路径  
// 直接在template模板中使用即可
import child from "@/components/child"; const msg=ref("这是父的msg")</script><!-- 子组件 -->
<template><div class="child">{{msg}} </div>
</template><script setup>
import { defineProps } from "vue"
// 这样就可以直接在template中使用
const props = defineProps({msg: String,
});</script>

  子传父: 


<!-- 子组件 -->
<template><div class="child" @click="childCk">点击进行父传子</div>
</template><script setup>
import { defineEmits,defineExpose } from "vue"// 可以声明父组件使用子组件时挂载的函数const emits = defineEmits(["childEmitFn"]);const childExport = ref("这是当前抛出去的数据")const childMsg  = ref("组件通过emit调用函数来进行子传父 ")const childCk = () =>{emits("childEmitFn",childMsg.value);}// 这是导出当前组件定义的数据或者是函数方法等等内容  可以通过ref来获取
defineExpose({// childExport:childExport 下面是简写 childExport 
})</script><!-- 父组件 -->
<template><div class="parent"><child @childEmitFn="childEmitFn"></child>  </div>
</template><script setup>
import { ref } from "vue"
// 这是引入的组件 路径是我本地的路径  
// 直接在template模板中使用即可
import child from "@/components/child"; const childEmitFn = (value)=>{console.log(value); //结果: 子组件通过emit调用函数来进行子传父 
}</script>

 五、v-model

<!-- 父组件 -->
<template><div class="parent"><child v-model:msg="msg" v-model="modelVal"></child>  </div>
</template><script setup>
import { ref } from "vue"
// 这是引入的组件 路径是我本地的路径  
// 直接在template模板中使用即可
import child from "@/components/child"; const msg= ref("这是父的msg")
const modelVal =ref("普通的v-model")</script><!-- 子组件 -->
<template><div class="child">{{msg}} </div><button @click="changeParentMsg">改变父的msg</button>
</template><script setup>
import { defineProps,defineEmits } from "vue"
// 这样就可以直接在template中使用
const props = defineProps({msg: String,modelValue: String, //如果是直接在组件上使用v-model 这个key就是对应的props键值
});const emits = defineEmits(['update:msg','update:modelValue'])const changeParentMsg = () =>{emits('update:msg','子组件把父组件msg更改了')
}</script>

 六、slots、attrs (不常用)

<!-- 父组件 -->
<template><div class="home"><child:msg="msg":status="status"><template #title="props"><div>{{ props }}标题</div></template></child></div>
</template><script setup>
import { ref, toRefs } from "vue";
import child from "@/components/child";const msg = ref("父的值");
const status = ref(200);</script><!-- 子组件 -->
<template><div class="" >{{ msg }}  <slot> </slot><slot name="title" title="这是子传过来的东西"></slot>   </div>
</template>
<script setup>
import {defineProps,ref,useSlots,useAttrs,
} from "vue";// props 现在props里就声明了msg这个参数 可以看到父组件还传了一个status属性这里没有声明
const props = defineProps({msg: String,
});
const attrs = useAttrs();  // 那么就可以用attrs来接收父组件传的属性未在props中声明的 
console.log(attrs); 
const slots = useSlots();  // 这个是可以查看该组件被调用时用了哪些插槽
console.log(slots);
console.log(slots.title());</script>

七、style标签class中使用变量


<template><span>class使用变量</span>  
</template><script setup>import { reactive } from 'vue'const styleState = reactive({color: 'blue'})
</script><style scoped>span {// v-bind使用styleState中的变量color: v-bind('styleState.color');}  
</style>

八、对await的支持 :  

<script setup> 
//无需再使用async 可以直接用 await 因为用了这个之后 组件的setup就会自动变成 async setupconst GET = await axios('/api').then(() => {})
</script>

Vue 3.2 新特性

目录

一、模板语法

二、data数据定义以及函数的声明

三、computed、watch、watchEffect

 四、组件注册、父传子、子传父

 五、v-model

 六、slots、attrs (不常用)

七、style标签class中使用变量

八、对await的支持 

一、模板语法

<template>// 在Vue2中template标签中只能有一个根元素,在Vue3中没有这样限制 
</template><script setup> // 这里的setup是加在了script标签里 </script><style scoped>// 支持CSS变量使用 v-bind(变量)
</style>

二、data数据定义以及函数的声明

<template><div class="home"><div @click="msgClick">{{msg}} </div><div @click="stateMsgClick">{{state.reactive}}</div></div>
</template><script setup>
import { reactive, ref } from "vue";const msg = ref("声明的基本msg"); //ref声明的基本类型响应式数据
//reactive 声明复杂类型响应式数据 
const state =reactive({ stateMsg:"state的msg", 
})
//箭头函数的声明
const msgClick = ()=>{console.log(msg.value) // 结果:声明的基本msg/* 如果修改ref声明的数据时 可以用数据.value来进行赋值操作修改  例如: msg.value = "想要修改成的值" 即可*/
}
// function 关键字声明的函数
function  stateMsgClick (){console.log(state.stateMsg) // 结果: state的msg /* 如果修改reactive声明的数据时 可以直接进行赋值操作修改  例如: state.stateMsg = "想要修改成的值" 即可*/
}</script>

三、computed、watch、watchEffect

 computed:

<script setup>
import { reactive,computed} from "vue";const state = reactive({count: 1})const computedCount = computed(()=>state.count) 
//会自动计算state的count值  切记computed的值不能更改watchEffect(() => console.log(state.count))setTimeout(() => {state.count++}, 1000)</script>

  watchEffect:

<script setup>
import { reactive,watchEffect } from "vue";const state = reactive({count: 1})watchEffect(() => console.log(state.count))setTimeout(() => {state.count++}, 1000)</script>

   Watch:

<script setup>
import { reactive,watch } from "vue";const state = reactive({count: 1})// 监听countwatch(() => state.count,(newVal, oldVal) => {console.log(state.count)console.log(`watch监听变化前的数据:${oldVal}`)console.log(`watch监听变化后的数据:${newVal}`)},{immediate: true, // 立即执行deep: true // 深度监听})setTimeout(() => {state.count++}, 1000)</script>

 四、组件注册、父传子、子传父

  组件注册:

<template><div class="parent"><child></child>  </div>
</template><script setup>
// 这是引入的组件 路径是我本地的路径  
// 直接在template模板中使用即可
import child from "@/components/child"; </script>

  父传子:

<!-- 父组件 -->
<template><div class="parent"><child :msg="msg"></child>  </div>
</template><script setup>
import { ref } from "vue"
// 这是引入的组件 路径是我本地的路径  
// 直接在template模板中使用即可
import child from "@/components/child"; const msg=ref("这是父的msg")</script><!-- 子组件 -->
<template><div class="child">{{msg}} </div>
</template><script setup>
import { defineProps } from "vue"
// 这样就可以直接在template中使用
const props = defineProps({msg: String,
});</script>

  子传父: 


<!-- 子组件 -->
<template><div class="child" @click="childCk">点击进行父传子</div>
</template><script setup>
import { defineEmits,defineExpose } from "vue"// 可以声明父组件使用子组件时挂载的函数const emits = defineEmits(["childEmitFn"]);const childExport = ref("这是当前抛出去的数据")const childMsg  = ref("组件通过emit调用函数来进行子传父 ")const childCk = () =>{emits("childEmitFn",childMsg.value);}// 这是导出当前组件定义的数据或者是函数方法等等内容  可以通过ref来获取
defineExpose({// childExport:childExport 下面是简写 childExport 
})</script><!-- 父组件 -->
<template><div class="parent"><child @childEmitFn="childEmitFn"></child>  </div>
</template><script setup>
import { ref } from "vue"
// 这是引入的组件 路径是我本地的路径  
// 直接在template模板中使用即可
import child from "@/components/child"; const childEmitFn = (value)=>{console.log(value); //结果: 子组件通过emit调用函数来进行子传父 
}</script>

 五、v-model

<!-- 父组件 -->
<template><div class="parent"><child v-model:msg="msg" v-model="modelVal"></child>  </div>
</template><script setup>
import { ref } from "vue"
// 这是引入的组件 路径是我本地的路径  
// 直接在template模板中使用即可
import child from "@/components/child"; const msg= ref("这是父的msg")
const modelVal =ref("普通的v-model")</script><!-- 子组件 -->
<template><div class="child">{{msg}} </div><button @click="changeParentMsg">改变父的msg</button>
</template><script setup>
import { defineProps,defineEmits } from "vue"
// 这样就可以直接在template中使用
const props = defineProps({msg: String,modelValue: String, //如果是直接在组件上使用v-model 这个key就是对应的props键值
});const emits = defineEmits(['update:msg','update:modelValue'])const changeParentMsg = () =>{emits('update:msg','子组件把父组件msg更改了')
}</script>

 六、slots、attrs (不常用)

<!-- 父组件 -->
<template><div class="home"><child:msg="msg":status="status"><template #title="props"><div>{{ props }}标题</div></template></child></div>
</template><script setup>
import { ref, toRefs } from "vue";
import child from "@/components/child";const msg = ref("父的值");
const status = ref(200);</script><!-- 子组件 -->
<template><div class="" >{{ msg }}  <slot> </slot><slot name="title" title="这是子传过来的东西"></slot>   </div>
</template>
<script setup>
import {defineProps,ref,useSlots,useAttrs,
} from "vue";// props 现在props里就声明了msg这个参数 可以看到父组件还传了一个status属性这里没有声明
const props = defineProps({msg: String,
});
const attrs = useAttrs();  // 那么就可以用attrs来接收父组件传的属性未在props中声明的 
console.log(attrs); 
const slots = useSlots();  // 这个是可以查看该组件被调用时用了哪些插槽
console.log(slots);
console.log(slots.title());</script>

七、style标签class中使用变量


<template><span>class使用变量</span>  
</template><script setup>import { reactive } from 'vue'const styleState = reactive({color: 'blue'})
</script><style scoped>span {// v-bind使用styleState中的变量color: v-bind('styleState.color');}  
</style>

八、对await的支持 :  

<script setup> 
//无需再使用async 可以直接用 await 因为用了这个之后 组件的setup就会自动变成 async setupconst GET = await axios('/api').then(() => {})
</script>

与本文相关的文章

发布评论

评论列表 (0)

  1. 暂无评论