vue实现小demo

Vue 实现小 Demo 的步骤

环境准备

确保已安装 Node.js 和 npm/yarn。通过以下命令安装 Vue CLI：

npm install -g @vue/cli

创建项目

使用 Vue CLI 快速创建项目：

vue create vue-demo
cd vue-demo
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>

数据绑定示例

在 App.vue 中实现双向绑定：

<template>
  <div>
    <input v-model="inputText" placeholder="输入内容" />
    <p>输入的内容是：{{ inputText }}</p>
  </div>
</template>

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

条件渲染示例

在组件中添加条件判断：

<template>
  <div>
    <p v-if="showText">这段文字会根据条件显示</p>
    <button @click="toggleText">切换显示</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showText: true
    }
  },
  methods: {
    toggleText() {
      this.showText = !this.showText
    }
  }
}
</script>

列表渲染示例

实现动态列表渲染：

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

<script>
export default {
  data() {
    return {
      items: ['项目1', '项目2', '项目3']
    }
  }
}
</script>

事件处理示例

添加自定义事件：

<template>
  <div>
    <button @click="handleClick">触发事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('按钮被点击了！')
    }
  }
}
</script>

样式绑定示例

动态绑定样式：

<template>
  <div :class="{ active: isActive }">样式会根据状态变化</div>
  <button @click="toggleClass">切换样式</button>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    toggleClass() {
      this.isActive = !this.isActive
    }
  }
}
</script>

<style>
.active {
  color: red;
  font-weight: bold;
}
</style>

生命周期示例

在组件中添加生命周期钩子：

<script>
export default {
  created() {
    console.log('组件已创建')
  },
  mounted() {
    console.log('组件已挂载')
  }
}
</script>

运行项目

启动开发服务器：

npm run serve

访问 http://localhost:8080 查看效果。