Vue.js 是一個漸進式JavaScript框架 (The Progressive JavaScript Framework),
想要了解漸進式需要先從Vue的核心說起。
Vue.js 的核心
Vue.js最主要的核心功能有兩個部分:「宣告式渲染」與 「元件系統」 。
宣告式渲染 v.s 指令式渲染
宣告式渲染: 用宣告的方式在HTML上呈現JavaScript裡面的狀態或資料,當資料更新時,Vue.js會根據資料或狀態內容,同步更新HTML,讓資料渲染出來。
指令式渲染: 最一開始練習JavaScript時的寫法,就是指令式渲染。通常以操作DOM物件的方式來處理。(需要先綁定,再給予綁定項目一個監聽的指令)
元件系統
元件系統就是將網頁應用到的東西元件化。元件化可以讓同樣邏輯、同樣模板的東西重複拿來使用。
Vue.js的物件實體
Vue 的運作方法,需要先建立一個Vue的物件實體,並且將這個物件指定到某個變數上,再將它掛載到網頁上的某個DOM節點。
Vue 2X
const vm = new Vue({
data: {
message: 'hi'
}
}); //建立一個Vue的物件實體,並且將這個物件指定到vm上
vm.$mount('#app'); //掛載到網頁上的某個DOM節點
Vue 3.0
const vm = Vue.createApp({
data() {
return{
message: 'hi'
}
}, // vue 3.0 強制以 function return 的方式
});//建立一個Vue的物件實體,並且將這個物件指定到vm上
vm.mount('#app'); //掛載到網頁上的某個DOM節點
接續看 vue3 起手式