Vue v-on v-model 组合使用

v-on

vue可以使用v-on指令来监听事件，方便与用户进行交互。我们不需要修改DOM中的数据，所有的操作都由Vue来实现，你编写的代码只需要关注底层逻辑。这也是Vue强大的地方之一

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <script type="text/javascript"  src="vue.js"></script>
 </head>
 <body>
     <div id="id">
         {{message}}
         <button v-on:click="reverseMessage">逆转信息</button>
     </div>
 </body>
 <script>
     var vm = new Vue({
         el:"#id",
         data:{
             message:'Hello Vue.js!'
         },
         methods:{
             reverseMessage:function(){
                 //把数据的顺序调换
                 this.message = this.message.split('').reverse().join('')
             }
         }
     })
 </script>
 </html>

v-model

在上面的例子中再添加 v-model指令双向绑定表单输入和应用状态，实现指令之间的组合使用

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <script type="text/javascript"  src="vue.js"></script>
 </head>
 <body>
     <div id="id">
         {{message}}
         <input v-model="message">
         <button v-on:click="reverseMessage">逆转信息</button>
     </div>
 </body>
 <script>
     var vm = new Vue({
         el:"#id",
         data:{
             message:'Hello Vue.js!'
         },
         methods:{
             reverseMessage:function(){
                 //把数据的顺序调换
                 this.message = this.message.split('').reverse().join('')
             }
         }
     })
 </script>
 </html>