vue

基础

基础

安装 npm create vue@latest

• 响应式数据

  ref、reactive

• 计算属性

  computed

• 监听元素

  watch(value,(new,old)=>{})

• 组件创建完成初始化生命周期

  onMounted

全局变量

main.js 挂载
app.provide('$text',"成功");
// 使用
import { inject } from "vue";
const text = inject("$text");

组件

• 全局注册组件

  app.component('MyComponent', MyComponent)

• 父传子组件

查看代码

// 父组件
<component value="传递数据" />;
// 子组件
import { defineProps } from "vue";
const props = defineProps(["value"]);
console.log(props.value);

• 父组件调用子组件事件

查看代码

// 子组件
<button @click="$emit('submit1')">按钮1</button>
import { defineEmits } from 'vue';
const emits = defineEmits(['submit1']);
// 父组件
<buttonComponenst @submit1="submit1"/>

• 单插槽

// 子组件
<slot></slot>
// 父组件
<buttonComponenst/>这里可以放任何内容</buttonComponenst>

• 多插槽

// 子组件
<slot name="slot1"></slot>
// 父组件
 <template #slot1>
    插槽1的内容放这里
</template>

路由

// 404页面
{
path: '/:pathMatch(.*)',
component: '/error',
}

// 嵌套路由
children: [{ path: "/", name: "user", component: UserHome }];

// 路由元信息
meta: { requiresAuth: true,title:"页面名字" }

// 路由跳转
// 传值
import { useRouter } from "vue-router";
const router = useRouter();
router.push({ path: "/indexView", query: { id: 123 } });
// 接收
import { useRoute } from "vue-router";
const route = useRoute();
const id = route.query.id;

// 前置路由
router.beforeEach((to, from, next) => { } 
// to：将要进入的路由
// from：离开的路由
// next()：进入路由
// next(false)：中断当前导航
// next('路径')：强行跳转路由

// 后置路由
router.afterEach 

// 解决路由刷新404：
// 修改nginx部署文件nginx.conf
// try_files $uri $uri/ /index.html;

• 当前选中路由 css 类

  .router-link-active

始终跳转到页面顶部

const router = createRouter({
scrollBehavior(to, from, savedPosition) {
return { top: 0 };
},
});

路由动画

在路由组件中一定要添加个 div 包裹全部内容

设置路由显示

<router-view v-slot="{ Component }">
    <transition name="scale" mode="out-in">
       <component :is="Component" />
    </transition>
</router-view>

css 设置路由动画

放大缩小

.scale-enter-active,
  .scale-leave-active {
    transition: all 0.5s ease;
  }
  .scale-enter-from,
  .scale-leave-to {
    opacity: 0;
    transform: scale(0.9);
  }

渐隐渐现

.scale-enter-active,
  .scale-leave-active {
    transition: opacity 0.5s ease;
  }

  .scale-enter-from,
  .scale-leave-to {
    opacity: 0;
  }

从右往左

// 更改X/Y轴控制方向
// 更改正负角度控制左右方向
.scale-enter-active,
.scale-leave-active {
  transition: all 0.25s ease-out;
}

.scale-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.scale-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}