初次接触vue，我是怎么学习的

又到了review的时候，话不多说，这次放出，最初的学习笔记。
Vue
我将Vue看成了一门新得编程语言来学，基础的语法知识我认为就以下这些重点。
一、数据绑定语法
1、数据绑定最基础的形式是文本插值，使用 { {}} 语法（双大括号）,三个大括号标签可以输出真的HTML字符串。双大括号标签也可以用在 HTML 特性 (Attributes) 内，

。
也可以实现单次插值绑定，{ { * msg }}。
js
var data={msg:‘Hello Vue.js!’};
new Vue({
el: ‘#demo’,
data: data
})
data.msg=“Hello World!”;
html

This will never change: { { msg }}
This will never change: { {* msg }}

This will never change: Hello World! This will never change: Hello Vue.js! var data={msg:'Hello'}; 2、过滤器，以管道符|表示，可以串联多个滤波器 内置的过滤器。其实只是一个JavaScript函数。 { {msg | lowercase | capitalize}}串联起来没弄通 带有v-的指令，计算属性computed var vm = new Vue({ el: '#example', data: { a: 1 }, computed: { // 一个计算属性的 getter b: function () { // `this` 指向 vm 实例 return this.a + 1 } } })

a={ { a }}, b={ { b }}

a=1,b=2

二、Class与Style绑定
class对象，v-bind:class一个对象，以动态地切换class。v-bind:calss指令可以与普通的class特性共存。可以将数组传给它，用来应用一个class列表。
v-bind:style对象语法，它是一个JavaScript对象，也可绑定数组

Style 对象语法

var vm = new Vue({ el: 'div', data: { activeColor: 'red', fontSize: 30 } })

三、渲染指令
渲染指令包括，v-if、v-show、v-else、v-for、template v-if、template v-for…用法同平常的，在其后加条件什么的。加入template元素后，可以切换多个元素，这里所说的多个元素，就是不局限于单条指令。

Title

Paragraph 1

Paragraph 2

Yes

另外，v-show指令，跟v-if存在区别的，详见博客http://blog.csdn.net/qq_24122593/article/details/52764224

四、表单控件绑定 在input标签里实现
可以在表单的input元素上使用v-model来创建双向数据绑定。会根据input元素类型自动选取正确的绑定模式。placeholder为默认显示提示。
check-box可以实现多个勾选逻辑值，v-model绑定验证，绑定值的时候用v-bind。radio。
重要的是select，
例如动态选项，加入v-for渲染，代码如下

{ { option.text }} Selected: { { selected }}

new Vue({
el: ‘div’,
data: {
selected: ‘A’,
options: [
{ text: ‘One’, value: ‘A’ },
{ text: ‘Two’, value: ‘B’ },
{ text: ‘Three’, value: ‘C’ }
]
}
})
另外要保持时间的同步，除了上面使用双向绑定之外，也可以使用参数特性，保持同步。如下，参数特性针对v-model
lazy 　在默认情况下，v-model 在input 事件中同步输入框值与数据，可以添加一个特性lazy，从而改到在 change 事件中同步
number 自动将用户的输入保持为数字
debounce设置最小的延时，在每次敲击之后延时同步输入框的值域数据。如果每次更新都要进行高耗操作，它较为有用，不会延迟input事件：它延迟写入底层数据。

五、自定义
自定义指令，可以完成将数据的变化映射到DOM的行为。Vue.directive(id,definition)传入指令和定义对象注册一个全局自定义对象。定义对象需要提供一下钩子函数。如下
bind： 仅调用一次，当指令第一次绑定元素的时候。
update： 第一次是紧跟在 bind 之后调用，获得的参数是绑定的初始值；以后每当绑定的值发生变化就会被调用，获得新值与旧值两个参数。
unbind：仅调用一次，当指令解绑元素的时候。

Vue.directive(‘my-directive’, {
bind: function () {
console.log(‘my-directive’)
},
update: function (value) {
this.el.innerHTML ='value - '+ value
}
})
var demo = new Vue({
el: ‘#demo’,
data: {
someValue: ‘hello!’
}
})
　所有的钩子函数将被复制到实际的指令对象中，钩子内 this 指向这个指令对象。如果指令需要多个值，可以传入一个JavaScript对象字面量。指令可以使用任意合法的JavaScript表达式。

六、处理器之类的
1、v-on 指令监听DOM事件，例子如下

Greet

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) } } }) 2、内联语句处理器，除了绑定一个方法，也可以内联JavaScript语句。

Say Hi Say What

3、事件修饰符event.preventDefault() 或event.stopPropagation()、

七、组件，组件实例的作用域是孤立的。
1、Vue.extend()创建一个组件构造器，
// 定义
var MyComponent = Vue.extend({
template: ‘

A custom component!

’
})
// 注册
Vue.co