Monkey-yu Blog

生是见识,不是活着。

vue中虚拟DOM介绍及实例

一、模板转换成视图的过程 vue.js通过编译将template模板转换成渲染函数(render),执行渲染函数就可以得到一个虚拟节点树; 在对Model进行操作的时候,会触发对应Dep中的watcher对象。watcher对象会调用对应的update来修改视图。这个过程主要是将新旧虚拟节点进行差异对比,然后根据对比结果进行DOM操作来更新视图。 二、Vitrual DO...

一些trick的javascript题目

一些有心机的JavaScript面试题。 1.意外的全局变量 问题: 1 2 3 4 5 6 7 8 function foo(){ let a=b=0; a++; return a; } foo(); typeOf a; => ??? typeOf b; => ??? 答案: 1 2 typeOf a; => undefined type...

介绍v-echarts

最近做的项目多数是基于Vue的,当遇到绘制图表时候,优先会想到免费开源功能齐全的百度echarts。然而,在vue项目中,引入echarts会有很多繁琐的配置项,数据格式转化等。 无意间发现某大神封装了v-echarts,简单好用,简直是救星!下面具体介绍。 一、介绍 v-echarts是基于Vue2.0和echarts 封装的图表组件。他只需要统一提供一种对前后端都友好的数据格...

Vue组件间通信方式

Vue组件间通信,是开发过程中经常需要使用的。 组件是Vue.js最强大的功能之一,而组件实例的作用域是相互独立的。意味着不同组件之间的数据无法互相引用。因此,本文就是介绍组件之间通信的方式。 一般来说,组件有以下几种关系: 父子关系、兄弟关系、隔代关系。 方法一: props / $emit 父向子传递通过props的方式: 1 2 3 4 5 6 7 8 9 10...

数组的几种遍历方法

开发过程中,最常遇到数据处理的问题了,尤其是数组的数据转换。今天总结下几种常见的数组遍历方法。 一、forEach方法 forEach是最常用的遍历方法,它提供一个回调函数,可用于处理数组中每个元素,默认没有返回值。 回调函数的参数:1. 处于当前循环的元素 2. 该元素下标 3. 数组本身。 三个参数均可选。 1 2 3 4 5 6 7 // 计算数组中>=3的元素的...

Vue中v-for生成的input框

每次你以为你已经把vue用的很熟练的时候,它总会给你惊喜 最近做的一个功能是显示许许多多的input框,填入数据后可筛选获得菜单。如图: 其中食物种数后端接口返回,如: 1 category = [{id: 1, name: "谷薯芋、杂豆、主食"},{id: 2, name: "蛋类、肉类及制品"}...] input框的最小值-最大值默认为 0-0。要求至少填写一项...

Vue中Select Option Value不能是对象

Vue中Select Option Value不能是对象,下面是具体介绍及解决方式。 Vue中的select选择器,使用elm框架实现的代码是: 1 2 3 4 5 6 7 8 9 // html <el-select v-model="value" placeholder="请选择" @change="toAdd"> <el-option v-f...

git命令大全

此文是看完《廖雪峰的官方网站》git篇后收集总结的命令。 版本库,又名仓库,英文名repository。该目录下所有的文件被git管理。 使用pwd命令来显示当前目录。使用git init把这个目录变成git可以管理的仓库。 新建好的空仓库下,有一个.git目录,该目录是用来跟踪版本库的,千万不要手动修改里面的文件。该目录默认是隐藏的,用ls-ah可以看见。 时光机穿梭 下面...

CSS 规范

一、命名: 可以用连字符或者下滑线,也可以用驼峰命名形式。.title-my或者.title_my或者.titleMy。 使用BEM命名方式: block-name__element-name–modifier-name,也就是模块名 + 元素名 + 修饰器名。 二、属性书写顺序: 1.位置属性(position,top,right,z-index.display,float等) ...

Vue Router

看了遍Vue Router文档,总结出重点内容。 this.$router 访问路由器, this.$route访问当前路由。 当 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active。 动态路由匹配: 模式 匹配路径 ...