一 vue 指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute
系统自带的指令:<div v-XXX><div>
v-if
v-else
v-bind:href
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
v-on:click/v-on:keydown/v-on:keyup.37 可以添加参数
v-on绑定事件 使用动态参数为一个动态的事件名绑定处理函数:
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
事件
事件的冒泡
事件的默认行为
.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
<!-- 阻止事件默认行为 -->
<a :href="h" v-on:click.prevent="show">111</a>
例子1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-if="arr.length != 0">{{arr}}</p>
<p v-else>暂无数据</p>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
arr: [1, 2, 3],
str: "你好vue"
}
})
</script>
</body>
</html>
例子2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<a v-bind:href="h">b页面</a>
<a :href="h">缩写形式</a>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
h: "b.htm;"
}
})
</script>
</body>
</html>
例子3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="run()">按钮</button>
<!-- <input type="text" v-on:keydown="k()" /> -->
<input type="text" v-on:keydown.37="k()" />
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el: "#app",
data: {}, //数据
methods: { //方法
run: function() {
alert(1);
},
k: function(e) {
var e = window.event || e;
if (e.keyCode == 37) {
console.log(e.keyCode)
}
console.log(e.keyCode)
}
}
})
</script>
</body>
</html>
例子4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 阻止事件默认行为 -->
<a :href="h" v-on:click.prevent="show">111</a>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
h: "a.html"
},
methods: {
show: function() {
alert(1);
}
}
})
</script>
</body>
</html>
例子5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p @click="show">点击查看</p>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el: "#app",
methods: {
show: function() {
alert("这是缩写");
}
}
})
</script>
</body>
</html>