第一天：Vue简介与环境搭建
什么是Vue？
Vue.js 是一个渐进式JavaScript框架，用于构建用户界面和单页应用程序。它易于上手，同时提供了核心库的响应式和组件系统，可以方便地与第三方库或已有项目集成。
环境搭建
- 安装Node.js和npm：Vue依赖于Node.js和npm，因此首先需要安装它们。
- 创建Vue项目：使用Vue CLI（Vue脚手架工具）可以快速搭建Vue项目。
npm install -g @vue/cli vue create my-vue-project - 启动项目：进入项目目录，运行以下命令启动开发服务器。
cd my-vue-project npm run serve
第二天：Vue基础语法
数据绑定
Vue使用v-bind指令实现数据绑定，将数据动态渲染到视图上。
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
条件渲染
Vue提供了v-if、v-else-if和v-else指令来实现条件渲染。
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>
列表渲染
Vue使用v-for指令实现列表渲染。
<div id="app">
<ul>
<li v-for="item in items">{{ item.message }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
items: [
{ message: 'Vue.js' },
{ message: 'JavaScript' },
{ message: 'HTML' }
]
}
})
</script>
第三天：组件与指令
组件
Vue组件是可复用的Vue实例，它包含自己的模板、数据、逻辑等。
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
</template>
<script>
export default {
data() {
return {
title: '组件示例',
content: '这是一个组件'
}
}
}
</script>
指令
Vue指令是带有v-前缀的特殊属性，用于绑定数据到DOM元素。
<div id="app">
<p v-text="message"></p>
<p v-html="htmlContent"></p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '文本内容',
htmlContent: '<strong>HTML内容</strong>'
}
})
</script>
第四天：事件处理与表单输入绑定
事件处理
Vue使用v-on指令（简写为@）来监听DOM事件。
<div id="app">
<button @click="reverseMessage">反转消息</button>
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('');
}
}
})
</script>
表单输入绑定
Vue提供了v-model指令来实现数据双向绑定。
<div id="app">
<input v-model="message">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
第五天：计算属性与侦听器
计算属性
计算属性是基于它们的依赖进行缓存的，只有当依赖发生变化时才会重新计算。
<div id="app">
<p>Original message: {{ message }}</p>
<p>Computed reversed message: {{ reversedMessage }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('');
}
}
})
</script>
侦听器
侦听器允许我们执行异步操作，例如监听数据变化并执行一些逻辑。
<div id="app">
<input v-model="newTodo">
<button @click="addTodo">Add</button>
<ul>
<li v-for="(todo, index) in todos">
{{ todo }}
<button @click="removeTodo(index)">Remove</button>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
newTodo: '',
todos: []
},
methods: {
addTodo: function() {
this.todos.push(this.newTodo);
this.newTodo = '';
},
removeTodo: function(index) {
this.todos.splice(index, 1);
}
}
})
</script>
第六天：过渡效果与动画
Vue提供了内置的过渡效果，允许我们为元素或组件的进入/离开过渡添加动画。
<template>
<div id="app">
<button @click="show = !show">Toggle</button>
<transition name="fade">
<p v-if="show">Hello Vue!</p>
</transition>
</div>
</template>
<script>
new Vue({
el: '#app',
data: {
show: true
}
})
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
第七天：路由与状态管理
路由
Vue Router是Vue的官方路由管理器，用于构建单页应用程序。
<div id="app">
<h1>Vue Router Example</h1>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view></router-view>
</div>
<script>
import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
Vue.use(Router)
const router = new Router({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})
new Vue({
router
}).$mount('#app')
</script>
状态管理
Vuex是Vue的状态管理模式和库，用于在多个组件之间共享状态。
<div id="app">
<h1> Vuex Example </h1>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
<script>
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
}
})
new Vue({
el: '#app',
data() {
return {
count: this.$store.state.count
}
},
methods: {
increment() {
this.$store.commit('increment')
}
},
store
})
</script>
通过以上七天学习，相信你已经掌握了Vue编程的基础技能。当然，这只是Vue编程的冰山一角，后续还有更多高级功能和最佳实践等待你去探索。祝你学习愉快！