<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<p> {{ message }} </p>
<p v-text="info"></p>
<p v-html="info"></p>
<p>{{ info }}</p>
<input type="button" @click="aa" value="按钮1">
<input type="button" @click="bb(100,$event)" value="按钮2">
<a href="https:\\www.baidu.com" @click.prevent="dd" rel="123"> 跳转到百度</a>
<div style="margin:10px;width: 100px;height: 100px;background-color: #dedede;" @click="ff">
<input type="button" @click.stop="gg" value="按钮3">
</div>
输入框: <input type="text" name="" id="" @keyup.esc="clearInput" @keyup.enter="submitAjax">
</div>
<script>
const app =new Vue ({
el:"#app",
data:{
message:"Hello Vue!",
info:"<h4 style='color:red;font-weight:bold;font-size:16px'> 欢迎大家学习vue </h4> ",
},
methods:{
aa(e){
// 点击按钮 修改按钮的属性和值
e.target.style.backgroundColor="red";
e.target.value=Math.random();
},
bb(a,e){
// 传参数a 点击按钮 修改按钮的属性 和值
e.target.style.backgroundColor="blue";
e.target.value=a+Math.random();
},
dd(e){
// 事件修饰符 如果不加 直接会跳转到百度 加了就不会跳转 @click.prevent="dd"
console.log(e.target.rel) //获取 rel属性的值
console.log(e.target.href) //获取 href 属性的值
console.log(e.target.text) //获取 text 属性的值
console.log("你点击了a标签")
},
ff(){
console.log("你点击了父div"+Math.random())
},
gg(){
//事件修饰符 如果不加 点击了按钮 就会触发了div的点击事件 加了就不会影响 @click.stop="gg"
console.log("你点击了子按钮"+Math.random());
},
clearInput(e){
// 按键修饰符 触发了 Esc 键 清除input输入框的值
e.target.value='';
console.log(' 按键修饰符 触发了 Esc 键 清除input输入框的值 ')
},
submitAjax(e){
// 按键修饰符 触发了 Enter 键 可以提交数据
e.target.value="数据正在提交到后台...."
console.log('按 Enter 键提交')
}
}
})
</script>
</body>
</html>