JavaScript(JS)库之Vue.js

28297 阅读 0 评论 73 点赞

上一节我们简单介绍了JS中的jQuery库，本节我们将介绍目前最流行的JS框架——vue.js。

Vue.js

Vue.js是一种渐进式JS框架，它旨在构建可响应的、组件化的用户界面。Vue.js的核心理念是将视图层抽象为一个可扩展的组件系统，这样开发人员可以使用简单的模板语法来构建复杂的用户界面。

上一节我们不是利用jQuery写了一个备忘录吗，这节我们通过Vue.js来写一个备忘录：

<!DOCTYPE html>
<html>
<head>
    <title>Vue备忘录</title>
    <!-- 1. 引入Vue.js库 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .completed { text-decoration: line-through; color: pink; }
        .todo-item { margin: 5px 0; padding: 8px; border: 1px solid #ddd; }
    </style>
</head>
<body>
    <!-- 2. Vue应用挂载点 -->
    <div id="app">
        <h2>备忘录</h2>
        <!-- 3. 输入框和添加按钮 -->
        <input type="text" v-model="newTodoText" placeholder="输入新任务">
        <button @click="addTodo">添加任务</button>
        <!-- 4. 任务列表容器 -->
        <ul id="todoList">
            <!-- 5. 使用v-for循环渲染任务列表 -->
            <li v-for="todo in todos" :key="todo.id" 
                :class="['todo-item', { 'completed': todo.completed }]">
                <!-- 6. 显示任务文本 -->
                <span>{{ todo.text }}</span>
                <!-- 7. 标记完成/取消完成按钮 -->
                <button @click="toggleTodo(todo.id)" class="toggle-btn">
                    {{ todo.completed ? '取消完成' : '标记完成' }}
                </button>
                <!-- 8. 删除按钮 -->
                <button @click="deleteTodo(todo.id)" class="delete-btn">删除</button>
            </li>
        </ul>
    </div>
    <script>
        // 9. 从Vue中解构createApp方法
        const { createApp } = Vue;
        
        // 10. 创建Vue应用实例
        createApp({
            // 11. 定义响应式数据
            data() {
                return {
                    newTodoText: '',  // 绑定输入框的值
                    todos: [],        // 存储所有任务的数组
                    nextId: 1         // ID计数器，用于生成唯一任务ID
                }
            },
            
            // 12. 定义操作方法
            methods: {
                // 12.1 添加新任务的方法
                addTodo() {
                    // 12.1.1 获取输入框内容并去除空格
                    const text = this.newTodoText.trim();
                    
                    // 12.1.2 检查输入是否有效
                    if (text) {
                        // 12.1.3 创建任务对象
                        const todo = { 
                            id: this.nextId++,        // 分配唯一ID并自增
                            text: text,               // 任务文本内容
                            completed: false          // 初始状态为未完成
                        };
                        
                        // 12.1.4 将任务添加到数组（Vue自动触发视图更新）
                        this.todos.push(todo);
                        
                        // 12.1.5 清空输入框
                        this.newTodoText = '';
                    }
                },
                
                // 12.2 切换任务完成状态的方法
                toggleTodo(todoId) {
                    // 12.2.1 根据ID找到对应的任务对象
                    const todo = this.todos.find(t => t.id === todoId);
                    
                    // 12.2.2 如果找到任务，切换其完成状态
                    if (todo) {
                        todo.completed = !todo.completed;
                    }
                },
                
                // 12.3 删除任务的方法
                deleteTodo(todoId) {
                    // 12.3.1 过滤数组，移除指定ID的任务
                    this.todos = this.todos.filter(t => t.id !== todoId);
                }
            }
            
            
        }).mount('#app'); // 13. 将Vue应用挂载到id为app的DOM元素上
    </script>
</body>
</html>

由于Vue的响应式系统会自动处理视图更新（简化了DOM操作），相比之下，jQuery版本需要手动实现renderTodos()函数来更新DOM，而Vue通过数据绑定自动处理视图更新。。

总结：Vue 的学习曲线较低，文档友好，使其特别适合初学者和中小型项目开发，对于一名合格的前端人员来说，Vue是一个不错的前端框架推荐。