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中。 可以分析一下， 如果自己实现这样的一个功能，应该如何去处理？

响应用户行为

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