vue 入门 demo

Vue.js入门示例通常涉及创建一个简单的单页应用，这里有一个基础的Vue组件Hello World的例子：

首先，你需要安装Vue CLI（命令行工具）来创建新的项目。如果你还没有安装，可以这样做：

npm install -g @vue/cli

然后创建一个新的Vue应用：

vue create my-vue-app

接下来，进入项目目录并启动服务：

cd my-vue-app
npm run serve

现在打开浏览器访问`http://localhost:8080`，你会看到一个空白页面。我们来编写一个基本的Vue组件：

在`src/App.vue`文件中添加以下内容：

<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <button v-on:click="sayHello">点击我</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '你好，Vue世界！'
    };
  },
  methods: {
    sayHello() {
      this.message = 'Hello Vue!';
    }
  }
};
</script>

<style>
#app {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

在这个例子中，我们定义了一个数据属性`message`，并在模板中显示。当用户点击按钮时，`sayHello`方法会被触发，更新`message`的值。

这是最基本的Vue入门教程中的步骤，通过实践，你可以学习到更多关于Vue指令如`v-on:click`、计算属性、组件化等知识。