【vue的基本使用】

1）基本使用步骤： 

① 导入 vue.js 的 script 脚本文件

（导入后会出现vue的构造函数） 

 ② 在页面中声明一个将要被 vue 所控制的 DOM 区域

 ③ 创建 vm 实例对象（vue 实例对象）

2）实操记录

  1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 

  <script src="./lib/vue-2.6.12.js"></script>

    const vm = new Vue()

2.希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部

  <div id="app">{{ username }}</div>

3.Vue实例并不知道控制的div是哪个，因此在实例中配置选项。

 const vm = new Vue({

      // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器

      el: '#app' })

4.没有数据，怎么定义要渲染的数据

      data: {username: 'zhangsan' }

      //要渲染的数据在data里

5.指定要把值渲染到哪个位置

 <div id="app">{{ username }}</div>

6.实现

3）基本代码与 MVVM 的对应关系

下面全体整个即为VM部分

   const vm = new Vue({

      // el 属性对应着view视图（以下部分）

      el: '#app',

      // data 对应model数据源（以下部分）

      data: {

        username: 'zhangsan'

      }

    })