Vue快速上手笔记
<template>
<div id="app">
<h1>{{ message }}</h1>
<input v-model="message" placeholder="edit me">
<p>Message is: {{ 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
值的段落。脚本部分定义了一个名为App
的组件,并在其data
函数中初始化了一个message
字符串。样式部分简单地设置了应用程序中的文本对齐。这个例子是学习Vue基础的好起点。
评论已关闭