[教程]揭秘Vue.js实战技巧：从入门到精通的10个经典实例

发布于 2025-07-06 09:14:08

110

1. Vue基础实例：数据绑定与条件渲染在Vue中，数据绑定和条件渲染是两个核心概念。以下是一个简单的例子，展示如何使用这些特性： Vue基础实例 {{ message }} 现在你看到我了 ne...

1. Vue基础实例：数据绑定与条件渲染

在Vue中，数据绑定和条件渲染是两个核心概念。以下是一个简单的例子，展示如何使用这些特性：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue基础实例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
<div id="app"> <h1>{{ message }}</h1> <p v-if="seen">现在你看到我了</p>
</div>
<script>
new Vue({ el: '#app', data: { message: 'Hello Vue!', seen: true }
})
</script>
</body>
</html>

2. 列表渲染

Vue的列表渲染功能非常强大，可以轻松实现复杂的数据展示。以下是一个使用v-for指令的例子：

<div id="app"> <ul> <li v-for="item in items">{{ item.text }}</li> </ul>
</div>
<script>
new Vue({ el: '#app', data: { items: [ { text: '学习Vue.js' }, { text: '编写组件' }, { text: '构建应用' } ] }
})
</script>

3. 表单输入绑定

Vue的表单输入绑定功能可以让开发者轻松实现数据的双向绑定。以下是一个简单的例子：

<div id="app"> <input v-model="message"> <p>输入的内容是：{{ message }}</p>
</div>
<script>
new Vue({ el: '#app', data: { message: 'Hello Vue!' }
})
</script>

4. 动态组件

Vue允许你动态地切换组件。以下是一个使用<component>标签和is属性来实现动态组件的例子：

<div id="app"> <button @click="currentComponent = 'child-component-a'">组件A</button> <button @click="currentComponent = 'child-component-b'">组件B</button> <component :is="currentComponent"></component>
</div>
<script>
Vue.component('child-component-a', { template: '<div>这是组件A</div>'
});
Vue.component('child-component-b', { template: '<div>这是组件B</div>'
});
new Vue({ el: '#app', data: { currentComponent: 'child-component-a' }
})
</script>

5. 父子组件通信

在Vue中，父子组件之间的通信可以通过props和events来实现。以下是一个简单的例子：

<!-- 父组件 -->
<div id="app"> <parent-component :my-message="message"></parent-component>
</div>
<!-- 子组件 -->
<template> <div>接收到的消息是：{{ myMessage }}</div>
</template>
<script>
export default { props: ['myMessage']
}
</script>

6. 插槽

插槽是Vue组件中常用的功能，可以让开发者更灵活地复用组件。以下是一个使用插槽的例子：

<template> <div> <header> <slot name="header">默认头部</slot> </header> <main> <slot>默认内容</slot> </main> <footer> <slot name="footer">默认尾部</slot> </footer> </div>
</template>

7. 状态管理

Vue的状态管理可以使用Vuex来实现。以下是一个简单的Vuex实例：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++; } }, actions: { increment(context) { context.commit('increment'); } }
});

8. 路由管理

Vue的路由管理可以使用vue-router来实现。以下是一个简单的vue-router实例：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
Vue.use(Router);
export default new Router({ routes: [ { path: '/', component: Home }, { path: '/about', component: About } ]
});

9. 模块化

Vue的模块化可以帮助开发者更好地组织代码。以下是一个使用模块化的例子：

// Home.vue
<template> <div>Home</div>
</template>
<script>
export default { name: 'Home'
}
</script>

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';
Vue.use(Router);
export default new Router({ routes: [ { path: '/', component: Home }, { path: '/about', component: About } ]
});

10. 持续集成与部署

使用CI/CD（持续集成和持续部署）可以自动化项目的构建、测试和部署过程。以下是一个简单的CI/CD例子：

# .github/workflows/ci.yml
name: Vue.js CI/CD
on: [push]
jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Install Dependencies run: npm install - name: Build Project run: npm run build - name: Deploy to Production run: npm run deploy

以上是从Vue入门到精通的10个经典实例。通过学习和实践这些实例，你可以更好地掌握Vue.js的实战技巧。