Vue-Clic-01
axios
专注于网络请求的库
语法
axios({
method: '请求的类型',
url: '请求的URL地址'
}).then((result) => {
})
用法
<div id='app'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<script src='导入axios的库文件'></script>
<script>
const result = axios({
mehtod: 'GET',
url: 'url地址',
params: {},
data: {}
})
result.then(function(返回结果){
console.log(返回结果.data)
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
}
})
</script>
</div>
发起POST请求
- 使用
.then请求
<div id='app'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<script src='导入axios的库文件'></script>
<script>
const result = axios({
mehtod: 'POST',
url: 'url地址',
data: {
name: 'zs',
age: 20
}
}).then(function(result){
console.log(result)
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
}
})
</script>
</div>
- 使用
async和await解析请求结果
<div id='app'>
<button id='btn'>
发起POST请求
</button>
</button>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<script src='导入axios的库文件'></script>
<script>
document.querySelector('#btrPost').addEventListener('click',async function(){
const {data: res} = await axios({
mehtod: 'POST',
url: 'url地址',
data: {
name: 'zs',
age: 20
}
})
console.log(res)
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
}
})
</script>
</div>
axios简化书写
<div id='app'>
<button id='btn'>
发起POST请求
</button>
</button>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<script src='导入axios的库文件'></script>
<script>
document.querySelector('#btrPost').addEventListener('click',async function(){
const{ data: res} await axios.post('url',{name: 'zs',gender: '女'})
console.log(res)
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
}
})
</script>
</div>
使用方式优化
- 在
main.js中注册axios
import axios from 'axios'
Vue.prototype.$http = axios
- 使用
export default {
methods: {
async getInfo(){
const {data: res} = await this.$http.get('url)
}
}
}
- 更改请求根路径,在
main.js配置根路径
axios.default.baseURL = 'url根路径'
直接把axios挂在到原型上面的缺点
缺点: 不利于接口的复用
VUE-CLI
是vue.js快速开发的标准工具,创建工程化的项目
构建工程
- 创建工程的命令
vue create 项目名称
- 选择
Manually select features选项 - 选择
Choose Vue version,Bobel,CSS Pre-processors - 选择
2.x - 选择
Less - 配置文件选择单独放一个文件中
In dedicated config files
组件
组件化开发指的是: 根据封装的思想,把页面上重用的UI结构封装为组件,从而方便项目的开发和维护
组件组成
- template —> 组件的模板结构
- script —> 组件的JavaScript行为
- style —> 组件的样式
使用
<template>
<div class = 'text-box'>
<h3>这是用户自定义的Test.vue --- {{username}}</h3>
<button @click='changeName'>修改用户名</button>
</div>
<template>
<script>
data(){
return{
username: 'zs'
}
},
methods: {
changeName(){
this.username = 'whh'
}
}
</script>
<style>
.test-box{
background-color: pink;
}
</style>
使用三个步骤
- 通过
import语法导入需要的组件
import 组件名称 from '组件路径'
- 使用
components节点注册组件
export default {
components: {
Left
}
}
- 以标签形式使用刚才注册的组件
<div class = 'box'>
<Left></Left>
</div>
通过components注册的是私有组件
注册全局组件
在main.js入口文件中,通过Vue.component()方法,可以注册全局组件
import Count from '@/components/Count.vue'
Vue.component('MyCount',Count)
组件的props
是组件的自定义属性,在封装通用组件的时候,合理地使用props可以 极大的提高组件的复用性
<template>
<div class = 'text-box'>
<h3>这是用户自定义的Test.vue --- {{count}}</h3>
</div>
<template>
<script>
props: ['init'],
data(){
return{
count: this.init
}
}
</script>
<style>
.test-box{
background-color: pink;
}
</style>
props默认的值是String,先变成number类型可以属性绑定 ':'
props是只读的属性
想要修改props的值,可以把props的值转存到data中,因为data中的数据都是可读可写的!
props默认值default
export default{
props: {
init: {
default: 0
}
}
}
props的type值类型
export default{
props: {
init: {
default: 0,
type: Number
}
}
}
props的required必填项
export default{
props: {
init: {
default: 0,
type: Number,
required: true
}
}
}
组件之间的样式冲突
使用scoped的这个属性加入到<style></style>
/deep/穿透
在标签前面加入/deep/ /deep/ h5。当使用第三方组件库的时候,如果有修改第三方组件默认样式的需求,需要用到/deep/
ult{
props: {
init: {
default: 0,
//类型必须是Number
type: Number,
//必须传入这个属性
required: true
}
}
}
### 组件之间的样式冲突
使用`scoped`的这个属性加入到`<style></style>`
### /deep/穿透
在标签前面加入/deep/ `/deep/ h5`。当使用第三方组件库的时候,如果有修改第三方组件默认样式的需求,需要用到/deep/
|