当前阅读教程:Vue.JS入门教程 > 指令参数 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 基础用法 | 下一篇: 指令缩写 |
参数在指令后以冒号指明。 对于html的属性来讲,冒号后面跟上的就是html原来的属性。 示例我们在下面示例v-bind 中使用指令后面跟上参数来演示网址的打开、图片的下载、点击事件的调用。 代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js中的指令</title> <!--加载本地vue.js的框架--> <script src="vue2.2.2.min.js"></script> </head> <body> <!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值--> <div id="app"> <!--打开一个到淘宝的页面,网址通过参数的形式传递--> <a v-bind:href="wangzhi" v-bind:target="target">去淘宝网</a><br> <!--加载一个图片,图片的地址通过参数传递--> <img v-bind:src="tupiandizhi" width="50"></img><br> <!--按钮的点击事件通过参数传递来执行--> <button v-on:click="mybt01()">使用Vue.js语法的按钮</button> <hr> <!--下面是原生js调用点击事件--> <button onclick="mybt01()" >原生js调用点击事件</button> </div> <script> //下面是Vue.js的代码块-开始 new Vue({ el: '#app',//app为前面div区块的id的值,通过"#"号绑定 //data区域定义属性的值 data: { wangzhi: 'http://www.taobao.com',//定义网址 //后面还有数据,则这里定义完毕后面需要跟上逗号"," tupiandizhi:'img/v.png',//定义图片地址 target:'_blank' //链接在新窗口打开 //后面没有数据,则这里定义完毕后面不需要跟上逗号"," } }) //Vue.js的代码块-结束 //下面是定义原生js的函数,在vue.js中可以调用 function mybt01() { alert("你好,黄菊华老师!")//弹出提示框 } </script> </body> </html> 效果图在上面示例 href 中是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 上面示例 v-on 中的指令,它用于监听 DOM 事件: <a v-on:click="doSomething"> 在这里参数是监听的事件名。 |
|
上一篇: 基础用法 | 下一篇: 指令缩写 |