随笔分类 -  前端解决方案

1
日常的一些配置,某个业务的通用做法(解决方案)
摘要:使用场景:父组件需要使用到子组件的data时 例子 父组件有list数组,传递给子组件,子组件将数组中的属性全部显示出来,但是用什么标签显示这些属性不确定(使用插槽) 父组件传递插槽内容过去替换子组件的slot,问题来了,内容是数组项的第几个呢? 子组件将数组项内容回传父组件,通过插槽(作用域插槽) 阅读全文
posted @ 2023-02-04 15:23 凌歆 阅读(17) 评论(0) 推荐(0) 编辑
摘要:父组件监听事件时==事件处理函数直接写名称,不加上()== ==有参数也是如此== 阅读全文
posted @ 2023-02-04 15:23 凌歆 阅读(11) 评论(0) 推荐(0) 编辑
摘要:简单类型不需要加上引号 ==如对象user.name(注意加上引号)== watch:{ "obj.name":{ ... } } 侦听器的应用(存入本地存储localStorage) 也可以在==组件销毁时存入本地存储== watch: { list: { handler(){ // 2. 存入本 阅读全文
posted @ 2023-02-04 15:23 凌歆 阅读(30) 评论(0) 推荐(0) 编辑
摘要:vue关闭代码检查 eslint的代码检查 vue.config.js module.exports={ lintOnSave:false } 阅读全文
posted @ 2023-02-04 15:23 凌歆 阅读(12) 评论(0) 推荐(0) 编辑
摘要:click只是个例子,可以换成change,blur..... @click.prevent 阻止默认行为 @click.stop 阻止事件冒泡 @click.once ==click后面函数只执行一次== 阅读全文
posted @ 2023-02-04 15:23 凌歆 阅读(16) 评论(0) 推荐(0) 编辑
摘要:例子 <span @click="fn(10,$event)"></span> 不传递参数时,默认第一参数为$event 传递参数时,如果需要event对象,需要显示传递 阅读全文
posted @ 2023-02-04 15:22 凌歆 阅读(19) 评论(0) 推荐(0) 编辑
摘要:this.arr[0]=1 等价于 this.$set(this.0,1) Vue.set( target, propertyName/index, value ) 参数: {Object | Array} target {string | number} propertyName/index {a 阅读全文
posted @ 2023-02-04 15:22 凌歆 阅读(68) 评论(0) 推荐(0) 编辑
摘要:![](https://img2023.cnblogs.com/blog/3089561/202302/3089561-20230204144513448-1202279085.png) 阅读全文
posted @ 2023-02-04 15:21 凌歆 阅读(3) 评论(0) 推荐(0) 编辑
摘要:简单写法,给计算属性赋值报错 ==解决方案==:提供set方法 实例(全选-->反选,反选->全选) <template> <div> <span>全选:</span> <!-- 4. v-model 关联全选 - 选中状态 --> <input type="checkbox" v-model="i 阅读全文
posted @ 2023-02-04 15:21 凌歆 阅读(44) 评论(0) 推荐(0) 编辑
摘要:之前经常使用的 this.arr.filter(item=>item.id!==id) 另一种方法 let index=this.arr.findIndex(item=>item.id id) this.arr.splice(index,1) 阅读全文
posted @ 2023-02-04 15:21 凌歆 阅读(33) 评论(0) 推荐(0) 编辑
摘要:通过==this.$refs.ref名称获取组件对象== 不仅仅只是获取到绑定该Ref的Dom元素 其中的一切都变成可调用的 // 调用组件方法,突破了父子组件相互通信的繁琐的问题 this.$refs.myRef.submit() // 获取data或者计算属性 this.$refs.myRef. 阅读全文
posted @ 2023-02-04 15:21 凌歆 阅读(13) 评论(0) 推荐(0) 编辑
摘要:Prop节点接受父组件传值的校验 export default { props: { arr: { type: Array, required: true, // 自定义校验规则 validator(value) { // value就是接到数组 if (value.length >= 2 && v 阅读全文
posted @ 2023-02-04 15:20 凌歆 阅读(50) 评论(0) 推荐(0) 编辑
摘要:2. vue路由 - 声明式导航 2.0 声明式导航 - 基础使用 目标: 可用全局组件router-link来替代a标签 vue-router提供了一个全局组件 router-link router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#) router-l 阅读全文
posted @ 2023-02-04 15:20 凌歆 阅读(35) 评论(0) 推荐(0) 编辑
摘要:原理:this.$nextTick(函数体)返回的是一个promise对象 可以使用async/await 简化操作 阅读全文
posted @ 2023-02-04 15:04 凌歆 阅读(14) 评论(0) 推荐(0) 编辑
摘要:query和params参数传递参数 阅读全文
posted @ 2023-02-04 15:04 凌歆 阅读(8) 评论(0) 推荐(0) 编辑
摘要:.lazy change是触发而非input触发 即失去焦点才把值赋给视图v .trim .number 阅读全文
posted @ 2023-02-04 15:03 凌歆 阅读(10) 评论(0) 推荐(0) 编辑
摘要:如果图片不在本地,在某个服务器上,如http://www.xxx.com/1.png js 中直接使用 <script> data(){ return { url:'http://www.xxx.com/1.png' } } </script> 如果图片在本地呢? ==不能使用相对路径==:./as 阅读全文
posted @ 2023-02-04 15:03 凌歆 阅读(212) 评论(0) 推荐(0) 编辑
摘要:在之前对promise对象的处理 使用==Promise原型函数then,catch== 解决回调地狱的问题,但存在冗余代码 .then().then().then() ==async await es8(esma 2017) 引入== await Promise() await Promise() 阅读全文
posted @ 2023-02-04 15:03 凌歆 阅读(11) 评论(0) 推荐(0) 编辑
摘要:使用position:fix,top,left,right,bottom 实现置顶(置底) 问题:主体内容会被这个遮住 解决方法 主体内容设置上下padding,保证内容完全可见 阅读全文
posted @ 2023-02-04 15:02 凌歆 阅读(21) 评论(0) 推荐(0) 编辑
摘要:一些注意点 1、配置vue项目支持es6语法 在package.json文件中新增type节点 package.json { "type": "module", } 2. Vuex的挂载 Vue.use方法调用了一个install的方法 vuex中,使用辅助函数的形式引入mutations,如果不携 阅读全文
posted @ 2023-02-04 11:16 凌歆 阅读(189) 评论(0) 推荐(0) 编辑

1
点击右上角即可分享
微信分享提示