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