SDUzzy的博客

参考文章：官方文档APImount()shallowMount()render()renderToString()选择器createLocalVue()createWrapper(node [, options])配置enableAutoDestroy(hook)mount()参数：{Component} component{Object} options返回值： {Wrapper}这个的选项比较多。用法：创建一个包含被挂载和渲染的 Vue 组件的 Wrapper。i

参考文章官方文档起步1、安装（略）2、挂载组件Vue Test Utils 通过将它们隔离挂载，然后模拟必要的输入 (prop、注入和用户事件) 和对输出 (渲染结果、触发的自定义事件) 的断言来测试 Vue 组件。被挂载的组件会返回到一个包裹器（wrapper）内，而包裹器会暴露很多封装、遍历和查询其内部的 Vue 组件实例的便捷的方法。你可以通过 mount 方法来创建包裹器。// 从测试实用工具集中导入 `mount()` 方法// 同时导入你要测试的组件import { moun

Vue3相对Vue2新增的特性合成型API(Composition)1、dataVue2采用了选项类型API(Options API)，而Vue3采用的是合成型API。旧的选项型API在代码里分割了不同的属性（properties）：data，computed属性，methods，等等。新的合成型API能让我们用方法（function）来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。import { reactive } from 'vue'export default {

这三个是最近做移动端项目遇到的一些比较小的需求。1、禁止滚动背景：手动实现了一个压屏窗（可以理解成带遮罩的弹窗），发现在弹窗出现后，依然可以通过鼠标滚轮上下滑动来使下面的列表进行滑动，要解决这个问题。实现一：利用betterscroll插件，将列表彻底做成只能被touch或者tap类事件触发滚动的组件。实现二：如果弹窗没有滚动需求的话，可以在弹窗弹出时，禁用touchmove事件实现三：如果弹窗没有滚动需求的话，可以把body的overflow设置为hidden，直接就没有滚动这一说了2、文本溢

因为这是个简易版，所以代码行数不多，直接贴上代码再看。<template> <view class="main-container"> <view class="main-left" @touchmove='touchMove' @touchstart='touchStart' @touchend='touchEnd'> <canvas class="left-canvas-area" canvas-id="s

要求能够实现将个人照片、信息，展示到小程序页面中，并可以导出。但是因为后端没有一个单独的图片服务器，并且图片是以一个blob对象捎带在响应数据中的，因此还要考虑blob数据转换成文件（图片）。可以拆解一下功能逻辑：1、发起请求，保存图片到本地路径，或者本地临时路径。2、绘制。3、绑定按键，点击即可导出文件（图片）。其中1、3都有uniapp和小程序都有自带的api。2的话主要是考虑canvas，主要有两种实现思路，一种是通过wxml导出，一种是直接在canvas上绘制。其中wxml导出是不大好实

大概就是这样一个需求：首先通过一个id值来获取整个数据列表，然后最后附上整个代码：<template><view id="container"> <view style="height:30rpx"></view> <view class="apply-card" v-for="(apply,index) in applys" :key="apply.application_abroad_id">

uni.addInterceptor(STRING, OBJECT)uni.removeInterceptor(STRING)STRING就是拦截器要拦截的api的名称下面写了一个请求拦截器和一个路由拦截器请求拦截器可以用来集中管理请求地址（写在invoke中，直接修改url），也可以实现一些比如如果请求失败，可以搞一个全局的网络错误弹框之类的功能uni.addInterceptor('request', { invoke(args) {

由于展示个人信息的时候需要放上个人头像，所以为了更好的用户体验要有修改个人头像的功能。最开始，打算使用uview的upload组件，结果发现总是有右上角的关闭和下方的进度条，非常丑。想到正常的个人信息下修改的时候都是直接点头像就能弹出修改头像的操作，决定使用img加事件的方式呼出文件选择器。主要涉及到两个wx提供的api分别是：wx.chooseImage(Object object)和wx.uploadFile(Object object)...

picker不渲染年度是一个时间选择器，但是点击没有显示。将绑定为是否显示的变量show设置为true之后，就可以显示了但是无法再次拉起，这说明这个选择器确实被渲染出来了，但是不知道如何拉起它。考虑是不是这个就渲染一次，然后被清除掉了，又增加了一个按钮，点击以后让show变成true，发现又可以拉起来了。换一个思路，如果将整个标签都绑定一个触摸事件，应该就可以达到点击拉起选择器的功能了，在其所在的form-item中绑定一个tap事件，当点击时让控制显示的变量为true。点击以后发现可以正

1、使用HbuilderX创建一个项目，选择uni-app且引入内置uni-ui的项目模板2、输入npm init -y指令，生成package.json文件，对vue来说就是整个项目的配置文件

1、使用Router使用webpack构建的项目时，有一个router文件夹下面有一个index.js文件，里面全局配置了整个路由（当然如果不使用webpack构建的项目，可以写一个js文件，里面包含下面的内容）。import Vue from 'vue'import Router from 'vue-router'import client from '../client'import personal from "../personal"import mainClient from '..

1、过滤器例子<div id="app"> {{ message | capitalize }}</div><script>new Vue({ el: '#app', data: { message: 'runoob' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString()

1、html不区分大小写，但js会相应的将短横分隔写法（kebab-case）和驼峰表示法（camelCase）转换。2、methods中的this指向的是全局中的data和props3、slot内容分发是以在html实际内容的区域，在子组件标签内部的内容插入component中已经定义的中，如果需要使用具名slot，则需要在中声明内容。例如<子组件><h2 name=”aba”></h2></子组件>//Component中<子组件&gt

组件间通信：Props：1、props的类型可以是一个数组或对象。2、子组件可以使用、绑定这个数组中的值。3、Props在vue2中，数据的传递是单向的，即由父组件传给子组件，反过来不成立。4、两种需要更改prop的情况：子组件希望使用父组件的传值作为初始值，并希望随意修改，可以在组件中的data中声明一个变量，然后将prop中的值赋给它，就可以随意修改了；子组件需要使用传入的值并修改，例如需要在style中将传入的width直接使用，可以在子组件中合适呢个名一个计算属性，style:functi

1、声明一个级联选择器（具体去iview网站学习），将jsondata绑定到data上。2、在data中声明绑定的变量jsondata，初始化为一个空数组。3、在生命周期mounted（也可以是created）中使用如下方法注意：A、 that变量是为了解决作用域问题，将mounted的全局作用域赋给that，然后在下方使用that变量来访问data中的jsondata数据B、 url中为json文件的相对路径C、 Json文件部分预览，实际操作根据json文件的格式相变化。代码中需要显