Vue入门简介(带你打开Vue的大门)
<template>
<div id="app">
<h1>{{ message }}</h1>
<input v-model="message" placeholder="编辑我">
<p>输入的内容是: {{ message }}</p>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
message: 'Hello Vue!'
}
}
}
</script>
<style>
#app {
text-align: center;
}
</style>
这个Vue示例代码展示了如何创建一个基本的Vue应用程序。它包括了模板、脚本和样式三个主要部分。模板中包含了一个绑定到数据的message
,以及一个双向绑定的输入框。脚本部分定义了组件并设置了数据属性message
的初始值。样式部分简单地设置了应用程序中的文本居中和字体样式。这个例子是Vue学习的基础,它演示了Vue最核心的功能之一:数据绑定。
评论已关闭