vue
文章平均质量分 70
前端大灰狼
这个作者很懒,什么都没留下…
展开
-
vue3 router,store,query,params获取
获取router以跳转路由传递参数等等,相当于vue2中的this.$router import { useRouter } from 'vue-router'const router = useRouter() 获取store,修改store,触发action等等,相当于vue2中的this.$store import { useStore } from 'vux'const store = useStore()// 使用gettersconsole.log(store.原创 2022-04-26 11:06:39 · 3940 阅读 · 2 评论 -
vue3 reactive的坑
最近使用vue3的过程中发现reactive有一些问题清空reactive定义的数组时必须将length设为0,直接赋值一个空数组是没有作用的,同理对象直接赋值一个空对象也没有作用,只能遍历对象一项一项删,这里说的没有作用是不能响应式的更新页面,如果打印一下是能看到确实被删除了,但是页面没有变化 清空数组 // 错误示例<template> <div>{{ arr }}</div> <button @click="click">点击<原创 2022-04-02 10:57:40 · 4142 阅读 · 0 评论 -
Vue3 setup script
setup script是vue3的一个语法糖通常我们使用composition API的时候需要使用setup 钩子,然后还要把页面上要使用的变量return返回出去,例如:<template> <div>{{name}}{{age}}{{persion}}</div> <button @click="sayHello">说话</button> <div>computed: {{ persion.fullNam.原创 2022-03-30 17:19:32 · 1531 阅读 · 0 评论 -
Vue3 vue.config.js配置
vue.config.js是一个可选的文件,如果有的话再项目启动的时候会自动加载这个文件把所有的配置项导出去module.exports = { ... }如果想要用ts注解的话 @vue/cli-service 里有 defineConfig函数 专门注解配置项1 publicPath项目部署的地址publicPath: process.env.NODE_ENV === 'production' ? '生产环境地址' : '开发环境地址',2 outp原创 2022-03-28 19:18:55 · 12401 阅读 · 1 评论 -
Vue3 学习
1 创建vue3项目(首先要确保@vue/cli版本在4.5.0以上)vue --version ## 检查版本vue install -g @vue/cli ## 全局安装vue脚手架vue create vue_test (项目名) ## 创建项目2 相较于vue2的变化 不再引入Vue构造函数,而是引入一个叫做createApp的工厂函数 template中不再需要根标签 3 SetUpsetup的执行时机:在beforeCreate之前...原创 2022-03-25 09:35:19 · 1687 阅读 · 0 评论 -
VueDemo-7.首页展示
7.首页展示7.1 展示nav导航<template> <div class="box"> <header class="header">home header</header> <div class="content"> <div class="myswiper"> <van-swipe class="my-swipe" :autoplay="3000" indicato......原创 2022-02-08 16:01:00 · 474 阅读 · 0 评论 -
VueDemo-1 脚手架Vue-cli
1.Vue-cliVue CLI脚手架1Vue-CLI ≠ Vue,Vue-CLI就是一个Vue工具。1.1单文件组件在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el:'#container '}) 在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好,在这些项目里 JS 只被用来加强特定的视图。但当在更复杂的项目中,或者你的前端完全由JS驱动的时候,下面这些缺点将变得非常明显: 所有的组件都放同一个原创 2022-02-08 15:28:21 · 95 阅读 · 0 评论