vue介紹 · 前端菜鳥成長記

# vue基礎 <br> ## 1.vue模板 >文件 -> 首選項 -> 用戶代碼片段，在輸入框內輸入html.json，用下面的代碼覆蓋掉原來的即可，下次新建html文件直接輸入**hv**，然后按下回車即可 <br> ```html { "html:5": { "prefix": "hv", "body": [ "<!DOCTYPE html>", "<html>", "<head>", "\t<meta charset=\"UTF-8\">", "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">", "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">", "\t<title></title>", "\t<script src=\"https://cdn.jsdelivr.net/npm/vue\"></script>", "</head>", "<body>", "</body>", "</html>", ], "description": "HTML5" } } ``` <br> ## 2.語法步驟 ***** * 實例化vue實例 * 1. 綁定vue的使用范圍 el * 2. 在data定義變量 * 3. 通過{{}}格式綁定變量到html頁面標簽上 <br> ```html <div id="app"></div> <div id="app1">vue 渲染a：{{a}}</div> <div id="app2">vue實例內容不會影響：{{a}}</div> ``` ```javascript // 實例化vue對象 new Vue({ el:'#app1',//vue影響的HTML頁面范圍，綁定id名 data:{ //定義vue使用的變量 a:1 }, }) ```