1.1进入vue官网了解vue到底是啥
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
1.2安装
创建一个vue.html文件
引入 Vue：
引入：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>或<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
1.3申明是渲染
① Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
<div id="app"> {{ message }} </div> |
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) |
这样我们成功船舰了一个Vue，可以得到一个Hello Vue！，数据和 DOM 已经就建立了关联，所有东西都是响应式的。注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是#app) 然后对其进行完全控制。HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。
个人认为为了方便理解：我可以理解为。HTML其实就是一个单纯的入口，起到关键作用的是Vue，因为其余都会发生在新创建的 Vue 实例内部，Vue实例内部才有真正的数据。是关联的DOM元素也就是这里的（#app）将入口和Vue示例内部（也就是数据和一些实际的操作）联系了起来。
② 除了文本插值，我们还可以像这样来绑定元素attribute：
<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div> |
var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() } }) |
v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。它们会在渲染的 DOM 上应用特殊的响应式行为。在这里表示：将这个元素节点的 title attribute 和 Vue 实例的messageproperty保持一致。
1.4条件循环
①
<div id="app-3"> <p v-if="seen">现在你看到我了</p> </div> |
var app3 = new Vue({ el: '#app-3', data: { seen: true } }) |
这样就会显示现在你看到我了。输入 app3.seen =false，你会发现之前显示的消息消失了。这个例子演示了我们不仅可以把数据绑定到 DOM 文本或 attribute，还可以绑定到 DOM 结构。
②Vue 还提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。还有其它很多指令，每个都有特殊的功能。例如，v-for 指令可以绑定数组的数据来渲染一个项目列表：
<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> |
var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } }) |
输入 app4.todos.push({text: '新项目' })，你会发现列表最后添加了一个新项目。本文是参考vue官网加上一些自己的理解完成的，如理解有误还请指教。
