随笔分类 - vue3
记录Vue使用过程中的问题
摘要：这里使用轮播图为例 vant插件地址：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart 这里我们可以通过快速上手可以看到 可以通过终端下载两种版本的vant，这里我们选择vue3下载 然后就是引入，这里引入时推荐我们下载一个叫babel的插件
阅读全文
摘要：在GitHub里搜索这个名称 然后点进去，获取下载方式，通过vue终端进行下标 下载完成在需要的Vue组件页面里引入 在视图HTML上我们要滚动的结构要使用两层div包裹，并给出相应的class 其次在js里即逻辑层 一般在vue3里我们所有的代码都是写在setup里的所以我们需要在这个页面加载完成
阅读全文
摘要：//ref 用来给定的值创建一个响应式的对象 //reactive 声明对象具有响应式 //toRefs 解构赋值时保留响应式 //readonly 把响应式数据变成原生的数据 //isRef 判断 是不是响应式的数据
阅读全文
摘要：在VUEX中如果没有其它操作，在这中只是单一状态数，在项目中我们只有一个state 如果我们的业务量越来越大，所以胡数据都堆在一起，以后更改起来就会很麻烦 这时我们就需要使用模块的概念 modules:{ user:{ //跟用户相关的数据放这 state:{ }, geeters:{ }, mut
阅读全文
摘要：在vuex中使用计算属性，如在stre文件夹下的index.js里 使用getters 然后在要调用vuex的页面里面直接调用这个方法就可，得到这个结果 这是获取每个自乘的值 把数组里的每一项相加，获得总价要这样写 使用过滤，然后把这个方法返回给要调用的页面 计算属性的方法怎么调用其它方法 这里我写
阅读全文
摘要：这是一个VUEX的修改值的流程，先通过组键使用——请求后台提交到Mutatlons然后通过state修改 首先要通过命令下载vuex，或通过新建目录时就一起安装一个。 示例： 在store，index下新建一个值为dnum:0 然后在需要使用修改dnum值的页面引用 home页面 $store 是在
阅读全文
摘要：当我们切换页面时页面会被销毁，重新切换回来时会被创建 如图 当我们切换时 在原来Vue2上面缓存组件原来是这样写的在app.vue里 这样写在Vue3里是不会生效的，可以查看页面 我们必须使用新的插槽方式来使用缓存 页面功能 <router-view v-slot="{ Component }">
阅读全文
摘要：如果我们要做一个根据页面改变标题可以直接在当前页面直接写 这样写即可 也可以根据路由守卫进行更改，这里我设置全局守卫进行更改 在路由设置标题 在路由时使用前置守卫 vue2老版的 这是老板的vue2的方式，vue3里没有next()放行 vue3新版的，如果有阻止下一步就使用return false
阅读全文
摘要：重定项 Home 首页 About 关于我们 在路由设置 redirect:'要跳转的路径' 意思就是当我们点击首页时很跳转到关于我们页面 首页的点击高亮页面不会随我们点击变亮而是跳转的页面变亮 也可以根据name名字进行跳转 别名 顾名思义就是给除name以为的名字一个小名 alias:'/别名'
阅读全文
摘要：User 父组件 MyPage 子组件 params类型（单个，动态路由） 在父组件里使用MyPage子路由的路径 直接传值 或添加动态数据传值 :to=" '/父路由/path的子路径名字/'+动态值'" 注：page是子路由里MyPage使用的路径名字page 再到路由里引用子组件路径 page
阅读全文
摘要：当我们要在父路由里使用子路由和子组件内容，并且路径要显示出在父路由下的子路由（一般直接使用子组件，路径是不会发生改变的） 父路由：User 子路由：MyOrder，MySetting 在路由设置里引入组件路径 然后在User组件里使用引入子路由 最后当我们点击父路由时就可以看到子路由 点击子路由显示
阅读全文
摘要：下载了路由之后一般是这样使用的 import 名称 from '路径' 通过导入路径引入的，这样使用一有个弊端，我们在打包时会打包到一个js文件里，没有分开 如果有一百个路径，他会把一百个路由的页面用到的js封装到一起，到时候我们访问组件时加载速度会很慢 第一个js文件是：APP应用的js 第二个j
阅读全文
摘要：在src下新建一个文件夹和文件js 然后在js文件里写入 import axios from 'axios' //引入下载的axios const instance = axios.create({ baseURL:'接口地址', timeout:5000 //几秒 })//创建实例 instanc
阅读全文
摘要：beforeCreate(){ console.log('实例刚刚被创建') }, created(){ console.log('实例已经创建完成') }, beforeMount(){ console.log('模板编译之前'); }, mounted(){ console.log('数据更新之
阅读全文
摘要：子组件 MyBar <template> <div> <slot name="two" :user1='usname'></slot>// 有名字的插槽 <slot :user='usname'></slot> //无名字插槽 :user 自己命名的属性，'usname'就是data里的值 //通过
阅读全文
摘要：一般不使用具名插槽时，都是这样使用 子组件 MyBar <template> <slot> <button>点我</button> //如果父组件在使用子组件的时没有写入标签或内容就会默认显示button </slot> </template> 父组件 MySideBar <template> <m
阅读全文
摘要：子组件 展示变量，把在data里把变量设为0 声明一个自定义方法，进行相操作的步骤 父组件 给一个button加一个点击事件 并在引入的子组件上给一个名字ref='名字' 在自定义事件里先声明事件 然后通过this.$refs方法找到刚才给子组件的名字访问其事件或变量 如 this.$refs.aa
阅读全文
摘要：首先要在父组件里引入子组件 父 在父组件里声明一个事件，并不进行操作 子 在子组件里声明一个点击事件 然后在方法里使用 $parent:是在子组件中可以直接访问该组件的父实例或组件 methods: { one(){ this.$parent.changen(); //操作父组件的方法 change
阅读全文
摘要：如图 当我们使用子组件的值传给父组件时要用到$emit 子组件 给子组件设置一个事件，括号里是传的值，如图 然后在自定义事件里使用和emit，如图 ，注$emit(‘事件名’,要传给父组件的值) 当我们点击子组件的(changcount)事件时很触发父类的(mycontevent)事件监听 父组件
阅读全文
摘要：在使用组件通信时我们先看一张图 看完后就知道使用父传子时要用到props，现在就开始使用在vue里创建一个父组件，和一个子组件 父组件传值 在父组件App.vue里先导入子组件 然后注册 然后再 template 直接使用 <template > <div> <MyMain> </MyMain> <
阅读全文
浙公网安备 33010602011771号