随笔分类 -  vue

vue
摘要:计算100W条数据的长度造成2s延迟 <template> <div> <h1>数据总长度{{ arrList.length }}</h1> </div> </template> <script> export default { data(){ return { arrList: [] } }, 阅读全文
posted @ 2024-12-31 19:54 南风晚来晚相识 阅读(20) 评论(0) 推荐(0) 编辑
摘要:场景 今天忽然临时接到一个需求: 就是将markdown文件直接在vue项目中进行加载,并正常显示出来。 这......,我知道是可以进行加载markdown文件的。 但是我之前没有做过,答复的是:可以做的,但是这个需要一点时间。 领导:那行,你先调研一下。 简单介绍 vue-markdown-lo 阅读全文
posted @ 2024-11-29 12:37 南风晚来晚相识 阅读(509) 评论(0) 推荐(2) 编辑
摘要:#### 场景描述 ``` 我们在一个系统中,会出现这样的情况, 有一个联系人的下拉框,这个下拉框中的数据是从服务端获取的。 在很多页面都需要使用这个联系人(下拉框)。 我们通常是这样做的: 写一个下拉框组件然后调用接口。 这样不仅会造成代码冗余,而且不利于后期的维护。 比如说:如果有一天这个要发生 阅读全文
posted @ 2023-08-13 10:00 南风晚来晚相识 阅读(264) 评论(0) 推荐(0) 编辑
摘要:绝大多数人清除定时器的方法 <script> export default { data() { return { timer: null } }, mounted() { this.timer = setInterval(() => { console.log('我是定时器') }, 1000) 阅读全文
posted @ 2023-02-26 16:59 南风晚来晚相识 阅读(1032) 评论(0) 推荐(0) 编辑
摘要:案例1:通过下标更改数组失败 <template> <div> <el-button @click="handlerMe2"> 改变 arr </el-button> <div> {{ arr }}--arr </div> </div> </template> <script> export def 阅读全文
posted @ 2023-01-18 13:53 南风晚来晚相识 阅读(560) 评论(0) 推荐(0) 编辑
摘要:官网介绍 $children $children 获取当前实例的直接子组件 。需要注意 $children 并不保证顺序,也不是响应式的。[特别重要] 如果你发现自己正在尝试使用 $children 来进行数据绑定, 考虑使用一个数组配合 v-for 来生成子组件,并且使用 Array 作为真正的来 阅读全文
posted @ 2023-01-06 20:37 南风晚来晚相识 阅读(2017) 评论(0) 推荐(0) 编辑
摘要:computed 传参 <template> <div> <p>computed传参的写法:{{ who1Params('--我是传参的内容') }}</p> </div> </template> <script> export default { name: 'App', data() { ret 阅读全文
posted @ 2022-08-14 14:41 南风晚来晚相识 阅读(693) 评论(0) 推荐(0) 编辑
摘要:起因 今天接触一个项目vue。 在安装好环境之后,启动的时候报错_interopRequireDefault is not a function 解决的办法:我觉得可能是因为node_modules安装过程中出现问题。 将node_modules删除掉,然后再重新安装node_modules。在重新 阅读全文
posted @ 2022-05-11 22:44 南风晚来晚相识 阅读(498) 评论(0) 推荐(0) 编辑
摘要:1.生命周期 生命周期是指:vue实例从创建到销毁这一系列过程。vue官网生命周期如下图所示: vue的生命周期有多少个 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy,destroy 阅读全文
posted @ 2022-03-14 22:06 南风晚来晚相识 阅读(2452) 评论(0) 推荐(0) 编辑
摘要:$once 可以给组件实例绑定一个自定义事件,但该事件只能被触发一次,触发之后随即被移除 $once的简单使用 <template> <div> <button @click="$emit('onceHander')">按钮</button> </div> </template> <script> 阅读全文
posted @ 2021-12-13 12:45 南风晚来晚相识 阅读(4037) 评论(0) 推荐(1) 编辑
摘要:我的需求 有些时候,我们需要获取组件的DOM元素 有些小伙伴会说,这还不简单 直接使用this.$ref.xx不就可以了吗 我们来看一下,是不是我们想的那样简单 组件内容 <template> <div class="demo"> <h2>我是组件</h2> <div>我是组件中的数据</div> 阅读全文
posted @ 2021-11-21 22:38 南风晚来晚相识 阅读(1114) 评论(0) 推荐(0) 编辑
摘要:场景 今天产品跑过来跟我说, 当我在A页面修改数据后,去B页面。 然后返回A页面。希望A页面保留我修改后的数据。 而不是数据又恢复最初的样子了。我心里想,尼玛,又要加班了? 看下面小粒子 数据被被重置的问题 <template> <div> <el-button @click="gotosHande 阅读全文
posted @ 2021-11-14 19:36 南风晚来晚相识 阅读(1021) 评论(0) 推荐(0) 编辑
摘要:创建一个plugins.js文件 跟main.js同级下,创建一个plugins.js文件 export default { // install是vue给我们提供的。它会自动去执行install。 // install 的第一个参数是vue的实例哈 install(vue) { //这一行语句会被 阅读全文
posted @ 2021-10-29 21:05 南风晚来晚相识 阅读(387) 评论(0) 推荐(0) 编辑
摘要:场景描述 有些时候,我们发现有些组件部分功能代码是几乎是一样的。 这个时候,我们就可以将相同的逻辑代码抽离出来 此时我们的主角混入mixin就登场了 下面我们有a-test和b-test两个组件,点击按钮发生的逻辑是一样的。 这个时候我们就可以使用混入mixin a-test代码如下 <templa 阅读全文
posted @ 2021-10-29 19:49 南风晚来晚相识 阅读(627) 评论(0) 推荐(0) 编辑
摘要:查看vue/cli的配置 vue的脚手架隐藏了所有的webpack相关的配置,若是想要查看webpack的配置 你可以去执行 vue inspect > output.js 这样就可以查看它的配置; 执行后,需要等待几秒钟。 会输出一个output.js文件 entry: { app: [ './s 阅读全文
posted @ 2021-10-28 21:35 南风晚来晚相识 阅读(403) 评论(0) 推荐(0) 编辑
摘要:将原生事件绑定在组件上 .native 修饰符: 子组件 <template> <div class="demo"> <h2>我是子组件</h2> <h3>我是子组件中的信息</h3> </div> </template> 在父组件中绑定一个事件 <test-com @click.native="f 阅读全文
posted @ 2021-10-25 22:21 南风晚来晚相识 阅读(174) 评论(0) 推荐(0) 编辑
摘要:props参数的使用 在使用vue的项目开发的过程中 经常会定义大量的组件使用 这个时候组件中的定义的数据类型就非常重要了 此时我们需要定义组件中需要的数据类型 之前我只知道简单的几个 今天忽然发现原来还可以这样使用简直太棒了 特别是自定义验证这一块可能不经常用 但是可以处理很多特殊的场景 prop 阅读全文
posted @ 2021-08-07 21:17 南风晚来晚相识 阅读(2123) 评论(0) 推荐(0) 编辑
摘要:1.lazy 修饰器 lazy修饰器在input框中的表现效果是: 当你失去焦点后值才会跟新。 它的跟新时机是失去焦点后 这个修饰器在项目中运用的场景较少 <template> <div> <input class="input-demo" type="text" v-model.lazy="num 阅读全文
posted @ 2021-07-23 21:06 南风晚来晚相识 阅读(829) 评论(0) 推荐(0) 编辑
摘要:1.功能描述 今天我们要实现这个一个小功能; 页面渲染完成后展示一个div元素; 当点击这个div元素后; div元素消失; 出现一个input元素;并且input元素聚焦 想必大家我觉得简单,我们一起来看看~ 创建一个组件,组件名称NextTick.vue; 在页面中引入注册 2.父组件 <tem 阅读全文
posted @ 2021-07-02 20:10 南风晚来晚相识 阅读(4687) 评论(0) 推荐(2) 编辑
摘要:1.场所描述 如何获取vue-data中的所有值? 如何获取vue-data中的某一个值? 如何获取vue-data中的初始值? 如何设置data中的值位初始值? 2.主角登场 this.$options.data()和this.$data <template> <div> <button @cli 阅读全文
posted @ 2021-04-28 13:39 南风晚来晚相识 阅读(2121) 评论(0) 推荐(1) 编辑

点击右上角即可分享
微信分享提示