发表于 | 分类于 ，

用curl获取HTTP Header

1
curl -I url

测试耗时

方案一

1
curl -o /dev/null -s -w time_connect:%{time_connect}==time_total:%{time_total}==speed_download:%{speed_download} http://url.com/api

time_connect:建立到服务器的TCP连接所用的时间
time_starttransfer:在发出请求后，web服务器返回数据的第一个字节所用的时间
time_total:完成请求所用的时间
time_namelookup:DNS解析时间，从请求开始到DNS解析完毕所用时间（记得关掉Linux的nscd的服务测试）
speed_download:下载速度，单位字节每秒

方案二

1
time wget http://url.com/api

发表于 | 分类于 ，

Viewport单位

viewport = 浏览器实际显示内容的区域（不包括工具栏和按钮的网页浏览器）

以 宽1000px 和 高800px 的viewport为例。

  • vw——代表视窗(Viewport)的宽度为1%，在我们的例子里50vw = 500px。
  • vh——窗口高度的百分比 50vh = 400px。
  • vmin——vmin的值是当前vw和vh中较小的值。在我们的例子里因为是横向模式，所以50vim = 400px。
  • vmax——大尺寸的百分比。50vmax = 500px。

发表于 | 分类于 ，

引入第三方组件

Element-ui

/plugins/element-ui.js

1
2
3
4
5
6
7
import Vue from 'vue'
import Element from 'element-ui/lib/element-ui.common'
import locale from 'element-ui/lib/locale/lang/en'

export default () => {
  Vue.use(Element, {locale})
}

nuxt.config.js

1
2
3
4
5
6
7
8
module.exports = {
    plugins: [
        '@/plugins/element-ui'
    ],
    css: [
        'element-ui/lib/theme-default/index.css'
    ]
}

VueAwesomeSwiper

/plugins/swiper.js

1
2
3
4
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/ssr'

Vue.use(VueAwesomeSwiper)

nuxt.config.js

1
2
3
4
5
6
7
8
module.exports = {
    plugins: [
        {src: '~/plugins/swiper.js', ssr: false},
    ],
    css: [
        'swiper/dist/css/swiper.css'
    ]
}

发表于 | 分类于 ，

获取Div的 Width 和 Height

1
2
3
4
<div>
    <div id="bg-prev" ref="el_div">
    </div>
<div>
1
2
3
4
5
6
7
8
mounted() {
  	this.getWindowWidth()
},
methods: {
    getWindowWidth() {
        this.x = this.$refs.el_div.clientWidth;
    }
}

发表于 | 分类于 ，

v-model

v-model 其实是一个语法糖，这背后其实做了两个操作：

  • v-bind 绑定一个 value 属性
  • v-on 指令给当前元素绑定 input 事件

举例说明

例如

1
<input v-model='something'>

等价

1
<input v-bind:value="something" v-on:input="something = $event.target.value">

当input接收到新的输入，就会触发input事件，将事件目标的value值赋给绑定的元素

自定义组件

1
<my-component v-model='something'></my-componment>

等价

1
<my-component v-bind:value='something' v-on:input='something = arguments[0]'></my-component>

something接受的值就是input是事件的回掉函数的第一个参数。所以在自定义的组件当中，要实现数据绑定，还需要使用[$emit]去触发input的事件。

1
this.$emit('input', value)