网络知识 娱乐 满帆前行(Vue入门——三)

满帆前行(Vue入门——三)

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

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

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

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

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

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

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

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

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

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

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