1-2.vue核心---hello world
阿新 • • 發佈:2022-03-01
注意點
1. 建立vue例項,程式碼從此處開始
2. 一個例項對應一個容器,一一對應
3. 語法點
el
掛載點,選定vue要使用哪個容器,通常為css選擇器。也可以用dom獲取元素
data
data儲存資料,供el指定容器使用
{{}}
{{}}意為插值表示式,裡面寫js表示式
程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <title>HelloWorld</title> </head> <body> <!-- 建立容器 --> <div id="app"> <!-- {{}}插值表示式 --> Hello{{value}} </div> </body> <script> Vue.config.productionTip=false//此行程式碼取消vue控制檯生產環境提示 </script> <script> //建立vue例項,程式碼從此處開始 const app=new Vue({ el:'#app',//掛載點,選定vue要使用哪個容器,通常為css選擇器。也可以用dom獲取元素 data:{ //data儲存資料,供el指定容器使用 value:"world" } }) </script> <!-- 1.建立vue例項,程式碼從此處開始 2.一個例項對應一個容器,一一對應 3.語法點 -->