Table of contents
一、ElementUI
1 Introduction :
ElementUI is a desktop component library based on Vue 2.0 for developers, designers and product managers. ElementUI provides commonly used components and their related codes, as shown in the figure below:
The link to the Element-UI component is as follows:
2. Installation:
Open the Vue CLI project in IDEA and install Element-UI through the command "npm i [email protected]" , as shown below:
3. Configuration:
Add the following code to main.js to introduce ElementUI:
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; //Vue使用插件需要引入 Vue.use(ElementUI);As shown below :
4.Use:
After the installation and configuration is completed, you can copy the component code directly from the official website and paste it where you need to use it. eg: Copy the code segment of "Percentage Progress Bar" and use div to style it, Copy the code Go to HelloWorld.vue component, and the code snippet of "Percentage Progress Bar" is as follows:
<div style="width: 500px; margin: 0 auto">
<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
</div>Copy it to the end of the div in the HelloWorld.vue component, as shown below:
running result :
二、Axios
1 Introduction :
Axios[æk'siəʊ:s] is a promise-based HTTP library that can be used in browsers and Node.js. Axios is usually used together with Vue to implement Ajax operations.
2. Installation:
The download address is as follows: https://unpkg.com/[email protected]/dist/axios.min.js
Similar to JQuery, you can save it directly to the local through "Ctrl + s", and import it through the <script></script> tag when using it.
3.Example:
3.1 Data preparation
Use .json file to simulate the data to be accessed, students.json code is as follows:
{
"success": true,
"message": "SUCCESS",
"data": {
"items": [
{
"name": "Cyan",
"gender": "M",
"score": 450
},
{
"name": "Rain",
"gender": "F",
"score": 435
},
{
"name": "Eisen",
"gender": "M",
"score": 442
}
]
}
}3.2 Application examples
Use Axios to issue an Ajax request, obtain the data saved in students.json, and render it on the page.
axios_application.html code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demonstrate Axios</title>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<style type="text/css">
table, tr, td {
border: 2px hotpink solid;
border-collapse: collapse;
}
table {
width: 450px;
background-color: lightcyan;
}
</style>
</head>
<body>
<div id="app">
<div id="h2-div">
<h2>{
{info}}</h2>
</div>
<table>
<tr>
<td>number</td>
<td>name</td>
<td>gender</td>
<td>score</td>
</tr>
<!--
使用“列表渲染”遍历数组;
使用v-for遍历数组时，支持第二个参数index
-->
<tr v-for="(stu,index) in students">
<td>{
{index}}</td>
<td>{
{stu.name}}</td>
<td>{
{stu.gender}}</td>
<td>{
{stu.score}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
let vm = new Vue({
el: "#app",
data: {
info: "-----------students:-----------",
students: []
},
methods: {
//利用Axios，发出Ajax请求
list() {
/*
(1) 通过axios.get()方法发出Ajax请求;
(2) "http://localhost:63342/Axios_Demo/data/students.json"表示URL
(3) axios发出Ajax请求的基本语法————
axios.get(url).then(箭头函数).then(箭头函数)...catch(箭头函数)
其中，“箭头函数”为请求成功后执行的回调函数,get请求成功会进入一个then();
可以在第一个then()中继续发出axios的Ajax请求，若发生异常则进入catch().
(4) list方法在生命周期函数created()中被调用(发出Ajax请求)
*/
axios.get("http://localhost:63342/Axios_Demo/data/students.json")
//ES6新特性———箭头函数(简写形式)
.then(response => {
console.log("response =", response);
console.log("response.data =", response.data);
console.log("response.data.data =", response.data.data);
console.log("response.data.data.items =", response.data.data.items);
//通过Data Bindings将Model中的数据渲染到View
//先将得到的items数据赋值给data数据池中的students属性
this.students = response.data.data.items;
}).catch(err => {
console.log("exception! err :",err);
})
}
},
created() {
this.list();
}
})
</script>
</body>
</html>The page rendering effect is as shown below:
The console print information is as follows:
3.3 Content supplement
The json data printed directly from the console has been encapsulated layer by layer, which is not intuitive enough. You can convert the json object into a string through the JSON.stringify() method< a i=2>, as shown in the figure below:
Copy the printed JSON string in the https://www.json.cn/ website, you can visually see the JSON The format of the object is as shown below:
System.out.println("END------------------------------------------------------");