1.js导入文件
1.在需要导出的js文件中使用export导出,使用{}批量导出方法,使用逗号隔开
2.使用import导入js文件,使用{}批量导入方法,使用逗号隔开;from后跟文件位置(相对路径)
3.可以直接使用大括号内导入的方法,也可以使用as定义别名
4.一般使用default导出,导入的文件中使用自定义的名称(相当于类名),可以在自定义的名称调用导入的方法
<script type="module">
import messageMethods from './showMessage.js';
document.getElementById("btn").onclick=function(){
messageMethods.complexMessage('被点击了');
}
</script>
报错
Uncaught SyntaxError: The requested module ‘…/xx/xx/x.js’ does not provide an export named ‘default’
原因
js中的功能function前要写上export向外暴露,才能在其他文件中使用import导入
2.局部使用Vue
1.Vue入口
1.引入Vue模块
使用import导入Vue官方提供的在线js库
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
2.定义div域,写id名,Vue需要使用id绑定div域;使用.mount('#app')绑定div域
3.返回数据,在大括号内定义一个data()方法,返回一个JSON对象,对象内部写上需要返回的数据
4.div域中使用插值表达式,在双大括号内写上需要的键名即可
<!-- 引入vue模块 -->
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
// 创建Vue的应用实例
createApp({
data(){
return {
//定义数据
msg: 'hello vue3'
}
}
}).mount('#app');
</script>
2.常用指令
1.v-for
作用:列表渲染,遍历容器的元素或者对象的属性
语法: v-for ="(item,index) in items
参数说明:
items为遍历的数组
item为遍历出来的元素
index为索引/下标,从0开始 ;可以省略,省略index语法: v-for ="item in items"
//创建应用实例
createApp({
data() {
return {
//定义数据,数组名:[{},{}]
articleList:[
{
title:"医疗反腐绝非砍医护收入",
category:"时事",
time:"2023-09-5",
state:"已发布"
},
{
title:"中国男篮缘何一败涂地?",
category:"篮球",
time:"2023-09-5",
state:"草稿"
},
{
title:"华山景区已受大风影响阵风达7-8级,未来24小时将持续",
category:"旅游",
time:"2023-09-5",
state:"已发布"
}
]
}
}
}).mount("#app")//控制页面元素
<tr v-for="(article,index) in articleList">
<td>{{article.title}}</td>
<td>{{article.category}}</td>
<td>{{article.time}}</td>
<td>{{article.state}}</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
2.v-bind
作用:动态为HTML标签绑定属性值,如设置href,src,style样式等
语法: v-bind:属性名="属性值"
简化: :属性名="属性值"
<div id="app">
<a v-bind:href="url">百度</a>
</div>
<script type="module">
//引入vue模块
import { createApp} from
'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
url: 'https://www.baidu.com'
}
}
}).mount("#app")//控制html元素
</script>
3.v-if/v-else-if/v-else
语法: v-if="表达式",表达式值为true显示,false隐藏
其它:可以配合 v-else-if /v-else 进行链式调用条件判断
原理: 基于条件判断,来控制创建或移除元素节点 (条件渲染)
场景:要么显示,要么不显示,不频繁切换的场景
4.v-show
语法: v-show="表达式",表达式值为true显示,false隐藏
原理: 基于CSS样式display来控制显示与隐藏
场景:频繁切换显示隐藏的场景
<div id="app">
手链价格为: <span v-if="customer.level>0 && customer.level<=1">9.9</span>
<span v-else-if="customer.level>1 && customer.level<=4">19.9</span>
<span v-else>29.9</span>
</br>
手链价格为: <span v-show="customer.level>=0 && customer.level<=1">9.9</span>
<span v-show="customer.level>1 && customer.level<=4">19.9</span>
<span v-show="customer.level>4">29.9</span>
</div>
<script type="module">
//导入vue模块
import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
customer:{
name: "张三",
level: 1
}
}
}
}).mount("#app")//控制html元素
</script>
v-if的原理是创建或不创建->切换不频繁时使用
v-show的原理是显示或不显示->切换频繁时使用
F12显示
错误:data数据返回的对象的格式为
customer:{name:"张三",level:1}
5.v-on
作用:为HTML标签绑定事件
语法:
v-on:事件名="函数名
简写为@事件名="函数名
<div id="app">
<button v-on:click="punch">点我有惊喜</button>
<button @click="kick">再点更惊喜</button>
</div>
<script type="module">
//导入vue模块
import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
//定义数据
}
},
methods:{
punch: function(){
alert("Rider Punch!")
},
kick: function(){
alert("Rider Kick")
}
}
}).mount("#app");//控制html元素
</script>
6.v-model
作用:在表单元素上使用,双向数据绑定。可以方便的'获取'或'设置'表单项数据
语法: v-model="变量名"
注意:v-model中绑定的变量,必须在data中定义
文章分类: <input type="text" v-modle="serchData.category"/> <span>{{serchData.category}}</span>
<br>
发布状态: <input type="text" v-model="serchData.state"/> <span>{{serchData.state}}</span>
<br>
serchData: {
category:'',
state:''
}
7.生命周期
一般使用生命周期函数的mounted(){}发送请求获取数据
<script type="module">
//导入vue模块
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
}
},
methods: {
reset: function(){
this.serchData.category='',
this.serchData.state=''
},
mounted(){
console.log('Vue挂载完毕,发送请求数据')
}
}
}).mount("#app")//控制html元素
</script>
3.Axios
1.引入Axios的js文件
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2.使用Axios发送请求,并获取相应结果
GET:
axios.get(url).then(result=>{...成功回调}).catch(error=>{...失败回调})
POST:
axios.post(url,data).then(result=>{...成功回调}).catch(error=>{...失败回调})
<script>
// 发送请求
//get请求,正常格式
axios({
methods:'get',
url:'http://localhost:l8080/article/getAl'
}).then(result=>{
//成功的回调
//result代表服务器响应的所有的数据,包括响应头,响应体;
//result.data代表的是接口响应的核心数据
alert(result.data);
}).catch(err=>{
//失败的回调
alert(err);
});
//缩写格式,一般用这个
axios.get('http://localhost:l8080/article/getAl').then(result=>{
alert(result.data);
}).catch(err=>{
alert(err);
})
let article={
title:'明天会更好',
category:'生活',
time:'2000-01-01',
state:'草稿'
}
axios.post('http://localhost:l8080/article/add',article).then(result=>{
alert(result.data);
}).catch(err=>{
alert(err);
})
</script>
4.Vue案例
1.钩子函数mounted中,获取所有文章数据
使用mounted函数发送异步请求获取文章数据,使用Axios;返回的数据传递给articleList数组
2.使用v-for指令,把数据渲染到表格上显示
使用articleList中的数据,利用v-for指令将数据在表格中显示出来
3.使用v-model指令完成表单数据的双向绑定
在vue中创建search对象,存储文本框数据category和state用于搜索,利用v-model完成双向绑定
4.使用v-on指令为搜索按钮绑定单击事件
在vue中创建search方法,并利用v-on:click绑定在按钮上;在方法中发送请求完成搜索
文章分类: <input type="text" v-model="serchData.category">
{{serchData.category}}
<br>
发布状态: <input type="text" v-model="serchData.state">
{{serchData.state}}
<br>
<button v-on:click="serch">搜索</button>
<br />
<br />
<table border="1 solid" colspa="0" cellspacing="0">
<tr>
<th>文章标题</th>
<th>分类</th>
<th>发表时间</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr v-for="(article,index) in articleList">
<td>{{article.title}}</td>
<td>{{article.category}}</td>
<td>{{article.time}}</td>
<td>{{article.state}}</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</table>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
//创建Vue应用实例
createApp({
data(){
return{
articleList:[],
serchData:{
category:'',
state:''
}
}
},
//在钩子函数mounted中获取所有文章数据
mounted:function(){
//发送异步请求 Axios
axios.get('http://localhost:8080/article/getAll').then(result=>{
this.articleList=result.data;
}).catch(error=>{
alert(error);
})
},
methods:{
search:function(){
//发送请求,完成搜索
axios.get('http://localhost:8080/article/search?category='
+this.search.category+'&state='
+this.search.state)
.then(result=>{
this.articleList=result.data;
}).catch(error=>{
alert(error);
});
}
}
}).mount('#app');
</script>
spring-boot-maven-plugin引入不成功
问题:
idea一直下载不下来spring-boot-maven-plugin这个插件,也不会从本地仓库中去找
解决办法:
加上本地仓库中的version即可,就会从仓库中自己去找了
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<version>3.2.2</version>
</plugin>
3.整站使用Vue(工程化)
1.第一个Vue
1.使用cmd新建vue项目->npm init vue@latest
2.使用vscode打开->输入code .
3.需要编写的文件->src->App.vue
<script>
//写数据
export default{
data(){
return{
msg: '上海'
}
}
}
</script>
<template>
<html lang="zh-CN"></html>
<!--html-->
<h1>{{msg}}</h1>
</template>
<style scoped>
/* 样式 */
h1{
color: rebeccapurple;
}
</style>
问题:新建的vue页面出现乱码,查看文件也是UTF-8
解决办法:添加一行<html lang="zh-CN"></html>
2.组合式Api
1.在script标签上添加setup标识
2.使用响应式对象,此对象只有一个内部值属性value
const count = ref(0);
count.value++;
3.使用函数
function(){}
4.声明钩子函数
onMounted(()=>{//操作})
3.案例
1.导入Axios,工程化导入->npm install axios
导入vue,工程化导入->import {ref} from 'vue';
1.获取文章数据
1)定义响应式数据->const articleList = ref([]);
2)发送异步请求.获取所有文章数据->
axios.get('http://localhost:8080/article/getAll').then(result=>{}).catch(error=>{})
3)使用v-for指令,把数据渲染到表格上展示
2.搜索功能
1)定义响应式数据 searchData
const searchData = ref({
category:'',
state:''
})
2)使用v-model指令完成表单数据的双向绑定->
<input type="text" v-model="searchData.category">
3)声明search函数->const search = function(){}
4)使用v-on指令为搜索按钮绑定单击事件->
<button v-on:click="search">搜索</button>
<script setup>
//导入Axios,工程化导入->npm install axios
import axios from 'axios';
import {ref} from 'vue';
//定义响应式数据
const articleList = ref([]);
//发送异步请求.获取所有文章数据
axios.get('http://localhost:8080/article/getAll')
.then(result=>{
//保存服务器响应的数据
articleList.value = result.data;
})
.catch(error=>{
console.log(error);
})
//定义响应式数据 searchData
const searchData = ref({
category:'',
state:''
})
//声明search函数
//function search(){}
const search = function(){
//发送请求,完成搜索
axios.get('http//localhost:/8080/article/search',{params:{...searchData.value}})
.then(result=>{
articleList.value = result.data;
})
.catch(error=>{
console.log(error);
})
}
</script>
<template>
<html lang="zh-CN"></html>
<div>
文章分类: <input type="text" v-model="searchData.category">
发布状态: <input type="text" v-model="searchData.state">
<button v-on:click="search">搜索</button>
<br />
<br />
<table border="1 solid" colspa="0" cellspacing="0">
<tr>
<th>文章标题</th>
<th>分类</th>
<th>发表时间</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr v-for="(article,index) in articleList">
<td>{{ article.title }}</td>
<td>{{ article.category }}</td>
<td>{{ article.time }}</td>
<td>{{ article.state }}</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</table>
</div>
</template>
3.优化
1.将函数放到单独的js文件中
将函数写到vue文件中复用性差,接口调用的js代码需要封装到js文件中,以函数的形式暴露给外部;一般放到api文件夹中
1)js文件中的函数前需要加上export,才能暴露给外部
2)函数中需要添加
await同步式等待服务器响应结果; async声明为异步函数(await只能在异步函数中使用)
在then中使用return返回从服务器获取的数据
//获取所有文章数据的函数
export async function articleGetAllService(){
//同步等待服务器响应结果(不然获取不到),并返回 async await
//await同步式等待服务器响应结果; async声明为异步函数(await只能在异步函数中使用)
return await axios.get('/article/getAll')
.then(result=>{
return result.data;
})
.catch(error=>{
console.log(error);
})
}
3)vue文件获取数据也需要使用async await添加同步,并且将获取函数返回结果封装为函数
//同步获取函数返回结果 async await
const getAllArticle = async function(){
let data = await articleGetAllService();
articleList.value = data;
}
getAllArticle();
2.定义一个变量,记录请求的公共前缀=>baseURL
再使用axios提供的create方法创建一个请求实例instance(实例instance与axios有同样的功能)
使用instance就不需要在添加baseURL中的前缀了
const baseURL = 'http://localhost:8080';
const instance = axios.create({baseURL});
export async function articleGetAllService(){
//同步等待服务器响应结果(不然获取不到),并返回 async await
//await同步式等待服务器响应结果; async声明为异步函数(await只能在异步函数中使用)
return await instance.get('/article/getAll')
.then(result=>{
return result.data;
})
.catch(error=>{
console.log(error);
})
}
3.使用提供的拦截器优化代码
拦截器放到文件夹util里
//导入Axios,工程化导入->npm install axios
import axios from 'axios';
//定义一个变量,记录公共的前缀=>baseURL
const baseURL = 'http://localhost:8080';
const instance = axios.create({baseURL});
//添加响应拦截器
instance.interceptors.response.use(
result=>{
return result.data;
},
error=>{
alert('服务异常');
//异步的状态转换成失败的状态
return Promise.reject(error);
}
)
export default instance;
在获取服务器数据函数的js文件中导入拦截器文件后就可以直接使用request了
而且因为拦截器的方法本身是异步的,所以调用的函数不用再添加异步关键字了,只需要在最后的vue中的函数添加即可
import request from '@/util/request.js'
//获取所有文章数据的函数
export function articleGetAllService(){
return request.get('/article/getAll');
}
//搜索函数
export function articleSearchService(searchData){
return request.get('/article/search',{params: searchData});
}