Vue 初体验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
  <div id="app">{{message}}</div>

  <!-- 导入vue -->
  <script src="./lib/vue.js"></script>

  <script>
    // 创建一个 Vue 对象
    const vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
      methods:{}
    })
  </script>

</body>

  1. 第一步导入 Vue.js 文件

  2. 创建一个 Vue 对象

    1. el是 element 的缩写，用来设置 Vue 对象作用的范围

      默认创建一个 id 名为 app 的 div 盒子,让这个盒子作为顶级容器

    2. data 存储数据

    3. methods用来存储事件函数

  3. {{}} 可以在页面上渲染 data 中的数据