1.为什么要学习Vue
最近总是听业内的朋友说起Vue.js，各种安利，和React对比起来，Vue的上手难度要低很多，个人认为最最重要的一点是，官网文档写的比React好很多。
React 和 Vue 有许多相似之处，它们都有：
1.使用 Virtual DOM
2.提供了响应式（Reactive）和组件化（Composable）的视图组件。
3.将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库。
Vue的优点：
1.官方文档更人性化
2.性能比React优异
3.上手程度低
这么看来，没有理由不去了解这一款优秀的js框架，所以本作者准备用这一些列文章记录下来，从开始接触Vue到用它做完一个实际项目的过程，记录下来学习路线以及项目中遇到的问题.
2.从官方文档开始
学习任何技术都是从它的官方文档开始，这是毋庸置疑的，学习第一手知识比看别人消化过的知识效果完全不一样，先从官方文档了解一些基础语法。
声明式渲染
Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM
在JSFiddle写一个最简单的Hello World,代码如下：
HTML:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<p>{{ message }}</p>
</div>
JS:
new Vue({
e1:'#app',
data:{
message: 'Hello World!'
}
})
简单的理解上面代码：id="app"用于在dom中绑定Vue中名为'#app'的组件，{{message}}则是直接将组件中的数据渲染进DOM
除了使用文本直接把数据插入到组件中，我们还可以使用别的方式绑定DOM,将上述代码改为：
HTML
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app-2">
<span v-bind:title="message">
鼠标悬停查看动态绑定的提示信息
</span>
</div>
JS
new Vue({
el: '#app-2',
data: {
message: '页面加载于' + new Date()
}
})
简单理解上述代码：
id="app-2"依然是绑定组件，v-bind:title="message"这个是什么东西呢，查看官方文档，官方文档表示，你看到的 v-bind 属性被称为指令，指令带有前缀v-,表示他们是Vue提供的特殊属性，v-bind:title="message"这个的意思就是在这个DOM中,Vue将span标签里的title属性和Vue 实例的 message绑定。
条件与循环
Vue可以直接在dom元素中加入条件判断，控制一个元素的显示与否，将代码改为如下：
HTML:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app-3">
<span v-if="message">
鼠标悬停查看动态绑定的提示信息
</span>
</div>
JS:
new Vue({
el: '#app-3',
data: {
message: true
}
})
简单理解上述代码：v-if也是Vue提供的特殊属性，从上面的例子很明显的可以看出是Vue提供的判断属性，当v-if绑定的属性message为true时，组件显示出来，当为fasle时，组件消失不见。
另外Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：
在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js
这个等在后面的实践中再来试一试这里的过渡效果
学到这里越来越发现，似乎学习Vue的套路就是先了解v-xxxx这些指令在dom中的作用
接下来一个新指令v-for,第一反应就是想到了for循环，将到代码改为如下：
HTML:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app-4">
<span v-for="todo in todos">
{{todo.text}}
</span>
</div>
JS:
new Vue({
el: '#app-4',
data: {
todos:[
{ text:'学习JavaScript' },
{ text:'学习Vue.js' },
{ text: '找个女朋友' }
]
}
})
简单理解一下代码：
v-for="todo in todos"，这个的意思就是将当前的dom绑定todos这个数组，然后进行循环处理。
处理用户输入
简单来说就是处理和用户的交互，比如用户点击之后触发某事件，这会让我们联想到js中的onClick事件，然后在Vue中，v-on这个指令就是绑定一个调用 Vue 实例方法的事件监听器，将代码改为如下：
HTML:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app-5">
<p>{{message}}</p>
<button v-on:click="reverseMessage">点击我</button>
</div>
JS:
new Vue({
el: '#app-5',
data: {
message : 'Hello Vue.js'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
})
简单理解上述代码：
v-on:click="reverseMessage",很明显的和onClick的方法差不多,将button的点击事件和reverseMessage方法绑定，reverseMessage在组件中已经定义好，方法的作用是将字符串反转。这里可以看到，在reverseMessage方法中，我们更新了组件的状态，但是完全没有操作DOM，操作DOM的处理都是由Vue来处理。
Vue还提供了v-model指令，使表单输入和 应用状态间的双向绑定变得轻而易举。将代码改为如下：
HTML:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app-6">
<p>{{message}}</p>
<input v-model="message">
</div>
JS:
new Vue({
el: '#app-6',
data: {
message : 'Hello Vue.js'
}
})
这段代码的效果为，input中的message和p段落中的message数值为同步的，当改变input中的输入时，p段落中的message也会改变，当改变组件中的message时，input中显示的值也会改变，实现了数据的双向绑定。
组件化
在Vue中，一个组件的本质就是一个拥有预定义选项的一个Vue实例。在Vue中注册组件的语法：
Vue.component("组件名"，{组件对象})
Vue.component('todo-item',{template:'<li>这是个待办项</li>'})
现在我们可以使用这个组件了，使用方法：直接把组件名当做标签使用
<ol>
<todo-item></todo-item>
</ol>
如果仅仅是这么使用的话，那这个组件永远只能显示"这是个待办项"，前面说到组件是可以拥有预定义选项的，那么我们要自定义组件里面的内容，就需要将数据从父作用域传到子组件，修改一下组件的定义，让他能接受一个属性,将li里面的内容改为动态的：
Vue.component('todo-item',
{
props:['todo']
template:'<li>{{todo.text}}</li>'
})
这样一来，我们就可以构建很多内容不一样的todo-item组件了，具体方式如下：
HTML:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app-7">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
JS:
Vue.component('todo-item',
{
props: ['todo'],
template:' <li>{{todo.text}}</li>'
})
new Vue({
el: '#app-7',
data: {
groceryList :[
{text: '蔬菜'},
{text: '奶酪'},
{text:'饼干'}
]
}
})
简单理解上述代码，在html的组件中，用到了v-for,这是把数组中的数据循环出来，上文已经说过，然后v-bind上文也提到过，指的是绑定某个属性，因为这里的组件是自定义的，所以绑定的属性也是自定义的，这里绑定的属性就是todo。
未完待续
原文出处：http://youngi.club/2017/03/22/Vue/ ，欢迎转载。
