babel6 简明指南

随着ES6的发展,ES6的编译工具也在不断更新着,babel作为最常用的ES6编译工具,目前也发展到了6.x版本,以下作为简要使用指南

相对于之前的babel5,babel6不再是一个整的大的package,而是拆分了很多个小的packages可供选择安装

基础安装 Installing Babel

如果你想在CLI(command-line interface命令行界面)使用的话,请安装babel-cli

1
$ npm install --global babel-cli

如果你想结合node.js来写的话,需要安装babel-core

1
$ npm install --global babel-core

vue2.0+webpack+elementUI搭建小贴士

elementUI是饿了么团队开发的配合Vue使用的UI
根据之前的webpack+vue生成基本项目目录后,使用

1
npm i element-ui -D

安装到开发环境的项目依赖(devDependencies)里

i 是 install 的简写
-S 是 - -save 的简写
-D 是 - -save-dev 的简写

之后找到入口文件main.js,引入我们所需要的模块

1
2
3
4
import Vue from 'vue'
+ import ElementUI from 'element-ui'
+ import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'

在引入外部模块后,一定要记得使用use来使用这个模块

1
Vue.use(ElementUI)

又引入了elementUI的css文件之后,一定要去看看package.json里有没有相关的loader依赖,这里需要的是css-loaderstyle-loaderfile-loader
然后去webpack.config.js里去配置相关的loader,用于加载CSS文件和字体等文件

1
2
3
4
5
6
7
8
9
module: {
rules: [{
test: /\.css$/,
loader: 'style-loader!css-loader'
}, {
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}]
}

之后把UI组件写在你的vue实例的模板里就可以了

vue2.0笔记(六)--slot

slot作为一个插槽可以暂时为你的组件添加原始占位和默认内容

单个slot

slot里的data和属性应该写在模板里,而在子组件里的data应该写到父级组件里

具名slot

slot可以有一个name属性来配置分发内容,没有name的匿名slot,作为找不到匹配的内容片段的备用插槽

Use JSFiddle & CodePen to Show your Code

时间宝贵的同学分割线以内的电视购物营销时间可以跳过了

———————废话开始分割线———————

标题之所以用英文是因为我想突出下show这个行为,咳咳~
好啦,当大家写完一段代码想要发给某个人展示下效果又觉得发文件压缩包low,又或者在博客里觉得纯贴代码死活也解释的不那么直观的时候,我们就需要一些小公举(划掉/工具)来帮助我们装逼(划掉again/有效地使用技术手段) to show our code better~

那么今天我们介绍的这两款宝贝呢,经过无数人口碑的见证下,在众多公举工具中突破重围,成为了经久不衰的热销款,重要的是,只要0.00元,北上广江浙沪珠三角西藏新疆海南包邮哦~

它们就是————(此处请准备灯光舞台以及定音鼓)

JSFiddle & CodePen

———————-撒花分割线———————-

vue2.0笔记(五)——props

Prop

prop是父组件用来传递数据的一个自定义属性,是property
父组件的数据需要通过props把数据传给子组件,子组件需要显式地用props选项声明prop

1
2
3
<div id="app">
<my-com name="waston" age="18"></my-com>
</div>

1
2
3
4
5
6
7
8
Vue.component('my-com',{
props:['name','age'],
template:'<h1>{{name}}:{{age}}</h1>'
});
new Vue({
el:'#app'
})

简言之,就是父级(组件)自定义一些属性以及属性值,然后可以传到它的直接子级(所使用的模板)里
※注意是直接子级 如果h1外面再嵌套一层p无效

AWS EC2+Shadowsocks

  • AWS:Amazon Web Server

  • EC2:the instance of AWS

  • Shadowsocks:socks5 proxy

  • AWS+EC2+Shadowsocks=searching exactly and scaning everything you really need

steps:

  1. An credit card
  2. An AWS account
  3. Create an EC2 instance in AWS
  4. Choose AMI of EC2
  5. Creat keygen
  6. Use ssh to connect your instance
  7. Install and configure Shadowsocks
  8. Start your Shadowsocks
  9. now you can surfing on Internet freely

tips:attention your port and password in every configuration,and sometimes sudois necessary

links:
tutorial1
tutorial2
tutorial3

:)

vue2.0笔记(四)——组件和模板

组件 Component

组件(Component)是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素,封装可重用的代码(即模板template)。

全局组件

全局组件意味着所有实例都可以使用这个组件

1
2
3
4
5
6
<div id="app">
<my-com></my-com>
</div>
<div id="app1">
<my-com></my-com>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//注册组件
Vue.component('my-com',{
template:'<h1>{{msg}}</h1>',
data:function () {
return{
msg:'hello'
}
}
});
//一个实例
new Vue({
el:'#app'
});
//又一个实例
new Vue({
el:'#app1'
});

※实例基本没什么限制,只要不是挂载到本身就可以☞ el:'my-com'是行不通的
※此外组件的data要在注册时候写,并且data里只能是个return出来的返回值

vue-cli+webpack搭建指南

vue-clivue官方提供的脚手架工具,常用于快速搭建SPA(Simple Page Application)单页应用。

webpack是当下最热门的前端资源模块化管理和打包工具。

它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
*更多请参考webpack中文指南

vue2.0笔记(三)——计算属性

计算属性

data里含有复杂逻辑操作的时候,应当使用计算属性

1
{{a}}<br>{{b}}

1
2
3
4
5
6
7
8
9
data: {
a:1,
b:''
},
computed:{
b:function () {
return this.a+1;
}
}

computed里存储着计算后返回的对象,虽然看起来是一个function,但是b实际上等于计算后返回的值,因此在使用计算属性时注意写return

当数据是数组时,经过计算可能也会改变原数组

计算属性默认只有getter,不过在需要时你也可以提供一个setter


这样数据之间就可以对应更新了

vue2.0笔记(二)——事件

v-on

v-on用于事件绑定,v-on:冒号后面可以加任意的原生js事件如click/mouseover/dblclick等,v-on:的简写是@,如v-on:click='show()'可以简写为@click='show()'
除了方法名外,也可以直接写脚本语句如@click="alert(1)"