微语 微语：代码适合中午敲，早晚出BUG

vue3的动态css v-bind() Vue

vue3支持 css中支持v-bind来绑定动态样式值,例如:

<template>
    <span>123</span>
</template>
<script setup>
    let color="#fff"
</script>
<style lang="scss" scoped>
span {
    background-color: black;
    color: v-bind(color);
}
</style>
小诸葛 vue3r如何使用动态css v-bind()属性 7-31
评论(0) 浏览(326)

Vue3的生命周期有哪些？ Vue

DOM节点挂载前

onBeforeMount(() => {
  console.log('DOM节点挂载前');
})

DOM节点挂载后

onMounted(() => {
  console.log('DOM节点挂载后');
})

更新前

onBeforeUpdate(() => {
  console.log('更新前');
})

更新后

onUpdated(() => {
  console.log('更新后');
})

卸载前

onBeforeUnmount(() => {
  console.log('卸载前');
})

卸载完成后

onUnmounted(() => {
  console.log('卸载完成后');
})
小诸葛 Vue3的生命周期有哪些？ 7-31
评论(0) 浏览(319)

点击元素让其滚动到锚点定位scrollIntoView方法 Vue

示例：

点击元素让其滚动到锚点定位scrollIntoView方法

点击右侧的字母，滚动到具体的位置，先给右侧的标题绑定点击事件，拿到点击的元素，在通过scrollIntoView方法进行滚动
{ behavior: "smooth" }是平滑滚动属性

    <div class="aside">
        <ul>
            <li @click="clickAZ(item)" v-for="(index, item) in abclist.list" :key="item">{{ item }}</li>
        </ul>
    </div>
    <div class="bscroll">
        <ul class="index">
            <li v-for="(index, item) in abclist.list" :key="item">
                <h2 :id="item">{{ item }}</h2>
                <div class="span">
                    <span :class="{ 'active': datalist.cityname == item }" @click="span(item)" v-for="(item, v) in index"
                        :key="v">
                        {{ item }}</span>
                </div>
            </li>
        </ul>
    </div>

JS

let clickAZ = (key) => {
    console.log(key);
    let element = document.getElementById(key);
    element.scrollIntoView({ behavior: "smooth" });
}

CSS

body,html{
    height: 100%;
}
.bscroll {
    height: 100%;
    overflow: scroll;
}
.index{
    height: 100%;
}
小诸葛 scrollIntoView 页面滚动 7-30
评论(0) 浏览(319)

Vue3如何使用vue-router进行跳转 Vue

1.首先配置路径信息，已经单独写过一篇了 点击前往

2.引入包文件

import { useRouter } from 'vue-router'

3.定义变量接一下useRouter实例

let router = useRouter()

4.使用router.push() 进行跳转（）里面为path地址

router.push('/index')
小诸葛 vue vue-router 7-29
评论(0) 浏览(344)

Vue3配置路由信息过程VueRouter Vue

1.引入包文件

import { createRouter, createWebHashHistory } from 'vue-router';

2.引入组件地址，也可以使用懒加载引入

import Home from '../views/Home.vue';//引入模式

3.配置路由数组

const routes = [
    { path: '/', component: Home },
    { path: '/info', component: () => import('../views/Info.vue') },
];

4.创建路对象

const router = createRouter({
    history: createWebHashHistory(),
    routes,
});

5.暴露出去

export default router

6.在main.js中引入使用

const app = createApp(App) // 创建Vue应用程序实例，并传入根组件App
app.use(router)
app.mount('#app') // 将应用程序挂载到页面上的#app元素

7.App.vue中放置出口

<router-view />

完整示例：

ruoter.js

// 配置路由文件
import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '../views/Home.vue';
// 配置路由数组
const routes = [
    { path: '/', component: Home },
    { path: '/info', component: () => import('../views/Info.vue') },
];
// 创建路由对象
const router = createRouter({
    history: createWebHashHistory(),
    routes,
});
// 暴露对象
export default router

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router'
const app = createApp(App) // 创建Vue应用程序实例，并传入根组件App
app.use(router)
app.mount('#app') // 将应用程序挂载到页面上的#app元素

App.vue

<template>
  <router-view /> 
</template>
小诸葛 VueRouter Vue3 路由配置 7-27
评论(0) 浏览(509)

Vue3组件如何进行值的传递 Vue

子传父：子组件用defineEmits传递

//子组件
<template>
    <div>
        <button @click="btn">我的按钮</button>
    </div>
</template>

<script setup>
import { ref } from "vue"

let sex = ref(2000)
let $emit = defineEmits(['sex'])
let btn = () => {
    $emit('sex', sex.value)
}
</script>
//父组件
<template>
  <div>
    <MyButton @sex="fys" />
  </div>
</template>

<script setup>
let fys = (val) => {
  console.log(val);
}
</script>

父传子： 使用defineProps来接收

//父组件
<template>
    <MyButton :msg="access" />
</template>

<script setup>
let access = '今天天气不错'
</script>
//子组件
<template>
    <div>
        <button>我的按钮</button>
        {{ props.msg }}
    </div>
</template>

<script setup>
const props = defineProps({
    msg: {
        type: String,//参数类型
        required: true,//是否必传
        default: '天气状态' //默认值
    }
});
</script>

简化版传递

父传子 世界使用defineProps(['参数名1'],[‘参数名2’])方式来接收

//父组件
<template>
  <div>
    <MyButton sex="2000" />
  </div>
</template>
//子组件
<template>
    <div>
        <button>我的按钮</button>
    </div>
</template>

<script setup>
let props = defineProps(['sex'])
console.log(props.sex);
</script>

子传父 使用$emit在标签上面直接传递参数 @click="$emit('msg', aa)" msg为事件名，aa为参数

//子组件
<template>
    <div>
        <button @click="$emit('msg', aa)">我的按钮</button>

    </div>
</template>

<script setup>
let aa = '天气不错'
</script>
//父组件
<template>
    <MyButton @msg="as" />
</template>

<script setup>
let as = (val) => {
    console.log(val);
}
</script>
小诸葛 Vue3组件如何进行值的传递 7-27
评论(0) 浏览(299)

数组扁平化处理 JavaScript

有一个多维数组

const arr = [1, [2, 3, [4, [5]]], 6];

要求转换成：

 [1,2,3,4,5,6]

可以使用一下方法解决：

方法一：

const arr = [1, [2, 3, [4, [5]]], 6];
const flattenedArr = arr.flat(Infinity);
console.log(flattenedArr);

方法二：

const flat = arr => arr.reduce((prev, curr) => Array.isArray(curr) ? [...prev, ...flat(curr)] : [...prev, curr], []);
console.log(flat(arr))

方法三：

const flat = arr => {
  const flattenedArr = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      flattenedArr.push(...flat(arr[i]));
    } else {
      flattenedArr.push(arr[i]);
    }
  }
  return flattenedArr;
};

console.log(flat(arr));
小诸葛 数组扁平化处理 JavaScript 7-25
评论(0) 浏览(403)

uniapp调用微信支付功能 uniApp

HTML

<template>
    <view class="content">
        <input v-model="val" />
        <button @click="clickPay">点我扣款</button>
    </view>
</template>

JavaScript

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                val: 0.1
            };
        },
        methods: {
            clickPay() {
                let _this = this;

                //1.调用登录 获取code
                uni.login({
                    provider: 'weixin',
                    success(res) {
                        //2.调用微信官方接口,拿code去换openid
                        uni.request({
                            url: 'https://api.weixin.qq.com/sns/jscode2session',
                            data: {
                                appid: 'wx4f27fd51b9a7bfda',
                                secret: '1a9bfee5a8155f0020c5857cd9038674',
                                js_code: res.code,
                                grant_type: 'authorization_code' //固定值
                            },
                            success(obj) {
                                console.log(obj.data.openid, '用户真实openid............');
                                console.log({
                                    openId: obj.data.openid, //微信用户的openid!!!扣谁的钱
                                    name: '电吹风体验卷',
                                    money: _this.val,
                                    code: '851230012314156910598',
                                    payType: 1,
                                    clientIp: '127.0.0.1'
                                });

                                //3.调用后端接口 拿到所需要的数据
                                uni.request({
                                    url: 'http://api.100qhl.com:5024/v1/order/createOrder',
                                    method: 'POST',
                                    data: {
                                        openId: obj.data.openid, //微信用户的openid!!!扣谁的钱
                                        name: '好洗的地毯',
                                        money: Number(_this.val),
                                        code: '8512300123149105999015',
                                        payType: 1,
                                        clientIp: '127.0.0.1'
                                    },
                                    success(res) {
                                        console.log(res, '后端返回参数完毕.....');

                                        //4.调用官方接口扣钱!!!!

                                        uni.requestPayment({
                                            timeStamp: res.data.data.timeStamp,
                                            nonceStr: res.data.data.nonceStr,
                                            package: res.data.data.packageValue,
                                            signType: res.data.data.signType,
                                            paySign: res.data.data.paySign,
                                            complete(res) {
                                                console.log(res,
                                                    '扣款返回的结果.~~~~~~~~~~~~~~~~~');
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    }
                });
            }
        }
    };
</script>
小诸葛 uniapp 微信支付 7-25
评论(0) 浏览(436)

友情链接 申请

会飞的鱼 lerte程序员 六思逸 微4e 迎風别葉 峡州仙士之页 郑羊羊咩的窝 微资源论坛 91影视网 拾光博客

I am 小诸葛

是一名前端工程师，独立开发者、博主

最新评论