Vue.js实例开发-创建页面用户可以在输入框中输入文本，点击按钮后，页面上会显示一个欢迎消息
目标
将创建一个简单的 Vue.js 应用，它包含一个输入框和一个按钮。用户可以在输入框中输入文本，点击按钮后，页面上会显示一个欢迎消息，包含用户输入的名字。
准备工作
引入 Vue.js：
可以通过 CDN 引入 Vue.js，或者通过 npm/yarn 安装 Vue.js（对于大型项目推荐使用 Vue CLI）。
通过 CDN 引入 Vue.js
在 HTML 文件中添加以下代码来引入 Vue.js：
<!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>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<!-- 模板部分 -->
<input v-model="name" placeholder="输入你的名字">
<button @click="greet">点击问候</button>
<p>{{ message }}</p>
</div>
<script>
// Vue 实例
new Vue({
el: '#app',
data: {
name: '',
message: ''
},
methods: {
greet() {
this.message = `欢迎, ${this.name}!`;
}
}
});
</script>
</body>
</html>
代码说明
HTML 部分：
创建了一个 <div> 元素，并给它一个 id 为 app，这是 Vue 实例将要挂载的元素。
在这个 <div> 内部，有一个输入框、一个按钮和一个段落元素。
输入框使用了 v-model 指令来双向绑定数据，这意味着当输入框的内容改变时，name 数据属性也会相应地更新。
按钮使用了 @click 指令来监听点击事件，当按钮被点击时，会调用 greet 方法。
段落元素使用了双花括号语法 {{ message }} 来显示 message 数据属性的值。
JavaScript 部分：
创建了一个新的 Vue 实例，并通过 el 属性指定了它要挂载的元素（#app）。
在 data 对象中，定义了两个数据属性：name 和 message。
在 methods 对象中，定义了一个 greet 方法，它会在按钮被点击时执行，并更新 message 数据属性的值。
运行应用
将上述 HTML 文件保存为 index.html，然后在浏览器中打开它。会看到一个输入框、一个按钮和一个空的段落。在输入框中输入你的名字，并点击按钮，段落中应该会显示欢迎消息。
这个实例练习了 Vue.js 的核心功能：数据绑定、事件处理和响应式更新。