分类 技术文章 下的文章
[JavaScript面试题]两道关于变量提升、函数提升、作用域的JavaScript面试题
1、变量提升和函数提升
function b(){
console.log(a);
var a = 10;
function a(){}
a = 100;
console.log(a);
}
b(); // function(){}, 100
解析:
[CSS]Flex布局 属性速查手册
语法高亮不太好用,忽略高亮不合理的地方
1、设置在容器上的属性
flex-direction
: 主轴的方向
row: (默认)从左到右横向
row-reverse: 从右到左横向
column: 从下到上竖向
column-reverse: 从下到上竖向
[Vue]Vue轮播组件Vue-Awesome-Swiper的使用
一、基本使用
Swiper
是一个非常好用的滑动插件,可以用来实现轮播图、代替浏览器默认的滚动条。中文主页:
在Vue中,Swiper
对应的是Vue-Awesome-Swiper
,NPM的地址:
基本的使用比较简单,首先安装Vue-Awesome-Swiper
:
npm install vue-awesome-swiper --save
[Vue]Vue配置多页应用
大部分时间,Vue
都用来开发单页面应用程序(single page web application,SPA),但有时也需要开发多页面应用,这就要配置Vue CLI
。有两种方式来配置Vue CLI
,一是在项目的package.json
中添加一个vue
字段,在这个字段中配置相关的功能,二是在项目根目录新建一个vue.config.js
,这个文件会被Vue CLI
合并到webpack
的配置中。这里以vue.config.js
为例,来配置一个多页面的应用。
[Vue]router-view的class是怎么来的?
接触Vue以来,觉得Vue的文档不太友好,知识点太碎片化,可能一个重要的知识点仅仅在文中提一下,但不会出现在索引中。文档读起来也比较晦涩。
有一个router-view
:
<router-view class="content"></router-view>
假设下面的组件会渲染到上面的router-view
中:
<template>
<div class="box">
...
</div>
</template>
[Vue]Vue的混入(mixin)
Vue中的混入
(mixin
)是一个比较简单的知识点。熟悉CSS预处理语言比如less、sass的开发者对mixin
肯定很熟悉。Vue中的mixin
几乎跟less等里面的mixin一样,都是将定义好的一些功能原样注入Vue组件当中,也有些类似面向对象编程中的继承(我只是说类似:) )。
mixin
是一个对象,这个对象的属性可以是Vue实例或者组件实例的生命周期钩子、属性等,当全局混入或者混入到组件后,Vue实例或者组件实例就拥有了mixin
中定义的生命周期钩子、属性等等。如果两者中有重复的,会按照一定的规则合并。
[Vue]Vue切换组件时使用内置的transition添加过渡效果
这里以通过Vue Router切换不同组件来说明transition
的用法。
在app.vue
中有一个配置了切换效果的<router-view>
:
...
<transition :name="transitionStyle">
<router-view class="content" />
</transition>
...
由于要实现组件切换的前进后退效果,所以
transition
的name
是动态绑定的,这里不讨论如何实现前进后退,只讨论其中的前进。
想要当前组件向左滑出去的同时,即将显示的组件从右滑动进来,就像iOS版本的微信的左滑切换效果。
很多初学者发现,按照文档设置了相应的class
之后,组件之间的切换会出现空白,实际上这就是Vue的文档没有描述清楚的地方。
[Vue]Vue的自定义指令
什么是Vue自定义指令?
Vue自定义指令用起来就像Vue内置的v-model
、v-on
...之类,只不过实现了一些自己想要的功能。因为Vue自定义指令的钩子函数会传入一个el
,它是自定义指令绑定到的那个DOM元素,所以Vue自定义指令可以用来直接和DOM打交道。
如何注册一个指令?
自定义指令分为全局和组件内的局部指令。全局自定义指令注册方法:
Vue.directive('myDirective', {
// inserted是内置的钩子函数
inserted: function (el) {
// 一些操作...
},
// 指令的其他内容和钩子函数,如果需要的话...
})
[JavaScript]使用apply和类数组对象初始化数组
MDN上的apply介绍: apply- MDN
apply()
方法的第二个参数除了可以是数组外,从 ECMAScript 第5版开始,还可以是一个类数组对象:
从 ECMAScript 第5版开始,可以使用任何种类的类数组对象,就是说只要有一个
length
属性和(0..length-1)
范围的整数属性。例如现在可以使用 NodeList 或一个自己定义的类似{'length': 2, '0': 'eat', '1': 'bananas'}
形式的对象。