VUE 学习笔记
布局
横向布局
<style>
H(){
display: flex;//创建 布局管理器
flex-direction: row; //方向 row垂直
flex-wrap: wrap;//显示不下是否换行
}
//居中
.center(){
display:flex;
justify-content: center;//垂直居中 竖向
align-items: center;//水平居中 横向
}
.border{
border:2rpx solid red;//边框&颜色
border-radius: 50rpx;//圆角
background-color: white;//背景色
box-shadow: 8rpx 8rpx 8rpx 0rpx red //阴影 x偏移 Y偏移 半径 扩展宽度 颜色
}
</style>
list用法 如果item.name 不生效 换成 item[“name”]
<view v-for="(item,i) in list" :key="i" @click="itemOnClick(i)">
<image style="height: 20rpx;width: 20rpx;" :src="item.icon"></image>
<view style="font-size: 34rpx; color: white" > 索引值：{
{item.name}}</view>
<view style="font-size: 34rpx; color: white" > 索引值：{
{item.title}}</view>
</view>
export default {
data() {
return {
title: 'Hello',
list:[{
id:0,
name:"111",
title:"测试标题111"
},
{
id:1,
name:"222",
title:"测试标题222"
},
{
id:3,
name:"333",
title:"测试标题333"
}
]
}
}
组件的引入
import 别名 from ‘地址’
components:{
别名
}
view的创建和移除 v-if=“” true 创建 false 移除
<template>
<indexs v-if="true"></indexs>//v-if 控制是否创建
</template>
<script>
import indexs from '../index.vue'
components: {
indexs
}
</script>
view的显示和隐藏 v-show =“” true 显示 false 隐藏
<template>
<indexs v-show="true"></indexs>//v-show 控制是否显示
</template>
<script>
import indexs from '../index.vue'
components: {
indexs
}
</script>
输入框 input
<input password="true" placeholder="请输入密码" v-model="userPwd">
</input>
数据存储
<script>
mounted(){
//页面首次进来
uni.setStorageSync("userName",this.userName);//同步存储数据
this.userName = uni.getStorageSync("userName");//同步获取数据
this.userPwd = uni.getStorageSync("userPwd");
}
</script>
网络请求 UNIApp
地址(‘https://blog.csdn.net/Spy003/article/details/130979354’)
const BASE_URL = 'https://用你自己的url替换'; // 设置基本请求 URL
const requestInterceptor = (config) => {
// 添加请求拦截逻辑
// 在这里可以对请求进行处理，例如添加请求头、签名等
config.header = {
...config.header
};
return config;
};
const responseInterceptor = (response) => {
// 添加响应拦截逻辑
// 在这里可以对响应进行处理，例如处理错误码、数据解析等
if (response.statusCode === 200) {
return response.data;
} else {
throw new Error('Request failed with status code ' + response.statusCode);
}
};
const request = (config) => {
const requestConfig = {
...config,
header: requestInterceptor(config).header,
url: BASE_URL + config.url,
};
return new Promise((resolve, reject) => {
uni.request({
...requestConfig,
success: (res) => {
try {
const responseData = responseInterceptor(res);
resolve(responseData);
} catch (error) {
reject(error);
}
},
fail: (err) => {
reject(err);
},
});
});
};
export const get = (url, params = {
}) => {
const config = {
url,
method: 'GET',
data: params,
};
return request(config);
};
export const post = (url, data = {
}) => {
const config = {
url,
method: 'POST',
data,
};
return request(config);
};
