首先，介绍一下Vue。Vue是一套构建用户界面的渐进性框架。 那么vue有什么作用呢?
考虑到这个需求：我们要把一个json对象的数据，显示到一个元素上去。
- 如果不使用Vue,那么就会用到JS或JQuery,通过操作HTML DOM的方式，把数据加载到元素上去显示。
- 如果使用Vue,那么仅仅提供数据，以及数据需要绑定的元素的id。就不需要显示的操作HTML DOM。
下面分别两种情况，举例说明。
1.JS的方式
//1.准备一个div元素 <div id="div1"> </div> <script> // 2.准备JSON数据 var gareen = {"name":"盖伦","hp":616}; // 3.获取 html dom var div1 = document.getElementById("div1"); // 4.显示数据 div1.innerHTML= gareen.name; </script>
运行结果
2.Vue的方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue初次使用</title> </head> <body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="div1"> {{message}} </div> <script> //准备数据 var gareen = {"name":"铁头","hp":616}; //通过vue.js 把数据和对应的视图关联起来 new Vue({ el: '#div1', data: { message: gareen.name } }) </script> </body> </html>
