自学vue.js，从零开始
2017-09-19 本文已影响145人
啥啥啥娜娜
介绍
Vue.js (读音 /vjuː/，类似于view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
官方指南假设你已有 HTML、CSS 和 JavaScript 中级前端知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来！之前有其他框架的使用经验对于学习 Vue.js 是有帮助的，但这不是必需的。
引入方式：
引入方式1：cdn引入，直接在页面引入链接
引入方式2：下载引入，下载vue.js在本地
（1）声明式渲染
页面代码：
页面输出：
v-bind
页面代码：
页面输出：
（2）条件与循环
页面代码：
v-if
页面输出
如果改成seen：false就看不到文字了
v-for
页面代码：
输出效果：
（3）处理用户输入：
为了让用户和你的应用进行互动，我们可以用v-on指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：
v-on
页面输出：
点击按钮，文字发生颠倒
注意在reverseMessage方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码不需要关注底层逻辑。
v-model
页面代码：
页面输出：
表单上方文字会跟随输入框改变
（4）组件化应用构建
