一、template标签
Vue.js提供了template标签,可以将指令作用到这个标签上,对其子元素进行渲染,但最后渲染的结果里不会有它。
二、事件绑定与监听
1.方法与内联语句处理器
1)Vue.js中通过v-on可以绑定实例选项属性methods中的方法作为事件的处理器,v-on:后参数可以接受所有原生的事件名称。
2)v-on:的简写形式,用@代替;除了直接绑定methods函数外,v-on也支持内联的JavaScript语句,但仅限一个。
3)在直接绑定methods函数和内联JavaScript语句时,都有可能需要获取原生的DOM事件对象,Vue.js中提供了两种写法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src = "vue.js"></script>
</head>
<body>
<div id="app">
<p>这是一段文字</p>
<template v-for = "n in 3">
<p>template文本{{n}}</p>
<span>这是span</span>
<a href="#">这是一个链接</a>
</template>
</div>
<script>
var vm = new Vue({
el:"#app"
})
</script>
<div id="app1">
<input type="button" value = "按钮" v-on:click = "showInfo">
<input type="button" value = "又一个按钮" @click = "showAgain">
<input type="button" value = "第三个按钮" @click = "count++">
<p>{{count}}</p>
<input type="button" value = "获取对象" @click = "event">
<input type="button" value = "再获取一次对象" @click = "event1($event)">
<input type="button" value = "对象" @click = "event2()"> <!-- 这里获取不到event对象 -->
</div>
<script>
var vm1= new Vue({
el:"#app1",
data:{
count : 1
},
methods:{
showInfo:function(){
console.log("我被点击了");
},
showAgain:function(){
console.log("我又被点击了");
},
event:function(event){
console.log(event);
},
event1:function(event){
console.log(event);
},
event2:function(event){
console.log(event);
}
}
})
</script>
</body>
</html>