实现简单的vue

创建 Vue 项目

使用 Vue CLI 快速初始化项目，确保已安装 Node.js 和 npm/yarn。
运行命令：

npm init vue@latest my-vue-app

进入项目目录并安装依赖：

cd my-vue-app
npm install

编写组件

在 src/components 目录下创建 HelloWorld.vue 文件，内容如下：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">点击更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!"
    };
  },
  methods: {
    changeMessage() {
      this.message = "消息已更新！";
    }
  }
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

挂载组件

修改 src/App.vue，引入并注册组件：

<template>
  <HelloWorld />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  components: {
    HelloWorld
  }
};
</script>

运行项目

启动开发服务器：

npm run dev

访问 http://localhost:5173 查看效果。点击按钮可触发数据更新。

核心概念说明

• 模板语法：{{ }} 实现数据绑定，@click 绑定事件。
• 响应式数据：data() 返回的对象属性会被 Vue 自动追踪变化。
• 单文件组件：.vue 文件整合模板、逻辑和样式。

可选扩展

• 添加 v-if 或 v-for 指令实现条件渲染和列表渲染。
• 使用 props 实现父子组件通信。
• 通过 Vue Router 添加页面路由功能。