[微精通:網頁設計Vue + Node.js + MySQL] 3.4. v-model & v-on & methods

接下來我們要從網頁上收集輸入的資料,這時就可以簡單的使用v-model來達成。而要與網頁互動,這時就可以使用v-on,將methods中的方法掛載至HTML中的事件Event上。

 

image/svg+xml3.4. v-model & v-on & methods <meta charset = "utf-8" > <html> <head> <link rel = 'stylesheet' href = 'zombie.css' > <script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js" ></script> </head> <body> <div id = 'app' > <ul> < li v-for = ' zombie in zombies ' > <p> {{ zombie . name }} </p> < /li > </ul> </div> </body> <script> new Vue({ el: '#app' , data: { zombies : [ {name: ' 瘋狂傑克 ' }, {name: ' 懶懶瑪琍 ' }, {name: ' ⼤提姆 ' }, {name: ' 史提夫 ' }, {name: ' 功夫李 ' } ] } }); </script> </html> <meta charset = "utf-8" > <html> <head> <script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js" ></script> </head> <body> <div id = 'app' > <ul> <li v-for = 'zombie in zombies' > <p> {{zombie.name}} </p> </li> </ul> </div> </body> <script> new Vue({ el: '#app' , data: { zombies: [ {name: ' 瘋狂傑克 ' }, {name: ' 懶懶瑪琍 ' }, {name: ' ⼤提姆 ' }, {name: ' 史提夫 ' }, {name: ' 功夫李 ' } ] , newName : "" } }); </script> </html> <meta charset = "utf-8" > <html> <head> <script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js" ></script> < link rel = "stylesheet" href = " https://cdn.jsdelivr.net/npm/ bootstrap@4.5.3/dist/css/bootstrap.min.css " > </head> <body> <div id = 'app' > <ul> <li v-for = 'zombie in zombies' > <p> {{zombie.name}} </p> </li> </ul> < hr > < form style = "margin:20px; width:30%;” > <label> 名字 </label> < input type = "textbox" class = " form-control " > <br> < button class =" btn btn-primary " type =“ button " > 新增 < /button > < /form > </div> </body> <script> new Vue({ el: '#app' , data: { zombies: [ {name: ' 瘋狂傑克 ' }, {name: ' 懶懶瑪琍 ' }, {name: ' ⼤提姆 ' }, {name: ' 史提夫 ' }, {name: ' 功夫李 ' } ] , newName: "" } }); </script> </html> <meta charset = "utf-8" > <html> <head> <script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js" ></script> <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/ bootstrap@4.5.3/dist/css/bootstrap.min.css" > </head> <body> <div id = 'app' > <ul> <li v-for = 'zombie in zombies' > <p> {{zombie.name}} </p> </li> </ul> <hr> <form style = "margin:20px; width:30%;" > <label> 名字 </label> < input type = "textbox" class = "form-control" v-model = " newName " > <br> < button class ="btn btn-primary" type =“button" > 新增 < /button > </form> </div> </body> <script> new Vue({ el: '#app' , data: { zombies: [ {name: ' 瘋狂傑克 ' }, {name: ' 懶懶瑪琍 ' }, {name: ' ⼤提姆 ' }, {name: ' 史提夫 ' }, {name: ' 功夫李 ' }, ] , newName : "" } }); </script> </html> <meta charset = "utf-8" > <html> <head> <script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js" ></script> <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/ bootstrap@4.5.3/dist/css/bootstrap.min.css" > </head> <body> <div id = 'app' > <ul> <li v-for = 'zombie in zombies' > <p> {{zombie.name}} </p> </li> </ul> <hr> <form style = "margin:20px; width:30%;" > <label> 名字 </label> <input type = "textbox" class = "form-control" v-model = "newName" > <br> < button class ="btn btn-primary" type =“button" > 新增 < /button > </form> </div> </body> <script> new Vue({ el: '#app' , data : { zombies : [ {name: ' 瘋狂傑克 ' }, {name: ' 懶懶瑪琍 ' }, {name: ' ⼤提姆 ' }, {name: ' 史提夫 ' }, {name: ' 功夫李 ' }, ] , newName : "" } , methods : { add : function () { if ( this .newName . trim() == "" ) { alert ( " 請輸入名字。 " ); return ; } this .zombies . push( { name : this .newName } ) ; this .newName = "" ; } } }); </script> </html> <meta charset = "utf-8" > <html> <head> <script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js" ></script> <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/ bootstrap@4.5.3/dist/css/bootstrap.min.css" > </head> <body> <div id = 'app' > <ul> <li v-for = 'zombie in zombies' > <p> {{zombie.name}} </p> </li> </ul> <hr> <form style = "margin:20px; width:30%;" > <label> 名字 </label> <input type = "textbox" class = "form-control" v-model = "newName" > <br> < button class = "btn btn-primary” type =“ button " v-on:click = add() " > 新增 < /button > </form> </div> </body> <script> new Vue({ el: '#app' , data: { zombies: [ {name: ' 瘋狂傑克 ' }, {name: ' 懶懶瑪琍 ' }, {name: ' ⼤提姆 ' }, {name: ' 史提夫 ' }, {name: ' 功夫李 ' }, ] , newName: "" } , methods : { add : function () { if ( this .newName.trim() == "" ){ alert( " 請輸入名字。 " ); return ; } this .zombies.push( {name: this .newName} ); this .newName = "" ; } } }); </script> </html> <meta charset = "utf-8" > <html> <head> <script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js" ></script> <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/ bootstrap@4.5.3/dist/css/bootstrap.min.css" > </head> <body> <div id = 'app' > <ul> < li v-for = ' zombie in zombies ' > <p> {{zombie.name}} </p> < /li > </ul> <hr> <form style = "margin:20px; width:30%;" > <label> 名字 </label> < input type = "textbox" class = "form-control" v-model = " newName " > <br> < button class = "btn btn-primary” type =“ button " v-on:click = add() " > 新增 < /button > </form> </div> </body> <script> new Vue({ el: '#app' , data: { zombies : [ {name: ' 瘋狂傑克 ' }, {name: ' 懶懶瑪琍 ' }, {name: ' ⼤提姆 ' }, {name: ' 史提夫 ' }, {name: ' 功夫李 ' }, ] , newName: "" } , methods : { add : function () { if ( this .newName.trim() == "" ){ alert( " 請輸入名字。 " ); return ; } this .zombies.push ( { name: this .newName } ) ; this .newName = "" ; } } }); </script> </html> 想要做⼀個新增殭屍的功能,怎麼做到 ? w3_4_1 - home.html 2. 但現在要新增新的殭屍,怎麼做好呢 ? 怎麼同步 資料⾄ zombies 屬性的陣列中,並顯⽰在畫⾯上呢 ? 1. 先使⽤簡單的殭屍資料,每個殭屍只有名 字資訊,然後使⽤ v-for 依照殭屍資料輸出 <li>DOM 元素以顯⽰所有殭屍的姓名。 1. 準備存放殭屍資料的變數 w3_4_2 - home.html 1. data 屬性中存放新殭屍名字的屬性 newName ,預設為空字串 ”” 。記得在前⾯要 加上個逗號 (,) 好新增 newName 屬性。 2. <input> 標籤,建立輸入格 w3_4_3 - home.html 1. 加入 bootstrap 排版框架。 2. 簡單的加個分隔線 <hr> 3. 加入 <form> 表格,在此使⽤ bootstrap form-control 類別做排版。 4. 這個 <input> ⽤來輸入新殭屍的姓名。 5. 在最後之後加入⼀個新增按鈕,在按下時會新增殭 屍資料,並使⽤ btn btn-primary 類別做排序。 3. v-model 指令,同步殭屍資訊⾄ data 屬性中 w3_4_4 - home.html 1. 重點,使⽤ v-model 指令將 <input> 輸入的 資料同步於 newName 屬性中,這個 newName 性已設定且必須存在於 data 屬性中。 2. HTML 中的 <input> 都有⼀個 value 屬性,⽤來存放使⽤者在 <input> 上輸入的值,⽽ v-model 會⾃動同步這個 value 屬性的值⾄ v- model 後的屬性 newName 4. methods ,定義新增殭屍函式 w3_4_5 - home.html 1. Vue 中加上 methods 屬性,這個屬性也是⼀對應⼀個物件 ({}) 它是可以讓我們放⽅法的,⽽⽅法就是⼀段程式,⽤以表⽰系統上的功 能。當然也別忘了在前⾯加上逗號 (,) 好新增 methods 屬性。 2. 在此加在 add() ⽅法,⽤來新增殭屍資訊,在 JavaScript 中⽅法即是 由屬性 + 函式的⽅式組成,即 add 屬性加上冒號 (:) 後的 function 3. 先判斷是否有輸入殭屍名字⾄ newName 性中,因 newName 屬性⼀定是字串,因此可以 使⽤ trim() ⽅法去除字串前後的空⽩。 4. 注意,要存取 newName 時, ⼀定要透過 this 表⽰要存取⽬前 Vue 物件 data 才能夠存取到。 5. 若去除後是空字串 ("") 則使⽤ alert() 函式提⽰使⽤者輸入名字,然後 return 離開 ⽅法不要往下執⾏。 6. 接著建立⼀個物件 ({}) 其中的名字 name 屬性,值為 newName 屬性中的值。 7. 然後,使⽤ push() ⽅法將這個新的物件加入⾄ zombies 屬性的陣列 中,這樣就完成新增殭屍的動作了。這個 zombies 屬性即是在 data 屬性 中的 zombies ,到此我們就真的加了⼀個新的殭屍物件了。 8. 最後把 newName 屬性在重置為空字串 ("") 即可。 5. v-on 指令,新增按鈕綁定殭屍函式 w3_4_6 - home.html 1. 接下來要讓按下新增按鈕時執⾏ add() ⽅法, 這時只要在 <button> 上使⽤ v-on 指令即可。 2. 在此使⽤ v-on 指令綁定 click 事件 以執⾏ add() ⽅法, v-on 後⾯是個冒號 (:) ,⽤以隔開要綁定的事件。 3. 原先的 onclick 事件在 v-on 時只需寫後⾯的 click 即可。 6. 實際建立⼀個殭屍資訊 w3_4_7 - home.html 1. 在輸入殭屍名字後,如:⼤隻 佬。並將資料同步回 newName 2. 按下新增按鈕即會執⾏ add() 去新增⼀個殭屍 物件⾄ zombies 屬性的陣列中。 6. 特別注意的是 <button> <form> 內預設會觸發 Submit 送出的動作,這是 HTML <form> 設置的⼀個功 能,過往都會使⽤ <form> 標籤收集資料,然後透過 <form> 傳送 <form> 中的資料⾄伺服器,需觸發傳送的 動作就是 <button> 。因此我們特別使⽤ type 屬性設 ’button’ 表⽰這是⼀般的 button 不進⾏ Submit 出的動作。 7. 再次強調, Vue 讓你專注 資料 '(data 屬性中的資 ) 的操作上,⽽畫⾯的更新可 全交給 Vue ,你只要事先 ' 宣告 '( {{}} v-for v- bind v-model ) 好畫⾯要 怎麼依資料更新即可。 6. ‘ ⼤隻佬 ' 即會出現在其中。 4. 沒問題, Vue 強⼤之處就在於它 會⾃動依資料重新輸出 DOM 元素。 5. 只要是在 data 屬性中的 資料, Vue 都會在變更找出 html 有哪些指令使⽤這些資 料,若有,則針對這些指令 重新執⾏並輸出 DOM 元素。 3. 新增了資料⾄ zombies 屬性的陣 列中後,那畫⾯怎麼顯⽰ ?

留言