[微精通:網頁設計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>