Vue
文章平均质量分 69
奔跑的蜗牛2004
这个作者很懒,什么都没留下…
展开
-
vue3中的单文件组件<script setup>详解
全局注册的自定义指令将以符合预期的方式工作,且本地注册的指令可以直接在模板中使用,就像上文所提及的组件一样。必须以 vNameOfDirective 的形式来命名本地自定义指令,以使得它们可以直接在模板中使用// 在元素上做些操作// 导入的指令同样能够工作,并且能够通过重命名来使其符合命名规范原创 2023-10-16 11:23:13 · 1023 阅读 · 0 评论 -
Vue中的computed
计算属性可用于快速计算视图(View)中显示的属性。这些计算将被缓存,并且只在需要时更新。computed设置的初衷是能够解决复杂的计算,而不是直接在模板字符串里进行运算。data: {},// 计算属性的 getter// `this` 指向 vm 实例})在这里相信大家会发现,这个computed和method的功能一样,也是一个函数;对的,我们用method也可以实现这种效果。/* 直接对函数进行调用*/data: {},methods: {})原创 2023-10-13 18:15:27 · 220 阅读 · 0 评论 -
Vue 路由守卫
如下,判断to.path当前将要进入的路径是否为登录或注册,如果是就执行next(),展示当前界面。你可以使用 router.beforeEach 注册一个全局前置守卫,当一个导航触发时,就会异步执行这个回调函数。正如其名, vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。时候的一些钩子,当从一个页面跳转到另一个页面时,可以在跳转前、中、后做一些事情。from:当前导航正要离开的路由,也是一个路由对象。next:可选,是一个方法,直接进入下一个路由。from:从哪个路由离开。原创 2023-10-13 14:37:50 · 52 阅读 · 0 评论 -
vue路由中的next()
注意:next('/logon')不是说直接去/logon'路由,而是中断(VUE中的中断就是此时不会执行router.afterEach(() => {})这一次路由守卫的操作,又进入一次路由守卫,就像嵌套一样,一层路由守卫,然后又是一层路由守卫,此时路由守卫进入到第二层时,to.path已经不是/home了,这个时候才执行next()放行操作。因此你还需要确保在当addRoutes()已经完成时,所执行到的这一次beforeEach((to, from, next)中有一个正确的next()方向出口。原创 2023-10-13 14:07:32 · 2256 阅读 · 2 评论 -
vue-cookies使用及说明
获取所有 cookie name,以数组形式返回。检查某个 cookie name是否存在。获取一个cookie。设置一个cookie。删除一个cookie。原创 2023-10-12 14:44:02 · 794 阅读 · 0 评论 -
Vuex 学习
对象写法中的每一个对象的第一个参数对应计算属性中的方法名,可以不加引号,在模板调用时使用,第二个参数对应state中的属性,必须加 引号 ,数组写法,每个元素对应state中的属性,必须加 引号,模板解析时,直接 {{sum}} 和{{school}} 即可。4. vuex的执行顺序是,this.$store.dispatch()触发 actions中的方法,acitons中的方法触发mutations中的方法,mutations中的方法操作state中的数据。如下图的三种写法,效果是一样的。原创 2023-10-11 17:21:57 · 35 阅读 · 0 评论 -
el-form的model、prop属性和表单校验等详解
Vue 的 el-form 提供了表单校验功能, :rules 属性设置校验规则,并通过 el-form-item 的 prop 属性绑定校验规则。组件封装,让前端校验更方便。具体使用过程中,有几个容易出错的地方,本文来整理一下。每一个坑都是笔者亲自趟过的,写完本文后,以后应该不会再踏入相同的坑。el-form 的 model 属性el-form 的 model 属性是用来指定表单使用的数据的,虽然 el-form 指定了 model 对象,但是,理论上,vue 并没有限制 el-input 绑定的数据,原创 2023-10-11 15:29:17 · 3447 阅读 · 1 评论 -
vue3 defineEmits的使用
2、使用defineEmits会返回一个方法,使用一个变量emits(变量名随意)去接收。3、通过子组件事件修改变量值,同时将值传递给父组件,对父组件的变量进行赋值。3、在子组件要触发的方法中,调用emits并传入发射给父组件的方法以及参数。1、在子组件中调用defineEmits并定义要发射给父组件的方法。以下代码和内容的使用都是在vue3的setup中,未使用TS。2、在子组件中定义+1和-1方法,以及一个变量。3、defineEmits API 使用说明。1、在父组件中定义一个变量。原创 2023-10-10 17:59:23 · 640 阅读 · 0 评论