**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**