vue.js
阳光下的冷静
本人很菜,分享自己平时学习前端的小知识点,希望对大家有用。
展开
-
Echarts--柱状图封装使用
Echarts介绍Echarts是一个使用 JavaScript 实现的开源可视化库,可以很方便的以多彩的形式展示数据,使人一目了然。关于具体的使用,如有兴趣的可以参见官网说明 Echarts详细说明文档Echarts–柱状图封装使用这里我仅介绍Echarts中的柱状图的使用,包括渐变柱状图,堆叠柱状图的使用。其实不管是渐变柱状图还是堆叠柱状图都是柱状图,只是在图的数据optio...原创 2019-08-17 15:14:21 · 1534 阅读 · 1 评论 -
Vue Router基础使用(命名路由,命名视图,路由传参)
命名路由命名路由,顾名思义,就是给生成的路由URL通过一个名称来标识。因此在 Vue Router 中,我们可以在创建Router 实例的时候,通过在routes配置中给某个路由设置名称,从而方便的调用路由。const router = new VueRouter({ routes: [ { path: '/form', name: 'form', ...原创 2019-06-19 20:30:43 · 5423 阅读 · 0 评论 -
Vue对比jQuery的优势
jQuery到Vue的转变jQuery到Vue的转变是一个思想的转变,将原有的直接操作dom的思想转变到操作数据上jQuery是使用选择器$选取DOM对象,对其进行赋值,取值,事件绑定等,而Vue则是通过Vue对象ViewModel将数据和View完全分离开了。对数据操作不再需要引用相应的DOM对象,即数据和View是分离的,通过Vue对象vm实现相应的绑Vue支持双向数据绑定:在MV...原创 2019-06-03 20:54:55 · 5481 阅读 · 0 评论 -
前端路由
前端路由的实现方式目前前端的路由实现主要是两种方式,这两种方式都是基于浏览器自身的特性,两种方式分别是hash路由history路由hash路由hash 这个概念,可能听起来有些陌生,不过,其实我们在之前的前端开发中,其实是有所接触的。hash路由一个明显的标志#,通过这个监听URL中的hash变化来进行路由的跳转例如,在某些情况下,我们需要定位页面上的某些位置,就像下面的例子中展...原创 2019-06-19 14:02:22 · 1067 阅读 · 0 评论 -
虚拟DOM
为什么出现虚拟DOM在我们使用 JS/Jquery直接对 DOM 元素进行操作时,不管是对元素样式的修改(背景颜色从红色变成蓝色)还是对页面中的某些布局进行动态调整(通过点击按钮在列表中添加一行新的数据),这都会造成页面的重新渲染,从而影响我们网站的性能。而在 Vue中,通过在内存中生成与真实DOM 与之对应的数据结构(虚拟DOM),当页面发生变化时,通过新的虚拟DOM树与旧的虚拟DOM树进行比...原创 2019-06-19 13:03:21 · 234 阅读 · 0 评论 -
Vue中ref的使用
为什么出现ref在没有学习Vue之前,我们实现直接操作页面上的DOM元素都是通过JS/jQuery,因为jQuery对DOM元素的操作非常的方便。但是学习了Vue之后,对DOM的操作完全交给VM了,这个时候手动的获取DOM元素再使用JS/jQuery就没有那么方便。于是出现了ref,即ref的功能之一就是获取DOM元素的,当然还有其他的功能。所以ref主要的两个作用如下:使用ref获取页面...原创 2019-06-19 12:52:57 · 2689 阅读 · 0 评论 -
Vue生命周期
什么是 Vue 生命周期?Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载 DOM -> 渲染、更新 -> 渲染、销毁等一系列过程,称之为 Vue 的生命周期。Vue 有几个生命周期,它们的作用主要是什么?8 个,创建前/创建后、挂载前/挂载后、更新前/更新后、销毁前/销毁后。Vue生命周期的作用是方便我们通过它的生命周期,在业务代码中更好地操...原创 2019-06-06 15:36:07 · 5201 阅读 · 1 评论 -
对Vue插槽slot的理解
插槽的分类vue的插槽有三种不同的类型:分别是匿名插槽,具名插槽和作用域插槽具体的每一种的介绍见:Vue 匿名、具名和作用域插槽的使用特别是作用域插槽是比较重要也是比较难理解的,详见vue作用域插槽...原创 2019-05-31 21:26:15 · 470 阅读 · 0 评论 -
最新经典的前端面经
前端最全面经转载 2019-05-17 10:19:25 · 281 阅读 · 0 评论 -
学习 Vue 源码的必要知识储备
学习 Vue 源码的必要知识储备转载 2019-06-20 09:40:12 · 670 阅读 · 0 评论 -
Vue的拦截和响应拦截
Vue的拦截和响应拦截转载 2019-06-11 20:36:05 · 868 阅读 · 0 评论 -
Vue获取DOM元素并修改属性
Vue获取DOM元素Vue获取DOM元素有两种方法直接给相应的元素加id,然后再使用document.getElementById("id");获取使用ref,给相应的元素加ref=“name”然后再使用this.$refs.name获取到该元素Vue获取到元素并修改属性或者样式使用上述的第二种方法,获取到元素,然后使用this.$refs.元素元素的ref对应的name.style...原创 2019-07-16 13:48:23 · 20952 阅读 · 2 评论 -
重点复习
复习缺口原创 2019-08-21 11:07:57 · 135 阅读 · 0 评论 -
时间选择器使用
时间选择器这里的时间选择器是较复杂的时间选择器,融合了日,周,月,季度,年以及自定义的,具体的展示如下图时间选择器处理由于我们需要选择自己想要选择的时间,并将其获取到,然后做一些处理,所以我们需要监听时间的改变,这时需要在watch中对时间的监听。时间选择器组价的使用<h-time-selector v-model="time" ...原创 2019-08-24 10:24:45 · 423 阅读 · 0 评论 -
vue拦截器
拦截器的目的当我们需要统一处理http请求和响应(Vue项目中,通常是axios请求),这时设置拦截器,对请求和响应做封装处理拦截器设置如下代码:import axios from 'axios'import { Message } from 'hui'import { trimOnlySpace } from '@hui-pro/utils'import { REQUEST_SUC...原创 2019-08-15 09:28:44 · 797 阅读 · 0 评论 -
前端运行项目清缓存等小技巧
命令行清除缓存:当在命令行输入几个不同的命令时,控制台或者命令行出现同一个问题的时候,需要清除缓存,使用以下的命令npm cache clean force npm cache verify查看源:npm config get registry设置源:npm config set registry 源的地址,如 设置成淘宝源 npm config set registry https://r...原创 2019-08-14 19:05:35 · 1822 阅读 · 0 评论 -
引入不同模块化规范的外部组件包时报错
现象说明在日常开发中,我们会经常遇到引用其他现有的组件库的情况,以现有项目为例,我们会常常引入hui-pro,hui-pro组件库是不同的人编写,会有不同打包输出方式,有些包是遵循commonjs规范,有些包是遵循es6规范,在海豚脚手架升级之前,引入不同规范的组件包,项目就会出现报错。本文将提供解决方式,并重点解析其原因例:老的海豚脚手架在引入hui-pro empty组件时,报错如下:...原创 2019-08-14 17:15:14 · 2692 阅读 · 0 评论 -
Vue核心之虚拟DOM
虚拟DOM源码分析转载 2019-07-24 17:02:55 · 144 阅读 · 0 评论 -
Vuex使用详解
Vuex概念Vuex 是一个专为 Vue.js 应用程序开发的** 状态管理模式** 。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化状态管理模式首先,我们先看一下下面这个例子new Vue({ // state data () { return { count: 0 } }, // view te...转载 2019-07-24 16:25:16 · 236 阅读 · 0 评论 -
Vue渲染DOM节点
Virtual DOMVue实例挂载的最后一个环节:渲染DOM节点。在渲染真实DOM的过程中,Vue引进了虚拟DOM的概念,虚拟DOM作为JS对象和真实DOM中间的一个缓冲存,极大的优化了JS频繁操作DOM的性能问题浏览器的渲染流程当浏览器接收到一个Html文件时,JS引擎和浏览器的渲染引擎便开始工作了。从渲染引擎的角度,它首先会将html文件解析成一个DOM树,与此同时,浏览器将识别并加...原创 2019-05-17 09:07:33 · 5237 阅读 · 0 评论 -
Vue插槽
Vue插槽详解转载 2019-05-09 11:14:12 · 561 阅读 · 0 评论 -
Vue与React和Angular比较
Vue与React和Angular区别vue.js更轻量,压缩后大小只有20K+, 但React压缩后大小为44k,Angular压缩后大小有56k,所以对于移动端来说,vue.js更适合;vue.js更易上手,学习曲线平稳,而Angular入门较难,概念较多(比如依赖注入),它使用java写的,很多思想沿用了后台的技术;react需学习较多东西,附带react全家桶,vue.js吸收两家...原创 2019-03-25 16:03:23 · 3675 阅读 · 0 评论 -
Vue条件渲染与列表渲染
Vue的条件渲染Vue的条件渲染是使用v-if , v-else,v-show等指令实现元素的移除,样式隐藏,显示等案例如下代码:<div id="demo"> <p v-if="ok">成功了</p> <p v-else>失败了</p> <p v-show="ok"原创 2019-03-17 20:51:20 · 465 阅读 · 1 评论 -
Vue的class和style绑定
在应用界面中个,某个(些)元素的样式是变化的,使用vue的class/style绑定就是专门用来实现动态样式效果的绑定class绑定1 :class=‘xxx’2 表达式是字符串: ‘classA’3 表达式是对象: {classA:isA, classB: isB}4 表达式是数组: [‘classA’, ‘classB’]style绑定:style="{ color: a...原创 2019-03-17 20:35:53 · 310 阅读 · 0 评论 -
Vue的事件处理
Vue的事件处理vue的事件处理主要分为三类:事件的绑定监听v-on:xxx=“fun”@xxx=“fun”@xxx=“fun(参数)”默认事件形参: event隐含属性对象: $event事件修饰符prevent : 阻止事件的默认行为 event.preventDefault()stop : 停止事件冒泡 event.stopPropagation()按键修...原创 2019-03-17 20:06:24 · 418 阅读 · 0 评论 -
Vue常见指令
Vue常见的内置指令v:text : 更新元素的 textContentv-html : 更新元素的 innerHTMLv-if : 如果为 true, 当前标签才会输出到页面v-else: 如果为 false, 当前标签才会输出到页面v-show : 通过控制 display 样式来控制显示/隐藏v-for : 遍历数组/对象v-on : 绑定事件监听, 一般简写为@v-bin...原创 2019-03-17 19:45:01 · 565 阅读 · 0 评论 -
vue组件之间通信
组件通信转载 2019-03-17 19:07:38 · 132 阅读 · 0 评论 -
使用vue-cli脚手架工具创建vue项目
vue-cli 脚手架安装:1) 确保node环境:安装vue-cli需要在node环境下安装,所以首先确保自己安装了node,检查自己电脑是否安装了node ,可以在命令行工具内执行: node -v,如下图,如果出现相应的版本号信息,说明安装了node 如果出现类似:xxx不是内部命令,说明电脑没有安装node ,需要在官网下载与你电脑对应的版本的node,进行安装。node的下载...原创 2018-11-27 19:54:09 · 1298 阅读 · 0 评论 -
Ajax,Jquery ajax 与axios的区别
ajax与axios的区别Jquery ajax与Axios等区别转载 2019-04-26 14:34:03 · 1036 阅读 · 0 评论 -
MVC与MVVM区别
MVC在MVC里,View是可以直接访问Model的!从而,View里会包含Model信息,不可避免的还要包括一些业务逻辑。 MVC模型关注的是Model的不变,所以,在MVC模型里,Model不依赖于View,但是 View是依赖于Model的。不仅如此,因为有一些业务逻辑在View里实现了,导致要更改View也是比较困难的,至少那些业务逻辑是无法重用的。特点:把业务逻辑、模型数据、用户界...原创 2019-04-22 21:37:13 · 5423 阅读 · 0 评论 -
vuex插件
vuex介绍vuex是vue的一个插件,一个库,简单来说: vuex是对应用中组件的状态进行集中式的管理(读/写)的,即状态自管理应用github站点: github站点在线文档:在线文档:在线文档vuex作用:实现多组件共享状态我们知道在一个大型的项目中,往往多个视图依赖于同一状态(同一个数据对象),或者来自不同视图的行为需要变更同一状态(一个数据发生改变,所有依赖这个数据的页面需...原创 2019-04-25 16:14:46 · 778 阅读 · 0 评论 -
Vue组件封装指南
Vue组件封装指南转载 2019-05-05 20:21:16 · 168 阅读 · 0 评论 -
2019Vue面试汇总
Vue面试汇总转载 2019-05-05 19:55:29 · 6536 阅读 · 0 评论 -
webpack中的vue-cli脚手架功能
Vue-cli项目构建开发vue项目的时候,大部分人都是使用 vue-cli脚手架生成的项目架构,然后 npm install 安装依赖,npm run dev启动项目然后就开始写业务代码了。但是对项目里的 webpack封装和配置了解的不清楚,容易导致出问题不知如何解决,或者不会通过 webpack去扩展新功能。Vue-cli项目配置使用vue-cli生成的项目,是因为vue-cli 配...原创 2019-05-05 19:41:45 · 198 阅读 · 0 评论 -
模板解析
1.模板解析的关键对象: compile对象模板解析的基本流程:将el的所有子节点取出, 添加到一个新建的文档fragment对象中对fragment中的所有层次子节点递归进行编译解析处理(主要对应的init()函数)《1》对大括号表达式文本节点进行解析《2》对元素节点的指令属性进行解析《2.1》 事件指令解析《2.2》 一般指令解析将解析后的fragment添加到el...原创 2019-04-23 16:53:17 · 473 阅读 · 0 评论 -
数据代理(MVVM.js)
数据代理概念通过一个对象代理对另一个对象中属性的操作(读/写),比如a里面包含了b,想要操作b,就通过操作a来达到操作b的效果数据代理目的通过vm对象来代理data对象中所有属性的操作数据代理好处:更方便的操作data中的数据数据代理基本实现流程:通过Object.defineProperty()给vm添加与data对象的属性对应的属性描述符所有添加的属性都包含getter/se...原创 2019-04-23 16:47:49 · 380 阅读 · 0 评论 -
Vue双向数据绑定
几种实现双向绑定的做法目前几种主流的mvc(vm)框架都实现了单向数据绑定,而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素(input、textare等)添加了change(input)事件,来动态修改model和 view,并没有多高深。所以无需太过介怀是实现的单向或双向绑定。实现数据绑定的做法有大致如下几种: 发布者-订阅者模式(backbone.js) 脏值检查...原创 2019-04-23 16:43:50 · 243 阅读 · 0 评论 -
Vue中的computed,methods 和 watcher
Methods:对象属性的函数,使用方法对发生在DOM中的事件做出反应或者从组件中的其他位置调用。方法也可以对公共功能进行分组,如处理表单提交,构建可重用的类似发出Ajax请求等; computed: 计算属性对于从现有源,来组合新的数据费城方便。与Methods相比,突出的优点是缓存了输出,即如果独立于计算属性的某些内容在页面上发生更改,并且重新呈现UI,则会返回缓存的结果,并且不会重新计...原创 2019-04-18 14:15:41 · 387 阅读 · 0 评论 -
Vue基本认识
Vue.js是什么?Vue是一套用于动态构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持库类结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。Vue的特点:遵循 MVVM 模式,见下图1 编码简洁, 体积小, 运行效率高, ...原创 2018-11-27 18:32:55 · 259 阅读 · 0 评论