wabish / demo Goto Github PK
View Code? Open in Web Editor NEW自己练习的一些小例子
Home Page: https://github.com/cobish/demo/issues
自己练习的一些小例子
Home Page: https://github.com/cobish/demo/issues
mouseover
和 mouseout
;mouseenter
和 mouseleave
代替。昨天一直在 webpack 1.0 配置 postcss-loader,但是 autoprefixer 死活没有生效,错误的配置代码如下:
module.exports = {
vue: {
loaders: {
css: ExtractTextPlugin.extract('css-loader'),
scss: ExtractTextPlugin.extract('vue-style-loader', 'css-loader', 'sass-loader'),
postcss: [
require('autoprefixer')()
]
}
}
};
谷歌了很久,尝试了很多修改,未果。后来发现要安装 autoprefixer
,于是:
$ npm install autoprefixer --save-dev
以为可以了,结果还是没效果,郁闷。
今早再次谷歌,突然发现我的 postcss 的位置写!错!了!
module.exports = {
vue: {
loaders: {
css: ExtractTextPlugin.extract('css-loader'),
scss: ExtractTextPlugin.extract('vue-style-loader', 'css-loader', 'sass-loader')
},
postcss: [
require('autoprefixer')()
]
}
};
终于成功了!参考链接请戳这里。
最近写 Select 组件时候将 Option 插入到了 body 下,用到了 transition 的钩子 @before-enter
和 @before-leave
,但是发现在 IE9 上这些钩子是不触发的,所以暂时只能 watch visible 来触发事件。
参考链接 。
withRouter
import React from 'react'
import { withRouter } from 'react-router'
const Page = React.createClass({
componentDidMount() {
this.props.router.setRouteLeaveHook(this.props.route, () => {
if (this.state.unsaved)
return 'You have unsaved information, are you sure you want to leave this page?'
})
}
render() {
return <div>Stuff</div>
}
})
export default withRouter(Page)
Promise 找不到
的问题,解决办法:$ npm install promise-polyfill --save
import Promise from 'promise-polyfill';
if (!window.Promise) {
window.Promise = Promise;
}
mode: 'history'
后在 chrome 下没问题,但是在 firefox 和 360 下 url 依然会有 #
号的出现,弄了好久发现是代码里面的注释问题:有问题的代码:
const router = new VueRouter({
// 这是注释
mode: 'history',
routes
});
没问题的代码:
const router = new VueRouter({
mode: 'history',
routes
});
设置了 devtool:
module.exports = {
devtool: '#eval-source-map'
};
vue-loader
之后单文件组件里的 css source map 定位不到,后来将代码修改一下即可:定位不到的代码:
vue: {
loaders: {
sass: 'vue-style-loader!css-loader!sass-loader'
}
},
修改成以下即成功:
vue: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader'
}
},
sass-loader
后 souce map 也没有定位成功,于是修改成以下即可:module: {
loaders: [{
test: /\.scss$/,
loader: 'style!css?sourceMap!sass?sourceMap'
}]
}
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.strokeStyle = '#ff0000';
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.stroke();
arc()
方法参数;context.arc(x, y, r, startAngle, endAngle, counterClockWise);
参数 | 描述 |
---|---|
x | 圆心的 x 坐标 |
y | 圆心的 y 坐标 |
r | 圆的半径 |
startAngle | 起始角,以弧度计 |
endAngle | 结束角,以弧度计 |
counterClockWise | 可选。规定逆时针还是顺时针绘图。 false = 顺时针, true = 逆时针。默认 false。 |
beginPath()
方法的使用;如果 beginPath()
和 closePath()
方法一同使用,会使得两个圆直接有连接线,所以不需要 closePath()
方法;
context.beginPath();
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.stroke();
context.beginPath();
context.arc(200, 200, 50, 0, 2 * Math.PI);
context.stroke();
阅读:《JavaScript权威指南》。
rm
命令;cp
命令;vi
命令;ssh
和 scp
命令;tag
;let
和 const
命令;status
;props
;bind()
和 join()
方法的使用;src
后如何获取图片宽高。webpack-dev-server
命令;rm
删除命令,删除目录需添加 -r
参数,无需确认添加 -f
参数。NPM
& Bower
发布 project。绑定自身点击事件,子元素点击不触发,参考链接
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
垂直居中
.box {
text-align :center;
font-size: 0;
}
.box span {
vertical-align: middle;
display: inline-block;
font-size: 16px;
}
.box:after {
content: '';
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
}
window.close();
window.opener.location.href = window.opener.location.href;
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.