# 1. 什麼是 漸進式 JavaScript 框架 (The Progressive JavaScript Framework)? 開發者可以根據自己的需求使用想要的功能,選擇需要的工具。 # 2.什麼是 MVVM 模式? MVVM是Model-View-ViewModel的縮寫。Model層代表數據模型,可以在Model中定義數據修改和操作的業務邏輯;View代表UI組件,它負責將數據模型轉化成UI展現出來,ViewModel是從Model取得View所需的資料。 # 3.什麼是元件(component)系統? 元件系統提供了HTML DOM元素的擴充性,也可將部分模板、程式碼封裝起來以便開發者維護及重複使用。 # 4.Vue2, Vue3 有哪些的差異? 1.引進了 “Fragment” 特性,不再限制元件必須只能是單一根節點 2.生命週期的變化,使用setup代替了之前的 beforeCreate 和created 3.新的 Composition API 提供了另一種對程式碼、邏輯甚至是狀態的共用管理方式,擺脫過去 mixins 的混亂 4.允許使用者能夠自由地表達、組合和重用有狀態的元件邏輯,同時提供ypeScript支援 # 5.用 vue3 寫一個 hello world 需要那些程式碼? ``` <div id="app"> <h1>{{ message }}</h1> </div> ``` ``` const vm = Vue.createApp({ data() { return { message: 'hello world' } } }).mount('#app'); ``` # 6.computed/methods 差別在哪? computed只會在其依賴的資料改變時,重新計算求值,只要computed property原始資料沒有更動,Vue並不會重新求取computed property,而是訪問其緩存結果;另外,method則是一旦觸發重新渲染便會重新執行函式。 # 7.html 中 v- 開頭的屬性有什麼用途? 請舉例? 透過指令的作用與改變狀態(資料)的變化來操作整個網頁系統 例: v-once:只會渲染指定的節點一次,往後就不再更新。 v-text:指令渲染的結果會無視標籤內原本的內容。 # 8.怎麼實作一個按鈕(button)事件? ``` const vm = Vue.createApp({ data () { return { count: 0 } }, }).mount('#app'); ``` ``` <p>Count: {{ count }}</p> <button v-on:click="count++">Plus</button> ``` # 9.請舉例一個 v-for 的用途? v-for:將「陣列」或「物件」類型的資料進行迭代渲染 可以顯示陣列中item跟index的值 # 10.請用自己的話解釋 vue 元件的 生命週期 (life cycle) 與更新機制? **Vue 的實體物件從建立、掛載、更新,到銷毀移除,這個過程稱為生命週期** beforeCreate 元件還沒被製造,無法使用 Vue 裡面的功能 created 元件被製造出了,可以拿到Vue裡面的資料 beforeMount 載入 HTML 至 Virtual DOM,還沒與模板綁定 mounted 透過 Vue 進行渲染 HTML,取代原本的元素內容 beforeUpdate 當狀態被變動時,畫面同步更新前 updated 當狀態被變動時,畫面已同步更新完成 beforeUnmount Vue 實體物件被銷毀前 unmount Vue 實體物件被銷毀完畢 # 心得 先前不曾學過相關得網頁設計課程,讀完內容後有學到了不少新知識。Vue3的出現比起過去Vue2變得更加容易上手,能夠方便去做使用,有利於之後的開發設計。
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up