Vue 2 完全教程

第一章：Vue 2 基础概念

1.1 Vue 2 是什么？

Vue 2 是一个用于构建用户界面的渐进式JavaScript框架。它采用MVVM模式，通过数据驱动视图更新。

练习 1.1：基本计数器应用

创建一个简单的计数器应用。

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Vue 2 计数器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
<body>
    <div id="app">
        <h2>计数器: {{ count }}</h2>
        <p>双倍计数: {{ doubleCount }}</p>
        <button @click="increment">增加</button>
        <button @click="decrement">减少</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                count: 0
            },
            computed: {
                doubleCount() {
                    return this.count * 2
                }
            },
            methods: {
                increment() {
                    this.count++
                },
                decrement() {
                    this.count--
                }
            }
        })
    </script>
</body>
</html>
                

第二章：核心概念

2.1 数据绑定

Vue 2 提供了多种数据绑定方式。

练习 2.1：数据绑定示例

展示不同的数据绑定方式。

数据绑定示例

<div id="app">
    <!-- 文本插值 -->
    <p>{{ message }}</p>
    
    <!-- v-bind 绑定属性 -->
    <div v-bind:class="{ active: isActive }"></div>
    
    <!-- v-model 双向绑定 -->
    <input v-model="message">
    
    <!-- v-on 事件绑定 -->
    <button v-on:click="handleClick">点击</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            isActive: true
        },
        methods: {
            handleClick() {
                alert('按钮被点击了！')
            }
        }
    })
</script>
                

2.2 计算属性和侦听器

计算属性和侦听器用于处理复杂的数据逻辑。

练习 2.2：计算属性和侦听器

创建一个购物车计算示例。

计算属性和侦听器示例

<div id="app">
    <div v-for="item in cartItems" :key="item.id">
        {{ item.name }} - {{ item.price }}元
        <button @click="removeItem(item)">删除</button>
    </div>
    <p>总价: {{ totalPrice }}元</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cartItems: [
                { id: 1, name: '商品1', price: 100 },
                { id: 2, name: '商品2', price: 200 }
            ]
        },
        computed: {
            totalPrice() {
                return this.cartItems.reduce((total, item) => total + item.price, 0)
            }
        },
        watch: {
            cartItems: {
                handler(newVal) {
                    console.log('购物车内容变化:', newVal)
                },
                deep: true
            }
        },
        methods: {
            removeItem(item) {
                this.cartItems = this.cartItems.filter(i => i.id !== item.id)
            }
        }
    })
</script>
                

2.3 组件系统

Vue 2 的组件系统允许我们构建大型应用。

练习 2.3：组件开发

创建一个自定义组件。

组件示例

// 全局注册组件
Vue.component('todo-item', {
    props: ['todo'],
    template: `
        <li>
            {{ todo.text }}
            <button @click="$emit('remove', todo.id)">删除</button>
        </li>
    `
})

new Vue({
    el: '#app',
    data: {
        todos: [
            { id: 1, text: '学习 Vue' },
            { id: 2, text: '学习 JavaScript' }
        ]
    },
    methods: {
        removeTodo(id) {
            this.todos = this.todos.filter(todo => todo.id !== id)
        }
    }
})
                

第三章：生命周期

3.1 生命周期钩子

Vue 2 提供了多个生命周期钩子函数。

练习 3.1：生命周期示例

展示生命周期钩子的使用。

生命周期示例

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    },
    beforeCreate() {
        console.log('beforeCreate')
    },
    created() {
        console.log('created')
    },
    beforeMount() {
        console.log('beforeMount')
    },
    mounted() {
        console.log('mounted')
    },
    beforeUpdate() {
        console.log('beforeUpdate')
    },
    updated() {
        console.log('updated')
    },
    beforeDestroy() {
        console.log('beforeDestroy')
    },
    destroyed() {
        console.log('destroyed')
    }
})
                

第四章：路由和状态管理

4.1 Vue Router

Vue Router 是 Vue 2 的官方路由管理器。

练习 4.1：路由配置

配置基本路由。

路由配置示例

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About }
]

const router = new VueRouter({
    routes
})

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')
                

4.2 Vuex

Vuex 是 Vue 2 的状态管理模式。

练习 4.2：Vuex 状态管理

配置 Vuex store。

Vuex 配置示例

// store/index.js
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: {
        incrementAsync({ commit }) {
            setTimeout(() => {
                commit('increment')
            }, 1000)
        }
    },
    getters: {
        doubleCount: state => state.count * 2
    }
})
                

第五章：最佳实践

5.1 组件通信

Vue 2 提供了多种组件通信方式。

练习 5.1：组件通信示例

展示不同的组件通信方式。

组件通信示例

// 父组件
Vue.component('parent-component', {
    template: `
        <div>
            <child-component 
                :message="message"
                @update="handleUpdate"
            ></child-component>
        </div>
    `,
    data() {
        return {
            message: 'Hello from parent'
        }
    },
    methods: {
        handleUpdate(newMessage) {
            this.message = newMessage
        }
    }
})

// 子组件
Vue.component('child-component', {
    props: ['message'],
    template: `
        <div>
            <p>{{ message }}</p>
            <button @click="updateMessage">更新消息</button>
        </div>
    `,
    methods: {
        updateMessage() {
            this.$emit('update', 'New message from child')
        }
    }
})
                

5.2 性能优化

Vue 2 的性能优化技巧。

性能优化示例

// 1. 使用 v-once 指令
<div v-once>{{ staticContent }}</div>

// 2. 使用计算属性缓存结果
computed: {
    filteredItems() {
        return this.items.filter(item => item.active)
    }
}

// 3. 使用 v-show 代替 v-if（频繁切换时）
<div v-show="isVisible">内容</div>

// 4. 使用 key 属性优化列表渲染
<div v-for="item in items" :key="item.id">
    {{ item.name }}
</div>
            

第六章：常见问题解答

6.1 常见错误

列举并解决使用 Vue 2 时常见的错误。

常见错误及解决方案

// 错误1：直接修改数组或对象
// ❌ 错误做法
this.items[0] = newItem
this.obj.newKey = 'value'

// ✅ 正确做法
Vue.set(this.items, 0, newItem)
Vue.set(this.obj, 'newKey', 'value')
// 或
this.items = [...this.items]
this.obj = { ...this.obj, newKey: 'value' }

// 错误2：在 created 钩子中访问 DOM
// ❌ 错误做法
created() {
    document.getElementById('app').style.color = 'red'
}

// ✅ 正确做法
mounted() {
    document.getElementById('app').style.color = 'red'
}

// 错误3：忘记在组件中声明 props
// ❌ 错误做法
props: ['message'] // 没有类型检查

// ✅ 正确做法
props: {
    message: {
        type: String,
        required: true,
        default: ''
    }
}
            

6.2 调试技巧

介绍 Vue 2 的调试工具和技巧。

调试技巧示例

// 1. 使用 Vue Devtools
// 安装 Vue Devtools 浏览器扩展

// 2. 在组件中添加调试信息
mounted() {
    console.log('组件数据:', this.$data)
    console.log('组件属性:', this.$props)
}

// 3. 使用 Vue.config 配置
Vue.config.devtools = true
Vue.config.productionTip = false
Vue.config.errorHandler = (err, vm, info) => {
    console.error('Vue 错误:', err)
    console.error('错误信息:', info)
}
            