furfur-jiang的博客

部分代码<el-form-item size="mini" label="折扣" prop="discount"> <!-- template插槽插入，就是default插入即可 --> <template> <el-tooltip effect="dark" content="如果折扣等于6.5，表示美元汇率!" placement="right" &g.

iview/utils源码地址findComponentUpward由⼀个组件，向上找到最近的指定组件；findComponentsUpward由⼀个组件，向上找到所有的指定组件；findComponentDownward由⼀个组件，向下找到最近的指定组件；findComponentsDownward由⼀个组件，向下找到所有指定的组件；findBrothersComponents由⼀个组件，找到指定组件的兄弟组件// Find components upwardfunction fi

扁平处理后的路由path与原路由进行匹配，得到选中的路由（结合树形控件的叶子）//扁平处理后的路由数组let res = ['1<1.1<1.1.1', '2<2.1<2.1.1', '2<2.2', '3<3.1'] //原路由let arr = [ { id: '1', children: [ { id: '1<1.1', children: [{ id: '1<1.1<1.1.

两种效果：只取叶子全部都要思路：1 判断有子节点就递归，2传递res接收结果，3 把父path一层层传下去，使用args接收不定参数let arr = [ { path: '1', children: [ { path: '/1.1', children: [{ path: '/1.1.1' }, { path: '/1.1.2 ' }] }, { path: '/1.2 ' }, ], }, { path: '2',

1.定义函数内的跳转方式此处article为跳转的路径，id为传入参数123跳转的新页面路径：http://localhost:8080/#/article?id=123let routerData = this.$router.resolve({ path: `/article`, query: {id：123} }); window.open(routerData.href, '_blank')不要使用params，即/article${id}，会导致后面的路径拼接到id之后。

预览：介绍：输入内容，点击add comment即可添加一条新评论点击[-]可以收起该评论下的回复点击reply可以进行回复体验地址：（若访问失败则为下线请无视）http://121.41.42.236:8080/dist/github仓库地址：https://github.com/furfur-jiang/comments-section欢迎start...

三步走在vuex内初始化状态import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { btnPermission: { add: true,//可见 edit: false,//不可 delete: false, }, }, mutations: {}, actions: {}, m

五秒内点击getSqlCheck三次触发事件sqlCheckgetSqlCheck() { if (this.count === 0) { this.startTime = new Date(); this.lastTime = this.startTime; } else if (this.count >= 1) { let nextTime = new

效果展示出现问题右侧出现两层滚动栏：解决* {margin: 0;}不响应式，直接拉取整个项目尝试后解决，官方文档内容无效使用：直接初始化一个vue项目npm installnpm install --save vue-waterfall2main.js引入Vue.config.productionTip = falseimport waterfall from 'vue-waterfall2'App.vue<template> <div

概览├─src # 项目源代码│ ├─complier # 与模板编译相关的代码│ ├─core # 通用的、与运行平台无关的运行时代码│ │ ├─observe # 实现变化侦测的代码│ │ ├─vdom # 实现virtual dom的代码│ │ ├─instance # Vue.js实例的构造函数和原型方法│ │ ├─

修改dialog必须在非scoped环境下，可以在App.vue的样式写，并给需要加的dialog一个类名eg：/* 修改dialog必须在非scoped环境下 */.createOrderDialog > div > div > div { margin-top: 15px;}

问题：请求的数据格式与后台要求的不匹配思路：axios对比用jq的请求是成功的axios请求：jq请求：首先发现Request Payload和Form Data不同解决：增加请求头this.$http({ method: "post", url: "/login/xxx", data: this.ruleForm, headers: { "content-type": "application/x-www-form-urlencoded" }, }).then((

This relative module was not found:./components/HelloWorld.vue in ./node_modules/cache-loader/dist/cjs.js??ref–12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref–0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/.

方法1该提示说的是 form表单需要一个绑定一个 对象(使用:model=“editform” 不能使用v-model=“editform”),同时v-model=“multipleSelectionStudent” 的multipleSelectionStudent一定一定一定要在editform对象中,而例子中v-model=“multipleSelectionStudent” 的multipleSelectionStudent就不一定在editform对象中,因为此字段,没有做验证.方法2属

首先在main.js中引入axios并挂载到app.config.globalProperties上axios配置文件放置./assets/js/axiosmain.jsimport { createApp} from 'vue'import App from './App.vue'import './index.css'import axios from './assets/js/axios';const app = createApp(App);app.use(router).

效果通过脚手架创建项目（@vue/cli 4.5.11）vue create 项目名配置需要注意选择Ts（空格选中）选择vue3.x然后一路回车到这了就完成vue3+ts配置需要用到ant-vue需要安装，注意安装2.x版本，安装官网直接安装是1.x版本安装npm install ant-design-vue@next --save如果安装错误版本就卸载重装卸载npm uninstall ant-design-vue配置ant在main.ts引入import { c

效果展示：知识点：vue3基础练习ts基础练习ant-vue使用使用到的技术点：父子通信provide/inject 祖孙通信接口类型定义类型断言，类型猜测setup，ref，reactive，computedflex布局github地址：https://github.com/furfur-jiang/vue3-todo-list-ant-vue.git有用的话记得点个Star!...

报错Type ‘Function | undefined’ is not assignable to type ‘Function’.Type ‘undefined’ is not assignable to type ‘Function’.意思是：类型’Function | undefined’不能赋值给类型’Function’。类型’undefined’不能赋值给类型’Function’。解决：将类型定义为Function | undefined const myFun: Function

value值是可以直接获取，vue通过双向绑定v-model，js或jq事件获取下面获取label的代码，arrUnitList是value和label对应的数组对象数据例子arrUnitList:[{value:'000',label:'ms'},{value:'111',label:'s'}]代码使用说明checkItemName是获取到的value值myUnit = arrUnitList.find(item => item.value === checkItemNam

//使用console.log(formatTime('2019-11-24T13:41:03.000+0000'))function formatTime(date){ //date是传入的时间 let d = new Date(date); let month = (d.getMonth() + 1) < 10 ? '0'+(d.getMonth() + 1) : (d.getMonth() + 1); let day = d.getDate()<10 ? '

// 自定义规则：（rule：规则， value：待校验的值，cb:回调函数） // 自定义验证邮箱规则，后在addeFormRules中使用 var checkEmail = (rule, value, cb) => { // 验证邮箱的正则表达式 const regEmail = /^[A-Za-z0-9]+([_.][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/ if (regEmail.te

全部导入导出法moduleA.js//必须全导出function A1(){}function A2(){ }function A3(){ }//commonjs规范//module.exports = const All = { A1,A2,A3}export default Allmain.js//只能全部导入import All from './module/moduleA'部分导入导出法moduleB.jsexport functio

实现：状态管理，数据快照（缓存），方便管理和调试，利用vue-devtools实现记录state：自定义的共享状态，在.vue内通过this.$store.state.xxx读取定义在state的xxx属性mutations：唯一修改state内元素，通过commit调用mutations内的方法，在.vue内 this.$store.commit(''xxx方法')，可以传入多个参数在store/index.js内通过传入的参数state可以修改state内元素属性actions

简单一个例子history的（hash模式在路径前加个#）tag可以替换router-link是什么标签activeClass可以为被点击的加个样式类<template> <nav> <ul> <!-- 如果是hash模式/#/center --> <router-link to="/center" tag="li" activeClass="myactive">center</router-link

参考官网：https://cn.vuejs.org/v2/guide/transitions.html单元素/组件的过渡Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。如果过渡组件提供了

文章参考自官网，加入自己的例子和理解钩子函数一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 只会执行一次update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。（注意是update，不是.

参考自官方文档，加入自己的理解和例子Prop命名Prop 的大小写 (camelCase vs kebab-case)HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 .

利用一个空实例，作为中央时间总线作者组件可以发送文字给读者组件，两组件无任何关系作者组件负责$emit进行触发，读者组件通过$on监听let bus = new Vue() //空实例，中央时间总线//所有人都可以通过$on进行监听，$emit进行触发Vue.component('author', { template: `<div> <input ref="mytext"/> <button @click="handleCli

本文参考自官方文档，并加入自己的理解和例子组件基础两种组件的注册类型：全局注册和局部注册。全局注册基本示例// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count .

模板语法两种：插值语法 {{}} 和 指令v-html写法插值语法 {{}}“Mustache”语法 (双大括号) 的文本插值<h2>{{msg}}</h2>Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：<h2

vue购物车实现（逐个增加减少，删除）可以直接运行含有两种计算总价的方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></

必须指定不同的value，否则会导致全选，而且value值需要不相同，由于此处的value值为变量，所以前面需要加：，否则仍然导致value相同的全选结果<ul> <li v-for="(data,index) of datalist" :key="datalist.id"> <input type="checkbox" v-model="checkGroup" :value="data.name"/>{{data}} </li></ul&gt

仅笔记使用，如果想要下面代码的视频，关注公众号“程序江”，回复001html使用下面js文件的例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt...

要求如下：安装vue脚手架通过vue脚手架创建项目配置组件库（用到Element-UI）配置axios初始化git，并托管全局安装Vue cli 3npm install -g @vue/cli通过vue脚手架创建项目vue ui可以打开一个可视化面板选好存储地址填写git初始信息手动配置，配置如下：Babel、Router、Linter/Formatter、使用...

vue2响应式原理：核心使用Object.defineProperty给属性定义get和set方法注意：对象的多次递归，针对数组需要重写数组方法函数劫持：把函数内部进行重写同时继续调用老的方法，在继承原数组方法时使用到主要方法介绍：updataView：模拟更新视图时触发的方法observer：观察者defineReactive：核心部分，get和set方法//针对数组部分let ...

目录准备vue3 reactive原理例子重点讲解vue3 reactive原理例子完整代码准备：下载vue-next安装依赖 npm install核心部分package，里面的vue整合package内各个文件，__tests__里面的单元测试文件（以spect.ts结尾）用来测试功能是否符合预期的启动开发环境 npm run dev，默认将代码打包到d...

vue2响应式原理：核心使用Object.defineProperty给属性定义get和set方法function observer(target){ //基本数据类型不需要处理，直接返回 if(typeof target !== 'object' || target == null){ return target } //循环重新定义...

JSONP的实现原理由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全；可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）；具体实现过程：先在客户端定...

vue实例的生命周期vue生命周期实例视频（侵删）生命周期概念从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！生命周期钩子：就是生命周期事件的别名而已；生命周期钩子 = 生命周期函数 = 生命周期事件主要的生命周期函数分类创建期间的生命周期函数：beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 dat...

vue了解<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>vue.js 是目前最火的一个前端框架，react是最留下的一个前端框架（React除了可以开发网站，海可以开发手机App,vue语法也是可以用于手机App开发，需要借助Weex）vue,.js是掐断主流框架之一，和Ang...