![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
lianjiuxiao
这个作者很懒,什么都没留下…
展开
-
nuxt core-js报错 怎么处理
原创 2019-03-25 09:39:45 · 780 阅读 · 0 评论 -
vue双向绑定原理
vue双向绑定原理分析当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理。简易vue源码地址:https://github.com/jiangzhenfei/simple-Vue1.vue双向绑定原理vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。我们先来看Object.原创 2020-12-31 14:43:39 · 337 阅读 · 0 评论 -
vue 混入 相同的对象,钩子的合并规则
当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。const myMixin = { data() { return { message: 'hello', foo: 'abc' } }}const app = Vue.createApp({ mixins: [myMixin], data() { return { message:原创 2021-02-24 15:39:04 · 806 阅读 · 0 评论 -
vue面试题整理
1、对MVVM的理解MVVM分为Model、View、ViewModel。Model代表数据模型,数据和业务逻辑都在Model层中定义;泛指后端进行的各种业务逻辑处理和数据操控,对于前端来说就是后端提供的 api 接口。View代表UI视图,负责数据的展示;视图层,也就是用户界面。前端主要由 HTML 和 CSS 来构建 。ViewModel负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作;Model和View并无直接关联,而是通过ViewModel来进行联系的,M...原创 2021-02-24 09:59:49 · 1295 阅读 · 3 评论 -
vue slot使用 具名插槽 作用域插槽
具名插槽父组件<template lang="pug"> .home img(alt="Vue logo" src="../assets/logo.png") HelloWorld(msg="Welcome to Your Vue.js + TypeScript App") h2(slot="header") 标题 p 正文内容1 div(slot="footer") 底部信息 div(slot="footer2...原创 2021-02-22 15:38:24 · 691 阅读 · 0 评论 -
vue 子组件快速更改父组件prop的置 update:modelValue
v-model参数默认情况下,组件上的v-model使用modelValue作为 prop 和update:modelValue作为事件。我们可以通过向v-model传递参数来修改这些名称:<my-component v-model:foo="bar"></my-component>在本例中,子组件将需要一个fooprop 并发出update:foo要同步的事件:const app = Vue.createApp({})app.co...原创 2021-02-22 14:34:41 · 9329 阅读 · 0 评论 -
Vue $emit $event 传值
事件名始终使用 kebab-case 的事件名。通过事件向父组件发送信息子组件中EnFontsize.vue中$emit <button @click="$emit('enlarge-text')">Enlarge text</button>父组件中<template> <div id="app"> <div :style="{ fontSize: postFontSize + 'em' }">原创 2021-02-20 11:00:16 · 3006 阅读 · 0 评论 -
Vue在组件上使用v-model
Vue在组件上使用v-model(2.0+版本)自定义事件也可以用于创建支持v-model的自定义输入组件。记住:<input v-model="searchText">等价于:<input :value="searchText" @input="searchText = $event.target.value">当用在组件上时,v-model则会这样:<custom-input :value="searchText" ...原创 2021-02-20 10:04:22 · 337 阅读 · 1 评论 -
vue 频繁操作使用 防抖和节流
防抖和节流Vue 没有内置支持防抖和节流,但可以使用Lodash等库来实现。如果某个组件仅使用一次,可以在methods中直接应用防抖:<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script><script> Vue.createApp({ methods: { // 用 Lodash 的防抖函数 click: _.debounc...原创 2021-02-19 16:02:54 · 798 阅读 · 0 评论 -
手写vue-router源码 实现属于自己的路由
前置知识前端路由的两种模式Hash模式 URL中#后面的内容作为路径地址 监听HashChange事件 根据当前路由地址找到对应的组件重新渲染 History模式 通过history.pushState()方法改变地址栏 监听popstate 事件 根据当前路由地址找到对应组件重新渲染手写路由的准备工作新建一个没有vue-router的vue项目在项目中新建router相关文件新建一个route文件夹,文件夹下新建一个index.js,用于存放路由规则import V转载 2021-02-19 11:52:46 · 229 阅读 · 0 评论 -
Vue开源库推荐
无论是开发新手还是经验丰富的老手,我们都喜欢开源软件包。对于开发者来说,如果没有这些开源软件包,很难想象我们的生活会变得多么疲惫不堪,而且靠咖啡度日也会成为家常便饭。所幸的是,Vue.js 和 Nuxt.js 拥有不断成长壮大的社区,每天都会出现一些很好的软件包。在下文中,我们将推荐一些非常好用的 Vue 和 Nuxt 软件包。Vue.jsVue.js 是一个非常易用的渐进式 JavaScript 框架,用于构建用户界面。1.Vue Dark ModeVue.js 的一个极简主义的深色.原创 2021-01-29 09:43:16 · 240 阅读 · 0 评论 -
vue 2.0 哪些不为人知的bug
1: this.$router.query 递参数类型number,刷新后自动转成字符串解决办法:类型强转2: Vue不能检测以下变动的数组当使用索引直接改变或者设置一个项时,例如:this.items[index] = newvalue。 当修改数组的长度时,例如:this.items.lenght = newValue解决办法:第一类解决办法:// Vue.setthis.$set(this.items, indexOfItem, newValue)// Ar...原创 2021-01-23 15:06:36 · 540 阅读 · 0 评论 -
vue $nextTick的作用
具体原因在Vue的官方文档中详细解释:Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和MessageChannel,如果执行环境不支持,会采用原创 2021-01-04 15:28:31 · 286 阅读 · 0 评论 -
vue中如何实现鼠标定位 $event 应用
首先了解: 使用不带圆括号的形式,event 对象将被自动当做实参传入; 使用带圆括号的形式,我们需要使用 $event 变量显式传入 event 对象。 <div id="app"> <button v-on:click="click">click me</button></div>...var app = new Vue({ el: '#app', methods: { click(eve原创 2020-12-29 11:47:59 · 1382 阅读 · 0 评论 -
Element ui 表格拖拽排序
首先引入import Sortable from 'sortablejs';mounted () { // this.setSort(); this.rowDrop(); }, methods: { rowDrop () { const tbody = this.$refs.dragRelationTable.$el.querySelectorAll('.el-table__body-wrapper tbody'); // const原创 2020-12-22 17:09:26 · 740 阅读 · 0 评论 -
vue 双向数据绑定原理
vue 2.0时代Vue 实现双向数据绑定主要采用:数据劫持结合“发布-订阅”模式的方式,通过Object.defineProperty()的 set 和 get,在数据变动时发布消息给订阅者触发监听。<script> //封装属性访问器 //Object.defineProperty(obj, prop, descriptor) //obj ,待修改的对象 //prop ,带修改的属性名称 //descriptor ,待修改属性的相关描述 ..原创 2020-07-18 18:31:36 · 100 阅读 · 0 评论 -
一张图让你了解nuxt
原创 2019-03-25 09:36:43 · 280 阅读 · 0 评论 -
vue计算属性无法监听到数组内部变化
vue的计算属性计算属性可以帮助我们简化代码,做到实时更新,不用再自己添加function去修改data。首先看一下计算属性的基本写法(摘自官网)var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: fu...原创 2018-12-21 09:34:34 · 1472 阅读 · 1 评论 -
vue 开发命名规范
views 命名views 文件夹下面是由 以页面为单位的 vue 文件 或者 模块文件夹 组成的,放在 src 目录之下,与 components、assets 同级。views 下的文件夹命名 views 下面的文件夹代表着模块的名字 由名词组成(car、order、cart) 单词只能有一个(good: car order cart)(bad: carInf...转载 2018-11-19 11:17:00 · 167 阅读 · 0 评论