满帆前行（Vue入门——三）

上篇文章我们将vue的部分指令说了一下，可见Vue入门（二），接下来我们来研究一下剩下的v-model、v-on、v-bind三个指令。

首先我们来说v-model，v-model是为了实现表单输入和应用状态之间的双向绑定，我们通过一个例子来学习一下。

<div id="app">    <input type="text" v-model="message">  </div>  <script src="vue.js"></script>  <script type="text/javascript">  var app = new Vue({   el: '#app',     data: {      message: '你好'      }    })</script>

我们通过浏览器打开html页面可看到页面出现一个input框，值为“你好”，为了证明它们之间已经双向绑定，我们可以通过改变message的值来实现，请打开开发者工具，然后输入app.message = "测试"后回车，可以看到input框值已经变成“测试”。

​ 接下来我们学习一下v-on指令，我们可以通过它添加一个事件监听器，通过它调用Vue实例中的方法，我们通过一个例子来​学习一下。

<div id="app">    <input type="text" v-model="message">    <button v-on:click="changeMessage">改变message值</button>  </div>  <script src="vue.js"></script>  <script type="text/javascript">  var app = new Vue({   el: '#app',     data: {      message: '你好'      },      methods: {        changeMessage : function () {          this.message = "测试"        }      }    })</script>

​ 我们通过浏览器打开html页面，可以看到页面如下图所示，然后我们点击button后input的值会变成“测试”​，如图所示。（注：v-on可绑定多个事件）

​ 接下来我们学习最后一个指令v-bind吧，它用于绑定数据和元素属性，比如可以绑定style、class、href，我们拿href学习一下​。

<div id="app">    <a v-bind:href="href">跳转到百度</a>  </div>  <script src="vue.js"></script>  <script type="text/javascript">  var app = new Vue({   el: '#app',     data: {      href: "http://baidu.com"      }    })</script>

​ 我们通过浏览器打开html页面，可以看到一个a链接，点击后进入百度网址​。如此就可以证明数据和元素属性已经绑定​成功。

​ 上面就是这三个指令的所有内容了，欢迎大家评论点赞，如有问题可私信​咨询。