摘要：一基础学习模式下图不仅概括了模式，还描述了在中是如何和以及进行交互的。关于这一点我们将在后续反应系统中讨论。父组件通过向下传递数据给子组件，子组件通过给父组件发送消息。这个对象必须是普通对象原生对象，及原型属性会被忽略。
Vue.js 是用于构建交互式的 Web 界面的库。
Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。
其实和Jquery一样，VueJs就是一个Js库，但是是面向前端的库，具体来讲叫做MVVM(Model-View-ViewModel)库.
也就是说，有部分功能和Jquery是差不多的，Vuejs能做的，Jquery也能做。这下我们就放心了，Jquery多简单啊，令人发指的是Vuejs在实现相同功能的时候更简单（不然用你干嘛啊）；
理解Vuejs最关键的一句话叫做“数据驱动视图”，比如用Jquery来做一个列表，这个列表的数据是从Laravel来的，那么我们要遍历这个数据，然后把列表的html元素加到dom里面去， 要删除一个列表项的时候，先要在找到列表项在dom的位置，然后去除这个节点。Vuejs不用，数据在的时候，列表就在，数据减一，列表项就自动实时相应减一。也就是说，你只要操作数据就够了，不用管dom。这基本就是Vuejs的中心思想。
一、基础学习 1.MVVM模式下图不仅概括了MVVM模式（Model-View-ViewModel），还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。
ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。
当创建了ViewModel后，双向绑定是如何达成的呢？
首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。
先来看一个简单的示例，Hello,World!
Vue学习 {{ message }}
示例详解：
1.2.1 data属性和方法每个Vue实例都会代理其data对象中的所有属性：
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// setting the property also affects original data
vm.a = 2
data.a // -> 2
// ... and vice-versa
data.a = 3
vm.a // -> 3
需要注意的是只有代理属性是反应式的，如果在实例创建之后添加一个新的属性到实例上，将不会触发任何视图更新。关于这一点我们将在后续反应系统中讨论。
除了数据属性之外，Vue实例还提供了许多有用的实例属性和方法，这些属性和方法都以$开头以便和代理数据属性进行区分。例如：
var data = { a: 1 }
var vm = new Vue({
el: "#example",
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById("example") // -> true
// $watch is an instance method
vm.$watch("a", function (newVal, oldVal) {
// this callback will be called when `vm.a` changes
})
1.2.2 实例生命周期
每个Vue实例在创建时都会经历一系列实例化步骤，例如，需要设置数据观察、编译模板、以及创建必要的数据绑定。在这个过程中，还会调用生命周期钩子，从而方便我们执行自定义逻辑，例如，created钩子会在实例创建后调用：
var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` points to the vm instance
console.log("a is: " + this.a)
}
})
// -> "a is: 1"
还有一些钩子会在实例生命周期的不同阶段调用，例如compiled、ready和destroyed，所有被调用的生命周期钩子通过this指向调用它的Vue实例，一些用户可能会疑惑在Vue.js的世界中有没有“控制器”的概念，答案是没有。组件的自定义逻辑会被分割到这些生命周期钩子中。
1.2.3 props 用法props将数据从父作用域传到子组件。在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。
Vue.component("todo-item", { props: ["todo"], template: "
这只是一个假设的例子，但是我们已经设法将应用分割成了两个更小的单元，子单元通过 props 接口实现了与父单元很好的解耦。我们现在可以进一步为我们的 todo-item 组件实现更复杂的模板和逻辑的改进，而不会影响到父单元。
组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。
子组件要显式地用props 选项声明它期待获得的数据：
Vue.component("child", {
// 声明 props
props: ["message"],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: "{{ message }}"
})
然后我们可以这样向它传入一个普通字符串：
结果：
hello!1.2.4 data属性对象和函数返回对象的区别
我们先来看一下这个比较经典的问题，当初在学Vue的时候也犯过这样的迷惑，不知道何时传递data对象，何时传递data函数 。Vue.js的data是要一个对象还是一个function?
Vue 实例的数据对象。Vue.js 会递归地将它全部属性转为 getter/setter，从而让它能响应数据变化。这个对象必须是普通对象：原生对象，getter/setter 及原型属性会被忽略。不推荐观察复杂对象。
在实例创建之后，可以用 vm.$data 访问原始数据对象。Vue 实例也代理了数据对象所有的属性。
在定义组件时，同一定义将创建多个实例，此时 data 必须是一个函数，返回原始数据对象。如果 data 仍然是一个普通对象，则所有的实例将指向同一个对象！换成函数后，每当创建一个实例时，会调用这个函数，返回一个新的原始数据对象的副本。
简单说, 在实例中data是对象, 在组件中data就得是函数返回对象。
组件中的data写法示例：
var data = { counter: 0 } Vue.component("simple-counter", { template: "", // 技术上 data 的确是一个函数了，因此 Vue 不会警告， // 但是我们返回给每个组件的实例的却引用了同一个data对象 data: function () { return data } }) new Vue({ el: "#example-2" })
由于这三个组件共享了同一个 data ， 因此增加一个 counter 会影响所有组件！这不对。我们可以通过为每个组件返回全新的 data 对象来解决这个问题：
data: function () {
return {
counter: 0
}
}
更多详情请参考：官网组件数据data传递说明（Component）
1.2.5 组件写法需注意的几个问题一个组件下只能有一个并列的 div，可以这么写，所以复制官网示例的时候只要复制 div 里面的内容就好。
但是不能这样写:
第二。数据要写在 return 里面而不是像文档那样子写
错误的写法:
组件使用 ：
firstComponent.vue
I am a title.
written by {{ author }}
其他Vue问题，可以参考该博文：Vue2.0 新手完全填坑攻略——从环境搭建到发布
2.Vue.js的常用指令请参考官方文档Vue官方文档
1.v-model,v-for,v-on在了解了vue的基本用法（数据绑定、指令、缩写、条件渲染等）后，来看一个完整示例,动态添加/删除元素：
Name
Age
Sex
Delete
{{ person.name }}
{{ person.age }}
{{ person.sex }}
Demo
Github示例源码
添加、删除表单数据
Vue js Vue开发
welcome to Vue.js{{ message }}
- {{ todo.id }} {{ todo.title }}