实现简单的vue

创建Vue项目

使用Vue CLI快速搭建项目框架，确保已安装Node.js和npm/yarn。运行以下命令创建新项目：

vue create my-vue-app

选择默认配置或手动配置（如Babel、Router等），完成后进入项目目录：

cd my-vue-app

编写基础组件

在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>
  <div id="app">
    <HelloWorld />
  </div>
</template>

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

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

运行开发服务器

启动开发服务器实时预览效果：

npm run serve

响应式数据绑定

Vue通过数据劫持实现响应式，当数据变化时自动更新DOM。在组件中声明data属性：

data() {
  return {
    counter: 0,
    isActive: true
  }
}

事件处理

使用v-on或@语法绑定事件：

<button @click="counter += 1">增加计数</button>
<p>当前计数: {{ counter }}</p>

条件渲染

通过v-if和v-show控制元素显示：

<div v-if="isActive">条件显示内容</div>
<div v-show="!isActive">另一种显示控制</div>

列表渲染

使用v-for渲染数组或对象：

<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ item.text }}
  </li>
</ul>

组件通信

父组件通过props传递数据：

<ChildComponent :title="parentTitle" />

子组件通过$emit触发事件：

this.$emit('update', newValue)

生命周期钩子

常用钩子函数示例：

created() {
  console.log('组件实例已创建')
},
mounted() {
  console.log('DOM挂载完成')
}