**1.2.1. 效果 *(01\_HelloWorld/test.html*）**  **1.2.2.** **编码** ``` <!--模板--> <div id="test"> <input type="text" v-model="msg"><br><!--指令--> <input type="text" v-model="msg"><!--指令--> <p>hello {{msg}}</p><!--大括号表达式--> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> const vm = new Vue({ // 配置对象 options // 配置选项(option) el: '#test', // element: 指定用vue来管理页面中的哪个标签区域 data: { msg: 'atguigu' } }) </script> ``` **1.2.3.** **使用** **vue** **的方法** 1. 引入Vue.js 2. 创建Vue对象 el : 指定根element(选择器) data : 初始化数据(页面可以访问) 3. 双向数据绑定 : v-model 4. 显示数据 : {{xxx}} **1.2.4.** **使用** **vue** **开发者工具调试** 谷歌浏览器下添加 vue 插件  **1.2.5.** **理解** **Vue** **的** **MVVM**