Vue v-on v-model 组合使用

v-on

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript"  src="vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="id">
10         {{message}}
11         <button v-on:click="reverseMessage">逆转信息</button>
12     </div>
13 </body>
14 <script>
15     var vm = new Vue({
16         el:"#id",
17         data:{
18             message:'Hello Vue.js!'
19         },
20         methods:{
21             reverseMessage:function(){
22                 //把数据的顺序调换
23                 this.message = this.message.split('').reverse().join('')
24             }
25         }
26     })
27 </script>
28 </html>

v-model

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript"  src="vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="id">
10         {{message}}
11         <input v-model="message">
12         <button v-on:click="reverseMessage">逆转信息</button>
13     </div>
14 </body>
15 <script>
16     var vm = new Vue({
17         el:"#id",
18         data:{
19             message:'Hello Vue.js!'
20         },
21         methods:{
22             reverseMessage:function(){
23                 //把数据的顺序调换
24                 this.message = this.message.split('').reverse().join('')
25             }
26         }
27     })
28 </script>
29 </html>