vue知识

常见语法

v-bind绑定属性也简写作:
v-on绑定事件也简写作@
v-model绑定表单数据
v-if条件渲染
v-for循环渲染
v-show隐藏元素

创建响应式数据

ref 适合基本类型，reactive 对对象类型更合适
创建完的对象用 .value 获取值

const loginFormRef = ref(0)

const loginForm = reactive({
    userName: '15668565056',
    passWord: '123456a',
    validCode: ''
})

ES6 语法

{ data }对象解构，直接获取对象的 data 属性

vue-router

router 是一个路由管理器，用于管理多个组件的页面跳转。
router.push('/')跳转到首页
route 是当前的路由对象，用于获取当前路由信息
router.options.routes[0].children获取子路由列表

vuex

• vuex 是一个状态管理器，用于管理多个组件的共享状态。
• const store = useStore()会获取 store，他是一个单例，在所有组件中都共用
• vuex 是挂载在 app 上的，每次刷新时，store 会重新创建，用 vuex-persistedstate 插件可以将 vuex 的数据持久化到本地存储中

computed

计算属性，只有依赖的属性值变化时才会重新计算
const menuData = computed(() => store.state.menu.routerList)

#default #footer

#default用于默认插槽，用于定义表格列的主要内容显示

<template #default="scope">
    {{ scope.row.sex === "1" ? '男' : '女' }}
</template>

#footer用于底部插槽,比如表单的确认和取消按钮

nextTick

nextTick 是一个异步方法，用于等待 DOM 更新完成，然后执行回调函数。