Vue.js核心功能实现

Vue.js核心功能实现1. 数据绑定与响应式

Vue.js的核心特性之一是数据绑定。在我们的代码中，我们使用v-model实现了表单元素与Vue实例数据的双向绑定：

  全部
  男
  女

对应的Vue实例数据：

data() {
  return {
    searchForm: {
      name: '',
      gender: '',
      job: ''
    },
    emplist: [],
    filteredEmployees: []
  };
}

2. 条件渲染

我们使用了两种方式实现条件渲染：

1. v-if/v-else-if/v-else（注释掉的代码）：

班主任
讲师
助理
其他

1. v-show（实际使用的代码）：

班主任
讲师
助理
其他

两者的区别在于：

• v-if是真正的条件渲染，元素会被完全添加或移除DOM

• v-show只是简单地切换CSS的display属性，元素始终存在于DOM中

3. 列表渲染

使用v-for指令动态生成表格行：

  {{index + 1}}
  {{e.name}}
  {{e.age}}
  {{e.gender === 1 ? '男' : '女'}}
  
  

注意:key的使用，它为每个节点提供唯一标识，帮助Vue高效地重新渲染列表。

4. 事件处理

搜索按钮使用了v-on:click（可以简写为@click）绑定点击事件：

搜索

对应的Vue方法：

methods: {
  async filterEmployees() {
    try {
      const response = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);
      this.emplist = response.data.data;
      this.filteredEmployees = this.emplist;
    } catch (error) {
      console.error('Failed to fetch employees:', error);
    }
  }
}

5. 生命周期钩子

使用mounted生命周期钩子在组件挂载后自动加载数据：

mounted() {
  // 初始化时加载所有员工信息
  this.filterEmployees();
}

异步数据获取

我们使用axios库进行HTTP请求，并结合async/await语法处理异步操作：

async filterEmployees() {
  try {
    const response = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);
    this.emplist = response.data.data;
    this.filteredEmployees = this.emplist;
  } catch (error) {
    console.error('Failed to fetch employees:', error);
  }
}

样式与布局

虽然CSS部分没有展示，但HTML中已经包含了一些基本的类名和结构，如avatar类用于头像图片的样式：

可扩展功能

当前系统还有一些可以扩展的功能点：

1. 实现删除和添加按钮的功能

2. 添加分页功能

3. 实现排序功能

4. 添加编辑功能

5. 优化移动端显示

总结

通过这个简单的项目，我们学习了Vue.js的多个核心概念：

• 数据绑定（v-model）

• 条件渲染（v-if/v-show）

• 列表渲染（v-for）

• 事件处理（v-on/@）

• 生命周期钩子（mounted）

• 异步操作（async/await）

这些概念是Vue.js开发的基础，掌握了它们，你就可以开始构建更复杂的Vue应用了。

完整的代码可以在文章开头的HTML文件中找到，你可以将其保存为HTML文件直接在浏览器中打开运行（需要联网以加载Vue和axios库）。

希望这篇博客对你学习Vue.js有所帮助！如果有任何问题或建议，欢迎在评论区留言讨论。

    
    
    
    


    

        
        

            名字：
            
            性别：
            
                全部
                男
                女
            
            职位：
            
                全部
                班主任
                讲师
                助理
            
            搜索
        
        

            

                
                

                    
                    
                    
序号
                    
姓名
                    
年龄
                    
性别
                    
头像
                    
职位
                    
操作
                
            
            

                

                    
{{index + 1}}
                    
{{e.name}}
                    
{{e.age}}
                    
{{e.gender === 1 ? '男' : '女'}}
                    

                    

                        
                        
                    
            班主任
            讲师
            助理
            其他
        
                    
                    

                        
                        删除
                        添加
                    
                
            
        
    
    

        
北京大学
        
邮箱：[email protected]  电话：010 - 12345678