编辑“︁Vue.js第一个应用”︁

= Vue.js第一个应用 =

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

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

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

<syntaxhighlight lang="html">
<!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>
</syntaxhighlight>

=== 代码解析 ===
1. '''CDN引入'''：通过<script>标签加载Vue.js库
2. '''挂载点'''：<div id="app">是Vue应用的挂载点
3. '''插值表达式'''：{{ message }}显示data中的message属性
4. '''Vue实例'''：通过createApp创建Vue应用实例
5. '''data选项'''：返回包含响应式数据的对象
6. '''mount方法'''：将Vue实例挂载到DOM元素上

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

<syntaxhighlight lang="javascript">
createApp({
    data() {
        return {
            counter: 0
        }
    },
    mounted() {
        setInterval(() => {
            this.counter++
        }, 1000)
    }
}).mount('#app')
</syntaxhighlight>

对应的HTML：
<syntaxhighlight lang="html">
<div id="app">
    计数器: {{ counter }}
</div>
</syntaxhighlight>

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

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

=== v-bind ===
动态绑定HTML属性：
<syntaxhighlight lang="html">
<div id="app">
    <span v-bind:title="message">
        鼠标悬停查看动态提示
    </span>
</div>
</syntaxhighlight>

=== v-if ===
条件渲染：
<syntaxhighlight lang="html">
<p v-if="seen">现在你看到我了</p>
</syntaxhighlight>

=== v-for ===
列表渲染：
<syntaxhighlight lang="html">
<ul>
    <li v-for="item in items">{{ item.text }}</li>
</ul>
</syntaxhighlight>

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

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

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

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

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

<syntaxhighlight lang="javascript">
const { createApp } = Vue

const app = createApp({})

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

app.mount('#app')
</syntaxhighlight>

使用组件：
<syntaxhighlight lang="html">
<div id="app">
    <ol>
        <todo-item
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id">
        </todo-item>
    </ol>
</div>
</syntaxhighlight>

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

<mermaid>
graph TD
    A[创建Vue实例] --> B[初始化事件和生命周期]
    B --> C[beforeCreate]
    C --> D[初始化注入和响应性]
    D --> E[created]
    E --> F[编译模板或el的outerHTML]
    F --> G[beforeMount]
    G --> H[创建vm.$el并替换el]
    H --> I[mounted]
    I --> J[数据变化时更新]
    J --> K[beforeUpdate]
    K --> L[虚拟DOM重新渲染和补丁]
    L --> M[updated]
    I --> N[调用vm.$destroy]
    N --> O[beforeDestroy]
    O --> P[拆卸观察者、子组件和事件监听器]
    P --> Q[destroyed]
</mermaid>

== 实际应用案例 ==
'''待办事项列表'''是一个展示Vue核心功能的经典案例：

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

== 数学公式示例 ==
Vue的响应式系统可以用以下公式表示：

<math>
UI = render(state)
</math>

其中：
* <math>UI</math> 表示用户界面
* <math>state</math> 表示应用状态
* <math>render</math> 是Vue的渲染函数

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

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

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js基础]]