Vue3
文章平均质量分 61
Vue3的相关内容
会飞的战斗鸡
专注前端领域开发~
展开
-
vue3+ts封装table组件并注册发布
操作项大部分table都具有button用于编辑删除等操作,我们在传入options的中定义操作项的action为true,因为操作的特殊性,我们选择单独编写,所以要先处理传入的数据,将操作项与数据部分分离// 传入options的数据 let options : TableOptions [ ] = [ {............原创 2022-08-28 21:37:02 · 2690 阅读 · 0 评论 -
vue3+ts封装chooseCity城市选择器
先上效果图样式采用elementplus,各个组件详情查看elementplus官网整体采用popover作弹出框,需要注意的是elementplus,使用插槽的方式,标题一个在popover里的reference具名插槽,插槽内部我们添加标题和下拉图标下拉图标采用arrowdown(该图标为elementplus图标库封装后的,自己的项目请按照elementplus官网的用法),class通过visible控制样式,如果弹出框可见,代表此时已经下拉,将下拉箭头改为上拉。......原创 2022-08-26 15:49:18 · 1651 阅读 · 1 评论 -
利用app.use全局注册自定义组件
在自己封装好的组件文件夹下创建index.tsimport {App } from 'vue' // 导入自己的组件 import chooseArea from './chooseArea.vue' // 让这个组件可以以use的形式使用 export default {在组件总项目下创建index.ts导入上面的ts文件并使用import {原创 2022-08-24 17:39:19 · 986 阅读 · 0 评论 -
vue3的watch监听<与vue2比较>
文章目录watch监听基本用法监视指定的数据源监视多个数据源清除监视在 watch 中清除无效的异步任务vue2中的watch监听方法格式的监听对象格式的监听watch监听watch() 函数用来监视某些数据项的变化,从而触发某些特定的操作,使用之前需要按需导入:import { watch } from 'vue'基本用法const count = ref(0)// 定义 watch,只要 count 值变化,就会触发 watch 回调// watch 会在创建时会自动调用一次watc原创 2022-05-09 22:04:01 · 530 阅读 · 0 评论 -
vue3嵌套组件传递数据<provide和inject>
provide和injectprovide() 和 inject() 可以实现嵌套组件之间的数据传递。这两个函数只能在 setup() 函数中使用。父级组件中使用 provide() 函数向下传递数据;子级组件中使用 inject() 获取上层传递过来的数据。共享普通数据App.vue 根组件:<template> <div id="app"> <h1>App 根组件</h1> <hr /> <LevelO原创 2022-05-09 23:01:46 · 1793 阅读 · 0 评论 -
vue3的基本使用<与vue2比较>
文章目录创建项目基本使用vue2vue3创建项目基本使用vue2 <div id="app">{{username}}</div><script>//创建vue实例 const vm = new Vue({ //绑定id选择器app el: '#app', //数据 data: { username: 'zs'原创 2022-05-09 21:14:04 · 238 阅读 · 0 评论 -
Vue3为什么要用Proxy替代defineProperty
文章目录Vue3为什么要用Proxy替代defineProperty先导知识:Object.defineProperty()和ProxyObject.defineProperty()ProxyObject.defineProperty与Proxy区别ES5中,通过defineProperty()的set进行监听ES6中,通过Proxy实现为什么要替代替代defineProperty只能对单例属性做监听Proxy代理对象响应式是懒惰的Vue3为什么要用Proxy替代defineProperty先导知识:O原创 2022-05-10 23:56:49 · 441 阅读 · 0 评论 -
vue3template里的ref()<与vue2比较>
template里的ref()通过 ref() 还可以引用页面上的元素或组件。元素的引用示例代码如下:<template> <div> <h3 ref="h3Ref">TemplateRefOne</h3> </div></template><script>import { ref, onMounted } from '@vue/composition-api'export default原创 2022-05-09 23:07:58 · 816 阅读 · 0 评论 -
vue3新增特性setup()用法<与vue2对比>
文章目录setup()执行时机setup()的第一个形参propssetup()的第二个形参contextreactive()基本语法定义响应式数据供 template 使用ref()基本语法在 template 中访问 ref 创建的响应式数据在 reactive 对象中访问 ref 创建的响应式数据isRef()toRefs()setup()setup() 函数是 vue3 中,专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。执行时机s原创 2022-05-09 21:12:21 · 8058 阅读 · 0 评论 -
vue3computed计算属性<与vue2比较>
computed计算属性computed() 用来创建计算属性,computed() 函数的返回值是一个 ref 的实例。使用 computed 之前需要按需导入:import { computed } from 'vue'创建只读的计算属性在调用 computed() 函数期间,传入一个 function 函数,可以得到一个只读的计算属性,示例代码如下:// 创建一个 ref 响应式数据const count = ref(1)// 根据 count 的值,创建一个响应式的计算属性 plu原创 2022-05-09 21:29:02 · 901 阅读 · 0 评论