1.v-on(可用@代替)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body >
<div id = "app">
<h1>我是{{name}} ,hello world! {{num}}人为我点赞</h1>
<input type = 'text' @click='func' v-model='num'>
<button @click="num++" >点赞</button>
<button @click="cance()" >取消</button>
<div>
<a v-bind:href="link" @click.stop>百度</a>
</div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let ap = new Vue({
el:"#app",//绑定元素
data:{//封装数据
name:'李白',
num:1
},
methods:{//封装方法
func(){
this.num++;
},
cance(){
// alert('取消了');
if(this.num > 0){
this.num--;
}
}
}
})
</script>
</body>
</html>
2.事件修饰符
3.按键修饰符
全部按键别名如下
例如按下下键num就减二
按下alt+c
按下ctrl+鼠标左键
4.v-for
:key 用来做唯一标识符,区分不同数据,提高效率,当不确定时可以用index
5.v-if