 |
位置：电子教程 > Vue.JS入门教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > Vue.JS入门教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：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"> 在这里参数是监听的事件名。 |
|
| 上一篇： 基础用法 | 下一篇： 指令缩写 |
