- 列表渲染
v-for基于数组渲染列表
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="vm">
<li v-for="item,index in items">
{{index}} {{ item.message }}
</li>
</div>
<script type="text/javascript">
var vm =new Vue({
el: '#vm',
data: {
items:[
{message:'你'},
{message:'我'},
{message:'他'},
]
}
});
</script>
</body>
</html>
v-for遍历对象渲染列表
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="vm">
<li v-for="value,key in object">
{{key}} {{ value }}
</li>
</div>
<script type="text/javascript">
var vm =new Vue({
el: '#vm',
data: {
object:
{
book:'三国演义',
author:'罗贯中',
price:'23',
}
}
});
</script>
</body>
</html>
key标签
能跟踪每个节点的身份，从而重用和重新排序现有元素
image.png
image.png
- v-on绑定dom事件
v-on:click
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="vm">
<button v-on:click="count += 1">
第{{count}}次点击
</button>
</div>
<script type="text/javascript">
var vm =new Vue({
el: '#vm',
data: {
count:1
}
});
</script>
</body>
</html>
methods中定义方法
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="vm">
<button v-on:click="greet">
Greet
</button>
</div>
<script type="text/javascript">
var vm =new Vue({
el: '#vm',
methods: {
greet: function(){
alert('hi')
}
}
});
</script>
</body>
</html>
方法中可以引用变量
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="vm">
<button v-on:click="greet">
Greet
</button>
</div>
<script type="text/javascript">
var vm =new Vue({
el: '#vm',
data:{
name:"小刺猬"
},
methods: {
greet: function(){
alert('Hi,'+this.$data.name);
}
}
});
</script>
</body>
</html>
方法中可以传递参数
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="vm">
<button v-on:click="greet('小刺猬')">
Greet
</button>
</div>
<script type="text/javascript">
var vm =new Vue({
el: '#vm',
methods: {
greet: function(str){
alert('Hi,'+str);
}
}
});
</script>
</body>
</html>
事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
