Vue漫谈：为什么使用Vue和Vue版本选择

Vue漫谈：为什么使用Vue和Vue版本选择

为什么使用Vue

郑重声明：下面的内容全是抄的

什么是 Vue？

考虑这个需求： 我们要把一个 json对象的数据，显示到一个元素上去。

如果不使用 Vue, 那么就会用到 JS 或者 JQuery，通过操作 HTML DOM 的方式，把数据显示上去。

如果使用Vue, 那么仅仅需要提供数据，以及数据要绑定到的元素的id,就行了,不需要显式地操作HTML DOM。

以下就用代码来表示这两种方式，通过比较，就知道Vue 是做什么的了。

JS的方式

1. 首先准备一个div元素，它其实就是视图
2. 然后在js代码中准备一个json数据。
   对json 不了解的同学，请学习 json教程
3. 接着通过 原生的js 获取 div 对应的 html dom
   对html dom 不了解的同学，请学习 html dom教程4
4. 最后把 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>

js 方式有问题吗？ 没问题。

不过敏锐的同学会意识到， html dom其实只是手段，我们真正想要的，就是数据，显示在元素上。

而vue.js 就是用来解决这个问题的。

Vue的方式

1. 同样准备一个div元素，其id是div1.

2. 在js中准备json数据 gareen

3. 创建一个Vue对象。 这个Vue对象就把数据 gareen和 视图 div1 关联起来了

4. 在视图div中，就可以通过{{gareen.name}}把数据取出来了

<script src="https://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>

Vue版本选择

升级是需要考虑成本的。

Vue2 用着也挺好的，如果升级的成本太高，也没必要升级。如果你的项目很稳定，而且没有对新功能的强烈需求，能悠着点就悠着点。