- 博客(13)
- 收藏
- 关注
RSS订阅原创 使用Vue3api实现svg-icon的全局引入(未使用TS，只是在原Vue2升级)
因为在vue3项目中直接将原vue2中全局组件svg迁移时，完全按照vue2的写法，发现无法实现，所以就记录一下，方便日后查找1.安装npm install svg-sprite-loader -S2.配置文件vue.config.jsconst path = require('path')function resolve(dir) { return path.join(__dirname, dir)}module.exports={ chainWebpack: config =&
2021-06-17 16:34:53
577
3
原创 nuxtJs基础配置记录
nuxt学习记录本来打算学习nuxt的，刚好有个后台管理系统入口的静态页面需要实现，就简单的撸了一下，初步主要涉及到资源引入，组件，组件数据传输，整体开发方式跟vue一样，只是组件需要放到components下，页面放到paga下面，然后就是打包部署，目前不需要服务端渲染，只需要打包后丢到nginx即可，即静态应用部署npm run generate会生成一个dist文件，然后所有的静态资源都在这里实现上述简单页面所遇到的问题1.assets/static中资源引入template,styl
2021-04-19 16:29:25
1121
原创 Vue 2迁移v-model
vue 3中v-model内容的修改1.非兼容：用于自定义组件时，v-model prop 和事件默认名称已更改：prop：value -> modelValue；event：input -> update:modelValue；2.非兼容：v-bind 的 .sync 修饰符和组件的 model 选项已移除，可用 v-model 作为代替；3.新增：现在可以在同一个组件上使用多个 v-model 进行双向绑定；4.新增：现在可以自定义 v-model 修饰符。实话说，看到上面列出
2021-03-19 19:00:19
180
原创 渲染函数
业务场景，接口返回的数据格式是直接将数据插入到table中，展示的效果就跟接口返回的数据是一样的，很明显我们不需要标签不需要高亮的话，我们可以直接使用正则将匹配的标签掉换成空let desc = ‘币种[“USD”]放行，[“CNY”]拦截’desc.replace(/<[^>]+>/gim,’’)结果：币种[“USD”]放行，[“CNY”]拦截但是产品经理要求对于条件的部分需要高亮显示效果如下：对于普通的我们使用双大括号会将数据解释为普通文本，而非HTML，v-htm
2021-03-17 16:02:32
749
原创 混合模式mixin
混合模式mixin1.什么是mixin2.mixin可以用来做什么3.怎么使用1.简单点说，其实mixin就是对当前组件的扩展，可以用来分发组件的可复用功能，mixin对象可以包含任意组件选项2.比如说多个页面有一个查看功能，接口地址，展示效果都是一样的，如果不提取出来，那么每个页面都需要写一遍，把它放到mixin之后，在页面中就可以直接调用查看功能的方法了3.使用方式myMixin.jsconst myMixin = { created() { this.hello() }
2021-03-16 19:13:36
713
原创 ref模板引用与组合式API中模板的引用
vue2与vue3中模板引用的区别vue2中获取模板<div ref="refDom"></div>获取模板this.$refs.refDomsetup中<div ref="refDom"></div>setup(){ const refDom = ref(null) return { refDom }}//注意：模板中ref定义的值，要跟setup中返回的值相同...
2021-03-16 17:05:00
461
2
原创 vue插槽slot
vue插槽slot1.插槽是什么，先从一个简单的例子开始子组件<template> <h1> </h1></template><script>export default { name: 'SlotStudy',}</script>父组件<SlotStudy>插槽学习</SlotStudy>我们希望看到的时，浏览器中应该展示插槽学习，但是实际上什么都没有运行结果：子组件
2021-03-15 18:11:18
208
原创 props与非props的属性
props与非propsprops属性使用props进行组件间的数据传输，是单向数据流，即父组件向子组件使用props进行数据传输，子组件只能读取相应的值，但是不能直接对其进行改变有两种情况可能希望改变props的值1.传入时作为初始值，在子组件中希望该值作为本地的数据进行使用，在这种情况下，可以将获取的该props值存放到本地data中的一个属性中props:[title],data(){ curTitle:this.title}2.作为初始值传入，希望对其进行转换。在这种情况下，最好
2021-03-15 14:56:53
210
原创 组件间对于setup中数据进行传递获取
vue2中组件间数据传输子组件 <input type="text" :value="modelValue" @input="onInput"> props: { modelValue: String }, methods: { onInput (e) { this.$emit('form-input1', e.target.value) } }父组件<ValideInput1 @form-input1="formInput1" v-m
2021-03-12 15:40:02
2875
原创 setup中使用provide/inject
provide/inject组件中作为组件选项使用与setup中使用的区别戳这里：查看对应官网地址作为组件选项使用，与methods使用方法相同作为组件选项provide:{代码逻辑}inject:[provide中的key]setup中provide('providename',value)//两个参数:属性名，属性值inject('providename','默认值')//两个参数：需要inject的属性名，默认值（可选）组件中使用provide/inject选项来进行数据传输in
2021-03-10 17:36:39
3905
原创 setup组件选项学习
setup学习（参数的学习）主要记录v3知识点的学习，有不对的地方，欢迎帮忙指出，对应官网地址1.setup是什么2.setup怎么用3.setup用来做什么1.setup是什么setup是一个组件选项，可compute，method一样的使用方式2.setup如何使用（参数的使用）首先setup可以接收两个参数setup(porps,context){}1.propsPropsParmas组件<template> <h1> {{title}}
2021-03-10 14:37:20
2469
原创 setup组件选项中生命周期钩子
setup中组件选项中生命周期钩子官网链接地址组件选项data,method,computed,created,mounted,setup组件选项内比如setup是一个组件选项，那么组件选项内，即就是在setup中使用的生命周期钩子与组件选项内的生命周期钩子组件的生命周期钩子选项，如mounted,updated等，setup组件选项内的生命周期钩子，需要加上一个“on”,如onMounted，具体组件钩子如下生命周期钩子与组件内生命周期钩子的使用差别组件生命周期钩子选项mo
2021-03-10 14:36:03
4079
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人