sinat_34241861的博客

一、插槽介绍插槽（slot）本质是组件的一段HTML模版。插槽显不显示由父组件决定。插槽的核心问题就是：（1）显不显示；（2）怎么显示一个组件中的非插槽模版是指html模版：div、span、ul、table等；非插槽模板的显示隐藏以及怎样显示由自身控制插槽模版其实就是空壳子，因为它显示隐藏以及最后用什么样的html模板显示是由父组件控制；但是插槽显示的位置确由子组件自身决定，slot写在子组件template的哪块，父组件传过来的模板将来就显示在哪块插槽分类单个插槽（也称为匿名插槽或默认插槽

Object.assign()是浅拷贝合并对象：var o1 = { a: 1 };var o2 = { b: 2 };var o3 = { c: 3 };var obj = Object.assign(o1, o2, o3);console.log(obj); // { a: 1, b: 2, c: 3 }console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。Vue中的使用技巧由于Object.assign()有上述特性，所以我

可以监听子控件的click事件，并调用e.stopPropagation()阻止click事件继续传递，这样外层的折叠面板父控件就接收不到click事件了代码：<template> <div> <a-collapse @change="handleCollapseChange($event, step, index)" draggable="true" @dragstart.native="dragStart($event, step, index)"&gt

一、H5原生的drag&dropdraggable=true（必需）ondragstart：拖动开始时触发ondrag：拖动过程中触发ondragend：拖动结束触发ondragenter ：被拖动元素进入到目标区域时触发ondragover ：被拖动元素在目标区域移动时触发ondragleave ：被拖动元素离开目标区域时触发ondrop ：释放鼠标时触发二、实际例子2.1 被拖动元素–折叠面板（子组件）<template> <div>

应用场景使用Ant Design Vue框架开发前端，要求树状table表格默认全部展开。使用expandedRowKeys实现了该目标，但是发现table表格的图表失效了。点击图表不能折叠或展开行解决办法使用table组件的 @expand 事件，实现onExpand方法。onExpand即可解决问题<template> <a-table :columns="currColumns" :dataSource="dataSource" rowKey="id" border

1. a-table标签里定义 :expandIcon=“expandIcon” 方法<a-table :scroll="{y: dataSource.rowsHeight}" rowKey="id" @expandedRowsChange="expandedRowsChange" @expand="expand"

props: { echartStyle: { type: Object, default() { return {} } }, titleText: { type: String, default: '' }, tooltipFormatter: { type: String, default: '' }, opinion: { type: Array,

基本方法介绍Vue.set(vm.items, indexOfItem, newValue)vm.items ：代表源数据indexOfItem : 代表要修改的数据的键newValue : 代表要修改的数据的新值实际例子修改李四的 age 为 19 ，如果直接修改，vue是获取不到的，就需要借助 $set 来手动触发改变源数据：let a = [ {name:'张三',age:'20',sex:1}, {name:'李四',age:'21',sex:0},

使用场景实际开发中，如果你想基于新的dom做点什么，那么对新dom的一系列js操作都需要放进Vue.nextTick()的回调函数中。通俗的理解是：更改数据后，当你想立即使用js操作新的视图时，需要使用它原理Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和dom操

问题产生场景在前端开发任务中，需要实现兄弟组件之间传值。为实现这个目的，采用了 总线 的方式。但是实际结果是当兄弟组件A触发了自定义事件后，兄弟组件B并未监听到相关的信息问题原因因为我的代码中$emit()事件先于 $on()监听事件执行了，Vue并没有储存监听事件，所以无法监听到数据。即使用总线方式实现兄弟组件间的传值时，必须保证 $on()监听事件先被创建，否则无法正常监听消息参考博客链接：https://blog.youkuaiyun.com/qq_39081974/article/details/881

使用过程安装插件 npm install vue-code-diff引入插件import CodeDiff from "vue-code-diff";完整实例<template> <section> <div> <code-diff :old-string="oldStr" :new-string="newStr"

sockjs-client、stomjs的介绍使用sockjs-client、stomjs，可实现webSocket通信。同时后端项目中也需要引入相应模块sockjs-clientsockjs-client是从SockJS中分离出来的用于客户端使用的通信模块.所以我们就直接来看看SockJS. SockJS是一个浏览器的JavaScript库,它提供了一个类似于网络的对象,SockJS提供了...

问题出现场景实际工作项目中需要实现table表格的增改功能，添加与编辑页面使用了form表单填写信息。当添加/编辑页面填写完一次信息并提交后，再次点击添加/编辑按钮，form表单各项值仍为上一次数据的缓存解决方法汇总使用 resetFields() 解决，this.form.resetFields()若form表单中使用 initialValue 给表单各项赋初始值，使用此中方法最合适...

导入外部css样式全局导入在项目的main.js中引入外部css样式资源import Vue from 'vue'import Antd from 'ant-design-vue'import 'ant-design-vue/dist/antd.css'import './assets/css/progressbar/progressbar1.css'import './ass...

JavaScript中 if 和 for 是没有块级作用域的，函数是有块级作用域的var 没有块级作用域，ES5之前一直采用闭包的方式解决这个bug；ES6中新提出了let，具备块级作用域，可以更加简单的解决var带来的问题...

介绍个人理解slot插槽的作用就是预留位置，譬如我们的电脑有usb插槽，可以连接鼠标、键盘、U盘等等一、插槽的基本使用（1）插槽的基本使用<slot></slot>（2）插槽可设置默认值，例如<slot><a-button></a-button></slot>（3）如果有多个值，同时放入到组件进行替换(插槽)时，会一...

概念安装方式一：直接下载 / CDNhttps://unpkg.com/vue-router/dist/vue-router.jsUnpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 https://unpkg.com/vue-router@2.0.0/dist/vue-router.js 这样指定 版本号 或者 Tag。...

了解原生的input，使用 @keyup.enter就可以；如果是element-ui，则要加上native限制符，这是由于element-ui把input进行了封装，原事件就不起作用了，代码如下：<a-input v-model="form.name" placeholder="昵称" @keyup.enter="submit"/><a-input v-model="f...

我的使用场景子组件向父组件传值，父组件在接受子组件传过来的值时，还会附加一些其他参数父组件的部分代码$event代表从子组件中传递过来的值；requestData、record.identifier、remark是父组件自身想要给方法传递的参数，并非来自子组件<template> <a-table :columns="columns" :dataSource="r...

nrm的作用提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址；镜像的含义原来包刚开始是只存在于国外的NPM服务器，但是由于网络原因，经常访问不到。这时候，我们可以在国内创建一个和官网完全一样的NPM服务器，只不过，数据都是从人家那里拿过来的。除此之外，使用方式完全一样。安装及使用运行npm i nrm -g全局安装nrm包使用nrm ls查看当前所有可用...

computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当作属性来使用methods方法表示一个具体的操作，主要书写业务逻辑watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是 computed和methods的结合体...

一、介绍Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，这里的状态管理实际上就是公共数据管理。stateGetterMutationActionModule二、使用场景对于多层嵌套的组件，传参是一个很头疼的问题。如果有一个地方能够存放公共数据，多个组件只需从同一个地方取想要的数据，减少组件之间的繁琐值传递。三、项目应用安装Vuex方式一：直接下载 / ...

父组件传值给子组件子组件传值给父组件非父子组件间的传值非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。公共bus.js//bus.jsimport Vue from 'vue'export default new Vue()组件A: child1.vue<template> <div...

生命周期的概念从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件、这些事件统称为生命周期。生命周期钩子就是生命周期事件的别名生命周期函数的分类创建期间的生命周期函数beforeCreate：实例刚在内存中被创建出来，此时还没有初始化好data和methods属性created：实例已经在内存中创建完成，此时data和methods属性已经初始化好，可以被使用。但是还没有开...