很色h做游戏网站,深圳装修公司哪家好十大排名,网页设计与制作步骤教程,wordpress小工具插件一#xff1a;前言 Vue3 是 Vue2 的一个升级版#xff0c;随着 2023年12月31日起 Vue2 停止维护。这意味着 Vue3 将会为未来国内一段时间里#xff0c;前端的开发主流。因此熟练的掌握好 Vue3 是前端开发程序员所不可避免的一门技术栈。而 Vue3 是 Vue2 的一个升级版#x…
一前言 Vue3 是 Vue2 的一个升级版随着 2023年12月31日起 Vue2 停止维护。这意味着 Vue3 将会为未来国内一段时间里前端的开发主流。因此熟练的掌握好 Vue3 是前端开发程序员所不可避免的一门技术栈。而 Vue3 是 Vue2 的一个升级版其语法大多相似。不过也有不同之处。比如计算属性computed和监听器watch的写法就有所不同。接下来我会通过一个案例来描述在 Vue3 中的写法。
二案例代码
1、html 部分 这里是 html 的代码部分由于只是基础案例因此界面布局是没有那么复杂的只是一些输入框这些显示罢了。显示效果见最上方的图片。
templatediv classelh1计算属性和监视/h1/divfieldsetlegend姓名操作/legend姓氏:input placeholder请输入姓氏 typetext v-modeluser.firstName/br /名字:input placeholder请输入名字 typetext v-modeluser.lastName/br //fieldsetfieldsetlegend计算属性和监视的演示/legend姓名:input placeholder显示姓名 typetext v-modelfullName1/br /姓名:input placeholder显示姓名 typetext v-modelfullName2/br /姓名:input placeholder显示姓名 typetext v-modelfullName3/br //fieldset
/template
2、JavaScript 部分 这块是我们实现的逻辑了。这里我写的还是最初的 Vue3 版本并不是 3.2 之后的写法我们可以看到 computed 中的 get 和 set 写法。以及两种 watch 监听器方法。 import { computed, defineComponent, reactive, ref, watch, watchEffect } from vue;export default defineComponent({setup() {// 定义响应式对象const user reactive({firstName: 东方,lastName: 不败,})// 当只有一个回调函数的时候默认是getconst fullName1 computed((){return user.firstName _ user.lastName})// computed同步修改const fullName2 computed({get(){return user.firstName _ user.lastName},set(val:string){const names val.split(_)user.firstName names[0]user.lastName names[1]}})// 监听器const fullName3 ref()watch(user,({firstName,lastName}){fullName3.value firstName _ lastName},{immediate:true,deep:true})// 第二种监听器和上面的泣别就是默认immediate和deep为truewatchEffect((){fullName3.value user.firstName _ user.lastName})return {user,fullName1,fullName2,fullName3}}
})3、css部分
style langscss scoped
fieldset{padding: 10px;
}
/style
三结尾 有 Vue2 基础的小伙伴对这块写法应该很容易理解。初学者可以自己动手写一下。最后附上项目gitee源码地址
乾辰/vue3全家桶练习https://gitee.com/qianchen12138/vue3-family-bucket-practice
