VueJS 入门

Vue是一个利用JavaScript编写的构建用户界面的框架，
所解决的问题就是：如何构建用户界面。

注：下文中所说的用户界面，特指浏览器的用户界面。

用户界面

浏览器中的用户界面，简单概括起来包含两部分：

• 页面内容；
• 响应用户行为；

所有Vue的工作就是如何把这两部分构建起来：

• 如何生成页面内容？
• 用户操作时，如何处理用户的行为？

页面内容

在生成页面内容时，
不管是在服务端，还是在客户端，
都有模板的概念，
这样就能根据不同的数据，展示出不同的页面内容。

所以，
Vue中如何吧数据和模板绑定，
生成页面内容，是一个重点部分。

数据和模板绑定

一个例子：

<!-- 省略了部分内容 -->
<div id="app">
  {{ message }}
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
</script>

通过这个例子，
可以看到：Vue把data中的数据传递到了message中。
可以分析一下，
如果自己实现这样的一个功能，应该如何去处理？

响应用户行为

当用户点击了一个按钮，
又如何去处理呢？