應用程式建立/ 雙向綁定&MVVM/ v-bind 動態屬性指令/ v-for&v-if跑多筆資料/ v-on操作頁面行為/ 修飾符/ v-bind:class/ computed 運算功能/ Vue 表單與資料的綁定/ 元件化
以下筆記出自六角學院課程，詳情請參➤ 六角學院-Vue 出一個電商網站
▶︎ 應用程式建立
- Vue一次只能綁定一元素，可綁class但若class重複只會顯示第一個，故用id較佳
- 使用巢狀結構會呈現錯誤
▶︎ 雙向綁定&MVVM
v-model/{{}}/v-text/v-html
v-text：更新文字形式textContext
v-html：更新語法形式innerHtml
v-model：可透過input調整model的資料內容，message: “哈囉”→”哈囉你好嗎”
coding時不會去寫到VM的部分，只需寫model的部分，當畫面改變時改變資料狀態，而當資料狀態改變時也會改變畫面。
→ VUE JS是以資料狀態操作畫面
▶︎ v-bind 動態屬性指令
利用v-bind:屬性=”data資料”，來更新html屬性
▶︎ v-for&v-if 動態產生多筆資料於畫面上
v-for: 想像成for迴圈forEach之類的，來處理陣列資料
v-if: 條件判斷
▶︎ v-on操作頁面行為
v-on:指令（動作）=”methods物件中的method”
類似JS事件監聽addEventListener，新建一methods物件並寫入方法，methods中的this指向data的物件內容，切記勿使用arrow function 來做製作方法函式，因 this 指向不同。
預先定義資料很重要（此處指newText，感覺有點像先宣告變數）。
＊反轉字串 text.split(‘’).reverse().join(‘’);text='你好嗎'
text.split(‘’)=['你','好','嗎'] //將字串以空字串切割並回傳陣列
text.split(‘’).reverse()=['嗎','好','你'] //將陣列反轉
text.split(‘’).reverse().join(‘’)='嗎好你' //將陣列內容以空字串連接並回傳字串
▶︎ 透過修飾符，讓 v-on 操作更簡單
event.preventDefault() 或 event.stopPropagation() 是常見的需求。為了讓methods純粹處理數據邏輯而非 DOM 事件細節，可於v-on使用修飾符.stop/.prevent/.capture/.self/.once/.passive 來處理。
-事件修飾 prevent: 取消默認事件
// 沿用上例，使用事件修飾符：
v-on:click="reverseText"
e.preventDefault()→ v-on:click.prevent="reverseText"
-事件修飾 stop: 調用 event.stopPropagation()，阻止冒泡事件由內而外不斷向上傳遞，詳細可參此文章
<div class=”p-3 bg-primary” @click.stop=”trigger(‘div’)”>
<span class=”box” @click.stop=”trigger(‘box’)”></span>
</div>-事件修飾 capture: 冒泡的相反，由外而內傳播
<div class="p-3 bg-primary" @click.capture="trigger('div')">
<span class="box d-flex align-items-center justify-content-center" @click.capture="trigger('box')">
<button class="btn btn-outline-secondary" @click.capture="trigger('button')">按我</button>
</span>
</div>-事件修飾 self: 只會觸發自己
<div class=”p-3 bg-primary” @click.self=”trigger(‘div’)”>
<span class=”box d-flex align-items-center justify-content-center” @click.self=”trigger(‘box’)”>
<button class=”btn btn-outline-secondary” @click.self=”trigger(‘button’)”>按我</button>
</span>
</div>＊當都只有一個內元素加上 stop or self，那麼 self 依然會產生冒泡事件（self 需要外層也加上，才能避免此問題），stop 則不會
-事件修飾 once: 只會觸發事件一次
<div class=”p-3 bg-primary” @click.once=”trigger(‘div’)”>
<span class=”box d-flex align-items-center justify-content-center” @click.once=”trigger(‘box’)”>
<button class=”btn btn-outline-secondary” @click.once=”trigger(‘button’)”>按我</button>
</span>
</div>鍵盤修飾符：
// keyCode
<input v-on:keyup.13=”reverseText()”>// 別名修飾
<input v-on:keyup.enter=”reverseText()”>// shift+enter
<input type="text" class="form-control" v-model="text" @keyup.shift.enter="trigger('shift + Enter')">//
滑鼠修飾符：
<span class=”box” @click.right=”trigger(‘Right button’)”>
// 點右鍵才會觸發事件其他常用修飾符：
-lazy: 默認情況下，v-model 在每次 input 事件觸發後將輸入框的值與數據進行同步 。可加 lazy 修飾符，轉變為使用 change 事件進行同步：
{{ lazyMsg }}<input type=”text” class=”form-control” v-model.lazy=”lazyMsg”>
// 要在輸入框按enter才會送出文字
-number: 類似parseFloat()的作用
age: ''{{ age }}<input type=”number” class=”form-control” v-model.number=”age”>
-trim: 去除頭尾多餘空白
{{ trimMsg }}緊黏的文字<input type=”text” class=”form-control” v-model.trim=”trimMsg”>
簡化v-on&v-bind寫法：
v-on:click.prevent="reverseText"
→ @click.prevent="reverseText"v-bind:href="link"
→ :href="link"
▶︎ v-bind:class 動態切換 className
v-bind:class="{ active（要加入的className）: isActive（判斷式）}"▶︎ computed 運算功能
computed會直接將結果存入變數中，而此變數是可以直接被使用的。在compute中宣告的任何屬性都是function，並且會return一個值。
- computed：一般來說不會修改資料，只會回傳用於畫面呈現的資料
（較耗能，因為資料一變就會觸發）- methods：互動函式，需要觸發才會運作，會用來修改資料內容
▶︎ Vue 表單與資料的綁定
- string: text, textarea，直接用v-model呈現改變文字於畫面上
*text='';<input v-model=”text” type=”text” class=”form-control”>
{{ text }}
- checkbox: 預設值為true/false，用v-model改變勾選後的true/false狀態
*checkbox1=false;<input type="checkbox" class="form-check-input" id="check1" v-model="checkbox1"><label class="form-check-label" for="check1"> 你要看電影嗎 </label>_____// 複選框，勾選後會改變文字狀態sex='男生'<input type="checkbox" class="form-check-input" id="sex" v-model="sex" true-value="男生" false-value="女生"><label class="form-check-label" for="sex">{{ sex }}</label>
- checkbox-array（多選）: 設定空陣列存取被勾選的值，並利用v-for呈現多筆資料
*checkboxArray=[];<input type="checkbox" class="form-check-input" id="check2" value="雞" v-model="checkboxArray"><input type="checkbox" class="form-check-input" id="check3" value="豬" v-model="checkboxArray"><input type="checkbox" class="form-check-input" id="check4" value="牛" v-model="checkboxArray"><p>晚餐火鍋裡有<span v-for="item in checkboxArray"> {{item}} </span>。</p>
- radio（單選）：
*singleRadio='';<input type=”radio” class=”form-check-input” id=”radio2" value=”雞” v-model=”singleRadio”><input type=”radio” class=”form-check-input” id=”radio3" value=”豬” v-model=”singleRadio”><input type=”radio” class=”form-check-input” id=”radio4" value=”牛” v-model=”singleRadio”><p>晚餐火鍋裡有{{singleRadio}}</p>
- selected
*selected='';<select name=”” id=”” class=”form-control” v-model=”selected”> <option value=”” disabled> — -請選擇 — -</option> <option value=”小明”>小明</option> <option value=”小美”>小美</option></select>
_____// 利用v-for來跑選項<select name="" id="" class="form-control" v-model="selected"> <option disabled value="">請選擇</option>
<option :value="item" v-for="item in selectData">{{item}}</option></select>＊若為多選，則可於標籤加入multiple屬性
▶︎ 元件化
避免因為使用同一變數造成牽一髮動全身的情況，vue的每一個元件都可以獨立儲存自己的狀態。
Vue.component('名稱', { data（回傳陣列的函式）: function () {
return {
count: 0
}
}, template（模版html）: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})<counter-component><counter-component> 元件化後的計數器
<counter-component><counter-component>
