看程序学Vue.js 1-简介-优快云博客

步骤 1 : 什么是 Vue
什么是 Vue？
考虑这个需求：我们要把一个 json对象的数据，显示到一个元素上去。
如果不使用 Vue, 那么就会用到 JS 或者 JQuery，通过操作 HTML DOM 的方式，把数据显示上去。
如果使用Vue, 那么仅仅需要提供数据，以及数据要绑定到的元素的id,就行了,不需要显式地操作HTML DOM。
以下就用代码来表示这两种方式，通过比较，就知道Vue 是做什么的了。
步骤 2 : JS 的方式

首先准备一个div元素，它其实就是视图
然后在js代码中准备一个json数据。
接着通过原生的js 获取 div 对应的 html dom
最后把 json 数据赋给 html dom，就导致 div 里显示英雄的名称了

<div id="div1">
   
</div>
  
<script>
  
//准备数据
var gareen = {"name":"盖伦","hp":616};
 
//获取 html dom
var div1 = document.getElementById("div1");
 
//显示数据
div1.innerHTML= gareen.name;
  
</script>

步骤 3 : js 方式的问题
js 方式有问题吗？没问题。不过敏锐的同学会意识到， html dom其实只是手段，我们真正想要的，就是数据，显示在元素上。
而vue.js 就是用来解决这个问题的。
下面请看vue.js 的做法。
步骤 4 : VUE 的方式

首先导入 vue.js 要用到的库： vue.min.js. 这里这个库是放在网站上的，自己也可以下载一个，方便自己本地用。

同样准备一个div元素，其id是div1.
在js中准备json数据 gareen
创建一个Vue对象。这个Vue对象就把数据 gareen和视图 div1 关联起来了

new Vue({
el: ‘#div1’,
data: { message: gareen }
})

在视图div中，就可以通过如下方式把数据取出来了。

这种方式 html dom对开发人员就是透明的了。

<script src="http://how2j.cn/study/vue.min.js"></script>
 
<div id="div1">
   
  {{gareen.name}}
 
</div>
  
<script>
  
//准备数据
var gareen = {"name":"盖伦","hp":616};
 
//通过vue.js 把数据和对应的视图关联起来
new Vue({
      el: '#div1',
      data: {
        message: gareen
      }
    })
  
</script>

步骤 5 : vue 的更多用法
当然 vue.js 的内容不仅仅是这一点，接下来会逐渐把 vue.js 的做法都展开，其功能还是很强大的。
步骤 6 : 版本
本 Vue.js 系列教程用的版本是：Vue.js v2.5.16