html
<div id="event-handling">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转 Message</button>
</div>
css
.demo {
font-family: sans-serif;
border: 1px solid #eee;
border-radius: 2px;
padding: 20px 30px;
margin-top: 1em;
margin-bottom: 40px;
user-select: none;
overflow-x: auto;
}
js
const EventHandlingApp = {
data() {
return {
message: 'Hello Vue.js!'
}
},
methods: {
reverseMessage() {
this.message = this.message
.split('')
.reverse()
.join('')
}
}
}
Vue.createApp(EventHandlingApp).mount('#event-handling')
是怎么回事呢，codepen不能用吧
就算codepen能用，又怎么搬到vscode里，或者说浏览器里能显示呢？
2022年4月6日
修改
这样可以。
<!DOCTYPE html>
<html>
<body>
<div id="event-handling">
<p>{{ message }}</p>
<button @click="reverseMessage">反转 Message</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const EventHandlingApp = {
data() {
return {
message: 'Hello Vue.js!'
}
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('')
}
}
}
Vue.createApp(EventHandlingApp).mount('#event-handling')
</script>
<style>
.demo {
font-family: sans-serif;
border: 1px solid #eee;
border-radius: 2px;
padding: 20px 30px;
margin-top: 1em;
margin-bottom: 40px;
user-select: none;
overflow-x: auto;
}
</style>
</body>
</html>
记住，不需要这段代码
const app = Vue.createdApp({});
大概是因为有了
const EventHandlingApp = {}
Vue.createApp(EventHandlingApp)
