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