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 查看效果。
