在我上班的企業，這是第2個產品在使用Vue3.0了。對於學過HTML、CSS和JavaScript的朋友，完全有必要升級一下個人技能，補充上Vue3.0的知識。Vue封裝了JavaScript，核心庫只關注檢視層，不僅上手快，還便於與第三方庫或既有專案整合。
Vue是一個構建資料驅動的系統，web介面的漸進式框架，目標是透過儘可能簡單的 API實現響應的資料繫結和組合的檢視元件，核心是一個響應的資料繫結系統。如果你想馬上使用，那就趕緊安裝Vue.js去。
2.1 如何安裝Vue大多數人在說到安裝Vue時，都是依樣畫葫蘆，生搬硬套，缺少個人想法。按推薦三板斧，安裝Vue，不是引用CDN地址、不是用npm指令，就是用CLI腳手架。
好多人一看npm和CLI，頓時就對Vue沒了興趣。搞什麼玩意，學習Vue.js，還要搞這些？
也有好多人推薦用<script src="https://unpkg.com/vue@next"></script>，就是引用CDN的方式。從https名字，你就知道，這是引用網上的資源。可網路差或斷網的話，怎麼辦，不學了？
考慮到你的困惑，我回想到了以前的傳統方法，就是直接到https://cdn.jsdelivr.net/npm/[email protected]/dist/下載vue.global.js檔案，然後在要用Vue的HTML檔案中引用就好了!
2.2 Vue3.0倍輕鬆在Vue3.0中，每個Vue應用都是透過用createApp函式建立一個新的應用例項開始的，這種統一的應用方式，讓你學起來更加輕鬆。學習Vue3.0，就是對其生命週期的中函式，有的放矢，加加減減，或獨立或聯合。生命週期圖，你不用記憶，也不用背誦，瀏覽一下就好，後面會逐步講解的。
用第1個框圖中的createApp和mount搞個樣例，讓程式碼飄一會。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>第1個vue3.0</title> <style> .hello_div { border: 1px solid darkgreen; border-radius: 15px; width: 850px; line-height: 50px; text-align: center; } </style> <script src="vue.global.js"></script></head><body><div id="hello" class="hello_div"> 大家好，{{ msg }}</div><script> const vue = Vue.createApp({ data() { return { msg: "我是老陳，我愛分享程式設計之vue3.0" } } }) vue.mount("#hello")</script></body></html>輸出結果
2.3 Vue3.0三步曲應用Vue3.0，可按三步曲進行，1是定義將要賦予元素的資料，2是宣告Vue例項，3是將資料和元素進行繫結。定下這個調調之後，後面就是學習它的語法(模板、條件和元件等)和生命週期函式的應用了。
為了方便和提高程式碼的可讀性，定義資料和Vue例項，常常放在一起宣告。為了讓你更清晰Vue的意義，我就來個資料繫結的例子。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>第2個vue3.0</title> <style> .input_div { border: 1px solid darkgreen; border-radius: 15px; width: 850px; line-height: 50px; text-align: center; } input { border: 1px solid salmon; width: 200px; height: 22px; } </style> <script src="vue.global.js"></script></head><body><div id="hello" class="input_div"> <input id="name" v-model="msg" placeholder="是誰在咆哮?"/> <p>想學程式設計的人，快點來，<strong>{{ msg }}</strong>在咆哮vue3.0了。</p></div><script> // 第1步：data資料；第2步：vue例項，第3步：繫結元素 Vue.createApp({ data() { return { msg: '' } } }).mount("#hello")</script></body></html>輸出結果
#前端##Vue.js##JavaScript##Web##小程式#