广州新塘网站制作推广网站服务器检测
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生命周期
声明周期：指一个对象从创建到销毁的整个过程
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期的方法（钩子）
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
