VUE 渐进式JavaScript 框架
1.概念
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
2.起步
2.1创建vue-demo项目
使用hbuilderX对vue组件强大的支持
2.2引入vue.js
尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.3每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。
我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。
3基础
3.1模板语法 {{ 数据属性}}、 v-html、v-bind
3.2条件渲染 v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy（真值）值的时候被渲染。
使用v-if控制切换一个元素是否显示也相当简单：
继续在控制台输入 app.awesome = false，你会发现之前显示的消息消失了。
3.3v-else、v-else-if
- v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。
- 可以使用v-else-if指令来充当 v-if 的“else-if 块”，可以连续使用。
- 可以使用 v-else 指令来表示 v-if 的“else块”。
- v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
- v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
v-else、v-else-if示例：
3.4循环渲染 v-for
在 v-for 里使用数组
1. 我们可以用 v-for 指令基于一个数组来渲染一个列表。
2. v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
3. 在控制台里，输入 app2.todos.push({ message: '新项目' })，你会发现列表最后添加了一个新项目。
4. 在v-for 还支持一个可选的第二个参数，即当前项的索引。
5. 在 v-for 块中，我们可以访问所有父作用域的 property
在 v-for 里使用对象
你也可以用 v-for 来遍历一个对象的 property。
你也可以提供第二个的参数为 property 名称 (也就是键名)：
还可以用第三个参数作为索引：
在v-for里使用对象集合
3.5事件监听 v-on
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，
用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
通过它调用在 Vue 实例中methods中定义的方法：
3.6 指令、参数、修饰符、缩写
指令：
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：
<p v-if="seen">现在你看到我了</p>
这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除
元素。
参数：
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute：
<a v-bind:href="url">...</a>
在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。
修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit">...</form>
缩写
v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。
当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。
同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
3.7表单输入绑定v-model实现双向数据绑定
3.8表单输入绑定-修饰符
