# [Vue.js] 基礎教學筆記 ###### tags: `Vue.js` 觀念： * jquery:用dom元素來觸發功能，適用於強調動畫效果 * re、vue、ng:用資料來驅動功能，舉例來說若更改data資料，html的綁定功能也會同步調整，適合資料更動性高的專案使用，方便即時更新資訊。 在html導入vue cdn ``` <body> <div id="app"> {{message}} {{number}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </body> ``` js語言套入vue模組 1. 宣告的id需套入el:指定需要使用vue的範圍 2. 在data:{}寫入內容 ``` var app = new Vue({ el:"#app", data:{ message: 'hello taiwan', number:'20' } }); ``` ## 判斷式 v-if / v-else: 在HTML直敘寫上 滿足條件才顯示loading:false ![](https://i.imgur.com/rtPgFFg.png) ## v-model: 動態更新資料，在text裡更改資料，可同步更改data數值 * 標籤1`<div v-text="message">></div>` * 標籤2`<div v-html="message"></div> ，message:'<span>哈囉</span>'` ![](https://i.imgur.com/wDAjgWu.png) ## v-blnd:更新html屬性 ![](https://i.imgur.com/Dls7TCI.png) ## for迴圈寫法： v-for="命名A in 變數" {{命名A}};若要指定物件可以在{{命名A.物件名}} ![](https://i.imgur.com/kSTmHF2.png) ## vue函式function寫法 * 運算類型+即時性建議使用computed * 相較於methods，無法放置參數，其他功能相似 * 建議將運算邏輯寫在js，html是放代數為主 - computed 是在監控資料更動後，重新運算結果呈現於畫面上 一般來說不會修改資料，只會回傳用於畫面呈現的資料 - methods 就是互動的函式，需要觸發才會運作 會用來修改資料內容 效能 如果資料量大，computed 自然會比較慢 只要資料變動就會觸發，無形之中執行次數也會增加 因此在大量資料時，會建議透過 methods 減少不必要的運算 ## methods函數宣告 #### js命名：function(參數){指令} ![](https://i.imgur.com/PiHsyCe.png) * 要宣告data裡的資料(沒有定義)，可使用this呼叫，如this.data裡的物件名稱 #### html語法 * 套版v-on:click，on的支援語法有很多種，包含常用的click，輸入觸發事件後會產生Js所宣告的內容。 ![](https://i.imgur.com/vOobIYl.png) ## computed函數宣告 * 填上的欄位區域要加上v-model，以便自動即時更新 * 需要“比較“或”運算“則套用computed語法宣告 * 注意命名後方要加冒號：，例如：computed:{ 命名name:function{寫入條件}} return回傳結果 * 如需應用data資料，前方需加上this.（this是function執行時當下外層的物件） * 可回傳至data變數之中，以及html畫面上面 ![](https://i.imgur.com/j1Nt9ak.png) ## v-for迴圈新增索引 ![](https://i.imgur.com/FxTPpf5.png) 使用“索引”index讓得知是第幾筆資訊，從0開始，因此要加1 ![](https://i.imgur.com/RhQwUwJ.png) ## v-if判斷式案例 在data陣列中假如年齡小於25則會顯示 v-if如果沒有銜接v-if-else代表只有滿足()條件，才會啟動 ![](https://i.imgur.com/dyuqNAx.png) ## method函式 v-on案例語法 ``` <div id="app"> <input type="text" class="form-control" v-model="text"> <button class="btn btn-primary mt-1" @click="reverse">反轉字串</button> <div class="mt-3"> {{ newText }} </div> </div> ``` 1. 使用methods函數新增一個A屬性 2. 在botton裡新增觸發語法v-on，內寫上函數A，點擊後便會觸發此函數 3. 函數內的A屬性寫上條件，案例是newText = text 4. input輸入欄位有將text做v-model雙向綁定，因此輸入的值會與newText相同 ``` <script> var app = new Vue({ el: '#app', data: { text: '', newText: '' }, methods:{ reverse: function(){ this.newText = this.text; } } }); </script> ``` ## Checkbox多選＆單選radio的語法 #### checbox多選 checkbox預設的值是true & false開關 ![](https://i.imgur.com/xyEarBR.png) 上方範例，在三個勾選項目中，使用v-model並連結data中的空陣列[]，如此一來當勾選後array裡便會出現被勾選的項目(轉為true) ![](https://i.imgur.com/zDbllpr.png) 再利用v-for陣列迴圈將答案顯示出來 ![](https://i.imgur.com/1Y3v7bB.png) #### radio單選 點擊後僅會指定一個項目(單選)，因此無需用迴圈方式顯示 * 套用v-model串入data裡的空字串sigleRadio * 直接顯示{{model串入sigleRadio}}即可 ![](https://i.imgur.com/bij14HZ.png) # 自行整理筆記 函數有兩種呼叫方式 computed/method ### method是觸發事件才會啟用，例如點擊按鈕@click發動事件 啟動的變數是text 將method的函數命名為007 與data的變數A做連結 mehtod裡的007函數內容將與data變數A做連結，並做運算，並將結果回傳至text ### computed是可將結果直接回傳至頁面上 將computed的函數命名為007(可直接在html放入007變數就可以顯示) 與data的變數A做連結運算，回傳return至007就可以顯示 ### v-for data裡有陣列命名array 在li裡頭輸入v-for語法，item in array，命名item可在html使用 可在{{}}顯示 item.name & item.age ### v-if if常常跟for一同使用，都需要跟data陣列串連 v-if="條件"，條件放入如果item.age>數值便會顯示下方的顯示內容 ### checkbox與radio多選及單選 先在data命名變數，多選使用陣列[]，單選用字串，再利用v-model串連 若要顯示資料，多選要使用v-for呈現，單選則直接{}即可