qq_36437172的博客

ant-design-vue 库中 Spin ：用于页面和区块的加载中状态。页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。

父子组件通过 props 和 emits 来通信。即：父元素通过 props 把数据传递给子元素，子元素通过 emits 通知父元素内部的变化，还可以通过 defineExpose API 的方式暴露给父元素方法，让父元素调用。作用：Vue 还提供了 provide 和 inject API 实现祖先元素和后代元素的通信。使用方法：使用 provide 函数向所有子元素提供数据，子元素内部通过 inject 函数注入使用。使用场景：组件设计内部交互的逻辑，对应子组件提供什么数据，对父组件提供什么方法，

setupsetup 函数结束两个参数：props 和 context 一个普通 javascript 对象，暴露了其他可能在 setup 中的值。export default { setup (props, context) { const visible = toRef(props, 'visible') console.log(visible.value) const { attrs, slots, emit, expose } = context }}at

在 Vue 2.2 中，我们引入了 model 组件选项，允许组件自定义用于 v-model 的 prop 和事件。在 Vue 3 中，双向数据绑定的 API 已经标准化，以减少开发者在使用 v-model 指令时的混淆，并且更加灵活。Vue2 中的 v-model 使用在 2.x 中，在组件上使用 v-model 相当于绑定 value prop 并触发 input 事件：<ChildComponent v-model="pageTitle" /><!-- 是以下的简写: --

Vue2 实现动态组件// template<component :is="currentTabComponent" />// JSX<component is={this.currentTabComponent} />实际上，上述 JSX 是不生效的。解决方案方法一const tabData = [ { key: 'weightList', name: '司磅', componentName: 'weight' }, { key: 'quality

面试官：Vue如何在 JSX 中使用 scopedSlots ? scopedSlots 和 slot-scope 的区别scopedSlots 和 slot-scope 的区别作用相同：都是作用域插槽 场景不同：slot-scope 是模板语法，scopedSlots 则是编程式语法 使用不同：在 template 中使用 slot-scope，在 render 函数中使用 scopedSlots在 template 中如何使用在 JSX 中如何使用...

v-slot与slot-scope的有什么不同？父组件向子组件里面插入一些东西1.基本使用<SlotDemo:url="website.url">{{website.title}}</SlotDemo><a:href="url"><slot>默认内容</slot></a>exportdefault{props:['url']}2.作用域插槽<...

computed：计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容（computed 的值在 getter 执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取 computed 的值时才会重新调用对应的 getter 来计算）。一般来说，需要依赖别的属性来动态获得值，有时候我们计算的值，与某个动态值关联，那我们又该如何向 computed 中传入参数呢？将计算属性返回值改为函数，再进行传值操作，同样我们使用方法也可以到达一样的效果。comput

Vue 是使用的的模板语法，Vue的模板实际上就是编译成了 render 函数，同样支持 JSX 语法。在 Vue 官网中，提供 createElement 方法来

一、$attrs、$props、$listeners$attrs：当前组件的属性，通俗的讲也就是在组件标签定义的一系列属性，如input的value，placeholder等，但是不包括在当前组件里面定义的props属性$listeners：当前组件监听的事件，通俗的讲也就是在使用组件的时候在标签中定义的事件，如@input，以及一些自定义事件@tempFn等$props：当前组件从父组件那里接收的参数，通俗的讲和$attr差不多，但是只包括在当前组件中定义了的props属性。通俗的讲：$.

说起菜单的如何生成的，这个会与路由和权限的定义有关。因为路由涉及页面的跳转以及当前菜单项高亮选中等，可能后面还会涉及面包屑、标签页等功能的制作。目前不考虑权限，我们根据约定路由的配置，来生成动态菜单。一、布局对于后台管理系统，通常由 sider 菜单栏、header、footer 和 content 的内容组成。<a-layout> <a-layout-sider>Sider</a-layout-sider> <a-layout> .

一、v-model 语法糖v-model指令在表单<input>、<textarea>、<select>元素上创建双向数据绑定。<input v-model="value" />二、model 属性实现自定义组件的双向数据绑定允许一个自定义组件在使用v-model时定制 prop 和 event。默认情况下，一个组件上的v-model会把value用作 prop 且把input用作 event，但是一些输入类型比如单选框...

vm.$attrs包含了父作用域不作为 prop 被识别（且获取）的 attribute 绑定（class 和 style 除外）。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定（class 和 style 除外），并且可以通过 v-bind=“$attrs” 传入内部组件 -- 在创建高级别的组件时非常有用。总之就是包含了所有父组件在子组件上设置的属性（除了 prop 传递的属性、class 和 style）。<div id="app"> <base

一、安装依赖npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props在 babel.config.js 文件添加如下信息：module.exports = { presets: ['@vue/babel-preset-jsx'],}您可以切换特定功能，默认情况下，所有功能（除外compositionAPI）均已启用：module.exports = { presets: [ [

在有些情况下，我们可能需要对一个prop进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。在一个包含prop的假设的组件中，我们可以用以下方法表达对其赋新值的意图：this.$emit('update:isShow', false)父组件可以监听那个事件并根据需要更新一个本地的数据property。<add-pickup :is-show.sync="showAddPickup"/>...

函数式组件： functional:true 无状态（没有data）、无实例（没有this上下文）、无生命周期 用一个简单的render函数返回虚拟节点使他们渲染的代价更小 const lists = [ { name: '客户', prop: 'userName' }, { name: '单据状态', prop: 'status', customRender: (record, list) => { retur...

1.v-text:更新文本内容（textContent）。<span v-text="msg"></span><!-- 和下面的一样 --><span>{{msg}}</span>v-text可以防止{{}}出现在页面上。2.v-html：把html当成html渲染（innerHTML）。<divv-html="html"></div>3.v-show：根据表达式之真假值，切换...

一、组件内使用在 mounted 中添加一个监听，需要在 beforeDestroy 中移除这个监听（案例：vue 轮询），这是我们可以使用 hook。mounted () { window.addEventListener('online', this.handleOnline) this.$once('hook:beforeDestroy', function () { window.removeEventListener('online', this.handleOnline

watchwatch：一个对象，键是需要观察的表达式，值是对应回调函数，也可以是是方法吗或者包含选项的对象。vue 实例将会载实例化是调用 $watch()，遍历 watch 对象的每一个 property。deep: true：将会深度监听对象的 property改变时，被调用。immediate: true：将会载监听开始之后立即调用。注意：不应该使用箭头函数来定义 watcher 函数(例如searchQuery: newValue => this.updateAutocomp.

Vue 内置了一些非常有用的指令（比如v-html和v-once等），每个指令都有自身的用途。完整的指令列表可以在这里查看.这还没完，更棒的是可以开发自定义指令。Vue.js 社区因此得以通过发布自定义指令npm 包，解决了无数的代码问题。以下就是我最喜欢的 Vue.js 自定义指令列表。不用说，这些指令为我的项目开发节省了大量时间！1. V-Hotkey仓库地址:https://github.com/Dafrok/v-hotkeyDemo: 戳这里https://dafrok.g...

一、可视区域加载指令用来控制组件显隐的指令。当前组件到达可视区域后显示该元素。import Vue from 'vue'const waypoint = Vue.directive('waypoint', { inserted (el, binding, vnode) { const { showStr } = binding.value // 控制组件显隐的变量名称，注意，传字符串 const scroll = () => { if (vnode.con

如何配置神策埋点信息？1.安装依赖npm install --save sa-sdk-javascript2.项目配置在 utils文件夹下新建sensors.js，配置单页应用的固定代码，（非单页应用不需要加上配置对象：is_track_single_page:true）。import sensors from 'sa-sdk-javascript'sensors.init({ // 神策系统配置 server_url: 'http://shence.ap-ec.c...

一、浏览器对用户访问网页的记录二、vue 对访问记录的管理vue 路由跳转通过对 history,pushState() 和 history.replaceState() 放的模拟来实现的，会往 history 栈中存放一条记录。当调用 router.go() 或者 router.back() 方法时，就和 history.go()、history.back() 效果一样。三、vue 组件滚动行为使用 tab 组件进行路由切换，同时对应的子组件重新进行渲染，而不是保存历史滚动的位置信息。

watch 的使用首先 watch 是一个对象，一定要当成对象来说使用。对象就有键和值。键：就是你监听的东西，比如：$route（监听路由），或者data 中的某个变量。值：可以是函数或者函数名。如果是函数，则监听变化时，需要执行的函数，这个函数有两个参数，一个是变化后的值，一个是变化前的值，而如果是函数名，则需要用单引号来包裹。当然值是包括选项的对象。handler 回调函数：监听到变化是，应执行的函数；deep：其值为 true/false，确认是否深度监听（深度监听可以监听对象

需求描述：当我们从某个特定的页面进入到当前的那个路由页面时，需要滚动浏览器视图到特定内容区域；从其他页面进入当前页面时，则无法滚动视图区域，那么我们如何判断路由跳转呢？首先我们可能想到的是，路由监听，可以获取 from 和 to 的路由信息。代码如下：watch:{ $route (to, from) { console.log(to, from); }},使用上述监听路由时，并没有在控制台打印任何路由信息，而我决定采用深度监听路由变化，代码如下：watch: {

一、export default1.export default：相当于提供了一个接口给外部使用，其他文件通过 import 引入使用。export default { name: 'List', data () { return { list: [] } }}export default new VueRouter({ routes: [ { path: '/', component: () => impor

一、父组件中调用子组件事件父组件中引入子组件<user-edit ref="userEdit" @close="handleUserEditClose" @success="handleUserEditSuccess" :userEditVisiable="userEdit.visiable"/>父组件如何调用子组件中的方法呢?edit (record) { this.$refs.userEdit.setFormValues(record) // 调用子

生活需要时时的小惊喜，代码需要常常的新想法。给波澜不惊的生活，增加了一丝绚丽多彩的意义。需求描述：在功能设计开发过程中，message 组件 是 list 组件的父组件，list 组件是 item 组件的父组件。我们从 message 组件中传递一个属性到 list 组件，再由 list 组件中传递给 item 组件。对于这种组件嵌套多层的数据传递如何避免一层一层地传递呢？在父子组件间进行数据通信，父组件通过 props 传递数据给子组件，子组件通过 emit 发送事件传递数据给父组件，这两种方.

问题描述：当我们数据改变时，对应的视图没有改变，Vue 2.x 提供this.$set 进行强制更新视图。由于在页面回显 select 组件数据时，我们对 select 组件进行下拉修改数据时，页面好像出现了卡顿，数据在页面中无法更新，使用 this.$set 后，页面中的数据依然没有更新。解决方案：运用this.$forceUpdate() 强制刷新页面，进行视图层重新渲染即可。...

路由跳转handleAdd (type, row = {}) { // console.log(type, row) let param = `` if (type === 'copy') { param = `&capacityId=${row.id}` } this.$router.push({ path: `/capacityPool/list/addInquiry?type=${type}${p

首先我们来说说，import 和 require 的区别。node 编程中最重要的思想就是模块化，import 和 require 都是被模块化所使用。（1）遵循规范require是 AMD规范引入方式 import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法（2）调用时间require 是运行时调用，所以require理论上可以运用在代码的任何地方 import 是编译时调用，所以必须放在文件开头（3）本质require 是赋值过程，其实require的.

（1）基本用法用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 Java...

通常我们调用下载接口时，我们需要根据后端提供的接口返回信息进行相应的处理操作。1.接口返回 文件路径（部分）。window.open('http://192.168.22.246:8080'+ filePath)2.本窗口打开下载window.location.href="xxx?id="+data.id;3.接口返回文件流信息。doweloadApi(data) { console.log(data); this.$axios({ method: "g...

importFastClickfrom'fastclick'if('addEventListener'indocument){document.addEventListener('DOMContentLoaded',function(){FastClick.attach(document.body);},false);}...

1.在Iconfont 官网选择要下载的图标，下载至本地。将下载的内容放在 assets 文件夹下。2.在 main.js 文件中引入 iconfont.css 的样式import '@/assets/fonts/iconfont.css';3.如何在 vue 中使用呢？<i class="iconfont icon-zitigui-xianxing"></i>4.如果报错，需要安装 css-loader 依赖包npm install css-lo...

效果图如下：需求：input 中分别有focus 和 blur 方法，当 input 聚焦时，我们的下拉选项显示出来；当 input 失去焦点时，我们的下拉选项隐藏。如果用户向 input 框中输入文字后，下拉选项中的文字显示与之匹配的信息。html 中分别添加 focus 方法和 blur 方法。<input type="text" placeholder="请输入...

https://blog.youkuaiyun.com/u014298440/article/details/82942680

问题描述：在 main.js 文件中，通过 Vue.prototype 和 Vue.use() 两种方式注册插件有什么不同呢？每一个Vue组件都是Vue的实例，所以组件内this可以拿到Vue.prototype上添加的属性和方法。Vue.use() 相当于使用一个中间件，用于注册第三方库。// 在组件中，通过 this.$post 来使用方法 import request f...

       这里主要介绍如何使用 formData 对象上传文件。FormData 是 XMLHttpRequest Level 2 新增的一个对象，用来提交表单，其最大的优势是上传二进制文件。&lt;!--文件上传表单--&gt;&lt;form&gt; &lt;input type="text" value="" v-model="name" placeholder="请输入用户.

ref 常见使用场景：(一) Form 表单：<el-form :model="form" size="medium" :rules="rules" ref="form"> 。。。</el-form><div slot="footer" class="dialog-footer" style="text-align: right;"> ...