vue.js
TRANSCRIPT
Vue.js ( *)≧▽≦
Web Components
Custom elements
HTML imports
Template
Shadow DOM
Web Components Demo
傳統http://www.w3schools.com/html/html_examples.asp
CSS + Javascript
http://getbootstrap.com/css/#forms
WebComponent
https://elements.polymer-project.org/browse?package=paper-elements
So
Why AngularJS 、 React 、 Vue.js 、 Ember 、 Polymer 、 Riot...etc
Polyfill
Why vue.js
吸取 Angular 和 React 經驗，結合兩者優點 可與大部份 JavaScript 一起使用 (jQuery)
快結構清析，程式好讀完整的生命周期完整的開發工具中文文件
目標儘可能簡單的
實現嚮應式的資料綁定 (reactive data binding)
組合的 View 組件 (composable view components)
MVVM 中的 ViewModel
Components 分析
Data binding
Mustache 雙大括號 (https://github.com/mustache/mustache.github.com)
v-bind
<div id="demo"> <p>{{message}}</p> <input v-model="message"></div>
<a v-bind:href="url"></a>
表單v-model
<span>Message is: {{ message }}</span><br><input type="text" v-model="message" placeholder="edit me">
條件v-if ：會操作 DOM
v-show ：用 css (display: none) 來顯示 or 關閉v-else
<h1 v-if="ok">Yes</h1><h1 v-else>No</h1>
列表v-for
<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li></ul>
var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] }})
方法與事件v-on
<div id="example"> <button v-on:click="greet">Greet</button></div>
var vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: function (event) { // 方法内 `this` 指向 vm alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 alert(event.target.tagName) } }})
// 也可以在 JavaScript 代码中调用方法vm.greet() // -> 'Hello Vue.js!'
init
created
beforeCompile
compiled
ready
attached
detached
beforeDestroy
destroyed
Life cycle
Componentvar MyComponent = Vue.extend({ // 选项 ...})// 全局注册组件， tag 为 my-componentVue.component('my-component', MyComponent)// 创建根实例new Vue({ el: '#example', components: { // <my-component> 只能用在父组件模板内 'my-component': MyComponent }})
<div id="example"> <my-component></my-component></div>
Component - extend 跟 vue 差別與要注意的地方data & el
錯誤var data = { a: 1 }var MyComponent = Vue.extend({ data: data})
正確var MyComponent = Vue.extend({ data: function () { return { a: 1 } }})
預設單向Component - props
Vue.component('child', { // 声明 props props: ['msg'], // prop 可以用在模板内 // 可以用 `this.msg` 设置 template: '<span>{{ msg }}</span>'})
<child msg="hello!"></child>
Component - props 綁定類型<!-- 默认为单向绑定 --><child v-bind:msg="parentMsg"></child>
<!-- 双向绑定 --><child v-bind:msg.sync="parentMsg"></child>
<!-- 单次绑定 --><child v-bind:msg.once="parentMsg"></child>
Vue 常見結構var demo = new Vue({ el: '#demo', data: {}, methods: { onSubmit: function () {}, cancel: function () {}, }})
Vue.extend Vue 常見結構var demo = new Vue.extend({ template = '', props: [], data: {}, methods: { onSubmit: function () {}, cancel: function () {}, }, created(){}, beforeCompile(){}, compiled(){}, ready(){},})
深入淺出
深入 Vue.js Reactive 原理
Vue.js Async update queue
MutationObserver
setTimeout(fn, 0)
var vm = new Vue({ el: '#example', data: { msg: '123' }})vm.msg = 'new message' // 修改数据vm.$el.textContent === 'new message' // falseVue.nextTick(function () { vm.$el.textContent === 'new message' // true})
React (Facebook) Reactive 原理var React =(function () { function React () { } React.prototype.render = function(newState) { // virturl dom render };
React.prototype.setState = function(newState) { // do somethings this.render(newState); // diff virturl dom & dom // real render }; return React; }());
Angular (Google) Reactive 原理
一切都是這麼美好
But...
總是要的更多 (SPA) (vue-router)
Vuex ( 單向流 )
Vue.js 2.0
Web component 標準何時出？
Flux
比較Vue.js React AngularJS
目標 ViewModel View Component MVW
Reactive watch (setter, getter)
手動 (setState) watch queue
資料流 預設單向，可以雙向 單向 ( 參數傳遞 ) 雙向單向流管理 ( 父子 ) Vuex Redux 、 Flux x
jQuery 共用 共用 共用Virtual DOM 1.0 沒， 2.0 有 有 沒有
Conclusion
適合使用於 Web component ，表單控制也不錯 跟 jQuery 做好朋友
SPA 還不夠好結構清析，好讀好寫，好移植中文真的是很有親切感
一些 Vue.js 其他好的部份
Transitions ( 過場 )
<div v-if="show" transition="expand">hello</div>
/* 必需 */.expand-transition { transition: all .3s ease; height: 30px; padding: 10px; background-color: #eee; overflow: hidden;}
/* .expand-enter 定义进入的开始状态 *//* .expand-leave 定义离开的结束状态 */.expand-enter, .expand-leave { height: 0; padding: 0 10px; opacity: 0;}
Transitions 2
Vue.transition('expand', {
beforeEnter: function (el) { el.textContent = 'beforeEnter' }, enter: function (el) { el.textContent = 'enter' }, afterEnter: function (el) { el.textContent = 'afterEnter' }, enterCancelled: function (el) { // handle cancellation },
beforeLeave: function (el) { el.textContent = 'beforeLeave' }, leave: function (el) { el.textContent = 'leave' }, afterLeave: function (el) { el.textContent = 'afterLeave' }, leaveCancelled: function (el) { // handle cancellation }})
.vue 單文檔 coding style<template> <div class="hello"> <h1>{{ msg }}</h1> </div></template>
<script>module.exports = { data: function () { return { msg: 'Hello World!' } }}</script>
<style scoped>h1 { color: #42b983;}</style>
一些相關資源
Reference
官方文件http://vuejs.org.cn/
Plug-in
http://vuejs.org.cn/guide/plugins.html# -amp-已有插件 工具Vue 2.0
https://github.com/vuejs/vue/issues/2873#upgrade-tips
Vue.js 台灣社群https://www.facebook.com/groups/vuejs.tw/1036452996434432/?notif_t=group_activity¬if_id=1464621719501292
其他文件http://www.slideshare.net/kurotanshi/vuejs-62131923
https://docs.google.com/presentation/u/1/d/1RaXwt4n97OWUrMqel_-SKYTAldh9VhuaI0tbMJ31k0I/edit?usp=sharing
開發工具Chrome
https://github.com/vuejs/vue-devtools
Generator
https://github.com/vuejs/vue-cli
https://github.com/ElemeFE/cooking
Sublime Text
https://github.com/vuejs/vue-syntax-highlight
其他相關Weex
http://alibaba.github.io/weex/
Mobile framework
https://github.com/airyland/vux
Other
https://github.com/vuejs