模板动态参数
v-on简写
<h2 v-on:click="hanldClick">{{message}}</h2>
<h2 @click="hanldClick">{{message}}</h2>
v-bind简写
<h2 v-bind:title="message">{{message}}</h2>
<h2 :title="message">{{message}}</h2>
动态属性
事件动态绑定
[event]
[name]
return{
message:'jspang.com' ,
name:'title',
event:'click'
}
template:'<h2 @[event]="hanldClick" :[name]="message">{{message}}</h2>'
阻止默认事件
prevent就是阻止默认事件的修饰符,可以可以阻止原来的默认事件(例如submit),直接响应对应事件的内容
hanldeButton(){
alert('jspang.com')
}
<form
action="https://jspang.com"
@click.prevent="hanldeButton">
<button type="submit">默认提交</button>
</form>
Demo10.html
<!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">
<title>Hello World</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello world',
event: 'click',
attrName: 'title'
}
},
updated() {
console.log(document.getElementById('apph4').title);
},
methods: {
messageBtnClick() {
this.message = this.message == 'Hello world' ? 'Good Bye' : 'Hello world';
},
formClick() {
alert('Form Click!');
}
},
template: '<h1>{{message + " gogogo"}}</h1>' +
'<button @[event]="messageBtnClick">文字按钮</button>' +
'<h2 v-html="message" :[attrName]="message" id="apph4"></h2>' +
'<form action="http://www.baidu.com" @click.prevent="formClick"><button type="submit">提交</button></form>'
});
const vm = app.mount("#app");
console.log(document.getElementById('apph4').title);
</script>
</html>