位置: IT常识 - 正文

Vue 3.x基础(vue3.0用法)

编辑:rootadmin
Vue 3.x基础 模版 <template> // html </template> <script setup> // setup API // ... </script> <style> // css </style> setup API 变量(响应式) // 基本数据类型 let refVa ... Vue 3.x基础模版<template> // html</template><script setup> // setup API // ...</script><style> // css</style>setup API

推荐整理分享Vue 3.x基础(vue3.0用法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3官方教程,vue3.0教程,vue3.0入门教程,vue 3 教程,vue3 入门,vue3.0教程,vue3 入门,vue3.0教程,内容如对您有帮助,希望把文章链接给更多的朋友!

Vue 3.x基础(vue3.0用法)

变量(响应式)

// 基本数据类型let refValue = ref(1)console.log(refValue.value) // 1// 复杂数据类型let reactiveValue = reactive({ a: 1, b: 2 })console.log(reactiveValue) // { a: 1, b: 2 }// 解构toRefs,一般用于reacative创建的变量const { a, b } = toRefs(reactiveValue)console.log(a, b) // 1, 2

函数

// 创建const changeValue = (v) => { refValue.value = v console.log(v) // 1}// 调用changeValue(1)生命周期选项式 APISetup API调用时机beforeCreateNot needed*#createdNot needed*#beforeMountonBeforeMount(常用)在挂载开始之前被调用:相关的 render 函数首次被调用。mountedonMounte(常用)组件挂载时调用beforeUpdateonBeforeUpdate数据更新之前调用,此时DOM还未更新updatedonUpdatedDOM 重新渲染和打补丁,此时DOM已更新,不要在该钩子函数里更新数据。beforeUnmountonBeforeUnmount在卸载组件实例之前调用。此时Vue实例仍是正常的。unmountedonUnmounted卸载组件实例后调用,组件实例的所有指令、事件侦听器都被移、子组件实例都会被卸载。activatedonActivated被 keep-alive 缓存的组件激活时调用。deactivatedonDeactivated被 keep-alive 缓存的组件停用时调用。errorCapturedonErrorCaptured当捕获一个来自子孙组件的错误时被调用,此钩子可以返回 false 以阻止该错误继续向上传播。renderTrackedonRenderTracked#renderTriggeredonRenderTriggered#

注意:因为 setup 是++围绕 beforeCreate 和 created++ 生命周期钩子运行的,所以不需要显式地定义它们。换句话说,在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

<script setup>onMounted(() => { console.log('Component is mounted!')})// ...</script>计算属性、侦听器<script setup>// 定义一个计算属性,计算年龄是否为18const ageIs18 = computed(() => { return age.value === 18})// 定义一个watch侦听器,监控count变化watch(count, (nV, oV) => { console.log(nV, oV)})</script>路由<!-- router.js -->import { createRouter, createWebHashHistory } from 'vue-router'const routes = [ { path: '/', redirect: '/home' // component: () => import('../pages/home.vue') // 组件懒加载 } ...]// 创建路由实例const router = createRouter({ history: createWebHashHistory(), // 使用 hash 模式 routes, // `routes: routes` 的缩写})export default router<!-- main.js -->import { createApp } from 'vue'import router from './router'...const app = createApp(App)app.use(router) // 挂载路由到Vue<!-- pages/home.vue --><script setup> import { useRouter } from 'vue-router' // useRouter()用于获取路由对象 const router = useRouter() router.push({ path: '/next' }) // useRoute()用于获取当前路由对象 const route = useRoute() const query = route.query</script>pinia

Vuex替代品,全局数据管理器

<!-- pinia/user.js -->import { defineStore } from 'pinia'import { ref, computed, reactive } from 'vue';// useStore 可以是 useUser、useCart 之类的任何东西// 第一个参数是应用程序中 store 的唯一 idexport const usePiniaStore = defineStore('user', () => { // vue3 setup编程模式,让结构更加扁平化 const _this = window.$this // state const userId = ref('111122') const userData = ref(null) // action const getUser = async () => { const res = await _this.$api.getId() userData.value = res.data } // getter const userName = computed(() => userData.value.id + ' ---- ') // 导出 return { userData, userName, getUser, userId }})<!-- pages/user.vue --><script setup> import { usePiniaStore } from '../pinia/user.js' // 使用pinia user module const useStore = usePiniaStore() // 解构state const { userData, userName, userId } = storeToRefs(useStore) // 直接调用pinia函数 useStore.getUser() // 直接赋值 userId.value = 'aaa' console.log(`userStore:`, userId.value, userData.value)</script>
本文链接地址:https://www.jiuchutong.com/zhishi/310881.html 转载请保留说明!

上一篇:mysql左外连接查询是什么(mysql左连接查询 效率)

下一篇:织梦dedecms如何更改plus文件夹名称(dede织梦怎么转成zblog)

  • 民营医院所得税如何计算
  • 汇算清缴需补税
  • 净利润是指税前利润
  • 不动产租赁税率2023
  • 如何查询个人所有贷款记录
  • 纳税期限届满
  • 销售旧货的增值税税率
  • 间接费包含哪些具体内容
  • 电子银行承兑汇票查询
  • 暂估一直不来票,没有纳税调整怎么办
  • 代理记账公司收费项目
  • 外地施工如何开发票
  • 已认证进项发票转出会计分录
  • 红字发票信息表填好后再怎么操作
  • 税控设备实际抵减增值税时如何做分录?
  • 固定资产出售收入大于净值
  • 广告费超标今年怎么处理
  • 赠与房产再出售税费
  • 公司章程认缴时效是多久
  • 在linux2.4.0版本中
  • 局域网的工作模式及特点
  • PHP:xml_set_external_entity_ref_handler()的用法_XML解析器函数
  • 失控发票的企业怎么处理
  • win11系统语言修改不了
  • 总结linux命令行的主要用法
  • php数组函数输出《咏雪》里有多少"片"字
  • PHP:pg_get_notify()的用法_PostgreSQL函数
  • 马瑙斯市
  • 一只躺在沙滩上的鸟
  • 加勒比海百科
  • 短期借款利息的核算不可能涉及的账户是
  • php教程视频
  • 狮子岩斯里兰卡
  • 微信小程序开发公司
  • Css中的color属性用于设置html元素的背景颜色
  • 被黑客攻击
  • ps怎么把图片套入样机快捷键
  • 差旅费住宿专票可以抵扣吗
  • 其他应收款包括应收利息吗
  • 将外购商品用于捐赠的分录
  • PostgreSQL中常用的时间日期脚本使用教程
  • 差额增收企业怎么做账
  • 工程结算是含有增值税吗
  • 政府补助的企业所得税如何处理
  • 个人所得税汇算清缴
  • 环保工程会计处理
  • 生产企业的生产许可证
  • 什么是企业年金险
  • 股东捐赠资产要纳税吗
  • 法人如何网上申请辞职手续
  • 营改增后计算土地增值税收入公式
  • 国有资产如何保值
  • 优惠券抵扣账务处理流程
  • 期初建账库存现金如何填写
  • 代收代缴水电费如何开票
  • 分配利润和分配红利
  • 固定资产领用原因
  • 长期借款的利息费用计入什么科目
  • 财产保险的金额
  • 折旧年限的最新规定 汽车
  • win10系统微软
  • centos用途
  • win8 所有程序
  • ubuntu20.04怎么用
  • pvlsvr.exe - pvlsvr是什么进程 有什么用
  • windows8.1rt
  • centos 安装rpm软件包的命令
  • win8开机进入开始界面
  • 如何让xp系统崩溃
  • win10系统怎么设置最好
  • opengl编程语言
  • Jquery操作Ajax方法小结
  • 在js中如何判断数据类型
  • jquery选择指定标签
  • unity更新需要重新下载吗
  • mongoose模块有什么用途
  • python编程完全入门教程
  • python 汉诺塔
  • 电子税务网没开通怎么办
  • 应交税金包含企业所得税吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设