<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="div">
<p>es6新语法和vue传参</p>
<button @click='one'>我是vue</button>
<!-- @是 v-click:的语法糖就像:是 v-bink:的语法糖 当函数没有参数是不用写小括号-->
<button @click='two(123)'>早安 </button>
<!-- 当函数里面存在参数时要写括号-->
<button @click="three(123, $event)">午安</button>
<p>v-on修饰符的使用</p>
<div @click="div"> 点我一下<button @click.stop="four">我是一个按钮</button></div>
<!-- .stop可以处理时间冒泡,比如点击子元素时,父元素的点击事件就不会进行-->
<br>
<form>
<input type="text" value="今天也是元气满满的一天"> </form>
<br>
<input type="submit" @click.prevent="submit">
<!-- 阻止submit的默认事件,让submit只有打印没有提交-->
<br>
<input type="text" value="" @keyup.enter="keyup">
<!-- 监听键盘事件,.enter表示只有按下enter键盘时才会触发键盘事件-->
</form>
<br>
<button @click.once="once">点我一下</button>
<!-- .once只能监听到第一次点击的事件-->
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
const div =new Vue({
el:'#div',
data:{
},
methods:{
one(){
//es6中写函数不需要加function
console.log('我是vue');
},
two(a){
console.log('早安',a);
},
three(a,b) {
console.log('午安', a, b)
},
div(){
console.log('你点击了div')
},
four(){
console.log('你点击了按钮');
},
submit(){
console.log('提交')
},
keyup(){
console.log('你按了键盘')
},
once(){
console.log('被点击了')
}
}
})
</script>
v-on修饰符的使用
最新推荐文章于 2023-04-18 18:15:46 发布