微语:代码适合中午敲,早晚出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>
聊一聊 Vue3的那些事情 程序畅言
这是一个备受期待的互联网技术!如果你对网页开发感兴趣,那你肯定听说过 Vue,它是一个流行的前端框架,用于构建灵活且高效的用户界面。
那么,Vue 3究竟有什么新奇的东西呢?首先,让我告诉你一个非常重要的概念:Composition API(组合 API)。Vue 3 引入了这个全新的 API,它让你能够更好地组织和重用代码。以前,在 Vue 2 中,我们可能需要使用 mixins 和高阶组件等方式来实现代码重用,但是这些方式有时候会让代码变得难以理解和调试。而 Composition API 则采用了一种更加直观的方式,让你可以根据逻辑功能(而不是组件)对代码进行组合,这样可以更加灵活和可读性。
除了 Composition API,Vue 3 还带来了更强大的性能优化。现在,Vue 3 使用 Proxy 代替了 Object.defineProperty 来实现响应式系统,这使得数据的变化能够更加高效地追踪和更新。这意味着,当你改变一个数据时,Vue 3 能够更快地检测到变化并且只重新渲染受到影响的部分,从而提高了应用程序的性能。
另外一个令人兴奋的功能是 Vue 3 的虚拟 DOM(Virtual DOM)改进。Vue 3 在虚拟 DOM 的实现上进行了优化,它在渲染和更新时能够更加高效地处理 DOM 的操作,进一步提升了应用程序的性能。
总而言之,Vue 3 给我们带来了更加强大和易用的工具,让我们能够更好地构建现代化的互联网应用程序。无论你是前端开发新手还是经验丰富的工程师,Vue 3 都能为你带来更高效和愉悦的开发体验
Vue3的生命周期有哪些? Vue
DOM节点挂载前
onBeforeMount(() => {
console.log('DOM节点挂载前');
})
DOM节点挂载后
onMounted(() => {
console.log('DOM节点挂载后');
})
更新前
onBeforeUpdate(() => {
console.log('更新前');
})
更新后
onUpdated(() => {
console.log('更新后');
})
卸载前
onBeforeUnmount(() => {
console.log('卸载前');
})
卸载完成后
onUnmounted(() => {
console.log('卸载完成后');
})
点击元素让其滚动到锚点定位scrollIntoView方法 Vue
示例:
点击右侧的字母,滚动到具体的位置,先给右侧的标题绑定点击事件,拿到点击的元素,在通过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%;
}
Vue3如何使用vue-router进行跳转 Vue
1.首先配置路径信息,已经单独写过一篇了 点击前往
2.引入包文件
import { useRouter } from 'vue-router'
3.定义变量接一下useRouter实例
let router = useRouter()
4.使用router.push() 进行跳转()里面为path地址
router.push('/index')
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>
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>
数组扁平化处理 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));