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生命周期

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

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

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