a description for this result is not available due to his vacuum heart.

What I Learned Today

    前端

怎样正确使用 vue-resource + vuex

vue-resource 是一个用于XMLHttpRequest以及JSON操作的插件,其实如果不是对inteceptor有需求,有jQuery就够了。

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
32
33
34
35
// actions.js
// 父组件调用这个action
export const getData = ({ dispatch }) => {
Vue.http.get(url, { req: 'req body' }).then((res) => {
// 正常返回, 别忘了处理错误
dispatch(REFRESH_DATA, res.data)
}, (err) => {
alert(err.message)
})
}
// ........
// store.js
const state = {
data: null
}

const mutations = {
[REFRESH_DATA] (state, data) {
state.data = data
}
}
// ......

// 各个需要更新数据的子控件.vue
// ....
export default {
// ....
vuex: {
getters: {
data: ({ data }) => data
}
},
// .....
}
// ....

详情看这里

记得把 externals 写在 webpack.config.js 里面啊

傻乎乎的在index.html中单独引入了cdn的jquery,忘了往webpack里面配置。结果打包出来一百多kb,是说那么慢。

1
2
3
externals: {
'jquery': 'jQuery'
}

再打包就只有三十多kb了,而且这里面还包括vue-touchhammer.js,这个不知道怎么单独写出来了,等下去问问。

在android/ios中使用vue

aka 暴露全局变量给webview回调
改了几个版本,还有个shim挂载至全局的办法,我还没有看。

下面是直接暴露的方法
在exposed.vue中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
var ex
...
export default
{
methods: {
setSth(tag, score) {
this.list[tag] = score
}
},
ready()
{
ex = this
}
...
}
exoport
{ ex }
</script>

然后在顶层 main.js 中:// 注意这里并不是window,我在这里卡了一会儿还。

1
2
3
4
import exposed from 'path_to/exposed.vue' // 暴露ex
import default from 'path_to/exposed.vue' // 暴露setSth()
...
exposed = ex // 绑定至事先定义好的全局变量

全局下面,index.html:

1
2
3
4
5
6
7
8
<script>
var exposed =
{} // 在build.js之前定义一个全局变量
</script>

<script src="build.js"></script>
// 使用
<script>
exposed.methods.setSth(0, 1)
</script>

使用vuex

没有vuex的时候使用$dispatch()$broadcast()
有vuex的时候dispatch:
action.vue

1
2
3
4
5
6
7
8
import store from 'store.js'
exports default {
methods: {
act(info) {
store.dispatch('action', info)
}
}
}

store.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Vuex from 'vuex'
const state = {
a: 1
}
const mutations = {
action(state, info) {
state.a = 0
console.log(info)
}
}
export default new Vuex.Store({
state,
mutations
})

有vuex的时候broadcast:
action.vue

1
2
3
4
5
6
7
8
9
import store from 'store.js'
exports default {
methods: {
do() {console.log('done')}
},
watch: {
'store.state.a': 'do'
}
}

store.js:

1
2
3
4
5
6
7
8
9
import Vuex from 'vuex'
const state = {
a: 1
}
const mutations = {}
export default new Vuex.Store({
state,
mutations
})

箭头函数

1
2
3
4
5
6
setTimeout(function() {
animation.translate(30).step()
this.setData({
animationData:animation.export()
})
}.bind(this), 1000)

在es5中就可以使用.bind(this)

再也不用css:filter了

在安卓上就跟屎一样

proxychains-ng

proxychains 是给命令行使用代理的工具,支持 socks5.

$ brew install proxychains-ng

微信小程序

打开的时候不要开代理,不然有net::ERR_NAME_NOT_RESOLVED问题
wxml 要用 <image></image>标签而不是<img></img>
wxss 不支持transform,不支持animation@keyframes,反而使用wx.createAnimation(OBJECT),自己的api,这个好处在哪里?
(待确定)wxss background-size 的渲染有问题?

git push 每次都要输入密码?

git remote -v
看到fetchpush的开头都是https
没有走ssh,要先加上ssh-key,再换成ssh的方式
记得先在github的sshkey设置里面加上本机的sshkey

1
2
3
git remote rm origin
git remote add origin git@github.com:mugbya/arch_config.git
git push origin

伪元素和伪类

1
2
3
4
5
6
p:first-letter {
color: red;
}
p > span {
color: blue!important;
}
1
<p><span>第一个</span>字符看看会不会变红?</p>

第一个字符是红色,因为::first-letter伪元素是作为子元素存在的。

放假是用新东西的时候

新鞋子,新衣服

mac

command + option + esc

js小数点保留2位

num.toFixed(2)

数据异步更新的问题

1
2
3
4
$('html').css('font-size', '1.29em')
setTimeout(() => {
$('html').css('font-size', '1.3em')
}, 0)

css性能

will-change: transform;
使用3d变换

页阅读量:  ・  站访问量:  ・  站访客数: