首页手记 Vue2入门教程：轻松掌握前端开发基础

Vue2入门教程：轻松掌握前端开发基础

标签：

Vue.js

概述

Vue2是一个用于构建用户界面的渐进式框架，它提供了丰富的功能和强大的性能优化能力。本文详细介绍了Vue2的安装方法，包括使用CDN、Vue CLI和npm等多种方式。此外，还涵盖了Vue2的基本语法、组件化开发、路由与状态管理以及实战项目案例。最后，文章提供了调试技巧和项目打包部署的指导。

Vue2简介与安装

什么是Vue2

Vue.js 是一个用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可灵活增量地融入项目。Vue 适合用来开发单页面应用（SPA），可以用于大型项目，也可以用于小型项目。Vue 的核心库只关注视图层，但是通过结合各种库/工具，Vue 可以实现复杂的前端应用。Vue 2 版本是 Vue.js 的一个稳定版本，它提供了丰富的功能和强大的性能优化能力。Vue 2 的生命周期比 Vue 3 略长，但在新项目中，推荐使用 Vue 3。

安装Vue2

Vue 2 可以通过多种方式安装，包括使用 CDN、基于 Node.js 的 Vue CLI 来生成项目，以及使用 npm 或 yarn 来安装 Vue。

使用CDN

使用 CDN 是一种快速上手的方法，但不适合生产环境。开发者可以在 HTML 文件中直接引入 Vue 的 CDN 链接。

<!DOCTYPE html>
<html>
<head>
    <title>Vue2入门教程</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
    </script>
</body>
</html>

使用Vue CLI或npm

使用 Vue CLI 或 npm 是在生产环境中推荐的方式。首先，确保已经安装了 Node.js 和 npm。然后执行以下命令创建一个新的 Vue 项目：

npm install -g @vue/cli
vue create my-vue-project
cd my-vue-project
npm run serve

这将创建一个包含所有 Vue 开发工具的基础项目结构。npm run serve 命令会启动开发服务器，将你的 Vue 应用程序运行在浏览器上。

创建第一个Vue2项目

创建一个基本的 Vue 项目，可以使用 Vue CLI 来快速搭建。在你已经安装好 Vue CLI 的环境中，执行以下命令：

vue create my-vue-project
cd my-vue-project
npm run serve

CLI 会引导你选择配置选项，包括框架版本、预设配置等。完成后，你会看到新的项目文件夹 my-vue-project，里面包含了以下基本结构：

my-vue-project/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── package.json
└── README.md

public/index.html 是应用的初始 HTML 文件，其中包含了一个 Vue 实例挂载的位置。src 文件夹是项目的主要代码来源，包括组件文件（如 App.vue）、JavaScript 入口文件（如 main.js），以及静态资源。main.js 文件是 Vue 应用的启动文件，其中包含了 Vue 实例的配置和挂载点。

// src/main.js
import Vue from 'vue';
import App from './App.vue';

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

<!-- public/index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Vue2入门教程</title>
</head>
<body>
    <div id="app"></div>
    <!-- 引入Vue组件 -->
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./src/main.js"></script>
</body>
</html>

<!-- src/App.vue -->
<template>
    <div id="app">
        <h1>{{ message }}</h1>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: 'Hello Vue!'
        };
    }
};
</script>

总结

通过以上步骤，你已经成功安装了 Vue 2，并创建了一个简单的项目。接下来将深入学习 Vue 2 的基本语法、组件化开发、路由与状态管理等核心概念。

Vue2基本语法

数据绑定

在 Vue 应用中，数据绑定是通过 data 属性实现的。data 属性应包含一个对象，该对象包含了应用的所有数据。Vue 将这些数据绑定到视图中，使得一旦数据发生变化，视图也会相应更新。

使用v-model指令

v-model 指令用于在表单元素（如 <input> 或 <textarea>）和对应的组件属性之间创建双向数据绑定。

<!DOCTYPE html>
<html>
<head>
    <title>Vue2入门教程</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        <p>{{ message }}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello'
            }
        });
    </script>
</body>
</html>

使用v-text指令

v-text 指令用于直接将数据绑定到元素的文本内容中。与 {{}} 插值语法相比，v-text 更适用于需替换整个元素内容的场景。

<!DOCTYPE html>
<html>
<head>
    <title>Vue2入门教程</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <span v-text="message"></span>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello'
            }
        });
    </script>
</body>
</html>

计算属性与侦听器

计算属性

计算属性（computed properties）允许从一个或多个响应数据中派生出动态的计算结果。计算属性会缓存它们的计算结果，只有相关依赖发生改变时才会重新计算。

<!DOCTYPE html>
<html>
<head>
    <title>Vue2入门教程</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>原始数据: {{ message }}</p>
        <p>计算后的数据: {{ reversedMessage }}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello'
            },
            computed: {
                reversedMessage: function () {
                    return this.message.split('').reverse().join('');
                }
            }
        });
    </script>
</body>
</html>

侦听器

侦听器（watchers）用于监听数据变化并执行回调函数，它允许执行异步操作或变更其他状态。侦听器可以用来替代计算属性在更复杂的情况下使用。

<!DOCTYPE html>
<html>
<head>
    <title>Vue2入门教程</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        <p>{{ message }}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello'
            },
            watch: {
                message: function (newVal, oldVal) {
                    console.log(`新值：${newVal}，旧值：${oldVal}`);
                }
            }
        });
    </script>
</body>
</html>

指令介绍

v-if与v-show

v-if 和 v-show 用于条件渲染。v-if 是条件性地渲染一个节点及其内部的所有子节点，它会根据条件的真假值决定是否插入元素。v-show 则是简单地切换元素的 CSS display 属性，它总是会在 DOM 中保留元素。

<!DOCTYPE html>
<html>
<head>
    <title>Vue2入门教程</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="toggle">切换</button>
        <p v-if="show">v-if: Hello</p>
        <p v-show="show">v-show: Hello</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                show: true
            },
            methods: {
                toggle: function () {
                    this.show = !this.show;
                }
            }
        });
    </script>
</body>
</html>

v-for与v-bind

v-for 用于为元素或组件创建带有动态参数的列表。v-bind 指令用来动态绑定属性，通常用于绑定 CSS 类、内联样式和绑定 DOM 属性。

<!DOCTYPE html>
<html>
<head>
    <title>Vue2入门教程</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in items" v-bind:class="{ active: item.isActive }">
                {{ item.name }}
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                items: [
                    { name: 'Foo', isActive: true },
                    { name: 'Bar', isActive: false }
                ]
            }
        });
    </script>
</body>
</html>

总结

通过以上内容，你已经了解了 Vue 2 中数据绑定与动态渲染的基本语法。学会使用 v-model、v-text、v-if、v-show 以及 v-for 等指令，可以让你的 Vue 应用具备动态与交互性。

Vue2组件化开发

组件基础

组件化是 Vue 2 的核心特性之一，通过将应用拆分为独立可复用的组件，可以更清晰地组织代码，提高开发效率。Vue 组件可以看作是具有自己数据、逻辑、渲染逻辑的独立功能模块。

定义一个组件

定义一个 Vue 组件，可以通过选项对象的方式，也可以通过单文件组件（.vue 文件）的方式。这里我们先使用选项对象来创建一个简单的组件。

var vm = new Vue({
    el: '#app',
    data: {
        message: 'Hello'
    },
    components: {
        'my-component': {
            template: '<div>{{ message }}</div>',
            data: function() {
                return {
                    message: 'Hello from my-component'
                }
            }
        }
    },
    template: '<my-component></my-component>'
});

使用单文件组件

单文件组件（.vue 文件）则是 Vue 项目中更常见的一种方式，它将模板、样式和 JavaScript 逻辑都封装在同一个文件中。

<!-- MyComponent.vue -->
<template>
    <div>{{ message }}</div>
</template>

<script>
export default {
    data() {
        return {
            message: 'Hello from my-component'
        }
    }
}
</script>

<style scoped>
/* 内联样式 */
</style>

传递数据

组件可以通过 props 属性接收外部传入的属性，从而实现父子组件间的通信。

简单的props使用

父组件通过 props 向子组件传递数据。

<!DOCTYPE html>
<html>
<head>
    <title>Vue2入门教程</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component :message="parentMessage"></my-component>
    </div>
    <script>
        Vue.component('my-component', {
            props: ['message'],
            template: '<div>{{ message }}</div>'
        });

        var vm = new Vue({
            el: '#app',
            data: {
                parentMessage: 'Hello from parent'
            }
        });
    </script>
</body>
</html>

事件处理

组件间通信的另一种方式是通过事件来触发父子组件间的数据传递。Vue 的事件系统允许父组件通过 $emit 触发事件，子组件通过 $on 监听。

子组件向父组件传递数据

子组件触发 $emit 事件，父组件监听该事件，从而实现数据传递。

<!DOCTYPE html>
<html>
<head>
    <title>Vue2入门教程</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component @child-event="handleChildEvent"></my-component>
    </div>
    <script>
        Vue.component('my-component', {
            template: '<button v-on:click="sendEvent">Trigger Event</button>',
            methods: {
                sendEvent: function() {
                    this.$emit('child-event', 'Hello from child');
                }
            }
        });

        var vm = new Vue({
            el: '#app',
            methods: {
                handleChildEvent: function(msg) {
                    console.log('父组件接收到：', msg);
                }
            }
        });
    </script>
</body>
</html>

总结

通过组件化开发，你可以将 Vue 应用拆分成为多个独立而可复用的组件，从而提高代码的可维护性和可测试性。接下来，我们将进一步探索 Vue 的高级特性，如路由与状态管理。

Vue2路由与状态管理

Vue Router基础

Vue Router 是 Vue.js 的官方路由模版，它允许你在 Vue 应用中实现单页应用的导航功能。Vue Router 会根据当前的 URL 路径匹配对应的组件，也可以在组件间传递路径参数。

安装Vue Router

首先，安装 Vue Router：

npm install vue-router

基本配置

一个简单的 Vue Router 配置如下：

// router.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 }
    ]
});

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

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

路由参数

通过 :id（或者 params 对象）来传递路由参数：

<!-- Home.vue -->
<template>
    <div>
        <router-link to="/about">About</router-link>
    </div>
</template>

<script>
export default {
    name: 'Home'
}
</script>

<!-- About.vue -->
<template>
    <div>
        <router-link :to="{ path: '/about', params: { id: 123 }}">About with params</router-link>
    </div>
</template>

<script>
export default {
    name: 'About',
    props: ['id'],
    created() {
        console.log(this.$route.params.id);
    }
}
</script>

Vuex状态管理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它通过将组件间的共享状态集中化，来管理应用中所有的组件的状态。Vuex 的核心是 store，它是一个可变状态的单例实例。

安装Vuex

首先，安装 Vuex：

npm install vuex

基本配置

一个简单的 Vuex 配置如下：

// store.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: {
        increment({ commit }) {
            commit('increment');
        }
    },
    getters: {
        count: state => state.count
    }
});

// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

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

使用Vuex

在组件中使用 Vuex：

<!-- Counter.vue -->
<template>
    <div>
        <button @click="increment">Increment</button>
        <p>Count: {{ count }}</p>
    </div>
</template>

<script>
export default {
    computed: {
        count: function() {
            return this.$store.getters.count;
        }
    },
    methods: {
        increment: function() {
            this.$store.dispatch('increment');
        }
    }
}
</script>

总结

通过以上内容，你已经掌握了 Vue Router 的基本配置和使用方法，以及 Vuex 的核心概念和基本使用。这为开发复杂的单页面应用奠定了基础。

Vue2实战项目

小项目案例

假设你正在开发一个简单的待办事项列表（Todo List）应用。该应用允许用户添加、编辑和删除待办事项，还包含简单的状态管理逻辑以跟踪完成的待办事项。

项目结构

以下是一个简单的项目结构：

my-todo-app/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── AddTodo.vue
│   │   ├── TodoList.vue
│   └── App.vue
├── store.js
├── router.js
├── main.js
└── package.json

AddTodo.vue

AddTodo 组件用于添加新的待办事项：

<!-- src/components/AddTodo.vue -->
<template>
    <div>
        <input type="text" v-model="newTodoText" @keydown.enter="addTodo" />
        <button @click="addTodo">Add</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            newTodoText: ''
        };
    },
    methods: {
        addTodo() {
            if (this.newTodoText) {
                this.$store.dispatch('addTodo', this.newTodoText);
                this.newTodoText = '';
            }
        }
    }
};
</script>

TodoList.vue

TodoList 组件用于显示所有待办事项，并提供删除和完成待办事项的功能：

<!-- src/components/TodoList.vue -->
<template>
    <div>
        <ul>
            <li v-for="todo in todos" :key="todo.id">
                <span v-if="!todo.completed">{{ todo.text }}</span>
                <span v-else>{{ todo.text }} (已完成)</span>
                <button @click="toggleTodo(todo)">完成</button>
                <button @click="removeTodo(todo)">删除</button>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    computed: {
        todos() {
            return this.$store.getters.todos;
        }
    },
    methods: {
        toggleTodo(todo) {
            this.$store.dispatch('toggleTodo', todo);
        },
        removeTodo(todo) {
            this.$store.dispatch('removeTodo', todo);
        }
    }
};
</script>

App.vue

App.vue 是应用的主入口文件，包含路由配置：

<!-- src/App.vue -->
<template>
    <div id="app">
        <h1>Todo List</h1>
        <add-todo />
        <todo-list />
    </div>
</template>

<script>
import AddTodo from './components/AddTodo.vue';
import TodoList from './components/TodoList.vue';

export default {
    components: {
        AddTodo,
        TodoList
    }
};
</script>

Vuex Store

定义一个 Vuex store 来管理待办事项的状态：

// src/store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        todos: []
    },
    mutations: {
        addTodo(state, todoText) {
            state.todos.push({
                id: Date.now(),
                text: todoText,
                completed: false
            });
        },
        toggleTodo(state, todo) {
            todo.completed = !todo.completed;
        },
        removeTodo(state, todo) {
            state.todos.splice(state.todos.indexOf(todo), 1);
        }
    },
    actions: {
        addTodo({ commit }, todoText) {
            commit('addTodo', todoText);
        },
        toggleTodo({ commit }, todo) {
            commit('toggleTodo', todo);
        },
        removeTodo({ commit }, todo) {
            commit('removeTodo', todo);
        }
    },
    getters: {
        todos: state => state.todos
    }
});

实战技巧与注意事项

模块化：将应用拆分为多个组件，可以提高代码的可维护性和可测试性。
状态管理：合理利用 Vuex 来管理应用状态，避免组件间的直接耦合。
路由设计：合理设计应用的路由，确保良好的用户体验和页面导航。

总结

通过以上实战项目，你已经具备了开发一个简单待办事项列表应用的能力。掌握了组件化开发、路由配置和状态管理的基本技能，可以在实际项目中进行进一步的扩展和优化。

Vue2调试与部署

调试技巧

使用Vue Devtools

Vue Devtools 是一个浏览器扩展，用于调试 Vue 应用程序。安装后，可以通过它查看当前组件树、数据状态、组件间通信等。

控制台调试

Vue 本身提供了 console.log 等基本的调试手段，配合浏览器的开发者工具，可以更方便地调试应用。例如，在组件的 mounted 生命周期钩子中添加调试信息：

// App.vue
export default {
    mounted() {
        console.log('App.vue mounted');
    }
}

使用检查点

在复杂应用中，可以使用 console.log 或者 debugger 作为检查点来跟踪应用的状态变化。debugger 关键字会在代码执行到该位置时自动触发断点。

项目打包与部署

打包项目

使用 npm 或 yarn 打包 Vue 项目生成生产环境版本：

npm run build

或者

yarn run build

这将在 dist 目录下生成最终的构建文件，包括 HTML、JavaScript 和静态资源。

部署到服务器

将生成的 dist 目录中的文件部署到服务器。根据服务器类型，可以使用不同的方法，如通过 FTP、SCP 或者 Git 来上传文件。

scp -r dist/* user@server:/path/to/deployment/

静态站点托管

还可以使用静态站点托管服务，如 Netlify、Vercel 等，来托管生成的 Vue 项目。只需将打包的文件上传到服务器，然后配置相关路由即可。

总结

通过以上内容，你已经掌握了使用 Vue 2 开发应用的全过程，从安装、开发到调试、部署。希望这能帮你更好地理解和使用 Vue 2，开发出高质量的前端应用。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

达令说

手记
篇

粉丝

22

获赞与收藏

120

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30972 346

网络编程入门教程

20个小节 12736 240

Pandas 入门教程

25个小节 18634 342

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Vue2入门教程：轻松掌握前端开发基础

什么是Vue2

安装Vue2

使用CDN

使用Vue CLI或npm

创建第一个Vue2项目

总结

数据绑定

使用v-model指令

使用v-text指令

计算属性与侦听器

计算属性

侦听器

指令介绍

v-if与v-show

v-for与v-bind

总结

组件基础

定义一个组件

使用单文件组件

传递数据

简单的props使用

事件处理

子组件向父组件传递数据

总结

Vue Router基础

安装Vue Router

基本配置

路由参数

Vuex状态管理

安装Vuex

基本配置

使用Vuex

总结

小项目案例

项目结构

AddTodo.vue

TodoList.vue

App.vue

Vuex Store

实战技巧与注意事项

总结

调试技巧

使用Vue Devtools

控制台调试

使用检查点

项目打包与部署

打包项目

部署到服务器

静态站点托管

总结

阅读免费教程