前端Web-Vue基础

一、Vue 概述

Vue 是一款用于构建用户界面的渐进式 JavaScript 框架。它通过数据驱动视图，简化操作，提高开发效率。Vue 的优势在于：

• 数据驱动视图: 基于数据渲染用户界面，实现动态更新。

• 渐进式: 可逐步学习使用，无需掌握所有功能即可开发。

• 框架: 提供完整的解决方案，快速构建项目。

二、Vue 快速入门

• 准备工作:

  • 准备 HTML 文件，引入 Vue 模块。

  • 创建 Vue 应用实例，控制视图元素。

  • 准备元素，交给 Vue 控制。

  • 定义数据，通过 data 方法返回对象。

• 数据驱动视图:

  • 定义数据，通过 data 方法返回对象。

  • 使用插值表达式渲染页面，语法：{{…}}

三、Vue 常用指令

• v-for: 列表渲染，遍历数组或对象属性。 语法：v-for=“(item,index) in items” :key=“唯一值”

   
  
        
  {{name}}
      

• v-bind: 动态绑定 HTML 属性。 语法：v-bind：属性名=“属性值” 或 ：属性名=“属性值”

   
  
        链接1
        
  
  
        链接2
        
  
  
        
      

• v-if/v-else-if/v-else: 条件渲染，根据条件显示或隐藏元素。

  男
              女
              其他

• v-show: 条件展示，基于 CSS 样式控制显示隐藏。

   讲师
              班主任
              其他

• v-model: 表单双向数据绑定，实现数据同步。

• v-on: 事件绑定，添加事件监听器。

• 四、Ajax

Ajax 技术用于异步与服务器交互，实现局部刷新，提升用户体验。原生 Ajax 和 Axios 都可以发送 Ajax 请求。

原生 Ajax:

• 创建 XMLHttpRequest 对象。

• 向服务器发送请求。

• 获取服务器响应数据。

Axios:

• 引入 Axios 文件。

• 使用 Axios 发送请求，并获取响应结果。

• Axios 提供多种请求方法，例如 get、post 等。

• 省市区选择:

  使用 Vue 的生命周期和 Axios 发送异步请求，实现省市区数据的级联选择和展示。

  
  
    
      
      
      
      
      
    
  
    
      
  
        
  
          省:
          
            
              {{p.name}}
            
          
          市:
          
            
              {{c.name}}
            
          
          区:
          
            
              {{a.name}}
            
          
        
      
  
      
      
    
  
  

七、async/await

async/await 可以解决回调函数地狱问题，简化异步代码，提高代码可读性和可维护性。

async search() {
            const presult = await axios.get(
              `https://web-server.weyomu.net/province`
            );
            this.provinces = presult.data.data;
            this.province = this.provinces[0].id;

            const cresult = await axios.get(
              `https://web-server.weyomu.net/city?pid=${this.province}`
            );
            this.cities = cresult.data.data;
            this.city = this.cities[0].id;

            const aresult = await axios.get(
              `https://web-server.weyomu.net/area?cid=${this.city}`
            );
            this.areas = aresult.data.data;
            this.area = this.areas[0].id;
          },