1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <script src="../JS/vue.js"></script>
    9. </head>
    10. <body>
    11.     <!-- 准备好一个容器 -->
    12.     <div id="root">
    13.         <h2>hello, {{ name }}</h2>
    14.     </div>    
    15.     <script>
    16.         Vue.config.productionTip = false;  // 阻止 vue 在启动时生成生产提示
    18.         // 创建Vue实例，里面传一个配置对象
    19.         const app = new Vue({
    20.             // el为element，通过选择器让Vue实例和容器建立了联系
    21.             // el用于指定当前Vue实例为哪个容器服务
    22.             // el通常为选择器字符串，也可以去亲自找 el:document.getElementById('root')
    23.             // 不一定为id，也可以时class   el:'.className'
    24.             el:  '#root',
    25.             data: {  // data中用于存储数据，数据供el所指定的容器去使用
    26.                 name: '尚硅谷'
    27.             }
    28.         })
    29.     </script>
    30. </body>
    31. </html>