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部署

相关推荐
wdfk_prog14 小时前
[Linux]学习笔记系列 -- [drivers][input]input
linux·笔记·学习
ouliten14 小时前
cuda编程笔记(36)-- 应用Tensor Core加速矩阵乘法
笔记·cuda
Moment14 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
爱敲代码的小鱼15 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax
孞㐑¥15 小时前
算法——BFS
开发语言·c++·经验分享·笔记·算法
吹牛不交税15 小时前
admin.net-v2 框架使用笔记-netcore8.0/10.0版
vue.js·.netcore
mango_mangojuice16 小时前
Linux学习笔记(make/Makefile)1.23
java·linux·前端·笔记·学习
工程师老罗16 小时前
YOLOv1 核心知识点笔记
笔记·yolo
MZ_ZXD00116 小时前
springboot旅游信息管理系统-计算机毕业设计源码21675
java·c++·vue.js·spring boot·python·django·php
铅笔侠_小龙虾17 小时前
Flutter 实战: 计算器
开发语言·javascript·flutter