Vue框架-EW帮帮网

Vue

概况：

Vue是一款用于构建用户界面的渐进式的JavaScript框架。（官方;https:://cn.vuejs.org/)

框架:就是一套完整的项目解决方案，用于快速构建项目。

优点:大大提升前端项目的开发效率。

缺点:需要理解记忆框架的使用规则。（参照官网)

快速入门

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Vue常用指令

指令：HTML标签上带有 V- 前缀的特殊属性，不同的指令具有不同的含义；可以实现不同的功能

常用的指令

v-for

作用：列表渲染，遍历容器的元素或者对象的属性

语法：

<tr v-for="(item,index) in items" :key="item.id"> {{item}}<tr>

说明：items 为遍历的数组

item 为遍历出来的元素

index 为索引/下标，从0开始；可以省略，省略index语法：v-for="item in items"

v-bind

作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。

语法：v-bind：属性名="属性值"

简化：:属性名="属性值"

v-if & v-show

作用：这两类指令，都是用来控制元素的显示与隐藏的

v-if

·语法：v-if="表达式",表达式为true，显示；false隐藏

·原理：基于条件判断，来控制创建或移除元素节点（条件渲染）

·场景：要么显示，要么不显示，不频繁切换场景

·其他：可以配合v-else-if / v-else 进行链式调用判断

例如

v-show

·语法：v-show="表达式",表达式为true，显示；false隐藏

·原理：基于CSS样式display来控制显示与隐藏

·场景：频繁切换显示隐藏的场景

v-model

作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据

语法：v-model=“ 变量名”

v-model 中绑定的变量必须在data中定义

例如

定义数据模型：searchForm是一个对象，使用v-model="searchForm.name"绑定

v-on

·作用：为html标签绑定事件（添加事件监听）

·语法：

·v-on:事件名="方法名"

·简写为 @事件名=""

调用方法

声明方法要在data平行的区域，并且是methods:{将方法写在此处}

Ajax

介绍：Asynchronous JavaScript and XML，异步的JavaScript和XML

作用：

·数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。

·异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等

同步与异步的区别

Axios

介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发。

官网：https://www.axios-http.cn/

步骤：

·引入Axios的js文件

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

简写

为了方便起见，Axios为所有支持的请求方法提供了别名

格式：axios.请求方式(url [,data[,config]])

例如：一下两种请求方法

async&await

通过async，await可以让异步变为同步操作。ssyvc就是来声明一个异步方法，await是来等待异步任务执行

Vue生命周期

声明周期：指一个对象从创建到销毁的整个过程

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期的方法（钩子）

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

Vue框架

Vue

概况：