安装

CDN引入

  1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

NPM 安装

  1. npm install vue

helloworld

  1. <!--第一步：创建文件夹及html文件-->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Vue入门之Helloworld</title>
  7.     <!--第二步：引入Vue库-->
  8.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  9. </head>
  10. <body>
  11.     <!--第三步:创建一个Div-->
  12.     <div id="app">
  13.         <!--Vue的模板的绑定数据的方法，用两对花括号进行绑定Vue中的数据对象的属性 -->
  14.         {{message}}
  15.     </div>
  17.     <!--第四步：创建Vue的对象，并把数据绑定到上面创建好的div上去。-->
  18.     <script type="text/javascript">
  19.         var app=new Vue({ // 创建Vue对象。Vue的核心对象。
  20.             el:'#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
  21.             data:{    // data: 是Vue对象中绑定的数据
  22.                 message:'hello Vue!' // message 自定义的数据
  23.             }
  24.         })
  25.     </script>
  26. </body>
  27. </html>

输出结果

  1. hello Vue!