vue的基本使用

简介

在这里插入图片描述

vue组件

三个部分组成：结构、样式、逻辑

在这里插入图片描述

文本插值

类似于java的spel表达式

在这里插入图片描述

属性绑定

在这里插入图片描述

綁定是单向绑定的，修改输入框无法改变原本的，只能读，不能写

<input :value="name" placeholder="Type your name">

<script>
export default {name: 'HelloWorld',props: {msg: String},data () {return {name: 'Vue.js',age: 20}}
}
</script>

事件绑定

在这里插入图片描述

    <button v-on:click="clickFunc('caaccaaada')">Reset name</button><button @click="clickFunc('dafa')">Reset name</button>

双向绑定 v-model

在这里插入图片描述

<input v-model="name" placeholder="Type your name">

axios

npm install axios

在这里插入图片描述

牢记两种请求方式：get和post

在这里插入图片描述

解决跨域问题

在这里插入图片描述

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,devServer: {port: 7070, // 默认端口号是8080proxy: {'/api': {target: 'http://localhost:8080', // 代理地址changeOrigin: true, // 允许跨域pathRewrite: {'^/api': '' // 重写路径}}}}
})

发送请求

post请求的有三个参数：

url
data请求体
config配置

import axios from 'axios'login() {axios.post('/api/admin/employee/login', {username: 'admin',password: '123456'}).then(res => {console.log(res.data)}).catch(err => {console.log(err.response)})}

get请求有两个参数（因为个get的url中包含请求参数，所以没有单独的data包装请求体）

url地址
config配置

    postWithConfig() {axios.get('/api/admin/shop/status', {headers: {token: this.token}})}

统一发送方式

单独使用一个属性来表明请求方式
post和get方法使用的是位置代表指定的参数
通用方法则使用属性指定参数
详情看axios官方文档

在这里插入图片描述

post改写

    login() {axios.post('/api/admin/employee/login', {username: 'admin',password: '123456'}).then(res => {console.log(res.data.data.token)this.token = res.data.data.token}).catch(err => {console.log(err.response)})},login2(){axios({method: 'post',url: '/api/admin/employee/login',data: {username: 'admin',password: '123456'}}).then(res => {console.log(res.data.data.token)this.token2 = res.data.data.token}).catch(err => {console.log(err.response)})},

get改写

    getWithConfig() {axios.get('/api/admin/shop/status', {headers: {token: this.token}})},getWithConfig2() {axios({method: 'get',url: '/api/admin/shop/status',headers: {token: this.token2}})}