Vue项目搭建
- Vue
- 一、创建项目
- 二、Element
- 三、添加Axios组件
- 请求方法的别名
- 四、vue文件的生命周期
- 五、vue组件相关属性
Vue
vue是JavaScript的一个框架
快速创建vue项目的先决条件：安装node.js
一、创建项目
vue ui
- 这样创建项目的优点
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
- 项目创建成功时，浏览器显示如下画面
对于vue项目，index.html文件默认是引入了入口函数main.js文件，我们找到src/main.js文件，其代码如下：
import Vue from 'vue'
import App from './App.vue'
import router from './router'Vue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')上述代码中，包括如下几个关键点：
- import: 导入指定文件，并且重新起名。例如上述代码
import App from './App.vue'导入当前目录下得App.vue并且起名为App- new Vue(): 创建vue对象
- $mount(‘#app’);将vue对象创建的dom对象挂在到id=app的这个标签区域中，作用和之前学习的vue对象的le属性一致。
- router: 路由，详细在后面的小节讲解
- render: 主要使用视图的渲染的。
二、Element
-
安装Element 注意，需要在项目所在终端安装，选择项目并右键打开终端，然后输入如下安装命令
npm i element-ui -S
安装成功后，就能node_modules文件夹中看见如下文件夹
-
使用Element
//在 main.js 中写入以下内容： import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; //import locale from 'element-ui/lib/locale/lang/en' 使用英文，Element默认使用中文 Vue.use(ElementUI); -
更改显示界面
注意，新创建的vue.组件需要使用大驼峰命名法以防止出错，再src/views目录下创建一个element文件夹存放添加的vue文件，注意，vue文件需要有一个View来结尾，所以vue文件的文件名格式应该为 xxxView.vue
<!-- App.vue -->
<template><div><!-- 更改显示界面 假设有一个名为ElementView.vue的文件,则添加如下代码--><Element-view></Element-view></div>
</template><script>
/* 导入ResumeView.vue文件 */
import ElementView from './views/element/ResumeView.vue'
export default {components: {ElementView}}
</script>
<style></style>
components通常是在父级组件中定义的，使得父组件可以包含一个或多个子组件。每个组件都可以包含自己的模板、逻辑和样式（可以简单理解为一个界面），并且可以独立于其他组件进行开发和维护。以上为导入示例
vue文件的三个基本格式
- templete
- script
- style
<!-- 需要在根组件app.vue中引入才能使用 -->
<template><div><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row></div>
</template><script>
export default {}
</script><style></style>
三、添加Axios组件
我们使用Axios向服务器(后端)发送请求，并接收服务器(后端)发送回来的数据
- 安装axios库，安装操作与Element安装过程相同
npm install axios
安装成功后，就能node_modules文件夹中看见如下文件夹
<!-- 在你的vue文件中导入axios -->
import axios from 'axios';
- axios的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-Axios</title><script src="js/axios-0.18.0.js"></script>
</head>
<body><input type="button" value="获取数据GET" onclick="get()"><input type="button" value="删除数据POST" onclick="post()"></body>
<script>//更多写法function get(){//封装成一个函数//通过axios发送异步请求-getaxios({method: "get",url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"}).then(result => {console.log(result.data);})}function post(){// 通过axios发送异步请求-postaxios({method: "post",url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",data: "id=1"}).then(result => {console.log(result.data);})}
</script>
</html>
请求方法的别名
Axios还针对不同的请求，提供了别名方式的api,具体如下：
| 方法 | 描述 |
|---|---|
| axios.get(url [, config]) | 发送get请求 |
| axios.delete(url [, config]) | 发送delete请求 |
| axios.post(url [, data[, config]]) | 发送post请求 |
| axios.put(url [, data[, config]]) | 发送put请求 |
axios.post('http://localhost:8088/delete', requestData, {headers: {'Content-Type': 'application/json'}}).then(res => {console.log("删除成功:", res.data);this.form.name = '';onsubmit();}).catch(error => {console.error("删除失败:", error);});console.log('Deleting', row);this.contextMenu.visible = false;}
代码解释：
axios.post: Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js
post：发送一个 POST 请求。POST 请求通常用于向服务器发送数据
链接： 请求发送到的服务器地址，
localhost指的是本地机器，8088是服务器上运行服务的端口号，/delete是处理请求的服务器上的特定路径。requestData：发送到服务器的数据
headers：设定了HTTP请求头，我们将数据以
JSON格式发送给后端（服务器）then(res => {…})：
then方法用于处理 Promise(POST请求) 成功的情况，服务器的响应会作为res(response) 参数传入，res.data保存了服务器返回的数据catch(error => {…})：处理请求失败的情况。如果请求出现错误（如网络问题、服务器错误等），则会捕捉到错误对象
error。这里的代码打印了一个错误消息。
四、vue文件的生命周期
mounted()函数，再vue文件挂载完成之前产生，我们利用这个生命周期使用Axios发送异步请求以获得数据，加载页面信息，该函数与data，menthons同级
- 在vue页面显示之前向后端发送一个请求
mounted() {this.myresumemsg.name = this.form.name;axios.post('http://localhost:8088/submit', this.myresumemsg, {headers: {'Content-Type': 'application/json'}}).then(res => {this.myresumemsg = res.data[0]})}
五、vue组件相关属性
| 属性/指令 | 说明 |
|---|---|
v-model | 双向绑定数据到表单元素 |
v-if | 根据表达式的真值来条件性地渲染元素 |
v-else | v-if的补充，当v-if为假时渲染 |
v-show | 根据表达式真值切换元素的显示状态（通过display样式） |
v-for | 基于源数据多次渲染元素或模板 |
v-on | 监听DOM事件，并在触发时执行一些JavaScript代码 |
v-bind | 动态地绑定一个或多个特性，或一个组件 prop 到表达式 |
:key | 给每个节点或组件提供一个唯一的键，用于Vue的虚拟DOM算法内部 |
v-slot | 定义插槽的内容 |
v-pre | 跳过这个元素和它的子元素的编译过程 |
v-cloak | 在Vue实例结束编译时从绑定的HTML元素上移除 |
v-bind | 动态地绑定一个或多个特性，或一个组件 prop 到表达式 |
:key | 给每个节点或组件提供一个唯一的键，用于Vue的虚拟DOM算法内部 |
v-slot | 定义插槽的内容 |
v-pre | 跳过这个元素和它的子元素的编译过程 |
v-cloak | 在Vue实例结束编译时从绑定的HTML元素上移除 |
v-once | 只渲染元素和组件一次。之后的重新渲染，元素/组件及其所有的子节点将被视为静态 |
