Vue.js 是什么？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
官方指南假设你已了解关于HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！之前有其它框架的使用经验会有帮助，但这不是必需的。
学习HTML、CSS、JavaScript网站推荐到MDN上学习，因为这是各大浏览器统一的文档网站。
安装Vue.js
我以为的渐进式
我以为的渐进式是你可以从传统的网页开发方式逐渐提升到现代前端模块化工程化的开发方式。
如果你还习惯于传统的网页开发方式，你可以直接引用 vue.js 来尝试使用 Vue，像这样：
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
那如果你已经开始使用 node 工具链和模块化开发了，可以使用 npm 进行安装使用：
# 最新稳定版
$ npm install vue
如果你觉得上面两种方法都觉得太繁琐了，Vue 提供了一个官方的 CLI，为单页面应用快速搭建繁杂的脚手架。
声明式渲染
demo
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 系统：
image.png
我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。
条件与循环
控制切换一个元素是否显示也相当简单：
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。
网友评论