| 前言 |
| 什么是vue |
| vue和angular的区别 |
1.1：angular
1、上手较难
2、指令以ng-xxx开头
3、由Google维护
1.2：vue
1、简单易学更轻量
2、指令以v-xxx开头
3、HTML代码+json数据，在创建一个vue的实例
共同点：“都不兼容低版本ie”，但是目前框架已经提供了兼容IE的方法
对比：GitHub上vue的stars数量大约是angular的两倍
| vue构造器 |
每一个Vue.js的应用都是通过够构造函数Vue创建的一个Vue的根实例。例如：
var vm = new Vue({
// 选项
})
上述代码中在实例化vue的时候需要传入一个对象，它可以包涵数据、模板、挂载元素、方法、生命周期钩子等。
然为了创建可复用的组件构造器，我们可以通过扩展vue构造器的方法实现来实现预定义选项，通过扩展的预定义选项来创建更多可复用的组件。例如：
var MyComponent = Vue.extend({
// 所扩展的预定义选项
})
var myComponentTnstance = new MyComponent()
| vue的计算属性computed |
往往在模板中绑定表达式是非常方便的，但是这一方法值适合简单的操作，在模板中放入太多的逻辑会让模板过重并且难以维护，所以任何复杂的逻辑计算我们都需要用计算属性。
<div id="test">
<p>{{message}}</p>
<p>{{myMessage}}</p>
</div>
var vm = new Vue({
el: '#test', // 将实例挂载到id位test的元素上去
data: function () {
return {
message: 'hello'
}
},
computed: {
myMessage: function () {
return this.message.split('').revers().join('')
}
}
})
在上述实例中myMessage的值是依赖于message的，所以message的值发生改变时候，myMessage的值相应的也会发生改变。
计算属性默认的只有getter,不过我们也可以通过需要提供一个setter:
computed: {
fullName: {
get: function () {
}
set: function () {
}
}
}
在vue中给我提供了一个$watch，用于观察vue实例上数据的变动，每当数据变动时会调用。通常如果是为了计算属性的话那么更好的办法还是使用computed。
| vue的组件 |
组件是vue一个强大的功能，组件是可以扩展html元素，封装可以重用的代码。
全局注册组件：
div id="id">
<my-component></my-component>
</div>
Vue.component('my-component', {
template: '<p>我是一个组件</p>'
})
new Vue({
el: '#id'
})
局部注册组件：
var child = {
template: '<p>我是一个组件</p>'
}
new Vue({
...
component: {
'my-component': child
}
})
在使用组件的时候代理数据data必须是一个函数，函数返回的是代理的数据。
| 组件之间的通信 |
父组件可以通过Prop来给子组件传递数据，prop是父组件用来传递数据的一个自定义属性。子组件需要显示的用props选项声明prop:
Vue.component('child', {
// 子组件显示的声明props
props: ['message'],
// prop就像data一样可以再模板中使用也可以通过this来调用
template: '<span> {{ message }} </spam>'
})
我们可以通过v-bind动态的绑定props的值到父组件的数据中，每次当绑定的数据在父组件中发生改变的时候，该组件也会相应的传递给子组件。
<child v-bind:child-message='message'></child>
如果要给prop传递一个字面的时候必须要使用v-bind这样传递下去的才是正真的字面量，否则都会当做字符串。
<child v-bind:number="1"></child>
prop是单向绑定的：当父组件的属性变化时，将传递给子组件，但是在子组件中改变数据的时候并不会传递给父组件，为了防止子组件无意间修改父组件的状态，所以不应该在子组件 中改变prop的数据。
| 总结 |
学习再多的理论，最后都是要通过实践来证明，以前总是以为，看完一遍学习的视频，跟着敲一遍例子，就能会了，其实这才刚刚起步，看完视频，只能会一些皮毛，真正的东西，还得在项目中慢慢磨。
