|
在上篇 教了Hello World的寫法，是不是非常簡單好懂！這篇我們會來開發你第一個用Vue3 寫的Real-time即時更新小功能！你準備好了嗎？
v-model 是 Vue 裡面實現雙向綁定的一個功能，也就是說當你有兩個東西要連動的時候就可以使用 v-model 來處理。所以本篇我們就來寫一個進階的 v-model 練習吧！
第一步，先把上一篇的結果貼上
我們直接用上一篇的code 來做調整即可：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0 Hello World</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello World!')
return {
message
}
}
}).mount('#app')
</script>
</body>
</html>第二步，加上v-model
接下來我們要加上 v-model 的部分，為了做明確的凸顯，我們在 message 外側加上 h1 標籤來凸顯 message內容。
接著，在 message 下方加上文字輸入框：
<input type="text" v-model="message">你可以看到在這裡多了一個沒看過的屬性值 v-model，裡面綁定的就是我們顯示內容的 message 區塊。
ok！打完收工！
對，你真的做完了，不信你在文字輸入框打字看看，是不是隨著你打的字不同， message 顯現的內容就不同！有沒有覺得很神奇！
以下就是完整的code：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0 Hello World</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<input type="text" v-model="message">
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello World!')
return {
message
}
}
}).mount('#app')
</script>
</body>
</html>