1. <!DOCTYPE html>
    2. <html lang="cn">
    3. <html>
    4. <head>
    5.     <meta charset="utf-8">
    6.     <title>vue.js</title>
    7.     <!--本地引入数据-->
    8.     <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    9.     <!--远程加载-->
    10.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    11. </head>
    12. <body>
    13. <!--创建一个id为APP的div标签-->
    14. <div id="app">
    16.     <!--
    17.           用来输出Vue对象中message的值。
    18.           如果message内容发生改变
    19.           这里的message输出也会改变
    20.           简而言之：
    21.            与实例中的【data】的属性绑定在一起 并实现数据同步
    23.           -->
    25.     <h1>{{ message }}</h1>
    26.     <br>
    27.     {{ ss }}
    28. </div>
    29. <script type="text/javascript">
    31.     /*
    32.     在script标签内，创建了Vue实例对象，该对象有两个属性：
    33.     el：将Vue实例绑定到id为APP的dom中
    34.     data：用于数据存储
    35.     vue所做的工作ius将数据填充在页面的便签中
    36.                                                  */
    37.     var app = new Vue({
    38.         //Vue对象 用来进行所有的操作
    39.         el: '#app',
    40.         //el挂载元素
    41.         data: {
    42.             //data数据 data模型数据  其值是一个对象
    43.             message: 'hello vue',
    44.             ss: 'I Love U'
    45.         }
    46.     })
    47. </script>
    49. </body>
    50. </html>