VUE静态页面helloworld

来源:互联网 发布:公司群发短信软件 编辑:程序博客网 时间:2024/06/14 13:46

独立版本CDN

BootCDN: https://cdn.bootcss.com/vue/2.2.2/vue.min.js //国内

unpkg: https://unpkg.com/vue/dist/vue.js  //最新发布

cdnjs: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

vuejs: https://vuejs.org/js/vue.min.js

https://unpkg.com/vue  //未压缩版本

入门实例

<!DOCTYPE html>

<html style="height: 100%;">

     <head>

         <meta charset="UTF-8">

         <script type="text/javascript" src="../lib/vue.min.v2.5.11.js" ></script>

         <title>HelloDemo</title>

     </head>

     <body style="height: 100%;">

         <style>

             

         </style>

         <div id="appVue">

              <div>

                   {{message}}

              </div>

         </div>

         <script>

              new Vue({

                   el:"#appVue",

                   data:{

                       message:"Hello vue.js!"

                   }

              })

         </script>

     </body>

</html>

页面显示结果:Hellovue.js!

VUE把数据和 DOM建立起了关联,所有东西都是响应式的,Vue 在背后做了大量工作。

 

REF:

    https://cn.vuejs.org/v2/guide/

    http://www.runoob.com/vue2/vue-tutorial.html