当前位置：首页 > VUE

实现简单的vue

2026-01-18 07:33:19VUE

创建Vue项目

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

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
npm run serve

基础组件示例

在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/main.js文件：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

组件注册与使用

在src/App.vue中使用组件：

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

数据绑定示例

实现双向数据绑定：

<template>
  <div>
    <input v-model="inputText" placeholder="输入内容">
    <p>实时显示: {{ inputText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: ''
    }
  }
}
</script>

条件渲染

使用v-if和v-show：

<template>
  <div>
    <button @click="show = !show">切换显示</button>
    <p v-if="show">使用v-if控制</p>
    <p v-show="show">使用v-show控制</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

列表渲染

使用v-for渲染数组：

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

<script>
export default {
  data() {
    return {
      items: [
        { name: '商品A', price: 100 },
        { name: '商品B', price: 200 }
      ]
    }
  }
}
</script>

生命周期钩子

在组件中添加生命周期方法：

实现简单的vue

export default {
  created() {
    console.log('组件创建完成')
  },
  mounted() {
    console.log('DOM挂载完成')
  },
  beforeDestroy() {
    console.log('组件销毁前')
  }
}