Vue.js第一个应用[编辑 | 编辑源代码]

介绍[编辑 | 编辑源代码]

Vue.js是一个渐进式JavaScript框架，用于构建用户界面。本章将引导初学者创建第一个Vue.js应用，展示其核心概念和工作原理。Vue.js通过数据绑定和组件化系统，使开发者能够轻松构建交互式Web应用。

环境准备[编辑 | 编辑源代码]

在开始前，请确保：

已安装现代浏览器（如Chrome、Firefox）
具备基础HTML、CSS和JavaScript知识
可选择以下任一方式引入Vue.js：
- CDN引入（适合快速开始）
- npm安装（适合正式项目）

最简单的Vue应用[编辑 | 编辑源代码]

以下是一个最基本的Vue应用示例：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个Vue应用</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>

    <script>
        const { createApp } = Vue
        
        createApp({
            data() {
                return {
                    message: '你好，Vue.js!'
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

代码解析[编辑 | 编辑源代码]

1. CDN引入：通过<script>标签加载Vue.js库

2. 挂载点：

是Vue应用的挂载点

3. 插值表达式：模板:Message显示data中的message属性 4. Vue实例：通过createApp创建Vue应用实例 5. data选项：返回包含响应式数据的对象 6. mount方法：将Vue实例挂载到DOM元素上

响应式数据[编辑 | 编辑源代码]

Vue的核心特性是响应式数据绑定。当数据变化时，视图自动更新：

createApp({
    data() {
        return {
            counter: 0
        }
    },
    mounted() {
        setInterval(() => {
            this.counter++
        }, 1000)
    }
}).mount('#app')

对应的HTML：

<div id="app">
    计数器: {{ counter }}
</div>

输出效果：页面上的数字每秒自动增加1，无需手动操作DOM。

指令系统[编辑 | 编辑源代码]

Vue提供了一系列指令（Directives）来增强HTML功能：

v-bind[编辑 | 编辑源代码]

动态绑定HTML属性：

<div id="app">
    <span v-bind:title="message">
        鼠标悬停查看动态提示
    </span>
</div>

v-if[编辑 | 编辑源代码]

条件渲染：

<p v-if="seen">现在你看到我了</p>

v-for[编辑 | 编辑源代码]

列表渲染：

<ul>
    <li v-for="item in items">{{ item.text }}</li>
</ul>

事件处理[编辑 | 编辑源代码]

使用v-on指令监听DOM事件：

<div id="app">
    <button v-on:click="reverseMessage">反转消息</button>
    <p>{{ message }}</p>
</div>

<script>
    createApp({
        data() {
            return {
                message: 'Hello Vue.js!'
            }
        },
        methods: {
            reverseMessage() {
                this.message = this.message.split('').reverse().join('')
            }
        }
    }).mount('#app')
</script>

双向数据绑定[编辑 | 编辑源代码]

v-model指令实现表单输入和应用状态的双向绑定：

<div id="app">
    <input v-model="message">
    <p>输入的内容是: {{ message }}</p>
</div>

组件化开发[编辑 | 编辑源代码]

Vue应用通常由嵌套组件构成。定义一个简单组件：

const { createApp } = Vue

const app = createApp({})

// 定义一个名为todo-item的新组件
app.component('todo-item', {
    props: ['todo'],
    template: `<li>{{ todo.text }}</li>`
})

app.mount('#app')

使用组件：

<div id="app">
    <ol>
        <todo-item
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id">
        </todo-item>
    </ol>
</div>

生命周期图示[编辑 | 编辑源代码]

以下是Vue实例的生命周期示意图：

实际应用案例[编辑 | 编辑源代码]

待办事项列表是一个展示Vue核心功能的经典案例：

<div id="todo-app">
    <input v-model="newTodo" @keyup.enter="addTodo">
    <button @click="addTodo">添加</button>
    <ul>
        <li v-for="(todo, index) in todos" :key="index">
            {{ todo.text }}
            <button @click="removeTodo(index)">×</button>
        </li>
    </ul>
    <p>剩余任务: {{ remaining }} / {{ todos.length }}</p>
</div>

<script>
    createApp({
        data() {
            return {
                newTodo: '',
                todos: [
                    { text: '学习Vue.js', done: false },
                    { text: '完成项目', done: false }
                ]
            }
        },
        computed: {
            remaining() {
                return this.todos.filter(todo => !todo.done).length
            }
        },
        methods: {
            addTodo() {
                if (this.newTodo.trim()) {
                    this.todos.push({
                        text: this.newTodo,
                        done: false
                    })
                    this.newTodo = ''
                }
            },
            removeTodo(index) {
                this.todos.splice(index, 1)
            }
        }
    }).mount('#todo-app')
</script>

数学公式示例[编辑 | 编辑源代码]

Vue的响应式系统可以用以下公式表示：

$U I = r e n d e r (s t a t e)$

其中：

$U I$ 表示用户界面
$s t a t e$ 表示应用状态
$r e n d e r$ 是Vue的渲染函数

总结[编辑 | 编辑源代码]

本章介绍了：

如何创建基本Vue应用
Vue的核心概念：响应式数据、指令、事件处理
组件化开发基础
Vue实例生命周期
实际应用案例

通过这个基础，开发者可以继续探索Vue的更高级特性，如单文件组件、Vue Router和Vuex状态管理。