2022.5.1 学习笔记
目录
三、vue基础入门 (一)
补充:axios——axios 是一个专注于网络请求的库!
axios 的基本使用
1. 发起 GET 请求:
axios({
// 请求方式
method: 'GET',
// 请求的地址
url: 'http://www.liulongbin.top:3006/api/getbooks',
// URL 中的查询参数
params: {
id: 1
}
}).then(function (result) {
console.log(result)
})
2. 发起 POST 请求:
document.querySelector('#btnPost').addEventListener('click', async function () {
// 如果调用某个方法的返回值是 Promise 实例,则前面可以添加 await!
// await 只能用在被 async “修饰”的方法中
const { data: res } = await axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
data: {
name: 'zs',
age: 20
}
})
console.log(res)
})
3. 直接把axios挂载到Vue原型上
但把 axios 挂载到 Vue 原型上,有一个缺点:不利于 API 接口的复用!!!
1. axios的基本使用
2. axios发起POST请求
3. axios直接发起GET和POST请求
3.1 侦听器
3.1.1 什么是 watch 侦听器
watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。
语法格式如下:
3.1.2 使用 watch 检测用户名是否可用
监听 username 值的变化,并使用 axios 发起 Ajax 请求,检测当前输入的用户名是否可用:
watch: {
// 监听 username 值的变化
async username(newVal) {
if (newVal === '') return
// 使用 axios 发起请求,判断用户名是否可用
const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
console.log(res)
} }
3.1.3 immediate 选项
默认情况下,组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用,则需要使用 immediate 选项。示例代码如下:
watch: {
username: {
// handler 是固定写法,表示当 username 的值变化时,自动调用 handler 处理函数
handler: async function (newVal) {
if (newVal === '') return
const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
console.log(res)
},
// 表示页面初次渲染好之后,就立即触发当前的 watch 侦听器
immediate: true
} }
3.1.4 deep 选项
如果 watch 侦听的是一个对象,如果对象中的属性值发生了变化,则无法被监听到。此时需要使用 deep 选项进行深度侦听,代码示例如下:
3.1.5 监听对象单个属性的变化
如果只想监听对象中单个属性的变化,则可以按照如下的方式定义 watch 侦听器:
3.2 计算属性
3.2.1 什么是计算属性
计算属性指的是通过一系列运算之后,最终得到一个属性值。
这个动态计算出来的属性值可以被模板结构(即插值表达式和v-bind)或 methods 方法使用。示例代码如下:
使用计算属性之前,代码复用过过多:
3.2.2 计算属性的特点
① 虽然计算属性在声明的时候被定义为方法,但是计算属性的本质是一个属性。所以在上例中,reg计算属性在methods节点中使用的时候是this.reg,而不是this.reg()。
② 计算属性会缓存计算的结果,只有计算属性依赖的数据变化时,才会重新进行运算。
3.3 vue-cli
3.3.1 什么是单页面应用程序
单页面应用程序(英文名:Single Page Application)简称 SPA,顾名思义,指的是一个 Web 网站中只有唯一的一个 HTML 页面,所有的功能与交互都在这唯一的一个页面内完成。
例如资料中的这个 Demo 项目:
3.3.2 什么是 vue-cli
vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。
引用自 vue-cli 官网上的一句话:程序员可以专注在撰写应用上,而不必花好几天去纠结 webpack 配置的问题。
中文官网:Vue CLI
3.3.3 安装和使用
vue-cli 是 npm 上的一个全局包,使用 npm install 命令,即可方便的把它安装到自己的电脑上:npm install -g @vue/cli
基于 vue-cli 快速生成工程化的 Vue 项目:在要创建的目录终端下,运行 vue create 项目的名称
目前学习阶段,创建vue项目步骤截图:
![]()
![]()
![]()
![]()
![]()
3.3.4 vue 项目的运行流程
在工程化的项目中,vue 要做的事情很单纯:通过 main.js 把 App.vue(要渲染的UI结构) 渲染到 index.html 的指定区域中。
其中:
① App.vue 用来编写待渲染的模板结构
② index.html 中需要预留一个 el 区域
③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中
3.3.5 vue项目的结构
vue 项目中 src 目录的构成:
① assets 文件夹:存放项目中用到的静态资源文件,例如:css 样式表、图片资源
② components 文件夹:程序员封装的、可复用的组件,都要放到 components 目录下
③ main.js 是项目的入口文件。整个项目的运行,要先执行 main.js
④ App.vue 是项目的根组件。
3.4 vue组件
3.4.1 什么是组件化开发
组件化开发指的是:根据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护。
3.4.2 vue 中的组件化开发
vue 是一个支持组件化开发的前端框架。
vue 中规定:组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。
3.4.3 vue 组件的三个组成部分
每个 .vue 组件都由 3 部分构成,分别是:
- template -> 组件的模板结构
- script -> 组件的 JavaScript 行为
- style -> 组件的样式
其中,每个组件中必须包含 template 模板结构,而 script 行为和 style 样式是可选的组成部分。
1. template
vue 规定:每个组件对应的模板结构,需要定义到 <template> 节点中。
注意:
- template 是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DOM 元素
- template 中只能包含唯一的根节点
2. script
① vue 规定:开发者可以在 <script> 节点中封装组件的 JavaScript 业务逻辑。
<script > 节点的基本结构如下:
② .vue 组件中的 data 必须是函数
vue 规定:.vue 组件中的 data 必须是一个函数,不能直接指向一个数据对象。
因此在组件中定义 data 数据节点时,下面的方式是错误的:
会导致多个组件实例共用同一份数据的问题,请参考官方给出的示例:组件基础 — Vue.js
正确写法:
3. style
① vue 规定:组件内的 <style> 节点是可选的,开发者可以在 <style> 节点中编写样式美化当前组件的 UI 结构。
<script > 节点的基本结构如下:
② 让 style 中支持 less 语法
在 <style> 标签上添加 lang="less" 属性,即可使用 less 语法编写组件的样式: