Web前端入门 - HTML JavaScript Vue
warning:
这篇文章距离上次修改已过188天，其中的内容可能已经有所变动。
<!DOCTYPE html>
<html>
<head>
<title>Vue 示例</title>
<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.5/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 绑定用户输入到 message 变量 -->
<input v-model="message" placeholder="编辑我">
<!-- 显示 message 变量的内容 -->
<p>{{ message }}</p>
</div>
<script>
// 创建 Vue 实例
new Vue({
el: '#app',
data: {
// 变量 message 初始值设为空字符串
message: ''
}
});
</script>
</body>
</html>这段代码展示了如何使用Vue.js创建一个简单的应用，其中包含了一个数据绑定的输入框和显示区域。当用户在输入框中输入文本时，这个文本会实时显示在页面上，而无需写任何复杂的事件监听代码。这是Web前端开发中Vue.js框架的一个基本示例。
评论已关闭