学习Vue之路（一）

一、Vue起步
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动(官方定义)。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM，就是一种数据双向绑定的一种模式，如下代码：




这里我先定义了一个Vue的实例对象，这里的Vue对象可以和我们dom元素进行绑定，就用Vue对象里的“el”属性来绑定，el对应的value值是类似选择器的写法，这样就将id为app的div和我定义的Vue对象绑定到了一起，在整个div下我就可以使用Vue对象里的数据，就是图中data属性，html中就用{{}}这种语法来绑定data里的数据，双向绑定就是说任意一个数据模型发生改变与其绑定的数据也会发生改变，并且过程可逆。


二、Vue指令
指令（Directives）是带有 v- 前缀的特殊属性。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上，就是在DOM上可以使用一些逻辑处理，比如判断、循环等。
1、v-if指令
v-if就是用来判断，条件为true就不会渲染该DOM元素，当data中的seen为true时，p元素就会被渲染，反之则不会。在这里还有一个v-show指令用法和
v-if指令一样，效果也一样，不过v-if的不渲染是真正意义上的不渲染，而v-show不是不渲染而是将这个元素隐藏，即display属性为none。




2、v-bind指令
v-bind被用来响应地更新 HTML 属性，下图就给span元素动态的绑定了一个title属性，“v-bind”可以直接省略，“v-bind:”等价于“:”。




3、v-on指令
v-on用于监听 DOM 事件，比如单击click事件，Vue对象里可以声明methods属性，代表对象里的方法，所以在当前Vue对象的作用域范围内都可以使用这些方法，"v-on:"可以直接缩写为"@"，如“v-on:click”等价于“@click”。




4、v-for指令
v-for指令用来遍历循环一个列表数据，v-for里的写法与增强for循环的写法类似，todo是todos列表中遍历的每一个对象，这样的效果就是循环遍历出多个li元素。




5、v-model指令

v-model能轻松实现表单输入和应用状态之间的双向绑定，图中input元素改变的时候，p元素也会动态更新改变。