ming@xitu.io
Ming Yin
稀土创始人 🙄
前端工程师 🐶
九流设计师 🙀
ming@xitu.io
@kalasoo
Reactive Components for Modern Web Interfaces
数据驱动的组件,为现代化的 Web 界面而生
最新版本是 2.0
尤小右 Evan You
@youyuxi
多说 / Google / Meteor
发布于 2014 年 2 月
Model / View / ViewModel
UI = VM(State)
<div id="demo">
<p>{{message ? message : "no content"}}</p>
<input v-model="message">
</div>
var demo = new Vue({
el: '#demo',
data: {
message: '喜欢前端技术,竟然不上掘金?'
}
})
CodePen 加载中
// Object.defineProperty
// getter / setter / watcher object
var a = {}
Object.defineProperty(a, 'b', {
enumerable: false,
value: "static",
get: () => { ... },
set: () => { ... }
})
选择一个框架就像是选择一个老婆
错了是一辈子的事情!
Google,Facebook,Airbnb,
掘金
阿里巴巴,百度,饿了么,58
http://xitu.github.io/coder-price/
为了拿到对面桌子上的饼干
我不能走了
要造一个机械手臂
开发它的动力驱动
编写机械手臂的各个组件
让他们统一地插上电源
启动,有八阿哥
哦,拿到了饼干
为了拿到对面桌子上的饼干
我起身
走过去
拿到了饼干
掘金前端开发中的时候
if (isFrontendDev) {
// static assets served by webpack-dev-middleware & webpack-hot-middleware for development
var webpack = require('webpack'),
webpackDevMiddleware = require('webpack-dev-middleware'),
webpackHotMiddleware = require('webpack-hot-middleware'),
webpackDevConfig = require('./webpack.config.js');
var compiler = webpack(webpackDevConfig);
// attach to the compiler & the server
app.use(webpackDevMiddleware(compiler, {
// public path should be the same with webpack config
publicPath: webpackDevConfig.output.publicPath,
noInfo: true,
stats: {
colors: true
}
}));
app.use(webpackHotMiddleware(compiler, {
log: console.log,
path: '/__webpack_hmr',
heartbeat: 10 * 1000
}));
}
这是你搞不定的
一大堆东西
这是你搞得定的一堆小东西
和你能搞得定的一个关系网
// comment.vue
<style lang="sass">
button {
border: 1px solid gray;
&.blue { border-color: blue; }
}
</style>
<template lang="jade">
avatar(:user='user')
input(type='text', v-model='content')
button.blue(@click='submitComment')
</template>
<script>
import Comment from '../models'
import avatar from './components/avatar.vue'
export default {
props: ['user'],
components: {
avatar
},
data () {
return {
content: ''
}
},
methods: {
submitComment (e) {
e.preventDefault();
var comment = new Comment(this.content)
comment.save().then(() => {
alert('评论成功')
this.content = ''
})
}
}
}
</script>
✌
.vue: 一个文件来管理一个组件
一个基于 Vue.js 的 State Management 工具
管理那些应用级的共享数据
http://gold.xitu.io/entry/57691d5d6be3ff006a438e09
🔥 Thanks for your time 🔥
🔞 ming@xitu.io 🔞