Vue1-hello-CSDN博客

本文链接：https://blog.csdn.net/Zzzpiu/article/details/111170542

环境准备

官方:https://cn.vuejs.org/
下载vue.js库,如果是在github中下载的js库,找到dist文件夹下的vue.js文件就是我们需要的js库.

helloword

下载好js库后,就可以开始来使用一把了,据说vue使用mvvm模型,将数据,视图,模型进行分离,我们下面就来使用原来js显示数据和vue显示数据的操作的对比来看看helloword:

1.js操作dom显示数据:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
         window.onload = function () {
             //JS的方式需要操作dom来显示数据
             //准备数据
             var gareen = {"name":"盖伦","hp":616};
             //获取html dom
             var div1 = document.getElementById("div1");
             //显示数据
             console.log(div1);
             div1.innerHTML = gareen.name;
         }
    </script>
</head>
<body>
<div id="div1">
    
</div>
</body>
</html>

2.vue绑定数据

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<script src="vue.js"></script>
<div id="div1">
   {{gareen.name+gareen.hp+"击飞"}}
</div>
<script>
   // Vue的方式
   //准备数据
   var gareen = {"name":"盖伦","hp":616};
   //通过vue.js 把数据和对应的视图关联起来
   new Vue({
       el: '#div1',
       data: {
           gareen
       }
   });
</script>
</body>
</html>