Vue入门篇
1. Vue简介
Vue.js 是一个渐进式JavaScript框架，用于构建用户界面和单页应用程序。它易于上手，同时也是一个非常灵活的框架，可以用于构建复杂的应用程序。
2. Vue环境搭建
在开始使用Vue之前，需要搭建一个开发环境。通常，我们会使用Vue CLI来创建一个项目。
vue create my-project
3. Vue基础语法
Vue的基础语法包括数据绑定、条件渲染、列表渲染等。
- 数据绑定：使用
v-bind或简写为:来实现数据绑定。 - 条件渲染：使用
v-if、v-else-if和v-else来实现条件渲染。 - 列表渲染：使用
v-for来遍历数组或对象。
Vue实战案例篇
4. 案例：待办事项列表
这个案例将展示如何使用Vue创建一个简单的待办事项列表。
<template>
<div>
<input v-model="newTodo" @keyup.enter="addTodo" />
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo }}
<button @click="removeTodo(index)">X</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
newTodo: '',
todos: []
};
},
methods: {
addTodo() {
this.todos.push(this.newTodo);
this.newTodo = '';
},
removeTodo(index) {
this.todos.splice(index, 1);
}
}
};
</script>
5. 案例：计数器
计数器是一个简单的Vue组件，用于展示如何使用生命周期钩子。
<template>
<div>
<h1>{{ count }}</h1>
<button @click="increment">增加</button>
<button @click="decrement">减少</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
},
decrement() {
this.count--;
}
},
mounted() {
console.log('组件已挂载');
},
beforeDestroy() {
console.log('组件即将销毁');
}
};
</script>
6. 案例：表单验证
表单验证是前端开发中的一个常见需求。Vue提供了表单验证的方法。
<template>
<div>
<form @submit.prevent="submitForm">
<input v-model="username" />
<span v-if="username.length < 5">用户名长度至少为5</span>
<button type="submit">提交</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: ''
};
},
methods: {
submitForm() {
if (this.username.length >= 5) {
alert('提交成功');
} else {
alert('用户名长度至少为5');
}
}
}
};
</script>
7. 案例：组件通信
Vue中的组件通信是一个重要的概念。以下是父组件向子组件传递数据的示例。
<!-- 父组件 -->
<template>
<div>
<child-component :message="message"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
message: 'Hello from parent'
};
}
};
</script>
<!-- 子组件 -->
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: ['message']
};
</script>
8. 案例：插槽的使用
插槽是Vue中用于组件内容组合的一种机制。
<!-- 父组件 -->
<template>
<div>
<custom-component>
<template v-slot:header>
<h1>Header</h1>
</template>
<p>Content</p>
<template v-slot:footer>
<p>Footer</p>
</template>
</custom-component>
</div>
</template>
<script>
import CustomComponent from './CustomComponent.vue';
export default {
components: {
CustomComponent
}
};
</script>
<!-- 子组件 -->
<template>
<div>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
</template>
9. 案例：Vuex的使用
Vuex是Vue的状态管理模式和库。以下是一个简单的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({ commit }) {
commit('increment');
}
}
});
<template>
<div>
<h1>{{ count }}</h1>
<button @click="increment">增加</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
computed: {
...mapState(['count'])
},
methods: {
...mapActions(['increment'])
}
};
</script>
10. 案例：Vue Router的使用
Vue Router是Vue.js的官方路由管理器。以下是一个简单的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: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
});
<template>
<div>
<h1>Vue Router 示例</h1>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
总结
通过以上10个经典案例，相信你已经对Vue前端开发有了更深入的了解。这些案例涵盖了Vue的基础语法、组件通信、插槽、Vuex和Vue Router等知识点。希望这些案例能够帮助你轻松掌握前端开发技巧。