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'
}
})