vue的异步操作，钩子函数，和Element组件

使用vue进行异步操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- v-model与user的username属性双向绑定 --><input type="text" name="username" v-model="user.username"> <br><input type="password" name="password" v-model="user.password"> <br><button @click="send">登录</button><span style="display: none" id="tit"><h1>显示好友列表</h1></span><ul><li v-for="e in list" :key="e.id">{{ e.id }}, {{ e.name }}</li></ul></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script>const app = Vue.createApp({data() {return {user: {},list: []};},methods: {send() {document.getElementById("tit").style.display="block";axios.post("http://localhost:8080/axiosServlet", this.user).then(res => {console.log(res.data);//后台发送过来的数据//data:[{id:1,name:"hh"},{id:2,name:"cc"}]this.list = res.data;}).catch(error => {console.error(error);});}}});app.mount("#app");
</script>
</html>

我们可以看到，刚开始vue对象中的data的user和list都是空的，然后我们向用户名框写数据

可以发现写下数据后，因为用户框与user.username双向绑定，user就多了以下内容,点击登陆键

由于我现在没有后台服务器，所以list还是没有值

钩子函数

注意：钩子函数不要卸载methods里面

1.create

create函数会自动执行，当创建vue对象完毕时执行该函数，可以在该函数中书写异步请求代码到后台请求数据

2.beforeMount

在组件被挂载之前调用

3.mounted

在组件被挂载之后调用。

4.beforeUpdate

在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用

5.updated

在组件因为一个响应式状态变更而更新其 DOM 树之后调用。

6.beforeUnmount

在一个组件实例被卸载之前调用。

7.unmounted

在一个组件实例被卸载之后调用。

Element组件

在html中引入

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">



<script src="https://unpkg.com/vue@2/dist/vue.js"></script>



<script src="https://unpkg.com/element-ui/lib/index.js"></script>

1.Layout 布局

通过基础的 24 分栏，迅速简便地创建布局。

2.Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

3.Form 表单

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据

4.Table 表格