<!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>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
const app = Vue.createApp({
data(){
return {
message: '<strong>Hello</strong>',
title: '我是标题',
disabled: true,
show: false,
name: "title1",
event : 'mouseenter' // click
}
},
methods:{
handleClick(){
alert("handleClick");
},
handEvent(e){
e.preventDefault(); // 阻止默认行为
},
handEvents(){
console.log('MC')
}
},
// v-html 解析HTML标签 v-bind: 简写(:) 绑定HTML属性 v-once数据不改变(能提高性能) v-if 判断标签
// :[xxx] 动态属性名 :和@都可以用
// @click.prevent="方法名" 阻止默认行为
template: `
<div v-html="message"></div>
<button v-bind:title="title">怎家</button>
<input v-bind:disabled="disabled" />
<input :disabled="disabled" />
<div v-once>{{title}}</div>
<div v-if="show">{{message}}</div>
<div v-on:click="handleClick">{{message}}</div>
<div :[name]="title">{{title}}</div>
<div @[event]="handleClick">{{title}}</div>
<a href="https://baidu.com" @click="handEvent">百度</a><br /><hr />
<a href="https://baidu.com" @click.prevent="handEvents">百度</a>
`
})
var vm = app.mount("#root");
</script>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
