saner·Blog

学如逆水行舟,不进则退。


  • 首页

  • 关于

  • 标签

  • 分类

  • 归档

padding的百分比值

发表于 2018-09-03 | 分类于 玩转CSS
padding的百分比值关于padding的属性值,有两点可以说说。其一,和margin属性不同,padding属性是不支持负值的;其二,padding支持百分比值,但是,和height等属性的百分比设计计算规则有些差异,差异在于:padding百分比值无论是水平方向还是垂直方向均是相对于宽度计算的 ...
阅读全文 »

Element UI中的滚动条

发表于 2018-08-28 | 更新于 2018-08-29 | 分类于 Element UI
Element UI 中滚动条在使用vue + element开发项目时,需要对滚动条进行美化,找了一下element文档没找到相关滚动组件,但是文档中肯定是有用到的,如下图12345 <div style="height:100%;"> <el-scrollbar clas ...
阅读全文 »

Vue基操之$set()方法

发表于 2018-08-21 | 分类于 Vue之基操
Vue中的$set()Vue给data对象新增属性,并触发视图更新。 12345678data () { return { student: { name: '', sex: '' } }} 众所周知,直接给student赋值操 ...
阅读全文 »

nodejs 路径解析顺序

发表于 2018-08-17 | 分类于 NodeJS
nodejs 路径解析顺序前言 在nodejs中引入各个模块包是基于require机制来的,那么nodejs解析这些模块路径顺序是怎样的? 相对路径解析顺序假设有一个文件路径为/root/src/moduleA.js,包含了一个导入var x = require(“./moduleB”);,也就是 ...
阅读全文 »

关于this对象

发表于 2018-08-12 | 分类于 Javascript探索之路

关于this对象

在闭包中中使用this对象也可能会导致一些问题。我们知道,this对象是在运行时基于函数的执行环境绑定:在全局函数中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象。不过,匿名函数的执行环境是具有全局性,因此其this对象通常指向window,但有时候由于编写闭包的方式不同,这一点可能不会那么明显。下面来看一例子。

1
2
3
4
5
6
7
8
9
10
11
12
var name = 'The window';

var object = {
name: 'My Object',
getNameFunc: function () {
return function () {
return this.name;
};
}
};

console.log(object.getNameFunc()()); // The window (在非严格模式下)
阅读全文 »

Vue之update方法

发表于 2018-07-31 | 分类于 深入浅出Vue

Vue之update方法

Vue的_update是实例的一个私有方法,他被调用的时机有2个,一个是首次渲染,一个是数据更新的时候;_update方法的作用是把VNode渲染成真实的DOM,它的定义在src/core/instance/lifecycle.js中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
const vm: Component = this
const prevEl = vm.$el
const preVnode = vm._vnode
const prevActiveInstance = activeInstance
activeInstance = vm
vm._vnode = vnode
// Vue.prototype.__patch__ is injected in entry points
// based on the rendering backend used.
if (!preVnode) {
// initial render
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
} else {
// updates
vm.$el = vm.__patch__(prevVnode, vnode)
}
activeInstance = prevActiveInstance
// update __vue__ reference
if (prevEl) {
prevEl.__vue__ = null
}
if (vm.$el) {
vm.$el.__vue__ = vm
}
// if parent is an HOC, update its $el as well
if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
vm.$parent.$el = vm.$el
}
// updated hook is called by the scheduler to ensure that children are
// updated in a parent's updated hook.
}
阅读全文 »

Vue之createElement

发表于 2018-07-25 | 分类于 深入浅出Vue

createElement

Vue.js利用createElement方法创建VNode,它定义在src/core/vdom/create-element.js中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// wrapper function for providing a more flexible interface
// without getting yelled at by flow
export function createElement (
context: Component,
tag: any,
data: any,
children: any,
alwaysNormalize: boolean
): VNode | Array<VNode> {
if (Array.isArray(data) || isPrimitive(data)) {
normalizationType = children
children = data
data = undefined
}
if (isTure(alwaysNormalize)) {
normalizationType = ALWAYS_NORMALIZE
}
return _createElement(context, tag, data, children, normalizationType)
}

阅读全文 »

Virtual DOM

发表于 2018-07-23 | 分类于 深入浅出Vue

Virtual DOM

真正的 DOM 元素是非常庞大的,因为浏览器的标准就把 DOM 设计的非常复杂。当我们频繁的去做 DOM 更新,会产生一定的性能问题。

而 Virtual DOM 就是用一个原生的 JS 对象去描述一个 DOM 节点,所以它比创建一个 DOM 的代价要小很多。在 Vue.js 中,Virtual DOM 是用 VNode 这么一个 Class 去描述,它是定义在 src/core/vdom/vnode.js 中的。

阅读全文 »

Vue之render方法

发表于 2018-07-22 | 分类于 深入浅出Vue

render

Vue的_render方法是实例的一个私有方法,它用来把实例渲染成一个虚拟Node。它的定义在src/core/instance/render.js文件中:

阅读全文 »

Vue基操之v-model

发表于 2018-07-19 | 分类于 Vue之基操

Vue基操之v-model

v-model用在input元素上时

v-model虽然很像使用了双向绑定的Angular的ng-model,但是Vue是单向数据流,v-model只是语法糖而已。

1
2
<input v-model="sth" />
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />
阅读全文 »
123
saner

saner

相自我改, 命自我造。

28 日志
11 分类
10 标签
GitHub
© 2021 saner
本站访客数:
|
主题 — NexT.Muse v6.3.0
博客全站共33.4k字