More Related Content
More from ZongYing Lyu (9)
Vue.js
- 5. Why vue.js
吸取 Angular 和 React 經驗，結合兩者優點
可與大部份 JavaScript 一起使用 (jQuery)
快
結構清析，程式好讀
完整的生命周期
完整的開發工具
中文文件
- 10. 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>
- 16. Component
var MyComponent = Vue.extend({
// 选项...
})
// 全局注册组件，tag 为 my-component
Vue.component('my-component', MyComponent)
// 创建根实例
new Vue({
el: '#example',
components: {
// <my-component> 只能用在父组件模板内
'my-component': MyComponent
}
})
<div id="example">
<my-component></my-component>
</div>
- 17. Component - extend 跟 vue 差別與要注意的地方
data & el
錯誤
var data = { a: 1 }
var MyComponent = Vue.extend({
data: data
})
正確
var MyComponent = Vue.extend({
data: function () {
return { a: 1 }
}
})
- 19. Component - props 綁定類型
<!-- 默认为单向绑定 -->
<child v-bind:msg="parentMsg"></child>
<!-- 双向绑定 -->
<child v-bind:msg.sync="parentMsg"></child>
<!-- 单次绑定 -->
<child v-bind:msg.once="parentMsg"></child>
- 20. Vue 常見結構
var demo = new Vue({
el: '#demo',
data: {},
methods: {
onSubmit: function () {},
cancel: function () {},
}
})
- 21. Vue.extend Vue 常見結構
var demo = new Vue.extend({
template = '',
props: [],
data: {},
methods: {
onSubmit: function () {},
cancel: function () {},
},
created(){},
beforeCompile(){},
compiled(){},
ready(){},
})
- 25. 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' // false
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
})
- 26. 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;
}());
- 31. 比較
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有 有 沒有
- 34. 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;
}
- 35. 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
}
- 36. .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>
