vue基礎學習之v-on
阿新 • • 發佈:2018-12-30
1.v-on:submit
<body> <script type="text/javascript" src="js/vue.js" ></script> <div id="app"> <!-- 作者:offline 時間:2018-02-25 描述:“v-on:” 簡寫 @ --> <form action="index.html" @submit.prevent="submitfuntion" > <button type="submit">submit</button> </form> </div> <script type="text/javascript"> var app =new Vue({ el:'#app', data:{ message:'hello vue!' }, methods:{ submitfuntion:function(e){ alert("submit"); //e.preventDefault(); 與 v-on:submit.prevent的作用相同 } } }) </script> </body>
2.v-on:click
<body> <script type="text/javascript" src="js/vue.js" ></script> <div id="app"> <!-- 作者:offline 時間:2018-02-25 描述:1.clickfunction可以加入方法 2.方法比較簡單,可以將程式碼直接寫在後面 --> <button type="button" v-on:click="count++">submit{{count}}</button> </div> <script type="text/javascript"> var app =new Vue({ el:'#app', data:{ count:0 }, methods:{ submitfuntion:function(e){ alert("submit"); //e.preventDefault(); 與 v-on:submit.prevent的作用相同 }, /*clickfunction:function(){ this.count++; }*/ } }) </script> </body>