Vue 2
文章平均质量分 87
兰亭古墨
这个作者很懒,什么都没留下…
展开
-
Vue Computed 依赖收集与更新原理
调用 watcher.depend() , this 指的是 computed watcher,会将 computed watcher 里面的 deps 保存在所有依赖调用 deps[i].depend(),进而调用 Dep 类中的 Dep.target.addDep(this),使得 render watcher 中保存了当前的 dep,假设改变了 a,请问底层是如何收集依赖,如何触发更新的?所以,修改 a 属性的值,最后 notify 会清空这个 保存 watcher 的队列,进行页面更新!原创 2022-08-19 17:03:48 · 1966 阅读 · 0 评论 -
手写Vue表单组件
test-form.vue<template> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" > <el-form-item label="用户名" prop="username"> <el-input type="username" v-model="ruleForm.username" autocomplete="off"><原创 2020-05-31 18:11:17 · 660 阅读 · 0 评论 -
Vue源码学习之computed
首先,了解下Vue中,computed的作用,主要用于对一个变量的惰性更新,当这个属性所依赖的变量发生改变时,它将会更新。用官网的话讲 “计算属性是基于它们的响应式依赖进行缓存的”1、创建Vue实例时会initState和$mount,前者用于初始化 data,computed,watch初始化函数。后者用于做页面渲染Vue.prototype._init = funct...原创 2020-05-01 21:45:17 · 359 阅读 · 0 评论 -
Vuex文档通读感悟
Vuex文档通读感悟1、为什么要用 Vuex 进行状态管理?定义一个全局对象,再去上层封装了一些数据存取的接口不也可以么?Vuex 的状态存储是响应式的,当 Store 中状态发生改变时,对应的组件的视图能够得到高效的更新。你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。可以方便地使用工具(v...原创 2020-04-10 22:29:22 · 355 阅读 · 0 评论 -
vue高级技巧
1、索引数组的修改,vue无法劫持该数据进行响应式变化,代码如下:当btnClick触发时,视图并不会相应更新<template> <div> <span v-for="(item, index) in testData" :key="index"></span> </div></template>export...原创 2019-11-05 20:34:24 · 1121 阅读 · 0 评论 -
Vue自定义时间日期格式将毫秒数转化为‘yyyy-MM-dd hh:mm:ss’
新建 filter 文件夹,在filter新建index.js,创建全局过滤器//filter/index.js内容import Vue from 'vue'Vue.filter('date', function (dateTime, fmt) { var dateTime = new Date(dateTime); var o = { "M+": ...原创 2018-09-10 23:08:53 · 5717 阅读 · 0 评论 -
剖析Vue原理&实现双向绑定MVVM
本文能帮你做什么?1、了解vue的双向数据绑定原理以及核心代码模块2、缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理、数据的循环依赖等,也难免存在一些问题,欢迎大家指正。不过这些并不会影响大家的阅读和理解,相信看完本文后对大家在阅读vue源码的时候会更有帮助<本文所有相关代码均在git...转载 2018-09-13 21:38:59 · 302 阅读 · 0 评论 -
elementUI表格合并单元格
相信你肯定看了 ElementUI 官方文档了,没看的话先去看下表格各个属性的意义,方便下文阅读:传送门但你会发现此例过于简单,死数据,但我们开发的时候往往都是后台传递过来的数据,导致我们 rowspan 的参数需要自己做判断,根据数据的相同行(或列)进行合并;我们先看下结果: 代码附上:<template> <div class=""> ...原创 2018-09-19 22:36:51 · 30568 阅读 · 37 评论 -
Vue组件使用v-model
先看下简单的,在一个页面中使用 v-model 进行 双向数据绑定:<input type="text" v-model="textValue"><h1>{{ textValue }}</h1>相信这行代码,大家肯定都非常熟悉!官方文档说明了 v-model 其实如如下原理:<input type="text" v-bind原创 2018-09-20 11:19:30 · 314 阅读 · 0 评论 -
vue + axios 通过Blob 转换excel文件流 下载乱码问题
首先看下我们接收到的请求: 特别注意:responseType: 'blob' axios({ method: 'GET', url: '/api', params: params, responseType: 'blob' }).then(res=>{ let blob = ne...原创 2018-10-09 20:53:38 · 21148 阅读 · 16 评论 -
[nodemon] watching: e:\workplace\Nuxt\mt-app\server/**/* [nodemon] starting `babel-node server/index
前端工程师晋升课程 Vue全家桶+SSR+Koa2全栈开发美团网npm run dev 启动项目报错 如下:Administrator@DESKTOP-RGFI67S MINGW64 /e/workplace/Nuxt/mt-app (master)$ npm run dev> mt-app@1.0.0 dev e:\workplace\Nuxt\mt-app> c...原创 2018-11-17 18:39:33 · 1846 阅读 · 7 评论 -
网易严选App感受WEEX 开发
自打出生的那一天起,Weex 就免不了被拿来同 React Native「一决高下」的命运。React Native 宣称「Learn Once, Write Anywhere」,而 Weex 宣称「Write Once, Run Everywhere」。在我看来,并没有谁更好,只有谁更合适。下面我将围绕 Weex 入门进行讲解。(如果你尚不了解 React Native,并想简单入门,可以阅读【...转载 2018-06-06 10:53:22 · 1084 阅读 · 0 评论 -
vue-cli脚手架中webpack配置基础文件详解
一、前言vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用,它使得我们的代码模块化,引入一些插件帮我们完善功能可以将文件打包压缩,图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要,接下来我将基于webpack3.6.0版本结合文档将文件各个击破,纯干料。重点章节点...转载 2018-05-21 16:57:54 · 502 阅读 · 0 评论 -
Vue.js---配置开发环境
Vue2.0 新手完全填坑攻略——从环境搭建到发布原创 2017-07-08 20:09:06 · 446 阅读 · 0 评论 -
Vue.js——60分钟快速入门
Vue.js介绍Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM。它通过转载 2017-07-23 12:24:32 · 578 阅读 · 0 评论 -
VueJs2.0建议学习路线
最近VueJs确实火了一把,自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新手来说,如何高效快速的学习Vue2.0呢。既然大家会看这篇文章,那么肯定是vue的学习者了,或是遇到的瓶颈,或者刚刚开始学,不知道如何快速起步,本篇文章将带领大家在最短的时间内构件一个学习Vue的学习路线Vuejs的作者尤雨溪尤大也写过一篇关于新手学习v转载 2017-07-23 13:05:32 · 885 阅读 · 0 评论 -
vue2.0 父子组件之间的通信问题
概要:父组件向子组件通信:props属性子组件向父组件通信:$emit()触发事件,$on()监听事件在 vue 1.0 中可以使用$dispatch 和 $broadcast来实现 向上派发事件 和 向下广播事件;但是在vue 2.0 已将将该方法迁移了,因为基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好,我们也不原创 2017-07-24 16:05:06 · 490 阅读 · 0 评论 -
Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的。放大之,对vue的生命周期不甚了解。只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的。因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚。于是我开始先去搜索,发现vue2.0的生命周期没啥文章。大多是转载 2017-07-24 17:05:11 · 372 阅读 · 0 评论 -
关于慕课网《使用vue2.0实现购物车和地址选配功能》的总结
视频学习网址:http://www.imooc.com/learn/796源码打包:https://codeload.github.com/fachaoshao/Vue-ShoppingCart/zip/master(before为老师未写功能的源码,after为实现功能后的源码);注意:以上源码请在 Apache 打开状态打开浏览;该教程在功能上实现了:1)将 .json文件数原创 2017-07-26 13:19:37 · 4394 阅读 · 0 评论 -
vue-cli脚手架构建了项目,想去除Eslint验证,如何设置?
vue-cli脚手架构建了项目,想去除Eslint验证,如何设置?在webpack.base.conf.js里面删掉下面:preLoaders: [ { test: /\.vue$/, loader: 'eslint', include: projectRoot, exclude: [/node_mod转载 2017-08-15 14:25:15 · 2542 阅读 · 0 评论 -
浅谈Vuex
vuex是什么东西?官网对Vuex的定义,"Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。"恩,从这句话可以看出,它应该是一种编写js的思路,并不是一种新的技术。做什么什么的模式嘛,就是“这个事儿该怎么做”的意思呗。 --> 接下来,"它采用集中式存储,管理vue应用的所有组件的状态,并以相应的规转载 2017-11-08 09:12:49 · 682 阅读 · 0 评论 -
vue2.0组件之间的通信
本文介绍3中类型:1、父子组件之间的通信2、非父子组件的通信3、较为复杂的通信一、父子组件之间的通信:访问: http://www.jianshu.com/p/2670ca096cf8二、非父子组件之间的通信:1、创建bus.js 创建一个新的Vue实例,以后它就承担起了组件之间通信的桥梁了,也就是中央事件总线。2原创 2017-10-17 23:40:15 · 407 阅读 · 0 评论 -
Vue 2.0 跨域解决方案
1、在使用vue开发的时候经常要涉及到跨域的问题,其实在vue cli中是有我们设置跨域请求的文件的。2、当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{}部分。dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: false, assetsSubDi...原创 2018-03-28 14:52:46 · 1372 阅读 · 3 评论 -
vue.js父子组件通信动态绑定
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><div id='app'> <!--这里的作用是将父组件渲染到页面上--> <father></father></div></body><script src="https:原创 2017-07-08 15:12:11 · 1207 阅读 · 0 评论