vue3.0
vue3.0
魔幻星辰
这个作者很懒,什么都没留下…
展开
-
vue3之computed计算属性
在vue2.x版本中, 计算属性的写法是在组件中是一对象属性。而在vue3中以回调函数的方式来使用, 且要写在setup当中,在使用前需要先导入。1.先引入computedimport {ref, defineComponent, computed, Ref} from "vue";2.在setup里面定义const seriesList: ISeriesList= computed(() => { const seriesList = brandStore.getSeries;原创 2021-06-15 23:41:37 · 960 阅读 · 1 评论 -
vue3之watch监听
vue3的监听跟vue2有点不一样.引入watch后直接在setup里面使用, 调用方式是以回调函数的方式呈现.1.先引入watchimport { ref, defineComponent, watch } from "vue";2.在setup里面引用/*监听props*/watch(props,(newProps, oldProps) => { showModal.value = newProps.isOpened; editData.value = newPr原创 2021-02-24 00:04:29 · 18733 阅读 · 3 评论 -
vue3之生命周期函数
在Vue3 Composition API中 附带了一个 setup() 方法。此方法封装了我们的大多数组件代码,并处理了响应式,生命周期钩子函数等。Composition API使我们能够更好地将代码组织为更多的模块化功能,而不是根据属性的类型(方法,计算的数据)进行分离。vue3的生命周期函数跟vue2.x版本有了很大的不同,在vue3中移除了beforeCreate 和 created,增加了setup函数.除了这2个之外还有9个生命周期函数onBeforeMountonMountedon原创 2021-01-31 22:40:07 · 1474 阅读 · 0 评论 -
vue3之组件结构(defineComponent,setup函数)
在vue3中,对组件整体结构做一些调整,先看一个组件案例:import {ref, reactive, defineComponent, Ref, onMounted} from "vue";import {settingsStore} from "/@/store/module/settings";import {IRoleList} from "/@/interface/role/list.interface";import {IHttpResult} from "/@/interface/co原创 2021-01-29 21:26:15 · 38794 阅读 · 11 评论 -
vue3.0+vite+typescript项目架构搭建之VUEX配置
vue项目自然少不了VUEX了,这里使用vuex-module-decorators进行模块化分割.npm install vuex-module-decorators 或者yarn add vuex-module-decorators安装成功后就可以使用了,先看一个完整案例1.创建主配置文件index.ts/** * @description vuex 配置 * @author : lsx * @version : v1.0 * @date : 2020/10/22 14:33 */原创 2021-01-29 00:53:20 · 1379 阅读 · 0 评论 -
vue3.0+vite+typescript项目架构搭建之路由配置
vue3.0+vite+typescript项目架构搭建之路由配置项目路由目录结构为了路由文件更好的管理,以模块进行路由文件划分。1.创建路由主文件index.ts 路由分2种模式,根据需要进行选择:createWebHashHistory hash模式createWebHistory History模式/** * @description 路由配置文件 * @author : lsx * @version : v1.0 * @date : 2020/10...原创 2021-01-26 13:21:24 · 2791 阅读 · 0 评论 -
vue3.0+vite+typescript项目架构搭建
vue3.0 + vite + typescript + Ant Design Vue + router4beta + vuex4beta 架构搭建项目准备工作 1、安装脚手架工具,用的 Vue CLI v4.5 作为 @vue/cli@next。 全局重新安装最新版本的 @vue/cli:yarn global add @vue/cli@next# ORnpm install -g @vue/cli@next 2、Vite Vite是一个 ...原创 2021-01-26 11:52:34 · 2536 阅读 · 2 评论