# Vue2

vuetify (主要)
element-ui

@Getter
@Action
promise
async
await

Vue

v-if if
v-else else
v-else-if
v-bind 顯示或不顯示
v-model 指令用来在 input、select、textarea、checkbox、radio 雙向綁定用
v-on 事件
v-cloak 在數據還沒渲染出現時，不顯示語法
[
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
]
v-for

var vm = new Vue ({
el: '#app', // 用來掛載Vue實體的元素
data: {}, // 要綁定的資料
props: {}, // 用來接收外部資料的屬性
methods: {}, // 用來定義在Vue實體內使用的函數(方法)
watch: {}, // 用來觀察Vue實體內資料的變動
computed: {}, // 自動為內部資料計算過的屬性
template: "...", // 提供Vue實體編譯後的樣板
components: {} // 用來定義子元件

}),

methods VS computed
可使用 methods來替代 computed，效果是一樣的，但computed會依賴緩存，只有相關依賴發生改變時才會重新取值。而 methods，在重新渲染的时候，函數總會重新調用執行。

v-bind和v-model的區別
1.v-bind用來綁定數據和屬性以及表達式，縮寫為'：'
2.v-model使用在表單中，實現雙向數據綁定的，在表單元素外使用不起作用

Methods 與 Computed 的使用情境
computed 是在監控資料更動後，重新運算結果呈現於畫面上
一般來說不會修改資料，只會回傳用於畫面呈現的資料

methods 就是互動的函式，需要觸發才會運作
會用來修改資料內容

效能
如果資料量大，computed 自然會比較慢
只要資料變動就會觸發，無形之中執行次數也會增加
因此在大量資料時，會建議透過 methods 減少不必要的運算

computed 優點在於由於 緩存 的特性，一旦使用的大量的計算，在既有響應依賴資料沒有更動的前提下，computed 不會重新計算求值，減少性能上的開銷，反之，若是有需要隨時更新、不希望緩存的情境，則可以使用 method 替代，不過目前使用上 method 更常作為事件的方法調用

Node.js的處理方式是Async(0)
Async是接收到需求，不用一直等到需求完成再執行其他需求(0)

瀏覽器
↓
載入 index.html
↓
<div id="app"></div> ← 空的掛載點
↓
載入 main.js
↓
createApp(App).mount('#app')
↓
Vue 應用程式開始運作
↓
路由系統啟動
↓
載入對應頁面元件

git

crud

[e-mail]
ji394su3udemy