随笔分类 - VUE
摘要：插槽是什么 插槽 slot 就是子组件中提供给父组件使用的一个占位符，用 <slot></slot> 表示，父组件可以给这个占位符内填充任何模板代码，填充的内容会自动替换 <slot></slot> 标签。 插槽被分为三种：匿名插槽、具名插槽、作用域插槽。 1、匿名插槽 没有名字的插槽就是匿名插槽，
阅读全文
摘要：在 vue3 中使用 swiper, 实现轮播图的效果；如果组件样式等模块引入不当，很有可能导致，页面无效果；或者想要的箭头或者切换效果异常问题。 使用命令 npm install swiper 安装 swiper插件； 在main.js里使用样式文件，如下所示： 注意需要安装：npm instal
阅读全文
摘要：Vue监听页面放大缩小事件 ，使用window.addEventListener，methods中方法 ChangeWin(){ let ratio = this.getRatio(); let Pwidth = window.screen.width*this.getRatio()/100; le
阅读全文
摘要：Return中定义CSS变量 在Return 中定义一个比变量 data () { return { '--mg_top1':'3vh', }, } 在methods方法使用 this.$el.style.setProperty('--mg_top1', '3.6vh') 在CSS中使用 .mg_t
阅读全文
摘要：1、js 中 let a = linq.from(Datas).groupBy(({ DeclineType }) => DeclineType) groupby分组之后是什么数据集合，为什么在a变量中看不到数据呢？ groupBy方法会将数据集合按照指定条件进行分组，返回一个键值对的集合。其中，键
阅读全文
摘要：vue简单的跑马灯效果，直接封装的组件，引入就能用。 <template> <div class="block"> <h3 class="h3_title"> 特别提醒 </h3> <p class="words" ref="words" :text="content" > {{content}}
阅读全文
摘要：一、 拦截器介绍 一般在使用axios时，会用到拦截器的功能，一般分为两种：请求拦截器、响应拦截器。 请求拦截器 在请求发送前进行必要操作处理，例如添加统一cookie、请求体加验证、设置请求头等，相当于是对每个接口里相同操作的一个封装； 响应拦截器 同理，响应拦截器也是如此功能，只是在请求得到响应
阅读全文
摘要：前言 在做项目的时候，通常会遇到需要在 HTML 标签上绑定变量来设置样式，对于这种需求，共有两种情况。 实现 第一种情况 如果是对于代码中实实在在存在的 HTML 标签，我们可以直接绑定变量来设置样式，比如改变表格的边框。 先设置一个表格边框样式的 JS 变量（table_border）。 再在
阅读全文
摘要：1、Vue-Router路由器 vue想要实现页面的切换需要用到vue-router，这话好像有点多余。 对应的标签 router-link to <router-link to="/about">About</router-link> 注意: vue2.0 需要 vue-router3.0版本。
阅读全文
摘要：1、vuex的dispatch方法调用例子 页面方法 methods:{ add(){ this.$store.dispatch('jia',5) } } store.js中的内容 export default new Vuex.Store({ state: { sum:0 }, mutations
阅读全文
摘要：目录 随手vue笔记 (一) 随手vue笔记 (二) 1、自定义指令_函数式 自定义指令就是操作Dom元素 console输出： 实现代码： 详细代码： <template> <div class="container"> <h2>当前的n数值是：<span v-text="n"></span></
阅读全文
摘要：目录 随手vue笔记 (一) 随手vue笔记 (二) 1、vue可以通过$mount()动态初始化绑定容器 setTimeOut(function(){ vue.$mount('#root') },1000) //1秒之后就开始绑定上去 2、Object_defineProperty 往类中添加属性
阅读全文
摘要：报这个错误是因为eslint代码检查到你注册了组件但没有使用，然后就报错了 两个解决办法: 1、修改项目的package.json 在package.json中找到eslintConfig下的rules，增加"vue/no-unused-components": "off"即可： "eslintCo
阅读全文
摘要：获取checkbox中的值 VTable.vue组件 <template> <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <!-- 添加索引 --> <el-tab
阅读全文
摘要：自定义列的内容添加按钮或自己想要的内容 Compoents文件夹下加个 VTable.vue 文件，内容如下 <template> <el-table :data="tableData" style="width: 100%"> <!-- 添加索引 --> <el-table-column type
阅读全文
摘要：自定义列内容 Compoents文件夹下加个 VTable.vue 文件，内容如下 <template> <el-table :data="tableData" style="width: 100%"> <!-- 添加索引 --> <el-table-column type="index" widt
阅读全文
摘要：简单封装提起出列和数据 Compoents文件夹下加个 VTable.vue 文件，内容如下 <template> <el-table :data="tableData" style="width: 100%"> <el-table-column v-for="item in columns" :p
阅读全文
摘要：举个例子： watch: { value(newValue) { this.currData = (newValue || []).slice() }, } 当父组件传过来一个数据的时候，用slice来重新整个新的数据赋值给变量，这就相当于是在子组件中操作数据，不会改变父组件中的数据。 记录一下。
阅读全文
摘要：1. vue 2.6.0版本之前的slot插槽： 用slot='' 替代表示对应的插槽。 <!--1.插槽组件中： 匿名插槽和具名插槽--> <div> <slot></slot> <slot name='content'></slot> </div> <!--2. 使用插槽组件：--> <chil
阅读全文
摘要：渐进式的理解和使用Render <!-- <template> <div class="container"> <h1>1</h1> </div> </template> --> <!-- 这里就不需要上面的 模板方式，直接通过render函数来生成组件 > <script> export defa
阅读全文
