企业官网建设流程全解析

邳州市建设局网站,专业做网站优化排名,青柠视频免费观看高清视频,广州品牌vue3的ts页面初始化模板代码 在 Vue 3 中使用 TypeScript 开发时#xff0c;主要有两种编写页面的方式。以下是两种风格的模板代码#xff0c;你可以根据项目需求选择使用。 #x1f4dd; 两种页面初始化模板 1. 标准 Composition API 写法 这种写法使用 defineComponen…vue3的ts页面初始化模板代码在 Vue 3 中使用 TypeScript 开发时主要有两种编写页面的方式。以下是两种风格的模板代码你可以根据项目需求选择使用。 两种页面初始化模板1. 标准 Composition API 写法这种写法使用defineComponent和明确的setup函数结构清晰适合初学者和需要明确控制暴露内容的情况。templatedivclasspage-containerh1{{pageTitle}}/h1p计数器:{{count}}/pbutton clickincrement增加/buttonbutton clickreset重置/button/div/templatescript langtsimport{defineComponent,ref}fromvue;exportdefaultdefineComponent({name:MyPage,setup(){// 响应式数据constpageTitlerefstring(Vue 3 TypeScript 页面);constcountrefnumber(0);// 方法constincrement():void{count.value;};constreset():void{count.value0;};// 生命周期钩子constinitialize():void{console.log(页面初始化完成);};// 返回模板中需要使用的数据和方法return{pageTitle,count,increment,reset,initialize};},mounted(){this.initialize();}});/scriptstyle scoped.page-container{padding:20px;max-width:800px;margin:0auto;}/style2.script setup语法糖写法推荐这种写法更简洁不需要显式返回数据适合 Vue 3.2 版本是目前的主流写法。templatedivclasspage-containerh1{{pageTitle}}/h1p计数器:{{count}}/pp双倍计数:{{doubleCount}}/pbutton clickincrement增加/buttonbutton clickreset重置/button/div/templatescript setup langtsimport{ref,computed,onMounted}fromvue;// 响应式数据constpageTitlerefstring(Vue 3 TypeScript 页面);constcountrefnumber(0);// 计算属性constdoubleCountcomputed(():numbercount.value*2);// 方法constincrement():void{count.value;};constreset():void{count.value0;};// 生命周期钩子onMounted(():void{console.log(页面初始化完成);initialize();});constinitialize():void{// 初始化逻辑console.log(初始化页面数据);};/scriptstyle scoped.page-container{padding:20px;max-width:800px;margin:0auto;}button{margin:05px;padding:8px16px;cursor:pointer;}/style 高级功能扩展模板如果需要更复杂的功能可以参考以下包含路由、状态管理和API调用的完整模板templatedivclassadvanced-pageheaderh1{{pageTitle}}/h1navrouter-link to/home首页/router-linkrouter-link to/about关于/router-link/nav/headermaindiv v-ifloadingclassloading加载中.../divdiv v-elseslot namecontentp用户数据:{{userData}}/pbutton clickfetchData:disabledloading{{loading?加载中...:获取数据}}/button/slot/div/main/div/templatescript setup langtsimport{ref,computed,onMounted}fromvue;import{useRouter}fromvue-router;// 类型定义interfaceUser{id:number;name:string;email:string;}interfacePageProps{title?:string;}// Props 定义constpropswithDefaults(definePropsPageProps(),{title:默认页面标题});// 响应式数据constpageTitlerefstring(props.title);constloadingrefboolean(false);constuserDatarefUser|null(null);// 计算属性consthasUserDatacomputed(():booleanuserData.value!null);// 方法constfetchDataasync():Promisevoid{loading.valuetrue;try{// 模拟 API 调用constresponseawaitfetch(/api/user);userData.valueawaitresponse.json();}catch(error){console.error(获取数据失败:,error);}finally{loading.valuefalse;}};// 生命周期onMounted(async():Promisevoid{awaitfetchData();});// 暴露给父组件的方法defineExpose({fetchData,resetData:(){userData.valuenull;}});/scriptstyle scoped.advanced-page{min-height:100vh;background-color:#f5f5f5;}header{background:#fff;padding:1rem;box-shadow:02px4pxrgba(0,0,0,0.1);}.loading{text-align:center;padding:2rem;color:#666;}button:disabled{opacity:0.6;cursor:not-allowed;}/style 关键要点说明类型安全TypeScript 提供了完整的类型支持减少运行时错误 。响应式系统使用ref和reactive创建响应式数据 。组合式函数可以将逻辑抽离为可复用的组合式函数 。生命周期使用onMounted、onUpdated等组合式 API 替代选项式 API 。 使用建议简单页面推荐使用script setup语法糖代码更简洁。复杂组件如果需要明确的控制和组织结构可以使用标准写法。团队项目统一代码风格制定 TypeScript 规范。