基本使用步骤
- 导入 vue.js 的 script 脚本文件
- 在页面中声明一个将要被 vue 所控制的 DOM 区域
- 创建 vm 实例对象（vue 实例对象）
<body>
<!-- 2.页面中声明一个将要被 vue 所控制的 DOM 区域 -->
<div id="app">{{ username }}</div>
<!-- 1.导入 vue.js 的 script 脚本文件 -->
<script src="./lib/vue-2.6.12.js"></script>
<script>
//3.创建 vm 实例对象(vue 实例对象)
const vm = new Vue({
// 3.1 指定当前 vm 实例要控制页面的哪个区域
el:'#app',
// 3.2 指定 Model 数据源
data:{
username:'zs'
}
})
</script>
</body>
基本代码与 MVVM 的对应关系
安装 vue-devtools 调试工具
vue 官方提供的 vue-devtools 调试工具，能够方便开发者对 vue 项目进行调试与开发。
Chrome 浏览器在线安装 vue-devtools ：
chrome.google.com/webstore/de…
FireFox 浏览器在线安装 vue-devtools ：
addons.mozilla.org/zh-CN/firef…
蓝奏云分享
配置 Chrome 浏览器中的 vue-devtools
点击 Chrome 浏览器右上角的 按钮，选择更多工具 -> 扩展程序 -> Vue.js devtools 详细信息，并勾选如下的两个选项：
注意：修改完配置项，须重启浏览器才能生效！
