javaweb自用笔记:Vue

Vue

什么是vue

vue案例

1、引入vue.js文件

2、定义vue对象

3、定义vue接管的区域el

4、定义数据模型data

5、定义视图div

6、通过标签v-model来绑定数据模型

7、{{message}}直接将数据模型message展示出来

8、由于vue的双向数据绑定,当视图层标签input里的message发生变化,那么数据模型message也会发生变化

vue的常用指令

v-bind和v-model

v-on

v-if、v-show(条件不成立也会渲染,只是隐藏了)

v-for

生命周期

当完成某个阶段,自动执行

异步交互Ajax

Ajax的作用

同步与异步

同步:客户端需要等服务器响应后才能操作

异步:客户端在等服务器响应的同时还可以进行其他操作

原生Ajax

Ajax-Axios2

基于原生的Ajax封装起来的技术

案例

加载html页面时自动触发钩子函数mounted,在函数发送异步请求获取数据

前端工程化

前后端分离开发

YApi

vuej脚手架环境准备

安装nodejs和vue脚手架:Day03-04. 前端工程化-环境准备_哔哩哔哩_bilibili

vue项目目录结构

创建vue项目:Day03-05. 前端工程化-Vue项目_哔哩哔哩_bilibili

vue组件库element

快速入门

vue路由

打包

nginx部署

相关推荐
livemetee1 小时前
Flink2.0学习笔记:使用HikariCP 自定义sink实现数据库连接池化
大数据·数据库·笔记·学习·flink
前端小巷子1 小时前
Vue 3 运行机制
前端·vue.js·面试
lingggggaaaa3 小时前
小迪安全v2023学习笔记(七十讲)—— Python安全&SSTI模板注入&项目工具
笔记·python·学习·安全·web安全·网络安全·ssti
好望角雾眠5 小时前
第三阶段数据库-7:sql中函数,运算符,常用关键字
数据库·笔记·sql·学习·sqlserver·c#
yzzzzzzzzzzzzzzzzz8 小时前
JavaScript 操作 DOM
开发语言·javascript·ecmascript
再学一点就睡9 小时前
实现大文件上传全流程详解(补偿版本)
前端·javascript·面试
你的人类朋友10 小时前
【Node&Vue】什么是ECMAScript?
前端·javascript·后端
shix .12 小时前
最近 | 黄淮教务 | 小工具合集
前端·javascript
烛阴12 小时前
解锁动态键:TypeScript 索引签名完全指南
前端·javascript·typescript
省四收割者12 小时前
Go语言入门(10)-数组
数据结构·经验分享·笔记·vscode·算法·golang