实例
步骤 1: 创建 HTML 文件
首先，创建一个 HTML 文件，并设置基本的结构和 Vue 实例的挂载点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js 入门案例 - 消息板</title>
<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>消息板</h1>
<input type="text" v-model="message" placeholder="输入消息...">
<button @click="displayMessage">显示消息</button>
<p>{{ message }}</p>
</div>
<script>
// 接下来，我们将在这里编写 Vue 实例的代码
</script>
</body>
</html>
步骤 2: 初始化 Vue 实例
在 <script> 标签内，我们将创建 Vue 实例，并定义数据模型和方法：
new Vue({
el: '#app',
data: {
message: '' // 用于存储用户输入的消息
},
methods: {
displayMessage: function() {
alert(this.message); // 弹出消息框显示当前输入的消息
}
}
});
在这个 Vue 实例中，我们定义了两个主要的部分：
步骤 3: 使用 v-model 指令进行数据绑定
在 HTML 模板中，我们使用 v-model 指令将 input 元素的值绑定到 message 数据属性上，这样用户的输入将实时更新 message 的值。
<input type="text" v-model="message" placeholder="输入消息...">
步骤 4: 使用事件处理按钮点击
我们使用 @click 事件来处理按钮点击事件，当按钮被点击时，displayMessage 方法将被调用。
<button @click="displayMessage">显示消息</button>
步骤 5: 运行案例
保存 HTML 文件并在浏览器中打开它，你将看到一个简单的输入框和一个按钮。输入文本并点击“显示消息”按钮，一个包含你输入消息的警告框将弹出。
这个案例展示了 Vue.js 的基本功能，包括创建 Vue 实例、数据绑定、事件处理和方法调用。
