Vue.js 基础教程 - Vue.js 完全学习指南

1. Vue.js 简介

Vue.js是一个用于构建用户界面的渐进式JavaScript框架。它被设计为可以自底向上逐层应用。


// 创建Vue应用
const app = Vue.createApp({
    data() {
        return {
            message: 'Hello Vue!'
        }
    }
})

// 挂载应用
app.mount('#app')

2. 模板语法

Vue.js使用基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。

文本插值

消息: {{ message }}


<div id="text-interpolation">
    <p>消息: {{ message }}</p>
    <input v-model="message" placeholder="输入一些文字">
</div>

const app = Vue.createApp({
    data() {
        return {
            message: ''
        }
    }
})

app.mount('#text-interpolation')

3. 指令系统

Vue.js提供了一系列内置指令，用于在模板中实现常见的DOM操作。

v-if 条件渲染

这段文字会根据条件显示或隐藏


<div id="conditional-rendering">
    <button @click="toggle">切换显示</button>
    <p v-if="isVisible">这段文字会根据条件显示或隐藏</p>
</div>

const app = Vue.createApp({
    data() {
        return {
            isVisible: true
        }
    },
    methods: {
        toggle() {
            this.isVisible = !this.isVisible
        }
    }
})

app.mount('#conditional-rendering')

4. 计算属性和侦听器

计算属性和侦听器是Vue.js中处理复杂逻辑的重要特性。

计算属性示例

全名: {{ fullName }}


<div id="computed-properties">
    <input v-model="firstName" placeholder="名">
    <input v-model="lastName" placeholder="姓">
    <p>全名: {{ fullName }}</p>
</div>

const app = Vue.createApp({
    data() {
        return {
            firstName: '',
            lastName: ''
        }
    },
    computed: {
        fullName() {
            return this.firstName + ' ' + this.lastName
        }
    }
})

app.mount('#computed-properties')

5. 事件处理

Vue.js提供了v-on指令用于监听DOM事件。

事件处理示例


<div id="event-handling">
    <button @click="count++">点击次数: {{ count }}</button>
    <button @click="resetCount">重置</button>
</div>

const app = Vue.createApp({
    data() {
        return {
            count: 0
        }
    },
    methods: {
        resetCount() {
            this.count = 0
        }
    }
})

app.mount('#event-handling')

6. 表单输入绑定

Vue.js提供了v-model指令用于在表单输入和应用状态之间创建双向绑定。

表单绑定示例

输入的内容: {{ text }}

选择的值: {{ selected }}


<div id="form-binding">
    <input v-model="text" placeholder="输入文字">
    <p>输入的内容: {{ text }}</p>
    <select v-model="selected">
        <option value="">请选择</option>
        <option value="A">选项A</option>
        <option value="B">选项B</option>
        <option value="C">选项C</option>
    </select>
    <p>选择的值: {{ selected }}</p>
</div>

const app = Vue.createApp({
    data() {
        return {
            text: '',
            selected: ''
        }
    }
})

app.mount('#form-binding')

学习提示

建议按照顺序学习这些概念，每个概念都建立在前一个概念的基础上。完成每个部分后，尝试自己编写一些简单的示例来加深理解。

练习

尝试创建一个简单的待办事项列表，包含以下功能：

添加新的待办事项
标记待办事项为已完成
删除待办事项
显示待办事项总数