Vue.js

1.开发环境 vuecli42.电脑系统 winodws10专业版3.在开发的过程中,咱们会进行数据的申请,我应用的是axios,上面我来分享一下我本人的封装配置,心愿对你有所帮忙。4.废话不多说,间接上操作: // 装置 npm i axios --save5.在src目录下进行文件夹 network(网络的意思),目录构造如下: 文件目录阐明:api:对立治理接口https:axios申请封装6.第一版https.js问价代码如下: import axios from 'axios'import qs from "qs"/* 个别都是应用全局配置,在此我是通过创立实例的办法,长处:当接口不在一个服务器上,咱们能够通过这种创立实例的办法方便管理和应用 */// // 第一种写法const http1 = (config, success, failure) => { const instance = axios.create({ // baseURL: 'http://192.168.1.115:3000', timeout: 5000, }) instance(config).then(res => { // console.log(res); success(res); }).catch(err => { // console.log(err); failure(err); })}export default { http1,}//在对应的vue模板中应用this.$https.http1({ url: '/api/api/login', method: 'post',},(res) => { console.log('申请胜利'); console.log(res);});7.第二版https.js问价代码如下: import axios from 'axios'import qs from "qs"/* 个别都是应用全局配置,在此我是通过创立实例的办法,长处:当接口不在一个服务器上,咱们能够通过这种创立实例的办法方便管理和应用 */// // 第二种写法const http1 = (config) => { return new Promise((resolve, reject) => { const instance = axios.create({ // baseURL: 'http://192.168.1.115:3000', timeout: 5000, }) instance(config).then(res => { resolve(res); }).catch(err => { reject(err); }) })}export default { http1,}//在对应的vue模板中应用this.$https.http1({ url: '/api/api/login', method: 'post', }).then((res) => { console.log('申请胜利啦'); console.log(res);});8.第三版https.js问价代码如下: ...

1.开发环境 vue+axios+typescript+eslint+prettier2.电脑系统 windows10专业版3.在应用vue开发的过程中,咱们在数据交互的过程中,个别会抉择应用axios,很多小伙伴都在应用,上面我来分享一下axios封装和vue开发解决跨域。4.装置axios npm i axios -S4-1.后端接口如下: 主机一:http://192.168.0.103:8020 接口: /api/login主机二: http://192.168.0.103:3000 接口: /chen5.在根目录下,新建文件,目录构造如下: ----src----.env.development----.env.production----.env.test5-1 .env.development代码如下: NODE_ENV = 'development'//指定以后环境模式VUE_APP_CURRENTMODE = 'development'VUE_APP_BASE_URL = "http://192.168.0.103:8020"VUE_APP_BASE_PL="http://192.168.0.103:3000"VUE_APP_BASE_PLAPI="/chen"VUE_APP_BASE_API="/api"6.在src录下,新建network文件夹,目录构造如下: ----src-----network------Instances(实例汇合)-------index.ts(引入实例)-------Instance1.ts(实例1)-------Instance2.ts(实例2)------api.js(接口封装)6-1.Instances下Instance1.ts代码如下: import axios from "axios";export const Instance1 = (config: Object) => { const instance = axios.create({ baseURL: process.env.VUE_APP_BASE_PLAPI, timeout: 900000, }); instance.interceptors.request.use( (config) => { if (config.method === "get") { config.url = config.url + "?" + config.data; } if (sessionStorage.getItem("Authorization")) { config.headers.Authorization = "auth " + sessionStorage.getItem("Authorization"); } // //console.log("申请拦挡胜利啦"); // //console.log(config); return config; }, (err) => { console.log("申请失败啦"); console.log(err); } ); // instance.interceptors.response.use( (res) => { return res.data; }, (err) => { console.log("响应失败"); console.log(err); // return err; } ); return instance(config);};6-2.Instances下Instance2.ts代码如下: ...

1.开发环境 vue+axios2.电脑系统 windows10专业版3.在开发的过程中,咱们在做登录的时候会被要求应用token进行登录,上面我来分享一下应用办法(只是简略的封装),心愿对你有所帮忙。4.在src目录下新建4-1.chenhttp.js代码如下: import axios from 'axios'import qs from "qs"// 环境的切换if (process.env.NODE_ENV === 'development') { // axios.defaults.baseURL = '/api'; axios.defaults.baseURL = '/api';} else if (process.env.NODE_ENV === 'debug') { axios.defaults.baseURL = ''} else if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = ''}axios.defaults.timeout = 10000;axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8;multipart/form-data';// 增加申请拦截器，在申请头中加tokenaxios.interceptors.request.use( config => { if (localStorage.getItem('Cusertoken')) { config.headers.Ctoken = localStorage.getItem('Cusertoken'); } return config; }, error => { return Promise.reject(error); });// 封装axios的post申请const post = (url, params) => { return new Promise((resolve, reject) => { axios .post(url, qs.stringify(params)) .then(response => { resolve(response.data); }) .catch(error => { reject(error); }); });};// 封装axios的put申请const put = (url, params) => { return new Promise((resolve, reject) => { axios .put(url, params) .then(response => { resolve(response.data); }) .catch(error => { reject(error); }); });};// 封装axios的delete申请const del = (url, params) => { return new Promise((resolve, reject) => { axios .delete(url, params) .then(response => { resolve(response.data); }) .catch(error => { reject(error); }); });};const get = (url, query) => { return axios.get(url, query);};const $axios = { post: post, get: get, put: put, delete: del};export default $axios;4-2.chenapi.js对立接口治理,小伙伴们依据本人的需要进行批改,代码如下: ...

1.开发环境 vue2.电脑系统 windows10专业版3.在应用vue开发的过程中,咱们应用axios发送申请的时候可能会遇到的问题,上面我来分享一下我遇到的问题和解决办法,心愿对你有所帮忙。4.废话不多说,间接看问题: 问题形容:这个问题字面意思是"显示了长期报文头",浏览器第一次发送这个申请,申请被阻塞,未收到响应。当要求浏览器再次发送这个申请时,上个批准的申请都还没有收到响应,浏览器就会报这个正告。换句话说,就是申请并没有收回去 5.起因剖析这种状况呈现的状况很多,但起因是多样的,个别如下有几种状况: 一:跨域申请被浏览器拦挡当初网站的动态资源都会存在专门的动态域名上面,和理论拜访的域名可能不统一。 二:服务器未及时响应(超时)这种特定状况下才会呈现,跟服务器关联不大。 三:申请被浏览器插件拦挡作为一个开发人员,小伙伴们的Chrome上必定装了不少的插件。咱们能够通过 chrome://extensions/ 来查看咱们装置的插件,如下图:咱们发现,咱们装置的有广告拦挡的插件,在这里咱们把这个先敞开了。 就没有方才的报错了,数据也申请到了。

有时候,依赖Vue响应式形式更新数据是不够的,相同,咱们须要手动从新渲染组件来更新数据。或者,咱们可能只想抛开以后DOM,从新开始。问题来了,怎么让Vue以正确的形式出现组件呢? 1.有以下解决办法: 简略粗犷的形式:从新加载整个页面不妥的形式:应用 v-if较好的形式:应用 Vue的内置 forceUpdate办法2.比照以上办法: 简略粗犷的形式(从新加载整个页面):这相当于每次你想敞开应用程序时都要重新启动你的电脑。不妥的形式(应用v-if):v-if指令,该指令尽在组件上为 true时才渲染。如果为false,则该组件在DOM中不存在。较好的办法(forceUpdate):这是解决这个问题的两种最佳办法之一。3.然而下面的三种办法都不是最佳的办法,最好的办法是:在组件上进行 key更改。 在很多状况下,咱们须要从新渲染组件。要正确地做到这一点,咱们将提供一个 key 属性,以便Vue晓得特定的组件与特定的数据片段相关联。如果 key 放弃不变,则不会更改组件,然而如果 key 产生更改,Vue就hi晓得应该删除旧组件并创立新组件。4.为什么咱们须要在 Vue 中应用 key? 假如咱们要渲染具备以下一项或多项内容的组件列表:有本地的状态有某种初始化过程,通常在 create或mounted钩子中如果你对该列表进行排序或任何其余形式对其进行更新,则须要从新渲染列表的某些局部。然而,不会心愿从新渲染列表的所有内容,而只是从新渲染已更改的内容。为了帮忙Vue跟踪已更改和未更改的内容,咱们提供一个 key 属性。在这里应用数组的索引,因为索引没有绑定列表中的特定的对象。5.更新 key 以强制从新渲染组件 这是强制 Vue从新渲染组件的最佳形式(集体认为)咱们能够采纳这种将 key调配给子组件的策略,但每次想从新渲染组件时,只需更新该 key 即可。如下案例: <template> <Chenperson :key="numberkey"></Chenperson></template>exprot default{ data(){ return{ numberkey:0, } }, methods:{ chenRender(){ this.numberkey +=1; } }}每次 chenRender被调用时,咱们的 numberkey都会产生扭转。当这种状况产生时,Vue将晓得它必须销毁组件并创立一个新组件。咱们失去的是一个子组件,它将从新初始化本身并重置其状态。6.本期的分享到了这里就完结啦,是不是有播种了一些,心愿对你有所帮忙,让咱们一起致力走向巅峰!

本文首发国内开源代码托管平台Gitee 文章链接：https://gitee.com/gooder4j/compose-hub/issues/I4U09M 感觉不错的话，能够star一下 Vue官网曾经默认降级为Vue3了： https://vuejs.org/须要拜访原来Vue2官网的小伙伴能够增加一下三级域名v2来去拜访： https://v2.vuejs.org/

1. 引入import { useIntervalFn } from '@vueuse/core'2. 格局const {pause, resume } =useIntervalFn(() => {// 具体要做的事件 }, 间隔时间, { immediate: false|true })pause() // 暂停，进行resume()// 持续，开始3.应用export const useCountdown = () => { const time = ref(0) const { pause, resume } = useIntervalFn(() => { // 每隔多长时间做什么 回调 time.value-- if (time.value <= 0) { pause() } console.log('useIntervalFn', Date.now()) }, 1000, { immediate: false }) // pause: 暂停, // resume: 开始 const start = (num) => { time.value = num resume() } return { time, start }}在setup中。const { time, start } = useCountdown() // 发手机验证码 const send = async () => { // 1. 验证手机号格局 if (mobile(formData.mobile) !== true) { Message({ type: 'error', text: '手机号格局不对' }) return } if (time.value !== 0) { return } // 2.调用api try { await userMobileLoginMsg(formData.mobile) Message({ type: 'success', text: '验证码曾经发送！' }) // 倒计时 start(60) } catch (err) { console.dir(err) Message({ type: 'error', text: err.response.data.message }) } }批改视图<span @click="send()" class="code"> {{time===0?'发送验证码':`${time}秒后发送`}}</span>

Vue3.0 + qiankun.js 实现多tab标签页路由切换Github地址 原理是通过监听主利用的vue-router的 router.beforeEach 办法来动静加载(loadMicroApp)微利用页面用vuex来治理已加载的微利用和tab标签数据监听用initialState的变动来执行对微页面外部的路由跳转各依赖版本"element-plus": "^1.3.0-beta.5","qiankun": "^2.6.3","vue": "^3.0.0","vue-router": "^4.0.0-0","vuex": "^4.0.0-0"Gif演示 路由配置批改主利用应用的是: createWebHistory();微利用应用的是: createMemoryHistory(window.__POWERED_BY_QIANKUN__ ? '' : `/subPages/app1/`);每个vue文件都要定义 [name] 属性, 并且要与 router/index.js 外部定义页面参数的 [name] 雷同 如:lib: src/views/user.vueexport default { name: 'App1Detail', >>>===== setup() {}, | methods: {}, | ... |} | |=====>>> 2个name的值要雷同... |lib: src/router/index.js | routes = [ | { | path: appPath + '/detail', | name: 'App1Detail', <<<===== component: () => import( '@/views/app1/detail.vue') } ]路由应用办法主利用中路由跳转主利用应用的是原生的vue-router的办法无论是在主利用中跳转主利用页面 主=>主利用页面还是在主利用中跳转微利用页面 主=>微利用页面router.push()router.replace()router.go(-1)...微利用中路由跳转微利用跳转本身页面也和原生的vue-router的应用办法统一参考lib: app2/src/views/user/**router.push()router.replace()router.go(-1)...============================ 分割线 =================================从A微利用跳转B微利用的子页面, 如:参考lib: app1/src/views/about.vue... import { getCurrentInstance } from 'vue' setup() { const instance = getCurrentInstance() let jump = () => { instance.appContext.config.globalProperties.$parentRouter.push('/app2/user') } return { jump } }...============================ 分割线 =================================在微利用中敞开以后沉闷的tab标签,如:参考lib: app1/src/views/user.vue let closeActiveTab = () => { action.setGlobalState({ changeMicoTabsPath: { type: 'closeActiveTab', }, })}============================ 分割线 =================================在微利用中敞开以后已加载的其余tab标签,如:参考lib: app1/src/views/user.vuelet closeOtherTab = () => { action.setGlobalState({ changeMicoTabsPath: { type: 'closeOtherTab', path: '/app1/about', }, })}如果感觉有用的话,还请给个Star标签 ...

思路：首先查找选中文本是以后html第几个字符，而后进行替换款式(isIE为true代表的是ie浏览器)1、自定义右键事件2、获取选中的文本及文本为以后html第几个3、进行替换并勾销文本选中自定义右键事件 document.oncontentmenu = function(e){ //判断是否有选中的文本 if(!this.judgeSelectText(this.getSelectedText())){return false}; this.getSelectedTextAndCurrentNum(); let target = e.target; //判断创立菜单的类型;dom对象id是否蕴含"spanId_" if( this.selectText && ((target.id && target.id.indexOf("spanId_")<0) || !target.id)){ //创立长期右键菜单 this.createMenu("add",e,target) }else if(target.id && target.id.indexOf("spanId_") > -1){ this.spanId = target.id; this.createMenu("other",e,target) }}.bind(this)//点击正文操作document.onmousedown = function(e){ let target = e.target; //增加正文 if(target.id && target.id.indexOf("addAnnotate") >= -1){ if(this.selectText != ""){ //1、关上增加正文弹框，2、设置操作为增加 this.operation = "add"; }else if(target.id && target.id.indexOf("updateAnnotate") >= -1){ //1、关上批改正文弹框，2、设置操作为批改，3、申请获取正文数据值 this.operation = "update"; }else if(target.id && target.id.indexOf("deleteAnnotate") >= -1){ //1、关上删除正文弹框，2、设置操作为删除 this.operation = "delete"; }else if(target.id && target.id.indexOf("viewAnnotate") >= -1){ //1、关上查看正文弹框，2、设置操作为查看，3、申请获取正文数据值 this.operation = "view"; } }}.bind(this)getSelectedText：获取选中的数据 ...

v-model指令的原理是什么？v-bind绑定一个value属性v-on监听以后元素的input事件，当数据变动时，将值传递给value实时更新数据v-model和v-bind:value有什么区别？自定义组件中，必定会应用v-bind指令来实现组件之间值的传递，所以在我还是菜鸟的那段时间，我始终有个纳闷， 既然有的v-bind指令，为什么还须要在自定义的组件中实现v-model指令呢？在我实际了一番之后，我才明确， v-model既可能实现值的传递，也可能实现页面数据的实时变动，而v-bind只是实现值的传递，如果须要实现实时变动的成果， 须要应用另外的办法批改变量的值，能够总结为上面两点 v-model实现视图和数据的双向绑定，一者变动另一者也会同时变动v-bind只会在初始化的时候将数据绑定到视图上，后续视图变动不会影响数据当初咱们来撸一个自定义的v-model父组件<template> <div class="test4"> test4 <br /> <child4 v-model="vModelValue"></child4> <br /> <button @click="getValue">获取以后v-model绑定的值</button> </div></template><script>import child4 from "../components/child4.vue";export default { data() { return { vModelValue: "初始的v-model", }; }, components: { child4, }, created() {}, methods: { getValue() { console.log(this.vModelValue); }, },};</script><style lang="css" scoped>.test4 { background-color: burlywood;}</style>子组件<template> <input type="text" :value="val" @input="onInputChange" /></template><script>export default { // model配置能够定义v-model的属性名及事件名 model: { prop: "val", // 定义传递给v-model的那个变量，绑定到哪个属性值上 (默认值value) event: "onChangeVal", // event:什么时候触发v-model行为(让父组件能获取到值) (默认值input) }, props: { val: { type: String, }, }, created() { console.log(this.val); }, methods: { onInputChange(e) { this.$emit("onChangeVal", e.target.value); //触发v-model的行为 }, },};</script><style lang="css" scoped>.test4 { background-color: burlywood;}</style>成果 ...

1. 介绍Vuex是Vue官网推出的一个状态管理工具，其能生成一个独自的全局状态实例，其有以下特点： 可能在vuex中集中管理共享的数据，利于开发和前期的保护可能在Vue的各个组件中实现拜访和共享，可能无效解决以下兄弟组件、祖孙组件等跨代组件的通信艰难问题。存储在 vuex 中的数据都是响应式的，可能实时保持数据与页面的同步。2. 装置//CDN https://unpkg.com/vuex@3.6.2 //NPMnpm i vuex@ 3.6.2 -s注意事项：版本号在3.6.2以下的vuex实用于vue2，若在vue2的工程项目中间接npm i vuex -s会报如下的谬误 解决办法是指定版本号，目前vue2应用的版本目前最高反对到3.6.2，具体可在更新记录中进行查阅。 3.外围概念3.1 StateState绝对于vuex来说就好比vue组件中的data，所以申明state必须是纯正的对象 (含有零个或多个的key/value对)，在建设后，State数据会被转换为响应式的数据。 3.1.1 State的拜访有以下的三种模式在vue组件中(tempalte、data、methods、申明周期函数等)中拜访在vuex中拜访在其余js文件中拜访首先定义一个store，外面只蕴含State，而后咱们将其注入到全局，上面一次进行以上三种模式的测试 //store.jsimport Vue from "vue";import Vuex from "vuex"Vue.use(Vuex)const store = new Vuex.Store({ state: { userName: "Vuex的学习之旅" }})export default store//main.jsimport Vue from 'vue'import App from './App.vue'import store from "./store"Vue.config.productionTip = falsenew Vue({ render: h => h(App), store}).$mount('#app')//App.vue<template> <div id="app"> <test-component></test-component> </div></template><script>import TestComponent from "./components/test-component.vue"export default { name: "app", components: { TestComponent }}</script>1.在vue组件中拜访 ...

Vue2.X是如何利用Object.defineProperty()实现数据绑定的 上一篇文章写到了Object.defineProperty的应用，这篇文章说一下Vue是如何利用这个办法实现数据绑定的。 首先把Vue中的外围办法defineReactive做一些简化 function defineReactive (obj, key, val, cb) { var dep = new Dep(); Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: ()=>{ /*....依赖收集等....*/ dep.depend() return val }, set:newVal=> { val = newVal; /*触发回调*/ dep.notify() } })}Vue通过defineReactive办法实现对须要察看的对象的每个属性进行监控。 dep对象就相当于一个调度核心的作用，如果有数据用到这个属性，它就会主动收集该属性到调度核心，如果某属性产生了扭转，那就会告诉调度核心来更新视图。 再看看dep办法和它的性能。绝对比较简单：1、存储订阅者2、增加订阅者 function Dep () { // 所有的watcher 放进这里对立治理 this.subs = []}Dep.target = null;// 告诉视图更新dom的 notify的办法Dep.prototype.notify = function () { // this.subs 存储 watcher this.subs.forEach(sub => { // sub 是某个Watcher 具体调用某个Watcher的update 办法 sub.update() })}// 增加订阅者的办法Dep.prototype.addSub = function (sub) { this.subs.push(sub)}订阅器次要也是了两个办法；1、触发一下属性的获取，顺便把本人加到调度核心去 2、update更新视图 ...

前言vue我的项目的SEO很差，传统混编网站，页面是在服务器中生成再发回给客户端的，爬虫爬取页面的时候，从服务器中曾经拿到的时残缺内容的页面，而vue单页面利用中，页面的内容都是通过javascript动静生成的，传统爬虫爬取页面时，获取到的html文件只有一个div标签，没有任何有价值的货色。 解决SEO的办法有好多，它们各自也有着本人的优缺点，而预渲染就是其中的一种。 预渲染的原理是：在打包的时候，用本人的爬虫先爬取一遍指定的页面（vue渲染完后的页面），生成对应的html文件，把打包后的文件夹部署到服务器上，当浏览器拜访这些门路的时候，因为服务器上有对应的html文件，所以拜访的是匹配html文件，你能够了解为网页的快照。 第一次拜访或者刷新的时候，查看以后页面的源代码，是蕴含了渲染后的很多内容的。html文件的js中蕴含new Vue()构建vue单页面利用的代码，通过$router.push等跳转时，走的依然是vue的逻辑，vue的性能并不会受到影响。 两幅图能够清晰感触到预渲染的成果： 实用场景：适宜内容不常常变动的页面，比方官网的大部分页面、宣传页等；因为生成的html页面曾经是渲染过的了，又不会影响vue的能力，所以也能够用作首屏优化，缩小单页面白屏工夫。 然而预渲染不适宜动静网站内容，比方文章详情页，因为预渲染要明确url，并且一个url对应生成一个html文件，文章什么的太多，不可能公布一条新的文章，就重新部署一次代码。 代码实现这里应用的vue2和vue-cli构建的我的项目，预渲染插件为:prerender-spa-plugin 装置依赖 npm install prerender-spa-plugin -D配置vue.config.js// 导入prerender-spa-plugin插件，并创立一个PuppeteerRendererconst PrerenderSPAPlugin = require('prerender-spa-plugin')const Renderer = PrerenderSPAPlugin.PuppeteerRendererconst path = require('path')module.exports = { configureWebpack: () => { if (process.env.NODE_ENV !== 'production') return return { plugins: [ new PrerenderSPAPlugin({ staticDir: path.join(__dirname, 'dist'), // 必备，与渲染生成文件的目录，应该和我的项目打包的生产门路统一 routes: [ '/', '/about', '/some/deep/nested/route' ], // 必备 须要预渲染的门路 // 自定义渲染器，非必须，然而在vue我的项目中须要用到它 renderer: new Renderer({ // 期待页面上调用了指定的事件后再渲染页面，这个和其余爬虫重要的区别 // 在 main.js 中 document.dispatchEvent(new Event('my-app-element'))，两者的事件名称要对应上。 renderAfterDocumentEvent: 'my-app-element' }) }) ] } }}批改main.js ...

后端路由路由的概念最开始是在后端呈现的，浏览器发送URL，服务器接管到浏览器的申请时，通过解析不同的URL去拼接须要的HTML或模板，而后将后果返回到浏览器进行渲染。服务器端路由有利有弊，益处是安全性更高，更严格控制页面展现。然而减少了服务器负荷，并且须要reload页面，用户体验不佳。 前端路由前端路由保障只有一个HTML页面，在用户交互时不刷新和跳转页面的同时，为SPA中的每个视图展现模式匹配一个非凡的url。在刷新、后退、后退和SEO时均通过这个非凡的url来实现。前端路由实现形式 hash模式hash值的变动不会导致浏览器向服务器发送申请，浏览器不发出请求，也就不会刷新页面。另外每次hash值的变动，还会触发hashchange事件，通过这个事件咱们能够晓得hash值产生了哪些变动，来实现更新页面局部内容的操作，浏览器的后退后退也能对其进行管制。所以在H5的history模式呈现之前，根本都是应用hash模式来实现前端路由。 history模式HTML5引入了history.pushState()和history.replaceState()办法，他们别离能够增加和批改历史记录条目。这些办法通常与window.onpopstate配合应用。history.pushState()和history.replaceState()区别在于： history.pushState() 在保留现有历史记录的同时，将url退出到历史记录中。history.replaceState() 会将历史记录中的以后页面历史替换为url。因为history.pushState()和history.replaceState()能够扭转url时，不会刷新页面，所以在HTML5中的history具备了实现前端路由的能力。 比照hash长处： 兼容性更好，能够兼容到IE8hash的变动会在浏览器的history中减少一条记录，能够实现浏览器的后退和后退性能hash毛病： 多了一个#，url整体不够好看会导致锚点性能生效雷同hash值不会触发动作将记录退出到历史栈中，而pushState能够Vue-router的实现形式vue-router依据不同的门路映射到不同的视图，它的能力非常弱小，反对hash、history、abstract三种路由形式，提供了router-link和router-view两种组件，还提供了简略的路由配置和一系列好用的API。 路由注册Vue设计上就是一个渐进式的JavaScript框架，自身的外围是解决视图渲染问题，其它的能力就通过插件的形式来解决。Vue-router就是官网保护的路由插件，在介绍它的注册实现之前，先来剖析下Vue通用插件注册原理。 Vue.useVue提供了Vue.use全局api来注册这些插件，它的实现定义在vue/src/core/global-api/use.js中： export function initUse (Vue: GlobalAPI) { Vue.use = function (plugin: Function | Object) { const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) if (installedPlugins.indexOf(plugin) > -1) { return this } const args = toArray(arguments, 1) args.unshift(this) if (typeof plugin.install === 'function') { plugin.install.apply(plugin, args) } else if (typeof plugin === 'function') { plugin.apply(null, args) } installedPlugins.push(plugin) return this }}Vue.use接管一个plugin参数，并且保护了一个_installedPlugins数组，它存储所有注册过的plugin；接着又会判断plugin有没有注册install办法，如果有就调用该办法，并且该办法执行的第一个参数是Vue；最初把plugin存储到installPlugins中。 ...

1. 部署利用部署利用是指编译或构建代码并将生成的 JavaScript、CSS 和 HTML 托管到 Web 服务器上的过程。 构建和托管你的利用 咱们的我的项目开发完后，怎么公布，首先要构建咱们的我的项目 npm run build 在根目录执行该命令后，我的项目的构建文件会输入到dist文件夹 咱们下一步就是把咱们的dist文件夹托管在服务器上，配置好申请转发和域名 至此，咱们的利用曾经部署胜利了

1. 共享文件 共享文件跟文件根本大同小异的治理性能模式，我的文件和共享文件的家庭/公司是同步的，即我的文件展现是家庭A，那么共享文件也是展现家庭B

1、对于表格获取单行数据的id，这一步是要害： elementui中，scope默认获取整个表格的数据，scope.row对应那一行要操作的应用的数据，再抉择具体字段进行解决 <template slot-scope="scope"> <el-button type="text" size="default" @click="deleteUser(scope.row.userid)">删除</el-button> </template>2、对于删除操作，间接给函数传对应的值就OK，在接口中援用：

1、vue双向绑定，获取输入框数据input输入框中，增加属性v-model="searchName"，此处我还应用了V-IF来进行条件判断，如果输出的内容为空，则间接调用获取全副信息接口，如果输出有值，则调用对应含糊查问接口 在数据调用时援用此处的值，传给后端，调用后端接口： 2、laravel含糊查问路由配置，此处在路由中增加接管参数的{name}： 在调用controller时，默认会将此参数传给函数第一个入参： 之后再进行理论调用数据库的含糊查问 DB::table('users')->where('first_name','like','%'.$keywords['name'].'%')->get(); 外围表达式为where的局部，第一个参数为数据库要查问的字段，之后为含糊查问类型，及含糊查问的值，最终查问到后在get数据

1、导航栏路由应用router属性必须要加上，能力应用vue自身的路由 如果要应用data中传入的值，则在el-menu-item中index属性的应用就变成:index的写法，如果间接应用index，则是无奈应用data中的值 如果不必data中的值而间接固定写的话，就是属性写法，间接把：干掉，index自带属性来写： 2、在Vue中进行分层布局1、首先先把局布筹备工作安排好，先有个型 2、之后引入要安排的场面的页面，在对应的地位进行摆放： <index></index> <headerOne></headerOne> 3、<router-view/>这个标签很要害，就是你在本页面援用的路由到底怎么显示，通过这个能够让其显示在main区域 子页面的main 这里不得不阐明，对于二级路由的配置，如果要显示在firstpage的main外面，则对于其下的所有路由都要配置到其子（children）外面： 也就是APP.vue中搞得是route-view是一级路由，如果没有在谁的children外面则间接显示在这： 所以在main外面配置的route-view要显示内容，则要在路由表中将其画在本页面的子外面，则跳转显示后，就会到子路由中。

1、vue调用后端接口，并展现在前端列表中前端列表中须要的数据为tableData: 此处拜访后端接口获取此处的数据 前提结构tableData数据，次数据结构为数组： 从后端获取到数据后，要进行多个数据遍历的话，则应用foreach 进行数据的遍历，及通过push办法传入tableData中 data.forEach(element => { this.tableData.push( { name:element.first_name, date:element.last_login, address:element.avatar } ); }); 2、灵魂一笔在于主动调用此函数刷新列表数据：mounted() { this.GetUserInfo()},此办法用于调用这个获取后盾数据的办法，否则无奈触发api接口的调用

在 Web 利用程序开发方面，Vue.js 正迅速成为开发人员的最爱。这个古代、陈腐的 JavaScript 库它在 GitHub 上有超过 123,000 颗星，对于开发人员来说是一个引人注目的抉择，因为它很容易集成到现有我的项目中。它的速度很快，它十分弱小。你能够用它从头开始建设一个动静的、可扩大的、可保护的单页面应用程序。 作为一个 JavaScript 框架，Vue.js 容许您轻松地将动态数据渲染到 DOM，将数据绑定到 DOM 元素，以及治理/保护应用程序的状态（本地存储），而无需用户从新加载浏览器。它是首选，因为它是轻量级的，模块化的，须要起码的配置。它的速度也十分快，文件大小也很低。开发人员能够很容易地把它放入任何我的项目或现有的框架中。 随着Vue.js逐步成为更多开发者的首选框架，这里有8个值得关注的UI组件，心愿能在2019年整合到你的我的项目中。在每个组件的开端，我都增加了该组件GitHub仓库账户的链接，以让你能够做出奉献。 Sweet Modal Modals是一个很好的办法，能够为你的Web应用程序的用户体验增加一些不同的货色。Sweet Modal为你提供了许多平凡的模态抉择，许多Modal必定会使你的Web利用不同凡响。它们能够用于通过表单收集数据或只是传递警报，每个我的项目都须要一个丑陋的Modal。在GitHub上有超过500颗星，这相对是一个值得关注的我的项目。 GitHub: https://github.com/adeptoas/s... Vue Scrollama Vue Scrollama 是一个组件，可让您轻松地在网页上进行滚动驱动交互，从而为用户提供相似故事的体验。有了这个组件，视觉效果就阐明了所有。它也是十分可定制的，能够制作一些令人惊叹的Web应用程序。 GitHub: https://github.com/shenoy/vue... Vue-parallax 视差是为你的网络应用增加生机和独特性的好办法，Vue-parallax让你轻松地在你的Vue我的项目中实现视差，并且它是齐全可定制的。这个组件在 GitHub 上有超过 300 颗星，它有定期维护和一个正在成长的新兴社区。 GitHub: https://github.com/aperturele... Vue-typer 打字机成果有一些特别之处，它吸引了用户，就像大多数优良的 UI 组件一样，它吸引了用户，发明了更好的体验。不要遗记，该组件是十分可定制的，并且有许多选项能够更改字体类型、大小、打字速度和许多其余货色，以使您的 Web 应用程序完满？ GitHub: https://github.com/cngu/vue-t... Vue-slider 图片吸引着用户，而滑块是展现图片的好办法。Vue-slider为咱们提供了一个十分古代的响应式 "Netflix "格调的滑块，必定会让你的网络应用怀才不遇。 GitHub: https://github.com/fanyeh/vue... Vue.js Popover 弹出窗口和工具提醒——重要但被低估的 UI 组件。这些是向用户显示信息的好办法，不会扩散他们对您想要出现给他们的次要内容的注意力。Vue.js popover让咱们能够将创意和动画工具提醒和弹出窗口增加到 Web 应用程序的不同元素中。 GitHub: https://github.com/euvl/vue-j... Vue-bar 说到数据，展现很重要。应用 Vue-bar 创立可定制的、古代的、优雅的和有吸引力的条来示意您的 Web 应用程序中的数据变得更加容易。 ...

问题:在我的项目中,每次刷新页面就出弹出一个message并且是没有内容的,全局查找发现自己也没有在我的项目中应用过message,只是引入了这个组件,发现一旦正文引入就没有问题了,这时定位出问题是在组件引入的时候呈现的问题 import Vue from 'vue'import {... Message,...} from 'element-ui'[... Message, //这里正文就不会有问题了...].forEach((item)=>{ Vue.use(item)})Vue.prototype.$message = Message解决办法通过加载组件的形式引入应用 把上面的这种形式Vue.use(Message)改为Vue.component(Message.name,Message)留神: 组件(component)是用来形成你的App的业务模块的,他的指标是APP.vue.插件(Plugin)是用来加强你的技术栈的功能模块,他的指标是Vue自身.

1、在main.js外面，Vue.prototype.$axios = axios之后退出上面两段代码axios.defaults.baseURL = '/api'; axios.defaults.headers.post['Content-Type'] = 'application/json'; 2、在index.js中proxyTable外面减少target外面减少要跨域的url '/api':{ target: "http://local.laravel8.cn", changeOrigin:true, pathRewrite:{ '^/api':'' } 3、在理论应用的时候，间接写上要申请的url即可：

1、VUE调用后端接口并展现有有npm，之后对于整个我的项目的装置工作变得容易，只须要下载工具包，导入，援用，三步骤即可： 明天的主题是他axiosnpm install axios --save 个别通用的包都间接引入在main.js中之后的套路就是援用， 之后找一个页面间接援用，援用的样子如下，人家构造就长这样，class援用上面的js，click调用办法，一连串操作 2、Vue中ElementUI的应用也就是上一张图中的button不是vue原生的 此处就须要又用到npm这家伙，进行element-ui的下载 npm i element-ui -S 老套路引入并应用 之后就能够用element中的元素，具体有多少，能够看其官网文档 如果用的是vscode，在奉上 element-ui的补全： 他的补全应用形式应用简写字，如elb就是button的援用，具体太多不再赘述。

目前的解决办法是，在子组件中给传递的props 属性减少watch 监听办法1.在父组件中 <!-- 媒体附加信息 --> <media-extra-info ref="mediaExtraInfoRef" :mediaEnName="mediaInfo.en_name" :maroList="maroList" :editExtraInfo="initMediaExtraInfo" @handleChildMediaChange="handleChildMediaChange" />2.在子组件中给父组件传来的值减少监听 //2-1通过props 定义承受的父组件传值 props: { mediaEnName:{ type: String, default: "" }, maroList{ type: Array, default(){ return [] } }, editExtraInfo: { //编辑时的信息 type: Object, default(){ return {} } } }, //2-2 给传值editExtraInfo减少监听， 有扭转则执行handler 办法 watch:{ editExtraInfo: { handler(newData, oldData) { this.init() }, deep: true //深度监听 }, },有没有不加watch 的办法， 待有工夫钻研， 或晓得的同学请留言

一： 子组件通过this.$emit()向父组件传递数据 1.在父组件中应用子组件 <media-extra-info ref="mediaExtraInfoRef" @handleChildMediaChange="handleChildMediaChange"/>2.在父组件中定义handleChildMediaChange 办法 handleChildMediaChange(filter_key, filter_val){ //doing}3.在子组件中应用 handleChildMediaChange(val){ this.$emit("handleChildMediaChange", "child_media_id", val) },二：子组件调用父组件中定义的method办法this.$parent.parentMethod(params) 三：父组件调用子组件中定义的method 办法, 通过this.$refs调用1.在父组件中引入子组件，并应用ref 给子组件占位命名"mediaExtraInfoRef" <media-extra-info ref="mediaExtraInfoRef" @handleChildMediaChange="handleChildMediaChange"/>2.在子组件中定义一个getVal 办法 getVal(){ let result = {} //doing return result },3.在父组件中须要调用的中央调用子组件的getVal()办法 this.$refs.mediaExtraInfoRef.getVal()

1、Vue装置1、vue能够通过npm下载生成我的项目，此处所以首先装置的是nodejs，这里的关系就是npm是nodejs外面的一个小弟，所以此处依赖nodejs npm install vue npm install vue-cli --vue脚手架 npm install --global webpack --打包 新建我的项目 vue init webpack a-project 运行我的项目 npm run dev运行执行的是dev外面的配置进行构建运行，此处会在占用一个本地端口，间接拜访这个url即可进入vue 之后对vue我的项目的任何操作，间接保留，就会在这个url下间接体现，并可进行调试，批改vue启动端口端口号： 2、vue路由配置再讲路由之前，能够先说下vue的引包，vue引入包后，要进行利用申明 此处是在route上面创立一个Js文件 这外面就是要引入的理论页面的门路，也就是此处路由的概念是页面之前的跳转及调用： 援用路由链接在对应的主App.vue下进行，以此为例 这段就是援用方才路由外面那段配置，当然同时要存在index.vue这个文件页面。 <router-link to="/index">首页</router-link> package.json外面的serve中的对应的serve就是npm启动的那个门路 npm run serve：

这个问题困扰了我良久， 申请完数据， this.$confirm 弹出后， 没等到我点确认按钮，就执行的下一步， 执行了异步操作，没有实现同步，问题解决： 给this.$confirm增加 异步期待 await, 并给出显示返回 async checkDeviceID(){ let rst = true await request.post('material_new/checkDeviceID', params).then(async(data)=>{ if(data.error){ rst = await this.$confirm(data.error+'\r 疏忽并保留?', '提醒', { confirmButtonText: '确定', cancelButtonText: '勾销', }).then(() => { return true }).catch(()=>{ return false }) }else{ this.model.landing_url.url = data.landing_url rst = true } }) return rst}总结： 因为this.confirm()是异步办法 ， 所以异步办法要实现同步时须要减少await， 若then 办法内还有申请，须要给then 再减少 async 来实现同步

前言以前我看到面试贴就间接刷掉的，从不会多看一眼，直到去年 9 月份我开始筹备面试时，才发现很多面试教训贴特地有用，看这些帖子（我不敢称之为文章，怕被杠）的过程中对我的温习思维造成影响很大，所以我当初把之前本人好好整顿的面试打算分享进去，心愿能帮到接下来要找工作的敌人，不喜勿喷哈～ 一、简历简历在找工作过程中是十分十分重要的，无论你是什么路径去面试的，面试你的人肯定会看你的简历。 1、重点简历就像高考作文——阅卷工夫十分短。内容要简洁。直击重点，体现出本人的劣势（只有是合乎招人单位要求的都是劣势，不是他人不会的你会才叫劣势）。2、简历蕴含的内容个人信息。专业技能。工作经验。我的项目经验。社区奉献。2.1 根本信息必备：姓名 电话 邮箱。年龄（最好写上，在这个行业年龄还是比拟重要的），学历（写好是哪一届）。头像无所谓（难看就放上呗）。能够放 github 链接，前提是有内容。2.2 专业技能体现出本人的外围竞争力（只有是合乎招人单位要求的都是劣势）。内容不要太多，3、5 条即可。太根底的不要写，例如会用 vscode、lodash。2.3 工作经验如实写。写明公司，职位，入职到职工夫即可，多写有益。如果有空窗期，如实写明即可。2.4 我的项目经验写 2-4 个具备说服力的我的项目（不要什么我的项目都写，没用）。项目名称，我的项目形容，技术栈，集体角色。2.5 社区奉献有博客或者开源作品，会让你更有竞争力。切记：须要真的有内容，不可长期抱佛脚。3、注意事项界面不能太花哨，简洁明了即可。留神用词，“精通”“纯熟”等慎用，可用“相熟”。不可造假，会被拉入黑名单。4、面试前筹备看 JD，是否须要临时准备一下。打印纸质简历，带着纸和笔（减少好印象）。最好带着本人电脑，现场可能手写代码（带一个帆布包最适宜，又优雅又不便）。要有工夫观点，如果早退或者推延，要提前说。衣着适当，不必正装，也不要太随便。为何到职？—— 不要吐槽前东家，说本人的起因（想找一个更好的倒退平台等）。能加班吗？—— 能！除非你特地自信，能找到其余机会。不要挑战面试官，即使他错了（面试肯定要保障欢快）。遇到不会的问题，要体现出本人踊跃的一面（不好意思哈，的确是我的常识盲区，能够跟我说下 xxx 吗，我回去钻研一下）。二、HTML+CSS 面试题HTML 和 CSS 面试题答不进去根本能够回去了。 1、HTML 面试题以下是针对 HTML 相干的面试题，一般来说这中央不会出太多题，面试官也不违心花太多工夫在这下面。 1.1 如何了解 HTML 语义化？让人更容易读懂（减少代码可读性）。让搜索引擎更容易读懂，有助于爬虫抓取更多的无效信息，爬虫依赖于标签来确定上下文和各个关键字的权重（SEO）。在没有 CSS 款式下，页面也能呈现出很好地内容构造、代码构造。1.2 script 标签中 defer 和 async 的区别？script ：会妨碍 HTML 解析，只有下载好并执行完脚本才会持续解析 HTML。async script ：解析 HTML 过程中进行脚本的异步下载，下载胜利立马执行，有可能会阻断 HTML 的解析。defer script：齐全不会妨碍 HTML 的解析，解析实现之后再依照程序执行脚本。下图清晰地展现了三种 script 的过程： 1.3 从浏览器地址栏输出 url 到申请返回产生了什么输出 URL 后解析出协定、主机、端口、门路等信息，并结构一个 HTTP 申请。强缓存。协商缓存。DNS 域名解析。 TCP 连贯。 ...

1、场景执行下列两条命令进行配置npm仓库镜像时，报错 Error: EPERM: operation not permitted, mkdir 'E:\Program Files\nodejs\node_global\etc' 2、起因node目录权限不够 3、解决办法找到node装置目录，右键属性，点击平安，设置users用户齐全管制权限

咱们晓得，vue有一个重要的理念就是组件化，行将重复使用的性能点抽提进去作为组件，须要应用的页面只须要援用该组件即可失去相应的性能点。 vue-router中咱们动静加载视图的代码可能是这样的。 { path: '/tabLayout', name: 'tabLayout', component: resolve => require(['@/components/layouts/TabLayout'], resolve)}然而当在同一个页面屡次应用同一个组件的时候，其created与 mounted只会在第一次加载时执行。因为只创立了一个实例，如果对实例调用了屡次，这屡次调用就会造成互相烦扰的问题。 为了使组件屡次调用不互相烦扰，能够采纳一些方法。 监听路由在路由切换的时候，监听路由获取参数，并依据参数加载从新数据。 watch: { '$route' (to, from) { let dataId = this.$route.params.dataId; this.initData(dataId); }}毛病：组件被从新渲染，组件上的内容随路由参数的变动而失落。如果不想每次切页面的时候从新渲染，须要另找方法。 router-view key将router-view的key设置为$route.fullPath，因为前后两个路由的$route.fullPath并不一样, 组件不会被强制复用。这也意味着组件的生命周期钩子会再次被调用，第二次调用的created与 mounted中的内容会被再次执行。 <keep-alive> <router-view :key="key"></router-view></keep-alive>computed: { key() { return this.$route.name !== undefined ? this.$route.name : this.$route }}参考：https://www.h5w3.com/8764.html

明天，咱们非常高兴地发表 Element Plus 稳定版正式公布。自第一个 commit 起，通过 1 年零 7 个月的继续迭代开发，总计 2635 commits，通过 256 位贡献者所提交的 2494 个 PR，137 个 Alpha 与 Beta 版本，在社区每一位同学的参加帮忙下，Element Plus 的第一个正式版终于和大家见面。 重大更新TypeScript 与 Vue 3Element Plus 应用 TypeScript 与 Vue 3.2 开发，提供残缺的类型定义文件。并应用 Composition API 升高耦合，简化逻辑。 兼容性因为 Vue 3 不再兼容 IE，所以 Element Plus 也进步了最低兼容的版本。 Edge ≥ 79Firefox ≥ 78Chrome ≥ 64Safari ≥ 12如果想在低版本浏览器上失常应用 Element Plus，请自行应用 Babel、ESBuild 或其余转换工具，并引入相应的 polyfill。值得注意的是，Element Plus 应用到了 ResizeObserver，如有兼容性需要须要您自行引入 resize-observer-polyfill。详情请参阅 ResizeObserver 的兼容性。 ESM 与 CJSElement Plus 同时反对 ESM、CJS 与 UMD 格局。个别状况下无需注意导入的格局，构建工具会主动匹配并转换成指标格局，同时无需额定配置，本身反对按需加载能力。 ...

按执行流程一步步看vue-loader 源码 通常配置webpack 时，咱们会配置一个 loader 和 一个 plugin // webpack.config.jsconst VueLoaderPlugin = require('vue-loader/lib/plugin')// ...{ test: /\.vue$/, loader: 'vue-loader'},// ...plugins: [ new VueLoaderPlugin(),]当咱们运行 webpack 时， 首先会进入 vue-loader/lib/plugin 在apply办法内先挂载了一个钩子, // vue-loader/lib/plugin.js class VueLoaderPlugin { apply (compiler) { compiler.hooks.compilation.tap(id, compilation => { let normalModuleLoader if (Object.isFrozen(compilation.hooks)) { // webpack 5 normalModuleLoader = require('webpack/lib/NormalModule').getCompilationHooks(compilation).loader } else { normalModuleLoader = compilation.hooks.normalModuleLoader } normalModuleLoader.tap(id, loaderContext => { loaderContext[NS] = true }) }) // ... }}而后读取webpack配置内的所有rule 配置, 并应用 foo.vue 文件名作为测试，查找出能匹配 vue 文件的Rule所在索引 ， 并取出相应 rule ...

左侧边栏导航组件,当左侧导航超过一屏高度时,切换导航具备动画居中成果,能够滑动右侧区域来切换导航,滑动到屏幕底部时主动切换到下个导航,相同滑动到顶部切换上一下载地址: https://download.csdn.net/dow...效果图请点击:次要代码片段:// 子分类列表 categoryList(id) { const res = list2 const num = Math.ceil(Math.random() * 5) console.log(num) this.classifyList = getRandom(res.data.slice(0, num)) // 注因为这里子分类数据只有一个,所有采纳打乱程序的形式显示,理论可依据申请回来的数据来显示 function getRandom(arr) { let [newArr, selItem] = [[], null] let len = arr.length while (newArr.length < len) { selItem = arr[Math.floor(Math.random() * len)] if (!newArr.find((item) => item.id == selItem.id)) { newArr.push(selItem) } } return newArr }},tabNav(index, event) { const $nav = this.$refs.nav let { scrollTop, clientHeight, scrollHeight } = $nav const { clientHeight: itemHeight } = $nav.querySelector('.item'), len = Math.floor(clientHeight / itemHeight), middle = Math.ceil(len / 2) - 1, currentScrollHeight = (index - middle) * itemHeight, { navIndex } = this, prevScroll = Math.abs(index - navIndex) * itemHeight let timer = setInterval(() => { if (navIndex < index) { scrollTop += prevScroll / 16 $nav.scrollTop = scrollTop if (scrollTop >= currentScrollHeight) { clearInterval(timer) timer = null } } else { scrollTop -= prevScroll / 16 $nav.scrollTop = scrollTop if (scrollTop <= currentScrollHeight) { clearInterval(timer) timer = null } } }, 20) this.$refs.list.scrollTo(0, 0) this.isLowest = false this.navIndex = index this.categoryList(this.navList[index].id) this.swiperPicture(this.navList[index].id) // this.setClassifyActive(index) this.getClassifyActive = index},

常见配置上面都是说当初在我的项目外面看到的 entryentry: { client: path.join(__dirname, '../entry-client.js') }key的值，比方这个client，对应output的时候，这里的值 output: { path: path.resolve(__dirname, '../dist'), //输入到哪个文件夹 filename: '[name].js' //这个[name] },outputoutput: { path: path.resolve(__dirname, '../dist'), // 门路,输入 filename: '[name].js', // 输入的js叫什么名字，对应entry的key library: '', libraryTarget: '' },这里个别常见就下面两个，前面那两个讲之前我先引入一个点，webpack个别打包的js，都是匿名的自执行函数 (() => { return { name: 'jack', age: 24, };})();没有赋值操作，所以你页面引入了这个js，也用不了，这个时候就是library,libraryTarget的作用作用1

一、搭建vite和vue我的项目1、vite装置（来自官网命令）npm: npm init vite@latestyarn: yarn create vitepnpm: pnpm create vite也能够通过以下命令间接设置我的项目名和框架npm 6.x npm init vite@latest my-vue-app --template vuenpm 7+:, extra double-dash is needed: npm init vite@latest my-vue-app -- --template vueyarn yarn create vite my-vue-app --template vuepnpm pnpm create vite my-vue-app -- --template vue 二、pnpm 构建motorepo1、增加pnpm-workspace.yaml文件，内容如下： packages: -'packages/**'2、install3、新建packages目录，把src目录、vite.config.js和index.html移到packages文件夹下改名main，而后在packages下创立api目录，4、在main、api目录下别离pnpm init -f生成package.json name别离为：@momovue/main、@momovue/api 如果想增加公共框架包间接在根目录执行pnpm install module_name 4、api我的项目独自增加框架，并且增加index.ts测试文件 pnpm i typescript -D --filter @momovue/api 5、main装置api依赖 pnpm i @momovue/api --filter @momovue/main 6、测试调用api的办法 7、运行 ...

近日，网上流传的一张对于“SonarQube 和 Vue.js 波及国家安全漏洞“的截图引发业内关注。1 月 25 日， Vue.js 创始人尤雨溪迅速在集体平台账号上对此事做了回应。 尤雨溪示意，Vue 向来十分看重平安问题，近期也并未收到破绽报告。 在回应中，尤雨溪指出“前端框架无奈被黑客用于浸透”：“截图中的文字措辞可能会让一些不懂技术的敌人认为 ‘Vue 被黑客用于浸透’ —— 这是谬误的了解。黑客浸透可能会利用被攻击者所应用的前端框架中的破绽，但黑客不会用前端框架作为其浸透的工具，因为前端框架基本没有这个性能。” 在对网上公开信息进行排查后，他发现“文中的破绽是纯正的后端 API 鉴权破绽，跟前端和 Vue 没有任何关系。除此之外，并没有找到任何对于 Vue 的破绽披露。公开的 CVE 数据库中目前也没有任何针对 Vue.js 自身的破绽。” 作为开源我的项目，Vue 是以 JavaScript 源码模式公布的前端我的项目，每一行代码都公开承受任何平安审计。Vue 2 公布至今曾经 5 年多，在寰球业界被宽泛应用，期间从未有被发现过真正意义上的安全漏洞。 同时，尤雨溪还对 XSS 攻打伎俩进行了解释，“前端作为在用户浏览器里执行的代码，破绽类型通常都是 XSS (Cross-Site Scripting)，XSS 中文叫跨站脚本攻打，指的是通过上传歹意信息，让信息中蕴含的脚本被意外地渲染，从而可能在其余用户登陆时执行，窃取其余用户的数据。XSS 能够以多种形式呈现，在纯正服务端渲染的页面上也可能产生，不肯定波及前端框架。” 据理解，此前 Vue 团队私下也接到过一些所谓的 “破绽” 报告，但这些报告简直全副是在假如了将用户上传的任意 HTML 内容当作 Vue 模版或是 v-html 数据应用的前提下 —— 这种场景跟间接渲染用户上传的任意 HTML 没有本质区别，不论用的是不是 Vue 都会导致 XSS，而 Vue 文档里的平安章节也对这种做法有特地正告。 尤雨溪解释称：前端框架的职责是依据开发者提供的模版和数据渲染界面，如果开发者强行要求框架渲染不可信的模版而后指摘框架不平安，这就如同用 innerHTML 渲染不可信的内容，而后指摘浏览器有安全漏洞一样。 最初，他强调：只有遵循普适的前端平安常识，Vue 自身并不存在任何安全性问题。也因而，咱们对于为什么 Vue 会被列入排查感到很困惑 —— 如果有哪位敌人晓得详情或是破绽细节，请发邮件到 security@vuejs.org 告诉咱们。如果你被共事或是下属问起，也请分享这篇文章以正视听。 ...

我将echarts封装成了一个全局组件，因为很多其余都用到了，接管一个配置项参数，并且按需引入。为了让图表可能随着屏幕宽度自适应，通过 element-resize-detector监听dom元素的变动。而且还能随着左侧边栏的膨胀而变动装置依赖npm install echarts --savenpm install element-resize-detector echarts.vue 文件this.$el 代表的是以后组件子组件中不须要实例化echarts对象，申请接口的时候通过父组件调用子组件的init()办法<template> <div></div></template><script>import * as echarts from 'echarts'// 监听dom元素的变动import elementResizeDetectorMaker from 'element-resize-detector'// echarts导入相干import { GridComponent, TitleComponent, TooltipComponent, LegendComponent } from 'echarts/Components'import { BarChart, PieChart, LineChart } from 'echarts/charts'import { UniversalTransition } from 'echarts/features'import { CanvasRenderer } from 'echarts/renderers'echarts.use([ GridComponent, TitleComponent, // 题目 TooltipComponent, // 鼠标移入提醒 LegendComponent, // 图例 BarChart, // 柱状图 PieChart, // 饼图 LineChart, // 折线图 UniversalTransition, CanvasRenderer])export default { name:'dyEcharts', pops:['option'], methods:{ init(){ const myChart = echarts.init(this.$el) myChart.resize() this.option && myChart.setOption(this.option) // 监听盒子宽度的变动进行重置大小 let erd = elementResizeDetectorMaker() erd.listenTo(this.$el,e => { this.$nextTick(() => { myChart.resize() }) }) } }}</script>页面中应用echarts组件template中 ...

本文首发：《顶级好用的 5 款 Vue table 表格组件测评与举荐 - 卡拉云》 Vue table 表格组件作为绝大多数我的项目须要内嵌的组件，堪称非常重要。表格看起来虽简略，实则坑很深，像搜寻、排序、分页、有限加载等性能看起来很好实现，其实相当繁琐。抉择适宜本人我的项目利用场景的 Vue table ，会让我的项目开发事倍功半。在抉择之前，咱们要对市面上支流的 Vue table 表格组件有个全面理解，晓得他们的优缺点，再依据本人我的项目的需要，有针对性的抉择。 我试用了国内外支流 table 表格组件，测了一遍，筛掉长期不更新，bug 显著，社区活跃度低，性能繁多的 table 表格组件，把最好、最有特点的 5 款 Vue table 挑出来，分享给大家。这些 table 组件各有各的特点，有些性能多样，但整体很重；有些性能简略，但外围性能突出；有些堪比在线版Excel，再简单的需要也可满足。心愿我的测评能够帮忙你选到适合你需要的 table 组件。 另外，这个世界曾经悄悄发生变化，当初基本无需写任何前端代码，间接应用卡拉云 —— 新一代低代码开发工具帮你搭建后盾零碎，其内置欠缺的表格组件零碎，无需调试，拖拽即用。原来三天的工作量，当初 1 小时搞定，谁用谁晓得，用上早上班，详见本文文末。 本文测评的 5 款 Vue table 表格组件 Vue easytable - 性能恰到好处 无学习老本 上手就用Vue good table - UI 清爽 性能直给 适宜小我的项目Vxe table - 宝藏级 table 组件 高级性能低调好用 保护频率高tabulator - 元老级 table 组件 高级性能平民化AG Grid - 媲美 Excel 的 Table 组件 能想到的简单性能它都能做到卡拉云 - 新一代低代码开发工具，无需任何前端技术，内置表格组件，简略拖拽即可疾速搭建后盾工具一. Vue easytable - 性能恰到好处 无学习老本 上手就用 ...

如何应用 gh-pages 部署 vue 利用？应用 webpack5 实现了微前端，心愿能把这些利用部署到 git-pages, 如何办呢？ webpack5 模块联邦实现微前端 gh-pages 是什么？gh-pages 是 github 提供给我的项目、组织等托管动态页面的服务，可应用这项服务托管我的项目介绍页面、应用文档和组织介绍、个人简历等。 如何部署到 gh-pages?参考这个。 How to deploy React App to GitHub Pages 还可与 CI CD 工具联合，实现主动部署，相干操作可执行搜寻。 部署后的成果 如何解决切换路由后刷新浏览器 404 ？设置两个中央 把仓库名字作为根底门路const isProd = process.env.NODE_ENV === 'production'const history = isMemoryHistory ? createMemoryHistory(basePath) : createWebHistory(isProd ? '/vue3-dashboard' : undefined) // 生产环境才设置根底门路// vue3-dashboard 是我的项目名字设置自定义谬误页面增加一个 404.html，内容和 index.html一样当找不到门路时，会渲染 404.html. 每次复制文件也麻烦，我是每次执行部署，脚本执行胜利后复制 index.html 为 404.html "build": "webpack --config config/webpack.prod.js --progress", "postbuild": "cp dist/index.html dist/404.html", "predeploy": "npm run build", "deploy": "gh-pages -d dist"其余解决办法： ...

前端环境搭建视频举荐: https://www.bilibili.com/vide... 1. 应用Vue CLI脚手架创立我的项目装置 VueCLI cmd下 : npm install --global @vue/cli-init（应用npm要装置了node.js）npm install --global @vue/cli 能够装置vue3.0 进入我的项目目录 例如：e：/project vue create toutiao-m 创立vue我的项目 抉择Manually模式 空格抉择（*） babel : 把es6代码转es6兼容低版本 router : 治理我的项目路由 Vuex : 治理数据的共享数据状态 CSS pre-processors css预处理器 Linter 代码格局规范化 Use history mode for router？（Requires proper server setup for index fallback in production） no Pick a CSS pre-processor（PostCSS,Autoprefixer and CSS Modules are supported by default）： Less Pick a linter formatter config： ...

1.咱们通常应用计算属性，是不带参数的，如 computed: { getInitVal：function(){ return rst } }, 2.带参数的计算属性 computed: { getInitVal(){ return function(key_){ return rst } }, },

咱们用electron打包生成跨平台软件，官网举荐的打包形式先说一下有两种.第一种是：electron-packager第二种是：electron-builder这两种有什么不同呢？1.electron-packager 打包会生成这样一个文件夹，外面有exe的软件关上间接用（这不是安装包 是个文件夹） 2.electron-builder 打包会生成这样的多类型的安装程序*留神本文讲的就是第一种electron-packager 打包 不能生成安装包的解决方案这里就要提一下 nsis 这个货色了！ NSIS中文版下载地址：https://pan.baidu.com/s/1mitSQU0也能够自行百度下载敞开杀毒软件 始终下一步 装置实现 而后傻瓜式装置如下;1234能够更新本人软件的信息，而后下一步567留神删掉受权文件 删除 删除 删除8删除 删除 删除9 最要害的一步抉择electron-packager打包后生成的文件夹中的 exe 和全副文件夹 肯定要点选 点选 点选10始终下一步11.全副勾选12.抉择安装包出世的地位！而后你就失去了安装程序！

废话不多说，代码端上来 <template><div ref="map" id="map"> <div id="contextmenu_container" class="contextmenu"> <ul> <li @click="drawFeature"> <a href="#">绘制</a> </li> <li @click="toHome"> <a href="#">罕用区域</a> </li> <li @click="outputJson"> <a href="#">输入Json</a> </li> <li @click="measure('distence')"> <a href="#">测距</a> </li> <li @click="measure('area')"> <a href="#">测面</a> </li> <li @click="measure('angle')"> <a href="#">量角</a> </li> <li @click="fullscreen" v-html="textarr"> <a href="#">全屏</a> </li> <li @click="clear"> <a href="#">革除</a> </li> <li @click="pointPopup"> <a href="#">点坐标</a> </li> <li @click="zoomIn"> <a href="#">放大</a> </li> <li @click="zoomOut"> <a href="#">放大</a> </li> <li @click="refresh"> <a href="#">刷新</a> </li> </ul> </div> <div id="popup" class="ol-popup"> <a href="#" ref="external nofollow" id="popup-closer" class="ol-popup-closer" ></a> <div id="popup-content"></div> </div> </div><import>import 'ol/ol.css'import Map from 'ol/Map'import View from 'ol/View'import VectorSource from 'ol/source/Vector'import OSM from 'ol/source/OSM'import VectorLayer from 'ol/layer/Vector'import TileLayer from 'ol/layer/Tile'import { GeoJSON } from 'ol/format'import { Draw } from 'ol/interaction'import Overlay from 'ol/Overlay'// 线条几何形态。import { LineString } from 'ol/geom'import Feature from 'ol/Feature'// 应用返回的键或import { unByKey } from 'ol/Observable'// 获取几何形态的球形长度和面积import { getLength, getArea, offset } from 'ol/sphere'import Style from 'ol/style/Style'import Stroke from 'ol/style/Stroke'import Fill from 'ol/style/Fill'import Circle from 'ol/style/Circle'import { ScaleLine, defaults as defaultControls } from 'ol/control'import MousePosition from 'ol/control/MousePosition'import { createStringXY } from 'ol/coordinate'import Icon from 'ol/style/Icon'import Text from 'ol/style/Text'import { transform } from 'ol/proj'import { fromLonLat } from 'ol/proj'import Point from 'ol/geom/Point'import ImageSource from 'ol/source/Image'import { fromExtent } from 'ol/geom/Polygon'重头戏 ...

概念Attribute是元素标签的属性；property是元素对象的属性。<input id="a" value="text value"><script>let input = document.getElementById("a")console.log(input.getAttribute("value"))console.log(input.value)</script> 两者打印后果统一 input的value attribute是通过标签里value="text value"定义，所以应用input.getAttribute(),如果须要批改则应用setAttribute(value,newValue)input的property能够通过input.value获取vue.js对value的解决Vue.js 的 v-bind，个别状况下是在解决 attribute，如果要作为 property 解决的话，须要加上 .prop不过 v-bind:value 却大都默认为解决 property 值，因为被强制转化了，例如：<input id="a" value="text value"><script>mounted(){console.log(this.$el.getAttribute('value'))console.log(this.$el.value)console.log(this._vnode.data)}</script>第一个console后果为null,第二个是text value,第三个后果是{attrs:{id:"input"},domProps:{value:"text value"}}可见，vue.js将value作为vNode的data中domProps属性，而不是attrs属性，所以挂载后会作为property属性的value

在我的项目开发中，接口与接口之间、前后端之间的数据传输都应用 JSON 格局。 1 fastjson应用阿里巴巴的 fastjson是目前利用最宽泛的JSON解析框架。本文也将应用fastjson。 1.1 引入依赖<dependency> <groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.35</version></dependency>复制代码2 对立封装返回数据在web我的项目中，接口返回数据个别要蕴含状态码、信息、数据等，例如上面的接口示例： import com.alibaba.fastjson.JSONObject;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RestController; /** @author guozhengMu@version 1.0@date 2019/8/21 14:55@description@modify */@RestController@RequestMapping(value = "/test", method = RequestMethod.GET)public class TestController { @RequestMapping("/json")public JSONObject test() { JSONObject result = new JSONObject(); try { // 业务逻辑代码 result.put("code", 0); result.put("msg", "操作胜利！"); result.put("data", "测试数据"); } catch (Exception e) { result.put("code", 500); result.put("msg", "零碎异样，请分割管理员！"); } return result;}}复制代码这样的话，每个接口都这样解决，十分麻烦，须要一种更优雅的实现形式。 2.1 定义对立的JSON构造对立的 JSON 构造中属性包含数据、状态码、提示信息，其余项能够本人依据须要增加。一般来说，应该有默认的返回构造，也应该有用户指定的返回构造。因为返回数据类型无奈确定，须要应用泛型，代码如下： public class ResponseInfo<T> { /** * 状态码 */protected String code;/** * 响应信息 */protected String msg;/** * 返回数据 */private T data;/** * 若没有数据返回，默认状态码为 0，提示信息为“操作胜利！” */public ResponseInfo() { this.code = 0; this.msg = "操作胜利！";}/** * 若没有数据返回，能够人为指定状态码和提示信息 * @param code * @param msg */public ResponseInfo(String code, String msg) { this.code = code; this.msg = msg;}/** * 有数据返回时，状态码为 0，默认提示信息为“操作胜利！” * @param data */public ResponseInfo(T data) { this.data = data; this.code = 0; this.msg = "操作胜利！";}/** * 有数据返回，状态码为 0，人为指定提示信息 * @param data * @param msg */public ResponseInfo(T data, String msg) { this.data = data; this.code = 0; this.msg = msg;}// 省略 get 和 set 办法}复制代码2.2 应用对立的JSON构造咱们封装了对立的返回数据结构后，在接口中就能够间接应用了。如下： ...

浏览器重点：**不反对IE浏览器Firefox、Chrome 51+（没有实测，依据proxy兼容性揣测出的） 装置查看vue版本低于3.0先卸载后装置，没装置过就间接装置（node.js 8.0+) vue -V/vue --versionnpm install -g @vue/cli（如果低于3.0要先卸载 npm uninstall vue-cli -g） 创立我的项目1、命令创立vue-cli 3.0+创立我的项目 vue create my-project(项目名称）vue-cli 2.0 场景我的项目 vue init webpack my-project2、ui创立 vue ui 抉择我的项目依赖1、抉择我的项目预设 vue my-projectVue CLI v4.5.15? Please pick a preset: (Use arrow keys)> Default ([Vue 2] babel, eslint) --vue2我的项目 默认预设 Default (Vue 3) ([Vue 3] babel, eslint) --vue3我的项目 默认预设 Manually select features --手动抉择默认预设里（default）:蕴含babel, eslint 2、设置我的项目所需的性能搭建全家桶+typescript须要抉择=》Manually select features ? Please pick a preset: Manually select features? Check the features needed for your project: (*) Choose Vue version --抉择vue版本 (*) Babel --设置babel代码编译（必选） (*) TypeScript --ts ( ) Progressive Web App (PWA) Support --渐进式的web零碎 浏览器app (*) Router --vue路由 (*) Vuex --vue状态治理库 (*) CSS Pre-processors --CSS预处理器 (*) Linter / Formatter --代码查看 ( ) Unit Testing --单元测试>(*) E2E Testing --端对端测试/自动化测试3、抉择预设性能a、vue版本b、是否应用class组件语法，是TypeScript我的项目所以须要用 ...

1、为了实现需求表头的一个单元格划分分割线如下图2、vue中应用elementui的table实现（自己用elementui比拟多）话不多说，效果图如下：代码如下： <template> <div> <el-table :data="tableData" border style="width: 100%"> <el-table-column :resizable="false" class-name="elChgTbeClmn" prop="date" label="日期" width="120"> <template slot="header" slot-scope="scope"> <div class="elHeadCon"> <div class="headerCon1">区域</div> <div class="headerCon2">类型</div> <div class="headerLine"></div> </div> </template> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </div></template><script>export default { name: 'sysIndex', components: {}, data() { return { tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' } ] }; }, mounted() {}, methods: {}};</script><style>/* 如果单元格的padding */.elChgTbeClmn .cell { padding: 0px !important;}.elHeadCon { height: 50px; position: relative;}.headerCon1 { position: absolute; left: 0; bottom: 0;}.headerCon2 { position: absolute; right: 0; top: 0;}.headerLine { width: 1px; height: 150px; transform: rotate(-68deg); /*这里须要本人调整，依据线的地位*/ transform-origin: top; background-color: red;}</style>

找了一圈流程图和dag图插件，发现每一个的性能都太弱了没方法实现 运维可视化需要，所以本人花心思撸了一个进去。 https://github.com/MyButifull...基于antv-x6 vue版本实用于流程图-dag图 有以下性能内容：1、拖拽布局2、右键菜单3、保留4、缩放5、多选6、快捷键 cv cx cz（重做）7、连线判断8、配置属性9、动静节点流向动画其余性能可在antv-x6文档自行添加

文/明道云销售部参谋 潘娟编辑/蒋礼轩 在制造业中，物料治理是非常重要且繁冗的局部。很多用户在明道云上构建生产类利用都会遇到困难。本文以简略的产品BOM搭建为根底，延长一些层级关联和代码块的应用技巧，为用户提供办法与借鉴。 一、物料治理1.表单搭建 本文对物料层级定义为四级，别离是原料及半成品的大类划分、大类的细分，以及大类细分的再次细分。 首先是建设表单。咱们依据物料层级数量，将表单划分为四个层级。咱们的物料分几个层级就建设几张表单。 下一步是对层级之间的数据做关联，高一级与上级之间都为一对多的关系。当咱们建设好数据后，咱们能够用层级视图来清晰地展现物料详细信息和层级关系。 接下来，咱们会遇到一个较难的问题——物料元件编码。咱们假如每个分类下的物料编码起始值都为001，四级元件的编码则是0001，而且每个物料的显示须要组合下级编码及本级的物料名称。 看上面的图片，咱们能更间接地了解物料编码规定，以及其在表单配置中的实现形式。 因为不同的物料下明细物料的编码都要从001起始，所以单纯利用零碎自带的自动编码字段是无奈实现该成果的。那么，这个编码规定就要利用到工作流。 2.非凡编码规定工作流配置 这条工作流的大抵配置逻辑如下： 1.设置工作流的触发条件为“新增时触发”2.查找关联同一个下级的同级同类型的最大编码记录3.最大编码记录的数值+14.在表单内增加一条数值作为编码运算的辅助内容5.应用代码块，将运算后果数值转化为能够显示的文本。还记得前文提到，物料有“原料”和“半成品”之分吗？不同类型的物料有不同的运算规定。因而，咱们在第二步找到记录之后，要做物料分类的分支判断，不同的物料类型运行不同的运算节点。 下一步，利用代码块将数值转化为对应格局的文本。 代码块很简略，只有上面两行： var non = input.num; return {Str:"."+non.toString().padStart(3, "0")}最初，将计算数值及转化后的文本编码更新至触发数据的对应字段内，物料的编码及划分就实现了。 二、产品治理1.产品表单配置 实现物料表单的搭建后，下一步要配置产品表单。作者选取了一个典型的BOM表单作为参考的成品成果，并对应地配置表单字段。 除了产品表单以外，咱们还须要有一张产品物料清单，以此来列举每个产品对应须要的半成品以及原料。这样以便物料主动汇总和排序，并且不便制作更简洁的BOM打印模板。 每个产品记录将关联其对应的产品物料清单，成果如下图： 2.物料主动汇总工作流配置 工作表触发形式为：物料清单更新或者新增时触发，同时限定条件产品表及触发的物料类型为半成品（限定触发类型是因为本条工作流最终的成果是须要新增类型为原料的明细，如果流程中不限定类型的话，工作流就会重复被触发）。 当获取到触发的半成品关联的元件明细较多时，这就须要用子流程去解决获取到的元件明细。 同时，因为在子流程中咱们须要应用到主流程的数据，所以咱们在子流程中就须要去做传递关联项用以绑定关联关系。最初咱们在子流程内只须要实现查找及新增后，流程就完结了。 那么，就产品物料内的排序而言，咱们仅须要在视图内设置排序关联视图就能够将其实现。 三、打印模板不少客户都要把BOM表单打印进去，以便在生产车间核查。而咱们搭建进去的BOM清单最终的打印模版配置和成果如下图所示。以下效果图和最后对照搭建的BOM表单十分相似。

我的项目需要：前端层面实现导出word性能我的项目筹备： vue脚手架我的项目(vue-cli4)插件：docxtemplater pizzip jszip jszip-utils file-saver1.装置依赖：npm install docxtemplater pizzip --save // 解决docx模板npm install jszip-utils --savenpm install jszip@2.6.1 --save npm install file-saver --save // 解决输入文件坑1：执行npm install jszip --save 会下载最新版本导致报错，必须指定版本号，亲测2.6.1版本可行2.创立word模板：public/test.docxvuecli3/vuecli4在public文件下寄存word模板test.docx;vuecli2在static文件下寄存word模板test.docx;word模板示例：坑2：如果间接在代码编辑器内通过新建文件的形式创立test.docx前面会报错，应该和文件编码格局无关，所以须要进入我的项目文件夹内右键新建docx文件，test.docx内编辑后编辑器内能够看到pulic文件下多了一个~$test.docx文件；呈现这个文件夹根本就okay了3.封装导出word组件：src/components/export2word.vue<template> <div> <div class="word-box" @click="exportWord">word</div> </div></template><script>import Docxtemplater from 'docxtemplater';import JSZip from 'jszip';import JSZipUtils from 'jszip-utils';import { saveAs } from 'file-saver';export default { name: 'Docx', props: { fileName: { type: String, // 输入文件名 default: '' }, fileTemplete: { type: String, // public下寄存的word模板名称 default: '' }, exportData: { type: Object, // 导出的word数据 default: () => { } } }, methods: { // 点击导出word exportWord() { // 读取并取得模板文件的二进制内容 JSZipUtils.getBinaryContent(this.fileTemplete + '.docx', (error, content) => { // 抛出异样 if (error) throw error; // 创立一个JSZip实例，内容为模板的内容 let zip = new JSZip(content); // 创立并加载docxtemplater实例对象 let doc = new Docxtemplater(); doc.loadZip(zip); // 设置模板变量的值 doc.setData({ ...this.exportData }); try { // 用模板变量的值替换所有模板变量 doc.render(); } catch (error) { // 抛出异样 let e = { message: error.message, name: error.name, stack: error.stack, properties: error.properties }; console.log(JSON.stringify({ error: e })); throw error; } // 生成一个代表docxtemplater对象的zip文件（不是一个实在的文件，而是在内存中的示意） let out = doc.getZip().generate({ type: 'blob', mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }); // 将指标文件对象保留为指标类型的文件，并命名 saveAs(out, this.fileName + '.docx'); }); }, },}</script>4.页面应用word组件：src/views/page.vue<template> <div class="page"> <Download class="download" :fileName="fileName" :fileTemplete="fileTemplete" :exportData="exportData" /> </div></template><script>import Download from '@/components/export2word.vue';export default { data() { return { fileName: '2021年度销售业绩报告', fileTemplete: 'test', exportData: { "code": "value", "data": { "dataArr0": { "key1": "value1", "key1": "value1", "key1": "value1", "key1": "value1", }, "dataArr1": { "key1": "value1", "key1": "value1", "key1": "value1", "key1": "value1", }, "dataArr2": { "key1": "value1", "key1": "value1", "key1": "value1", "key1": "value1", }, "dataArr3": { "obj1": { "key1": "value1", "key1": "value1", "key1": "value1", "key1": "value1", }, "obj2": { "key1": "value1", "key1": "value1", "key1": "value1", "key1": "value1", }, "obj3": { "key1": "value1", "key1": "value1", "key1": "value1", "key1": "value1", }, "key2": "value2", "key3": "value3", }, "dataArr4": [ { "key1": "value1", "key1": "value1", "key1": "value1", "key1": "value1", }, { "key1": "value1", "key1": "value1", "key1": "value1", "key1": "value1", }, { "key1": "value1", "key1": "value1", "key1": "value1", "key1": "value1", }, { "key1": "value1", "key1": "value1", "key1": "value1", "key1": "value1", }, { "key1": "value1", "key1": "value1", "key1": "value1", "key1": "value1", } ], "dataArr5": { "key1": "value1", "key1": "value1", "key1": "value1", "key1": "value1", } } }, } }, components: { Download, },}</script><style>.page { box-sizing: border-box; width: 100%; height: 100vh; user-select: none;}.page .download { border: 1px solid #000; padding: 5px 10px; height: 50px; margin-left: 100px; cursor: pointer;}</style>5.填充word模板数据：填充数据依据渲染数据的构造而定，这里提供了数组和对象数据结构 ...

vue中有时让插槽内容可能拜访子组件中才有的数据是很有用的。例如，构想一个带有如下模板的 <current-user>组件： <span> <slot>{{ user.lastName }}</slot></span>咱们可能想换掉备用内容，用名而非姓来显示。如下： <current-user> {{ user.firstName }}</current-user>然而上述代码不会失常工作，因为只有 <current-user> 组件能够拜访到 user，而咱们提供的内容是在父级渲染的。 为了让 user 在父级的插槽内容中可用，咱们能够将 user 作为 <slot> 元素的一个 attribute 绑定下来： <span> <slot v-bind:user="user"> {{ user.lastName }} </slot></span>绑定在 <slot> 元素上的 attribute 被称为插槽 prop。当初在父级作用域中，咱们能够应用带值的 v-slot 来定义咱们提供的插槽 prop 的名字：（注：这里不肯定必须叫slotProps，也能够随便定义为你想叫的名字） <current-user> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template></current-user>

说白了还是把本人绕迷了，在这里记录一下，也心愿同时能对看到这篇文章的敌人有所帮忙，祝大家技术越来越牛批！！！ 进入正题首先是父组件中，数据申请代码（axios的封装文件就不在此赘述了，本文的问题与axios没什么关系） // 全国各省各市疫情数据申请this.$axios .post("/wapicovid19/all.php", { key: "123", }) .then((res) => { // console.log(res.data.retdata); for (let i = 0, len = res.data.retdata.length; i < len; i++) { this.province.push({ name: res.data.retdata[i].xArea, value: res.data.retdata[i].curConfirm, }); } }) // 其实这里最开始我还加了一层then。。。 // 期待上边返回的数据到位了再从新更新数据（想想刚刚谬误的时候，本人真是个**） // 其实没必要，Vue的大多数数据都是响应式的 .catch((err) => console.error(err));接着是子组件中接管值的代码： import chinaMap from "../utils/echarts-china";export default { name: "covid-domestic", data() { return { mapName: "", }; }, props: { propProvince: { type: Array, default: [], }, }, // 模板渲染结束先初始化地图 mounted() { this.mapName = new chinaMap(document.getElementById("map"), this.propProvince); this.mapName.generateMap(); },};为了可能看懂子组件中的代码，我把封装的echarts文件贴在下边（封装成了一个构造函数的模式）： ...

明道云荣获“2021中国零代码年度领军企业”12月21日，由工信部信息技术倒退司领导，中国软件网、海比研究院独特主办的“洞见2022中国企业服务年会”在北京胜利举办。明道云作为国内零代码APaaS赛道的领军企业，荣获“2021中国零代码年度领军企业”。 明道云上榜《中国企业服务云图（2022 版）》APaaS板块举荐产品11 月 12 日-13 日，由崔牛会主办的2021 中国 SaaS 大会在上海胜利举办。会上，《中国企业服务云图（2022 版）》如约公布，耗时 4 年迭代 10 版，划分 16 大类囊括 90 小类，收录2000+家 To B 企业，送达 100000+ To B 人士。在APaaS板块中，明道云上榜举荐产品。 「中国企业服务云图」是IT软件行业中全面业余的数字化选型“宝典”，为企业发展数字化转型及建设提供选型参考。明道云作为APaaS细分畛域的领军产品，将充分发扬精益求精的精力，为宽广企业提供更优质的产品和服务！ 明道云入选首批低代码/无代码推动核心成员单位2021年12月6日，由中国信通院企业数字化倒退共建共享平台、云计算规范和开源推动委员会联结发展的“低代码/无代码技术赋能企业数字化转型主题沙龙”，在线上胜利举办。 会上，中国信通院云计算与大数据研究所副所长栗蔚颁布了首批低代码/无代码推动核心成员单位和技术专家名单。明道云入选首批成员单位，且明道云CTO金可伟被聘为低代码/无代码推动核心技术专家。今后，明道云将积极参与和反对低代码/无代码在国内的推动工作，让更多企业享受低代码/无代码时代的企业数字化红利。

网上有很多vue-test-utils + jest 的相干文章，大体上能够分为两个流派： 配置搭建派非凡问题派通观起来总感觉仿佛对于真正想要施行单元测试的入门开发人员来说，缺了一环：面对具体场景时，应该如何进行单元测试编码。 这篇文章就依据不同场景，列出一些实在的代码示例。心愿可能帮忙到想要真正施行单元测试的团队。 mock 实例办法场景举例 submit办法内，个别会调用校验办法，依赖校验办法的返回 true || false 来判断是否进行理论提交逻辑的执行。 但有时候须要测试的办法内调用的其余办法很难结构，比方校验办法须要传递若干参数，而且所有参数必须合规能力继续执行提交的代码逻辑。那么此时让校验办法间接通过比拟好。 当然这引出另外一个话题，咱们在进行单元测试的时候是否应该连带援用办法一起测试？ 我的认识是，既然是单元测试，那么援用办法不肯定必须全副笼罩到，起因如下： 在TDD过程中需测试的办法和其中的援用办法不肯定是同一个人负责的单元测试应该仅为以后测试方法的逻辑是否正确负责，如提交办法须要思考的是提交的各种胜利或者失败场景，而校验办法应该自行通过本人的单元测试代码来确保校验自身是否正确因而在这种场景下，咱们对于特地简单的援用办法能够思考进行mock。 代码如下 jest.spyOn(wrapper2.vm, 'validate').mockImplementation(() => {return true})wrapper2.vm.handleSubmit() // 再间接调用提交办法的话，校验办法就会间接返回胜利，以便咱们间接对提交外部的办法进行测试对于特定字段的断言场景举例 有时候在逻辑代码中一个办法的调用，其参数可能十分宏大，然而对于某种测试场景，咱们只须要判断参数中是否含有某几个特定字段或者值。 比方咱们调用一个办法，其代码如下 function fn () { ... let params = { key1: value1, key2: value2, key3: value3, ... keyn: valuen } ... request.get(params)}在进行单元测试编写中，咱们须要校验的是某种场景下，params必须含有 keyJ = J 的参数值。此时，咱们不须要对整个params对象进行断言 let params = { key1: value1, key2: value2, key3: value3, ... keyn: valuen}// 下面齐全手动构建了残缺的参数对象，不要这样做expect(request.get).toBeCalledWith(params)如果只关怀一个大对象其中的某个字段的值，不要像下面这样编写测试代码，请参考上面的测试代码示例 expect(request.get).toBeCalledWith(expect.objectContaining({ key3: 42 // 假如咱们构建的测试场景只须要特地关注该场景下的key3 值必须为 42}))对于refs的解决在业务代码中含有调用以后组件refs援用自组件，并调用他们办法的时候要怎么解决呢？ ...

应用this.$nextTick(回调函数)作用在下一次DOM更新完结后执行其指定的函数 什么时候用在扭转数据后，要基于更新后的DOM进行某些操作时，要在nextTick指定的回调函数中执行 demo// 页面渲染好当前，搜寻框获取焦点this.$nextTick(() => { this.$refs.search.focus()})

Vuex是什么概念：Vuex 是一个专为 Vue.js 利用程序开发的状态管理模式。它采纳集中式存储管理利用的所有组件的状态，并以相应的规定保障状态以一种可预测的形式发生变化。实用于任意组件之间通信。 PS：集中式（能够了解为学生都在课堂，老师给他们上课），还有分布式（能够了解为老师会72变，变成N集体，去学生家里给每个学生上课） 什么时候应用Vuex如果您不打算开发大型单页利用，应用 Vuex 可能是繁琐冗余的。 那么当咱们开大大型单页面组件的时候，肯定要用Vuex吗？ 当多个组件依赖于批准状态当来自不同组件的行为须要扭转同一状态Vuex图解来自于官网 Vuex的store中都有啥state：存储公共数据的mutations：操作公共数据的actions：触发mutations的（这一步在某些时候不须要，能够间接调用mutations外面的办法）getters：基于state中的数据再做解决的（能够了解为store的计算属性）Vuex中的map系列// 这两个是当咱们这个页面应用不止一个store中的数据的时候，能够应用import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'methods: { increase() { // this.$store.dispatch('increase',this.val) // 如果没有简单的逻辑，例如调用接口，咱们能够间接接调用commit，不须要dispatch this.$store.commit('INCREASE',this.val) }, // 这样就能够间接应用了，不必像下面样的本人写办法调用，这样是间接调用的commit，不通过actions，同样有数组的写法，名称放弃对立 ...mapMutations({increase1:'INCREASE'}), // 这样就能够间接应用了，不必像下面样的本人写办法调用，调用actions，同样有数组的写法，名称放弃对立 ...mapActions({increase2:'increase'})},computed:{ // 这是对象写法 // ...mapState({sum:'sum',userId:'userId',userName:'userName'}), // ...mapGetters({bigSum:'bigSum'}) // 这是数组写法,这种写法，名字和store必须要一样 ...mapState(['sum','userId','userName']), ...mapGetters(['bigSum'])}demo// store/index.js// 引入Vueximport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// 创立state--用于存储数据const state = { sum: 0, userId: 12345678, userName: '景天'}// 创立mutations--用于操作数据（state）const mutations = { INCREASE(state,value) { state.sum += value }, DECREASE(state,value) { state.sum -= value }}// 创立actions--用于响应组件中的动作// 如果调用的是store.dispatch来批改store外面的值，会触发这个，再触发mutations外面的办法const actions = { // 接管两个参数 // 第一个参数能够了解为是一个小型的store,能够获取和应用store身上的货色，第二个参数是你传进来的值 increase(context,value) { // INCREASE这个大写不大写无所谓，只是有些人喜爱辨别 context.commit('INCREASE',value) }, decrease(context,value) { // INCREASE这个大写不大写无所谓，只是有些人喜爱辨别 context.commit('DECREASE',value) }}// 基于state中的数据做解决const getters = { bigSum(state) { return state.sum * 10 }}// 导出应用export default new Vuex.Store({ state, actions, mutations, getters})两个组件演示Vuex ...

定义全局定义，能够将eventBus绑定到vue实例的原型上,也能够间接绑定到window对象上。 //main.js(能够是任意JS写)//形式一Vue.prototype.$EventBus = new Vue();// 在mian中，形式一能够这么写new Vue({ router, render: h => h(App), beforeCreated() { Vue.prototype.$EventBus = this }}).$mount('#app')//形式二window.eventBus = new Vue();触发事件//应用形式一定义时this.$EventBus.$emit('eventName', param1,param2,...)//应用形式二定义时EventBus.$emit('eventName', param1,param2,...)监听事件//应用形式一定义时this.$EventBus.$on('eventName', (param1,param2,...)=>{ //须要执行的代码})//应用形式二定义时EventBus.$on('eventName', (param1,param2,...)=>{ //须要执行的代码})移除监听事件为了防止在监听时，事件被重复触发，通常须要在页面销毁时移除事件监听。或者在开发过程中，因为热更新，事件可能会被屡次绑定监听，这时也须要移除事件监听。 //应用形式一定义时this.$EventBus.$off('eventName');//应用形式二定义时EventBus.$off('eventName');

插槽分类默认插槽（匿名插槽）（单个插槽）具名插槽作用域插槽插槽的作用让父组件能够向子组件指定地位插入html构造，也是一种组件间通信的形式。插槽显示不显示，怎么显示，是父组件及管制。显示在什么地位，是子组件管制。 应用形式1.默认插槽 // 父组件<template> <div class="father"> <h3>这里是父组件</h3> <child> <div class="tmpl"> <span>菜单1</span> <span>菜单2</span> <span>菜单3</span> </div> </child> </div></template>// 子组件<template> <div class="child"> <h3>这里是子组件</h3> <slot></slot> </div></template>2.具名插槽 // 父组件<template> <div class="father"> <h3>这里是父组件</h3> <child> // 这里能够应用v-slot。vue2.6当前提出的，然而，必须写在template下面，否则报错，v-slot能够简写成# // <template v-slot:a> // <template #a> <div class="tmpl" slot="a"> <span>菜单1</span> <span>菜单2</span> <span>菜单3</span> </div> <div class="tmpl" slot="b"> <span>菜单-1</span> <span>菜单-2</span> <span>菜单-3</span> </div> <div class="tmpl"> <span>菜单->1</span> <span>菜单->2</span> <span>菜单->3</span> </div> </child> </div></template>// 子组件<template> <div class="child"> // 具名插槽 <slot name="a"></slot> <h3>这里是子组件</h3> // 具名插槽 <slot name="b"></slot> // 匿名插槽 <slot></slot> </div></template>3.作用域插槽 这个插槽，可能有点难了解，然而还是有应用场景的，就是数据不在父组件，而是在子组件中的时候 // 父组件<template> <div class="father"> <h3>这里是父组件</h3> <child> // <template scope="childData"> // 下面是以前的写法，上面是新的写法，都能够 // 这里必须是template <template slot-scope="childData"> <span v-for="(item,index) in childData.lists" :key="index">{{item}}</span> </template> </child> </div></template>// 子组件<template> <div class="child"> <slot :lists="list"></slot> </div></template>data() { return { list: ['菜单1','菜单2','菜单3'] }}

一些自主学习echart时用到的参数。 option = { title: {//题目 // text: '素质课报名人次分类统计',//主题目文本 subtext: '素质课报名人次分类统计',//副标题文本，'\n'指定换行 x: 'center',//程度安放地位，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px） y: '250px',//垂直安放地位，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px） textStyle: {//主题目文本款式{"fontSize": 18,"fontWeight": "bolder","color": "#333"} fontFamily: 'Arial, Verdana, sans...', fontSize: 12, fontStyle: 'normal', fontWeight: 'normal', }, subtextStyle: {//副标题文本款式{"color": "#aaa"} fontFamily: 'Arial, Verdana, sans...', fontSize: 12, fontStyle: 'normal', fontWeight: 'normal', }, zlevel: 0,//一级层叠管制。默认0,每一个不同的zlevel将产生一个独立的canvas，雷同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会耗费更多的内存和性能，并不倡议设置过多的zlevel，大部分状况能够通过二级层叠管制z实现层叠管制。 z: 6,//二级层叠管制，默认6,同一个canvas（雷同zlevel）上z越高约靠顶层。 }, tooltip: {//提示框，鼠标悬浮交互时的信息提醒 show : 'true',//可视 trigger: 'item', //依据item提示信息 formatter : "{a} <br/>{b}: {c} ({d}%)", //提醒内容 trigger: 'item',//默认值'item'，触发类型，默认数据触发，见下图，可选为：'item' | 'axis' }, // legend: {//图例，每个图表最多仅有一个图例 // orient: 'vertical', // left: 'left', // icon: 'circle',//图标为圆形，默认是方形 // align:'auto', // bottom: 'bottom', // textStyle: { // fontSize: 10, // color: '#666' // } // }, series: [// 系列列表,每个系列通过 type 决定本人的图表类型 { name: '人数', type: 'pie', radius: '50%', label: { normal: { position: 'inside',//inside (自适应，柱状图外部地方)，top(柱状外的正上方)，left(柱状外的右边)，right(柱状外的左边)； //坐标[x,y] (以柱状图的顶部为原点) //insideTop,insideBottom,insideRight,insideLeft formatter: '{d}%', textStyle: { color: '#fff', // fontSize: '14px', // fontWeight: '300', } } }, data: [ { value: 1048, name: 'Search Engine' }, { value: 735, name: 'Direct' }, { value: 580, name: 'Email' }, { value: 484, name: 'Union Ads' }, { value: 300, name: 'Video Ads' } ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; option && myChart.setOption(option); }较为齐全的参数属性能够看这位大佬的博客：https://www.cnblogs.com/web52... ...

简略介绍能够把多个组件共有的数据，办法，提取成一个混合文件data中数据本人和混合文件都有时，以本人的数据为主生命周期还有办法这些都是独立的全局混合// 这样引入所有的页面，组件都会应用这个混合import mixin from './components/mixin/mixin'Vue.mixin(mixin)部分混合// 罕用援用形式// mixin.jsexport default { data() { return { mixData: '这是mixin中数据', x: 100, } }, created () { console.log(this.y) }, methods: { handleClick() { console.log(this.name) } }, computed: { showNumber() { return this.x + this.y } }}// 两个须要援用混合的组件// Student.vue<template> <div> <h1>{{ msg }}</h1> <div @click="handleClick">姓名：{{name}}</div> <div>年龄：{{age}}</div> <div>数字：{{showNumber}}</div> </div></template><script>import mixin from './mixin/mixin'export default { name: 'Student', data () { return { msg: 'Welcome', y: 100 } }, mixins: [mixin], props: { name: { type: String, requried: true }, age: { type: Number, default: 18 } }, created () { console.log(this.mixData) }}</script>// School.vue<template> <div> <h1>{{ msg }}</h1> <div @click="handleClick">姓名：{{name}}</div> <div>地址：{{address}}</div> <div>数字：{{showNumber}}</div> </div></template><script>import mixin from './mixin/mixin'export default { name: 'Student', data () { return { msg: 'Welcome', y: 200 } }, mixins: [mixin], props: { name: { type: String, requried: true }, address: { type: String, requried: true } }, created () { console.log(this.mixData) }}</script>

props接管值的几种写法props是只读的，不容许间接批改传进来的props的值，批改就会有正告 // 最简略的接管值的形式,接管的是一个数组props: [name,age]// 接管参数是一个对象props: { name: String, age: Number}// 最残缺的形式props: { name: { type: String, // 数据的类型限度 required: true // 数据是否必传 }, age: { type: Number, default: true // 数据默认值 }}Demo// 父组件<template> <div> <Student name="景天" :age="20"></Student> <Student name="雪见"></Student> </div></template><script>import Student from './Student.vue'export default { name: 'HelloWorld', data () { return { } }, components: { Student }}</script>// 子组件<template> <div> <h1>{{ msg }}</h1> <div>姓名：{{name}}</div> <div>年龄：{{age}}</div> </div></template>3<script>export default { name: 'Student', data () { return { msg: 'Welcome' } }, props: { name: { type: String, requried: true }, age: { type: Number, default: 18 } }}</script>

VUE组件全局组件注意事项 组件中的data必须是一个函数，这样就能让各个组件的数据独立。template必须有个明确的根元素，简略说就是最外层必须是一个标签，还能够应用ES6模板语法能够是用短横线的形式命名,也能够应用驼峰的形式(驼峰的形式,在组件的模板中能够间接应用，然而在vue的html代码中必须应用横线的形式应用)// 注册组件// Vue.component('BtnCounter',function(){Vue.component('btn-counter',function(){ // 组件中的data必须是一个函数 data: function(){ retrun { count: 0 } }, // template必须有个明确的根元素，简略说就是最外层必须是一个标签 // template: '<button @click="count++">点击了{{count}}次</button>', template: '<button @click="handle">点击了{{count}}次</button>', methods: { handle: function(){ this.count++; } }}); // 组件应用<div id="app"> <button-counter></button-counter></div>部分组件部分组件只能在注册它的父组件中应用 形式1 const HelloWorld = Vue.extend({template: '<div>{{ msg }}</div>',data: function () { return { msg: 'helloworld' }}})var vm = new Vue({ el:'#app', data: { }, components: { 'hello-world': HelloWorld }}); <div id="app"> <hello-world></hello-world></div>形式2(这是形式1的简写版本，看似没有调用extend，然而其实vue在底层帮你调用了) var HelloWorld = { data: function(){ retrun { msg: 'helloworld' } } template:'<div>{{msg}}</div>'} var vm = new Vue({ el:'#app', data: { }, components: { 'hello-world': HelloWorld }}); <div id="app"> <hello-world></hello-world></div>单文件组件// 子组件<template> <div> <h1 class="hi">{{ msg }}</h1> </div></template><script>export default { name: 'children', data() { return { msg: "欢送" } }}</script><style>.hi { background-color: black;}</style>// 父组件<template> <div id="app"> <children></children> </div></template><script>import children from './children'new Vue({ el:'#app', data: { }, components: { children }});</script>父子组件传值父传子应用props，详见props介绍 ...

过滤器格式化数据，比方将字符串格式化为字母大写，日期格局等 自定义过滤器 // 字母转大写Vue.filter('toUpperCase', function(val){ return val.toUpperCase();});// 字母转小写Vue.filter('toLowerCase', function(val){ return val.toLowerCase();});应用自定义过滤器 <div>{{ msg | toUpperCase }}</div>// 这种形式上一个过滤后的输入值是下一个过滤器的传入值<div>{{ msg | toUpperCase | toLowerCase }}</div><div :id="id | toUpperCase"></div>部分过滤器，VUE示例中filters中增加过滤的办法 filters: { toUpperCase: function(val){ return val.toUpperCase(); }}带参数的过滤器 // 格式化工夫Vue.filter('format', function(val,type){ formatDate = val.getFullYear() + "-" + (val.getMonth()+1) + "-" val.getDate(); return val.toUpperCase();});<div>{{ date | format('yyyy-MM-dd') }}</div>

计算属性 computed应用场景：当页面中有某些数据依赖其余数据进行变动的时候，能够应用计算属性 计算属性 computed 是基于data中数据进行解决的，data数据变动，他也跟着变动 当data中数据没有产生扭转时，咱们调用computed中函数n次，只会进行缓存（执行一次）每个计算属性都蕴含两个set、get 属性 监听属性 watch应用场景：数据变动时执行异步或开销较大的操作，能够随时批改状态的变动 watch:相似于监听机制+事件机制。 在大部分状况下咱们都会应用computed，但如果要在数据变动的同时进行异步操作或者是比拟大的开销，那么watch为最佳抉择。watch为一个对象，键是须要察看的表达式，值是对应回调函数。值也能够是办法名，或者蕴含选项的对象。 <template> <div> <input v-model="fristName" /> <br> <input v-model="lastName" /> <div>计算属性批改值：{{cfullName}}</div> <div>监听属性批改值：{{wfullName}}</div> </div></template><script> export default { data() { return { fristName: '', lastName: '', wfullName: '' } } computed: { // 残缺写法 cfullName：{ // 1.有人读取fullName时调用 // 2.初始化是后调用,依赖数据变动调用 get() { return this.fristName + '-' + this.lastName } // 当fullName被批改时候调用 set(newVal) { let arr = newVal.split('-') this.fristName = arr[0] this.lastName = arr[1] } } // 简写形式（只用到get，不须要set） fullName() { return this.fristName + '-' + this.lastName } } watch: { // 残缺写法 fristName:{ // 是否首次加载就监听，默认false immediate: true, // 是否深度监听，默认false，列入监听的是一个对象，外面的数据要监听，就要deep deep: true, handler(newVal,oldVal){ this.wfullName = oldVal + '-->' + newVal } } // 简写 fristName(newVal,oldVal){ this.wfullName = oldVal + '-->' + newVal } } } // watch还有一种写法 // 残缺写法 vm.$watch('fristName',{ // 是否首次加载就监听，默认false immediate: true, // 是否深度监听，默认false，列入监听的是一个对象，外面的数据要监听，就要deep deep: true, handler(newVal,oldVal){ this.wfullName = oldVal + '-->' + newVal } }) // 简写 vm.$watch('fristName', function(newVal,oldVal){ this.wfullName = oldVal + '-->' + newVal })</script>methods computed watch三者区别methods不存在缓存，执行一次运行一次，执行n次，运行n次computed有缓存，调用屡次只会执行一次，不能执行异步工作watch能执行异步工作，computed能实现的，watch能实现，watch能实现的，computed不肯定能实现

Vue的双向数据绑定原理vue.js 则是采纳数据劫持联合发布者-订阅者模式的形式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时公布音讯给订阅者，触发相应的监听回调。 Demolet number = 18;let person = { name: '张三', sex: '男'}Object.difineProperty(person,'age',{ // value: 18, // 能够设置默认值 // enmerable: true, // 管制属性是否能够枚举，默认false // writable: true, // 管制属性是否能够被批改，默认false // configurable: true // 管制属性是否被删除，默认false // 当有人读取person的age属性是，get函数(getter)就会被调用，且返回值就是age值 get() { console.log('有人读取了age属性') retrun number; } // 当有人批改person的age属性是，set函数(setter)就会被调用，且会受到批改的具体值 set(newVal) { console.log('有人批改了age属性，值是'，newVal) number = value }})

生命周期次要阶段挂载(初始化相干属性) beforeCreate: vue实例刚刚初始化，生命周期，工夫，数据代理还未开始，所以无法访问到data中的数据，methods的办法。created: 初始化数据金策和数据代理，所以，能够拜访到数据中的data和methods的办法了。beforeMount: Vue开始解析模板，生成虚构DOM(内存中)，页面还不能显示解析好的内容，所以，页面出现的是没有通过Vue编译的DOM构造，所有的DOM操作，也都是不失效的。mounted: Vue将内存中的虚构DOM转化为实在DOM插入到页面，所以，页面上出现的就是通过Vue编译的DOM，这里对DOM的操作就是无效的了。更新(元素或组件的变更操作) beforeUpdate: 这个时候，数据是新的，页面还是旧的。就是说，数据和页面尚未放弃同步。updated: 数据和页面都是新的，曾经同步更新实现。销毁(销毁相干属性) beforeDestroydestroyed路由专用的生命周期 activated：被 keep-alive 缓存的组件激活时调用deactivated：被 keep-alive 缓存的组件停用时调用很少用的 ErrorCaptured：当捕捉一个来自子孙组件的谬误时被调用。此钩子会收到三个参数：谬误对象、产生谬误的组件实例以及一个蕴含谬误起源信息的字符串。此钩子能够返回 false 以阻止该谬误持续向上流传。

模板语法{{ msg }}指令VUE自带13种指令1. v-html2. v-text3. v-bind4. v-show5. v-if6. v-else7. v-else-if8. v-model9. v-for10. v-on11. v-pre12. v-cloak13. v-once自定义指令留神：自定义指令中的this指向都是window 一个指令定义对象能够提供如下几个钩子函数 (均为可选)： bind：只调用一次，指令第一次绑定到元素时调用。在这里能够进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保障父节点存在，但不肯定已被插入文档中)。update：所在组件的 VNode 更新时调用，然而可能产生在其子 VNode 更新之前。指令的值可能产生了扭转，也可能没有。然而你能够通过比拟更新前后的值来疏忽不必要的模板更新// 自定义获取焦点指令Vue.directive('focus',{ inserted: function(el){ // el代表绑定的元素 el.focus(); }})// 应用自定义的指令<input type="text" v-focus>// 自定义带参数的自定义指令Vue.directive('color',{ bind: function(el,bingding){ // bingding代表绑定的值 el.focus(); }})// 应用带参数的自定义的指令<input type="text" v-color="{color:yellow}">// 自定义部分指令，须要在VUE实例中增加一个directivesdirectives： { focus: { // 指令的定义 inserted: function (el) { el.focus() } }, color: { bind: function(el,bingding){ el.style.backgroundColor = binding.value.color; } }}文本1. v-text2. v-html3. {{}}属性 v-bind列子：v-bind:class简写：:class款式绑定对象模式设置 <div :class="{bgc: isActive}"></div>数组模式设置 ...

@TOC 一、介绍 Vant 是有赞前端团队开源的挪动端组件库，于 2017 年开源，已继续保护 4 年工夫。Vant 对内承载了有赞所有外围业务，对外服务十多万开发者，是业界支流的挪动端组件库之一。目前 Vant 官网提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队保护 React 版本。 地区层级抉择组件属于比较复杂的业务组件，应用vant地区抉择组件同时，能够对组件款式进行批改，以满足集体业务要求。 二、引入1、装置vant应用npm i vant即可装置vant最新版本： npm i vant装置结束之后能够抉择按需引入组件或者全局引入vant组件，这里咱们抉择按需引入。 2、引入引入插件 babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法主动转换为按需引入的形式。引入办法如下： npm i babel-plugin-import -D增加babel的配置 应用babel配置不会呈现组件款式无奈加载问题，否则则须要按需引入组件款式文件。// 在.babelrc 中增加配置// 留神：webpack 1 无需设置 libraryDirectory{ "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ]}// 对于应用 babel7 的用户，能够在 babel.config.js 中配置module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ]};导入组件 通常应用地区抉择组件，须要搭配底部弹出组件<font color="red">Popup</font>一起应用，引入两个vant组件： ...

powerful-componet感觉好用的话，兄弟们帮忙点个star。仓库地址是一个包装Vue对象的工具函数。反对Vue2 和Vue3 在Vue3下反对Typescript. 其实Vue2 也能够反对Typescript。然而没有必要。npm install --save powerful-component仅仅须要你遵循很少的标准，便能够使你的Vue组件失去加强。 取得以下性能. 页面是否加载实现的变量pageIsReady。默认为false，当mounted和created都执行实现时会，pageIsReady变为true 约定须要保障mounted和created是async/await格调写法。以保障pageIsReady变量能得悉异步申请执行实现了。 例子<script lang="ts">import powerfulDefineComponent from "powerful-component";export default powerfulDefineComponent({ methods: { //onClick执行实现之前，不会执行下一次 async onClick() { await new Promise((done) => setTimeout(done, 1000)); }, },});</script><template> // 这个按钮在onClick执行期间会取得loading款式 <button type="button" @click="onClick"></button></template>点击事件防抖，并减少loading款式以on结尾的办法都会被减少防抖性能，并能对被点击的按钮减少loading款式 约定办法名以on结尾async/await格调写法。这样powerful-componet才会晓得办法是不是执行实现了办法参数列表最初一个是点击事件的event，这样能力失去dom元素，增加款式。例子<script lang="ts">import powerfulDefineComponent from "powerful-component";export default powerfulDefineComponent({ async created() { await new Promise((done) => setTimeout(done, 1000)); }, async mounted() { await new Promise((done) => setTimeout(done, 2000)); },});</script><template> //created和mounted都执行实现后，pageIsReady为true <h1>页面加载实现：{{ pageIsReady }}</h1></template>序幕这个库的核心思想来源于这篇文章活用async/await，实现一些让Vue更好用的装璜器

先上效果图： 之前尽管实现了，然而点击这个标点，文本框显示时总是在标点右下方，拉动地图就跳到如上图所示的地位，太鬼畜了 实现代码： initPoint(res, map) {//第一个for循环是遍历标点 for (let i = 0; i < res.length; i++) { let list = '';//第二个for循环是遍历文本框内容的 for (let j = 0; j < res[i].cp_data.length; j++) { list += `<li class="pointBox-ftdata"> ${res[i].cp_data[j].name}<span class="pointBox-span">${res[i].cp_data[j].rtd}${res[i].cp_data[j].unit}</span> </li>` }//创立标点 let marker = new AMap.Marker({ position: [res[i].longitude, res[i].latitude],//这个是标点地位 topWhenClick: true,//这个是把文本框固定到标点头上的(没写的话，点击标点时，文本框会呈现在标点右下方) map: map//这个是初始化的地图 }) marker.setLabel({ content: `<div class='pointBox'> <li class="pointBox-etname">${res[i].enterprise_name}</li> <li class="pointBox-eqname"> ${res[i].equipment_name} <li> ${list} </div>`, offset: new AMap.Pixel(0, 0),//偏移地位的参数 direction: "top"//这个也是固定文本框地位的 })//上面这个是标点的点击事件，管制文本框显示或暗藏，办法比拟笨，有什么更好的办法请多多指教 marker.on('click', (e) => { if (e.target._y.style.display === "") { e.target._y.style.display = "none"; } else if (e.target._y.style.display === "none") { e.target._y.style.display = "block"; } else { e.target._y.style.display = "none"; } }); marker.emit('click', {target: marker}) } },

游戏地址： https://heyongsheng.github.io...开发语言：vue运行平台：Chromegitee地址：https://gitee.com/ihope_top/n...github地址：https://github.com/heyongshen...游戏已开源，欢送大家体验，也能够自行批改用作公司年会游戏等前言各位掘金的xdm，又是一年新春到，在这里提前给各位兄弟们拜年了，祝大家身体健康，万事如意。明天这篇文章呢，是为了掘金新春征文诞生的，这里特意给大家写了一个小游戏，所谓技术不够创意来凑，尽管游戏用到的技术都是很个别很简略的，然而也让我筹备了不少的工夫，小游戏全副由本人实现，网上拼凑的资源，美术、音效可能都不完满，大家将就将就哈，心愿大家可能喜爱，强烈建议大家在阅读文章之前先点击游戏链接https://heyongsheng.github.io... 前去体验两把。 那上面咱们就正式的来开始游戏开发的解说了。 小游戏内容较多，不重要的中央会一笔带过或者省略，如果有人对游戏中没有提到的技术感兴趣，能够在评论区提出，后续能够针对性的出文章解说，另外文中代码仅张贴要害局部代码，如需查看残缺代码，请移步gitee或者GitHub。游戏规则 玩家须要按住炮竹进行左右挪动来攻打年兽，屏幕两头会定时呈现问题，答复对问题会减少攻击力等，每道题的答复工夫为8秒钟，问题呈现的距离为5秒钟，年兽血量为0时游戏完结，击败年兽用时越少越牛逼。 菜单及全局配置 全局配置setting: { isPlay: false, showBulletChat: true}全局配置其实就俩，声音管制和弹幕管制，因为经测试，游戏在性能非常不好的机器会卡顿，所有给出了是否显示弹幕的管制，至于弹幕大小、色彩、密度这些因为工夫关系就没有写。至于声音管制，那必定是必须的，一是因为避免忽然播放音乐对用户造成影响，二是浏览器也有限度，禁止声音自动播放。 菜单布局方面就不说了，这里简略的说一下我菜单生成时的思路，因为给菜单增加鼠标滑过和点击的音效，所以用v-for循环数据的办法比拟好，要不然鼠标事件就要写好几遍。具体的代码如下 <div class="menu-box"> <div class="menu-item" v-for="(item, index) in menuList" :key="index" @mouseover="$store.commit('playAudio', hoverMusic)" @click="$store.commit('playAudio', clickMusic),item.clickHandle()" v-show="item.show()" > {{item.name}} </div></div>// 节选menuList: [ { name: '开始游戏', clickHandle: () => { this.gameBegin() }, show: () => true }, { name: '关上声音(强烈建议)', clickHandle: () => { this.$store.commit('tooglePlay', true) }, show: () => !this.$store.state.setting.isPlay }, { name: '敞开声音', clickHandle: () => { this.$store.commit('tooglePlay', false) }, show: () => this.$store.state.setting.isPlay } ],菜单的每一项次要有三个属性，名称、点击事件和管制显示，因为有些菜单项须要依据理论状况决定是否显示，比方关上声音和敞开声音，须要依据以后声音是否关上来判断谁显示谁暗藏，如果咱们定义数据的时候间接把管制声音的变量赋值给show，那么后续声音变动的时候，show是不会动静更新的，这里咱们咱们赋值给show一个函数，就能够达到冬天更新的目标了。 ...

axios设置申请头中的Authorization 和 cookie 信息： GET申请 axios.get(urlString, { headers: { 'Authorization': 'Bearer ' + token, "Cookie" : 'sessionId=' + sessionId + '; recId=' + recId, ... }, params: { param1: string, param2: string }, ... }).then(res => fn).catch(e => fn)POST申请 axios.post(urlString, { data: data, ... }, { headers: { 'Authorization': 'Bearer ' + token, "Cookie" : 'sessionId=' + sessionId + '; recId=' + recId, ... } }).then(res => fn).catch(e => fn)

设置先依照官网文档走一遍设置流程扫一般链接二维码关上小程序 阻塞点链接二维码的规定这里次要讲一下怎么设置链接二维码的规定 二维码跳转规定留神：从2017年5月开始，微信客户端反对二维码规定依据“子门路匹配”。如原有二维码链接为 http://www.qq.com/a/123456 ，其中12345为业务参数，则可配置规定 http://www.qq.com/a/ 实现扫码关上小程序。 微信客户端扫码将按以下匹配规定管制跳转： 二维码链接的协定、域名与已配置的二维码规定统一。二维码链接属于后盾配置的二维码规定的子门路。（如需反对子门路匹配，请确认后盾配置的二维码规定以/结尾）如果二维码规定蕴含参数，链接?后为参数局部，参数要求前缀匹配。 如果不带参数 指定某个页面，就间接把页面门路配置下来就行。比如说咱们要拜访的页面地址是http://www.qq.com/a，那就间接配置http://www.qq.com/a。如果说咱们想间接匹配http://www.qq.com下的所有页面（不带参数），则设置为http://www.qq.com/，参考规定-如需反对子门路匹配，请确认后盾配置的二维码规定以/结尾带参数理论我的项目中，咱们往往会在二维码的链接上带各种各样的参数，有时候还会是动静的，如果说咱们当初二维码上的链接是http://www.qq.com/mypath?a=1&b=2&other=else，并且这个参数是动静的，就是a/b/other的值会变动。那么依据前缀匹配规定，那就能够设置成http://www.qq.com/mypath?。这样不论实际上链接前面带什么参数都能够匹配上咱们在后盾设置的二维码规定了！这里顺便看下咱们我的项目中的理论利用 <template> <-- 所有webview都共用这个页面，扭转src的值就行 --> <web-view v-if="pageUrl" :src="pageUrl"></web-view></template><script>export default { data() { return { pageUrl: null, params: {} }; }, onLoad(query) { this.params = query }, onShow() { this.init(this.params) }, methods: { async init({ q }) { if(this.pageUrl) { // 刷新页面 this.pageUrl = '' await new Promise((resolve) => { setTimeout(() => { resolve() }, 100) }) } const token = uni.getStorageSync("USER_TOKEN"); // 用户token if(q) { const urlPath = decodeURIComponent(q) // 获取到二维码原始链接内容 const flag = /\?\w+=\w+/g.test(urlPath) ? "&" : "?"; this.pageUrl = `${urlPath}${flag}&token=${token}` console.log("urlPath=======", this.pageUrl); return } } }};</script>如何测试在后盾设置好了二维码规定之后，怎么测试呢？ ...

前言vue3-antd-admin是一个后盾前端解决方案，它基于vue3和antd-ui实现。它应用了最新的前端技术栈，集成了动静路由、鉴权登录、菜单治理等根底性能，在此之上对款式进行优化，解决了其余框架菜单超出不滚动、未BFC隔离等被疏忽的问题。它与同类型框架相比逻辑更加清晰简洁，没有冗余代码上手更加疾速。置信不论你的需要是什么，本我的项目都能帮忙到你。good luck！ 本我的项目以后只是根底局部实现了，还有很多中央须要欠缺，例如：H5适配、页面动画、指令权限、更多好用的组件等等等等，因为自己平时工作起因并不能疾速迭代更新，所以心愿更多的开发者退出进来 本框架已开源至github 传送门 预览 框架根底版秉承开箱即用的理念，无多余组件页面，代码分明不冗余 demo在线预览 账号：admin | 明码：123456 文档地址 装置应用1、下载前端我的项目 # 克隆我的项目git clone git@github.com:llyyayx/vue3-antd-admin.git# 进入我的项目目录cd vue3-antd-admin# 装置依赖npm install# 本地开发 启动我的项目npm run dev2、接口配置操作完第一步你的前端页面曾经能够失常拜访关上了，然而这里我的项目依赖 api 还是作者自己的线上地址，你须要提供如下必须的接口与设置代理到本人 api 地址上。 咱们前端本人入手饥寒交迫如果你临时不能失去后盾人员的反对，能够应用框架提供的接口，这样会更不便，你能够下载 vue3-vite-admin 示例提供的admin-nodeServe，他是线上示例理论应用的api，你只需下载实现后进入目录 npm install npm run strat 即可，默认端口号为http://127.0.0.1:8010，如果你有node根底你能够批改其中代码来实现你须要的数据和性能。所有必须接口配置在 @/api/login.ts 中，你能够批改必须接口的 url，然而尽量不要去批改接口 ts 类型标准！ a、登陆接口 method: posturl: /login接口标准 // 提交给后盾的数据格式export type LoginFrom = { username: string | undefined; password: string | undefined;};// 要求后盾返回的数据格式export type LoginSuccess = { code: number; message: string; data?: T; token: string;};b、获取用户信息接口 ...

在 Vue，除了外围性能默认内置的指令 ( v-model 和 v-show )，Vue 也容许注册自定义指令。它的作用价值在于当开发人员在某些场景下须要对一般 DOM 元素进行操作。 Vue 自定义指令有全局注册和部分注册两种形式。先来看看注册全局指令的形式，通过 Vue.directive( id, [definition] ) 形式注册全局指令。而后在入口文件中进行 Vue.use() 调用。 批量注册指令，新建 directives/index.js 文件 import copy from './copy'import longpress from './longpress'// 自定义指令const directives = { copy, longpress,}export default { install(Vue) { Object.keys(directives).forEach((key) => { Vue.directive(key, directives[key]) }) },}在 main.js 引入并调用 import Vue from 'vue'import Directives from './JS/directives'Vue.use(Directives)指令定义函数提供了几个钩子函数（可选）： bind: 只调用一次，指令第一次绑定到元素时调用，能够定义一个在绑定时执行一次的初始化动作。inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不用存在于 document 中）。update: 被绑定元素所在的模板更新时调用，而不管绑定值是否变动。前端培训通过比拟更新前后的绑定值。componentUpdated: 被绑定元素所在模板实现一次更新周期时调用。unbind: 只调用一次， 指令与元素解绑时调用。上面分享几个实用的 Vue 自定义指令 复制粘贴指令 v-copy长按指令 v-longpress输入框防抖指令 v-debounce禁止表情及特殊字符 v-emoji图片懒加载 v-LazyLoad权限校验指令 v-premission实现页面水印 v-waterMarker拖拽指令 v-draggable应用办法 ...

VUE props 实现原理（源码解析）前言咱们在应用组件的时候，都会给组件传入一些属性，然而在应用时，却只是关注了它传递数据的性能，没有想过它是怎么的一个原理，具体是怎么实现的。 其实咱们平时写进去的组件，实质上就是一个template模板，而这个template模板在vue中，会通过render函数解析，最终生成一个VNode。那咱们通过源码来看一下在生成VNode后，组件属性是怎么实现传递的。 源码解析生成虚构节点源码在生成虚构节点这，咱们能够看到这样一段代码，而这段代码中，propsData则是所有属性的一个定义，而这个对象的放在了虚构节点上，那咱们能够看看组件初始化时，这个propsData对象经验了怎么的操作。 const vnode = new VNode( `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`, data, undefined, undefined, undefined, context, { Ctor, propsData, listeners, tag, children }, asyncFactory )组件初始化源码在下段代码中，咱们能够看到propsData对象是被赋值到了以后实例上的$options的propsData属性中，那咱们能够看一下初始化props时，这个propsData对象又通过了怎么的一个过程。 const opts = vm.$options = Object.create(vm.constructor.options)、 const parentVnode = options._parentVnode opts._parentVnode = parentVnode const vnodeComponentOptions = parentVnode.componentOptions opts.propsData = vnodeComponentOptions.propsData初始化props源码在这里，从$options拿到$options对象后，申明了一个叫_props的空对象。 const propsData = vm.$options.propsData || {} const props = vm._props = {}上面通过vm.$parent判断一下是不是根元素，如果是根元素，属性则须要设置为响应式的，如果不是则不须要。 const isRoot = !vm.$parent if (!isRoot) {//如果是根元素 属性须要定义成响应式 toggleObserving(false) }循环用户定义了的propsOptions选项，它会依据用户定义的对象来和用户传入的值通过validateProp办法来进行一个校验，并且拿到最终的后果value。 ...

Vue.js源码全方位深刻解析 （含Vue3.0源码剖析）Socket 是什么以及创建过程一个数据包经由应用程序产生，进入到协定栈中进行各种报文头的包装，而后操作系统调用网卡驱动程序指挥硬件，把数据发送到对端主机。整个过程的大抵的图示如下。 download 咱们大家知道，协定栈其实是位于操作系统中的一些协定的重叠，这些协定包含 TCP、UDP、ARP、ICMP、IP等。通常某个协定的设计都是为理解决某些问题，比如 TCP 的设计就负责安全可靠的传输数据，UDP 设计就是报文小，传输效率高，ARP 的设计是能够通过 IP 地址查问物理（Mac）地址，ICMP 的设计目标是返回谬误报文给主机，IP 设计的目标是为了实现大范畴主机的互联互通。 应用程序比如阅读器、电子邮件、文件传输服务器等产生的数据，会通过传输层协定进行传输，而应用程序是不会和传输层间接建立联系的，而是有一个能够连接应用层和传输层之间的套件，这个套件就是 Socket。 在下面这幅图中，应用程序蕴含 Socket 和解析器，解析器的作用就是向 DNS 服务器发动查问，查问目标 IP 地址。 应用程序的上面就是操作系统外部，操作系统外部包含协定栈，协定栈是一系列协定的重叠。操作系统上面就是网卡驱动程序，网卡驱动程序负责管制网卡硬件，驱动程序驱动网卡硬件实现收发工作。 在操作系统外部有一块用于存放管制信息的存储空间，这块存储空间记录了用于管制通信的管制信息。其实这些管制信息就是 Socket 的实体，或者说存放管制信息的内存空间就是套接字的实体。 这里大家有可能不太明显所以然，所以我用了一下 netstat 命令来给大伙看一下套接字是啥玩意。 咱们在 Windows 的命令提示符中输出 netstat -ano netstat 用于浮现套接字内容 , -ano 是可选选项a 不只浮现正在通信的套接字，还浮现包含尚未开始通信等状态的所有套接字n 浮现 IP 地址和端口号o 浮现套接字的程序 PID我的计算机会出现上面后果。 图中的每一行都相当于一个套接字，每一列也被称为一个元组，所以一个套接字就是五元组（协定、本地地址、内部地址、状态、PID）。有的时候也被叫做四元组，四元组不包含协定。 比如图中的第一行，它的协定就是 TCP，本地地址和近程地址都是 0.0.0.0，这示意通信还没有开始，IP 地址临时还未必定，而本地端口已知是 135，然而近程端口还未知，此时的状态是 LISTENING，LISTENING 示意应用程序已经打开，正在等待与近程主机建立连接（对于各种状态之间的转换，大家可能浏览笔者的这篇文章 TCP ，丫的终于来了！！）最初一个元组是 PID，即过程标识符，PID 就像咱们的身份证号码，能够精确定位唯一的过程。 现在你可能对 Socket 有了一个基本的意识，现在喝口水，劳动一下，让咱们持续探究 Socket。 现在我有个问题，Socket 是如何创建的呢？Socket 是和应用程序一起创建的。应用程序中有一个 socket 组件，在应用程序启动时，会调用 socket 申请创建套接字，协定栈会根据应用程序的申请创建套接字：首先调配一个套接字所需的内存空间，这一步相当于是为管制信息筹备一个容器，但只有容器并没有实际作用，所以你还需要向容器中放入管制信息；如果你不申请创建套接字所需要的内存空间，你创建的管制信息也没有地方存放，所以分配内存空间，放入管制信息缺一不可。至此套接字的创建就已经实现了。 ...

基于 vue-cli4.0 + webpack 4 + vant ui + sass+ rem 适配计划+axios 封装，构建手机端模板脚手架GitHub：https://github.com/ohmylover/... 目录构造： 内容页： **如果感觉还不错，对你有所帮忙的话，就请我喝杯水吧~十块八块不嫌多，三块五块也是爱**

物料审批流程根本流程图 1.各部门非负责人进行填报 抉择1/2/3 类别，填写物料形容,品牌,供应商（非必填项）,工夫,是否为rohs,单位,包装等, 填报人 审批人依据用户名主动获取，物料编码在负责人编码后主动返回2.各部门负责人进行审批，无需填写任何信息， 仅须要审批和退回，如退回，请填写退回起因。3.编码制作负责人，无需填写任何信息， 仅须要点击编码后再点击确定。将返回给填报和审批人物料编码。同时将信息增加到物料编码库中注意事项: 填报人仅能查看本人填报的流程信息 审批人仅能查看本人部门填报的流程信息 审批通过/编码胜利 后任何人无奈批改须要填写的信息 如有任何问题或故障等及时反馈

浏览本文你将: 弄明确： v-model 是什么的语法糖？ vue2 对原生组件到底做了什么非凡解决？弄明确： v-model 到底是单向数据流还是数据双向绑定？弄明确： v-model 在语法糖之外的『副作用』？学会如何让你的组件也反对 v-model 语法。一、v-model 的实质是语法糖。『v-model 实质上不过是语法糖。它负责监听用户的输出事件以更新数据，并对一些极其场景进行一些非凡解决。』 -- 官网文档什么是语法糖？ 语法糖，简略来说就是『便捷写法』。在大部分状况下， v-model="foo" 等价于 :value="foo" 加上 @input="foo = $event"； <!-- 在大部分状况下，以下两种写法是等价的 --><el-input v-model="foo" /><el-input :value="foo" @input="foo = $event" />没错，在大部分状况下如此。 但也有例外： vue2 给组件提供了 model 属性，能够让用户自定义传值的prop名和更新值的事件名。这个暂且略过，第四节会细说。对于原生 html 原生元素，vue 干了大量『脏活儿』，目标是为了能让咱们漠视 html 在api上的差异性。以下元素的左右两种写法是等价的： textarea 元素： select 下拉框：input type='radio' 单选框：input type='checkbox' 多选框： 在编程思维上，这种帮忙使用者『暗藏细节』的形式叫封装。 二、v-model 仅仅是语法糖吗？(冷常识)v-model 不仅仅是语法糖，它还有副作用。副作用如下：如果 v-model 绑定的是响应式对象上某个不存在的属性，那么 vue 会悄悄地减少这个属性，并让它响应式。 举个例子，看上面的代码： // template中：<el-input v-model="user.tel"></el-input>// script中：export default { data() { return { user: { name: '公众号: 前端要摸鱼', } } }}响应式数据中没有定义 user.tel 属性，然而 template 里却用 v-model 绑定了 user.tel，猜一猜当你输出时会产生什么？ ...

最近有同学问我说，elementPlus做国际化配置，然而点击中英文切换按钮之后，对应组件的中英文没有做切换。原来他的代码是这么写的 import ElementPlus from 'element-plus'import zhCn from 'element-plus/es/locale/lang/zh-cn'app.use(ElementPlus, { locale: zhCn,})我寻思，这玩意必定不会动态变化啊。local都写成固定的了，切换语言怎么可能失效。查了查文档，实际上人家element-plus团队都提供了一个全局的用法，只须要在app.vue文件里加这么几行代码就行了。 <template> <el-config-provider :locale="locale"> <app /> </el-config-provider></template><script> import { defineComponent } from 'vue' import { ElConfigProvider } from 'element-plus' import zhCn from 'element-plus/lib/locale/lang/zh-cn' export default defineComponent({ components: { ElConfigProvider, }, setup() { return { locale: zhCn, } }, })</script>中文的话，就应用中文的locale，英文的话，把locale的值改成对应英文的就好了~点击切换按钮时进行响应赋值哈，这个个别都是联合i18n来应用，对应的切换语言操作就不赘述了。看文档还是要认真一些，都写得很明确了其实。

Vue3.0高阶实战：开发高质量音乐Web app这个 MySQL bug 让我大开眼界！ 这周收到一个 sentry 报警，如下 SQL 查问超时了。 select * from order_info where uid = 5837661 order by id asc limit 1复制代码执行show create table order_info 发现这个表其实是有加索引的 CREATE TABLE order_info (id bigint(20) unsigned NOT NULL AUTO_INCREMENT,uid int(11) unsigned,order_status tinyint(3) DEFAULT NULL, ... 省略其它字段和索引 PRIMARY KEY (id), KEY idx_uid_stat (uid,order_status),) ENGINE=InnoDB DEFAULT CHARSET=utf8复制代码实践上执行上述 SQL 会命中 idx_uid_stat 这个索引，但实际执行 explain 查看 explain select * from order_info where uid = 5837661 order by id asc limit 1复制代码可能看到它的 possible_keys（此 SQL 可能涉及到的索引） 是 idx_uid_stat，但实际上（key）用的却是全表扫描download ...

有一天，产品甩过去一个新的需要: 山月呀，你对数据库中的用户欠缺用户姓名、用户邮箱、用户手机号，其中手机号必填。 那前后端分工合作，如何实现这样的一个表单的需要呢？ 能够看看经典的前后端单干的工作流模式: 前端表单设计 -> 客户端校验数据(更人性化的提醒) -> API 申请 -> 服务端校验数据(更强健的逻辑) -> 数据库 咱们在整个工作流中以数据校验的角度来对待这个问题，以防止最终在数据库中呈现脏数据。咱们依据产品要求，总结出几点校验的要求。 姓名必须是字符串邮箱必须是邮箱格局手机号必须是手机号格局手机号必填，其它选填以下是一份用以交互的示例数据 { id: 10086, name: 'shanyue', mobilePhone: '18367891234', email: 'me@shanyue.tech'}复制代码客户端数据校验在客户端进行数据校验，有两方面因素的思考 更人性化的用户体验设计，当用户校验失误后，领有更好的提醒文案提前预警，节俭服务器资源应用一段 JSX 的伪代码进行数据校验 const mobilePhoneRegexp = /^(?:(?:+|00)86)?1[3-9]\d{9}$/ const form = <Form> <Form.Item name="mobilePhone"rules={[{ required: true, message: '您输出的手机号格局不正确'}]}pattern={mobilePhoneRegexp}<Input /></Form.Item></Form>复制代码大家都晓得，前端的数据校验属于防小人不防君子。 属于想绕过就能绕过的类型。 而真正的数据校验在服务器端！ 服务端数据校验后端因为重业务逻辑以及待处理各种数据，以致于分成各种各样的层级，其中有一层称为 Controller，站在后端最上层间接接管客户端经 HTTP 传输的数据。 因为 Controller 层是服务器端中与客户端数据交互的最顶层，秉承着 Fail Fast 的准则，肩负着数据过滤器的性能，对于不非法数据间接打回去，如同秦琼与尉迟恭门神般森严。 咱们看一段后端进行数据校验的一段伪代码 const mobilePhoneRegexp = /^(?:(?:+|00)86)?1[3-9]\d{9}$/const schema = Schema.object({ id: Schema.number().required(), name: Schema.number().required(), email: Schema.string().email({ ...

子组件调用父组件办法 <!--父组件--><!--留神命名时不要用驼峰命名，否则不失效--><search @search-data='searchData'></search>//子组件this.$emit('search-data',6666)父组件调用子组件办法1 通过ref<!--父组件--><!--在引入的子组件上标注 ref --><jPicker ref="jpicker" />//父组件//父组件间接调用ref命名加上子组件的办法 changenSelthis.$refs.jpicker.changenSel(-1);办法2 通过$emit、$on配合应用<!--父组件--><Button @click="handleClick">点击调用子组件办法</Button><jPicker ref="jpicker" />//父组件 handleClick() { this.$refs.child.$emit("childMethod") //子组件$on中的名字 },//子组件 mounted() { this.$nextTick(function() { this.$on('childMethod', ()=>{ console.log('我是子组件办法'); }); }); },

title: Vue学习笔记date: 2020-7-1tags: [vue2.0]categories: 前端技术 toc: true cover: https://gitee.com/hyj12704338... Vue 2.0前言Vue的官网文档可能是我见过的最好的开发文档了，所以如果是学习Vue倡议还是浏览官网文档吧。在这里仅仅是基于我本人的了解对于Vue2.0常识的整顿，便于梳理知识结构 1. 网站交互方式1.1 单页利用SPA多页面 点击跳转刷新，用户体验不好有利于SEO搜索引擎搜寻单页面利用(Single Page Application，简称SPA) 开发方式好，前后端拆散，开发效率高，可维护性好 服务端不关怀页面，只关怀数据处理客户端不关怀数据库操作，只通过接口和服务器交互数据用户体验好，就像原生客户端软件一样应用只须要加载渲染部分视图即可，不须要整页刷新单页利用开发技术简单，所以诞生了一堆开发框架 AngularJS google开发为前端带来了MVVM开发模式MVVM（Model-View-ViewModel）：数据驱动视图 ReactJS facebook提出组件化VueJS Vue借鉴了前两种，舍短取长单页面技术曾经很成熟，然而大部分不兼容低版本游览器单页利用因为数据都是异步加载过去的，不利于SEO( 当初有基于Vue的服务端渲染框架nuxt ）1.2 单页利用SPA实现原理前后端拆散+前端路由 后端Nodejs，应用Express监督对应申请 app=express()app.get("/",function(request,response){ //解决 //而后把后果增加到response中 response.json()})前端工作（以下例子应用原生 js 实现，然而在Vue框架中用vue-router插件更加简略) 前台申请数据，并渲染页面 <!--引入资源--><script src="模板引擎地位"> </script><script src="jquer地位"> </script><!--页面--><script is="tp1" type="text/template"> {{each student_front}} <li> {{value.name}}</li> {{/each}}</script><!--申请数据，并渲染到页面--><script> $.get("接口，如http://127.0.0.1:3000/student",function(data){ template("tp1,{ student_front:data }") }) <!-- $("#id名")能够获取dom元素--> </script>前端路由不同url装载不同页面 find-music,my-music,friend多个页面,在其页面向服务端取数据进行渲染，而后放入index的容器<div id="container">中显示 留神：下载jquery；sublime装置sublimeServer实现启动本地服务器（不装置就是间接关上本地文件，不反对跨域找下载的jquery.js文件） <!--index.html--><!DOCTYPE html><html><head> <title>音乐</title> <mata charset="utf-8"></head><body> <div class="top">头部</div> <div class="aside"> <ul> <!--a标签会跳转刷新，用锚点不会刷新,点击敌人，url扭转浏览器显示："网址#/friend"。用window.onhashchange，同一个a标签点击屡次，只有第一次触发--> <!--通过 #/friend 变动，渲染--> <li><a href="#/">发现音乐</a></li> <li><a href="#/my-music">我的音乐</a></li> <li><a href="#/friend">敌人</a></li> </ul> <div id="container"> <!--把 其余页面 渲染进来--> </div> <script> window.onhashchange=function(){ //location中的hash字段蕴含 锚点标识#/friend //substr(1)标识从string的1地位向后截取 var hash=window.location.hash.substr(1) if(hash==="/"){ $.get("./find-music.html",function(data){ $("#container").html(data) }) }else if(hash==="/my-music"){ $.get("./my-music.html",function(data){ console.log(data) $("#container").html(data) }) }else if(hash==="/friend"){ $.get("./friend.html",function(data){ $("#container").html(data) }) } } </script> </div> <!--装置jquery 命令 npm install jquery--> <script src="node_modules/jquery/dist/jquery.js"></script></body></html><!--find-music.html--><div>查找音乐</div><!--my-music--><div>我的音乐</div><!--friend--><div>敌人</div>以上的形式构建单页面利用太简单，所以呈现了Vue等框架2.初识Vue官网：https://cn.vuejs.org/ ...

2022年1月1日，位于上海虹桥火车站登程大厅三楼（1A楼上星巴克旁）的明道云虹桥演示核心（以下简称“明道云演示核心”）正式停业！作为全国第一家企业级软件线下门店，明道云演示核心将向公众推广零代码APaaS概念和利用成果，让越来越多企业及管理者拥抱零代码、减速企业数字化步调。 明道云品牌推广及零代码科普的线下摸索自电商业态成熟化和疫情呈现以来，各行业对线下门店都逐步不看好。生产电子化、销售线上化是时代的趋势。对于B端SaaS软件行业而言，线下门店甚至是妄谈，因为产品自身就是非实体的。 而明道云敢于做出国内首次尝试，开设门店向客人面对面演示产品。明道云CEO任向晖说道：“眼见为实是企业软件销售的关键时刻。”明道云演示核心正是发明了“眼见为实”的场域，让软件参谋向客人亲自展现产品的操作成果和可用水平。明道云店员正在为客人介绍明道云和零代码APaaS 除了演示产品以外，明道云演示核心还充当着“零代码科普馆”的角色。在12月31日门店试营业时，就有十余位路人前来询问：“什么是零代码？”纸上得来终觉浅，绝知此事要躬行——明道云演示核心的店员们除了将零代码概念娓娓道来以外，还邀请客人进店入座，亲自演示并让其体验明道云的操作界面。 明道云店员为客人演示利用操作界面 更多店内服务，不止于产品演示自2019年明道云开启搭档商业模式以来，至今明道云搭档已遍布全国21个省份，堪称“四面八方皆兄弟”。不少当地搭档路径上海，都因工夫缓和而无奈亲自到明道云公司转转。不过现在，明道云演示核心也是一间小小驿站，供当地搭档与明道云参谋相约见面，谈判商务，增进明道云与搭档之间的粘性与亲切感。另外，来自当地的明道云潜在客户和搭档也能够预约门店谈判，让产品与商务沟通都更有效率和质感。 明道云店员正在为客人介绍搭档打算 作为“开店小白”，明道云虹桥演示核心还在摸索学习中后退，欢送宽广明道云用户、搭档、极客们为咱们提议献策。最初，当前您若路过上海虹桥火车站，无妨到登程口1A楼上（星巴克旁）的明道云虹桥演示核心，咱们欢送各位客户与搭档们回家坐坐！

ModStart 基于原生 Laravel 开发，独创了不便易扩大的模块开发架构，通过配置式的开发过程，能够疾速实现零碎搭建。 零碎代码构造零碎代码构造参照 Laravel 的目录构造，对于局部不同的重要目录形成，以下做简略介绍。 ROOT├── app → 利用目录│ ├── Admin → 后盾治理源码目录│ ├── Api → API程序源码目录│ └── Web → 前台程序源码目录├── module → 模块源码，模块源码都会放在该目录下，每个模块一个文件夹│ ├── Xxx → 其余模块│ └── Vendor → 模块根底代码├── vendor → │ └── modstart → │ └── modstart → ModStart外围架构目录└── resources → 资源目录 └── views → 视图目录 └── default → 默认模板视图目录其中模块相干目录构造能够参考 模块目录构造。 利用和模块区别模块 模块蕴含在 module/ 目录中，每个模块领有独自的目录，并且蕴含独立的 Admin、Web、Api、OpenApi 等性能。 对于可复用的模块，咱们举荐创立独立的模块进行最大水平而复用，同时还能够公布到模块市场。 模块市场装置的模块也会呈现在 module/ 目录中。 利用 利用蕴含在 app/ 目录中，蕴含独立的 Admin、Web、Api、OpenApi 等性能。 ...

基于Vue3最新规范，实现后盾前端综合解决方案1.开发加解密 starter为了让咱们开发的这个工具更加通用，也为了温习一下自定义 Spring Boot Starter，这里咱们就将这个工具做成一个 stater，当前在 Spring Boot 我的项目中间接援用就能够。首先咱们创立一个 Spring Boot 我的项目，引入 spring-boot-starter-web 依赖：<dependency> <groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><scope>provided</scope><version>2.4.3</version></dependency>复制代码因为咱们这个工具是为 Web 我的项目开发的，当前必然应用在 Web 环境中，所以这里增加依赖时 scope 设置为 provided。依赖增加实现后，咱们先来定义一个加密工具类备用，加密这块有多种计划能够抉择，对称加密、非对称加密，其中对称加密又能够应用 AES、DES、3DES 等不同算法，这里咱们应用 Java 自带的 Cipher 来实现对称加密，应用 AES 算法：public class AESUtils { private static final String AES_ALGORITHM = "AES/ECB/PKCS5Padding";// 获取 cipherprivate static Cipher getCipher(byte[] key, int model) throws Exception { SecretKeySpec secretKeySpec = new SecretKeySpec(key, "AES"); Cipher cipher = Cipher.getInstance(AES_ALGORITHM); cipher.init(model, secretKeySpec); return cipher;}// AES加密public static String encrypt(byte[] data, byte[] key) throws Exception { Cipher cipher = getCipher(key, Cipher.ENCRYPT_MODE); return Base64.getEncoder().encodeToString(cipher.doFinal(data));}// AES解密public static byte[] decrypt(byte[] data, byte[] key) throws Exception { Cipher cipher = getCipher(key, Cipher.DECRYPT_MODE); return cipher.doFinal(Base64.getDecoder().decode(data));}}复制代码这个工具类比较简单，不须要多解释。须要阐明的是，加密后的数据可能不具备可读性，因而咱们个别须要对加密后的数据再应用 Base64 算法进行编码，获取可读字符串。换言之，下面的 AES 加密办法的返回值是一个 Base64 编码之后的字符串，AES 解密办法的参数也是一个 Base64 编码之后的字符串，先对该字符串进行解码，而后再解密。接下来咱们封装一个响应工具类备用，这个大家如果常常看松哥视频曾经很理解了：public class RespBean { ...

疾速解决方案：在main.js中找到这处代码正文即可Vue.use(Element, { size: Cookies.get('size') || 'medium', // set element-ui default size // locale: enLang // 如果应用中文，无需设置，请删除})

如何实现下图瀑布流性能？ 思考瀑布流的外围就是找每一列中最小的高度，给当前列增加数据。 图片中数据能够简化成如下格局 const list = [ {title: '名字1', content: ['a', 'b', 'c', 'd']}, {title: '名字2', content: ['a', 'b', 'c']} {title: '名字3', content: ['a', 'b']}]实现图中展现数据是四列，所以咱们须要初始化一个四列数组数据。同时还须要一个数组保留每列以后的高度，也初始化为0。 const classifyColumns = [[], [], [], []]const colHeight = [0, 0, 0, 0]一开始的误区是想主动获取渲染后的卡片高度，这时候数据都还没整顿，显然不合理。 察看图片中的款式能够看进去其实每项高度都是固定的，齐全能够计算出来。 list.forEach((item) => { // 获取每列最小高度 const minColHeight = Math.min(...colHeight) // 获取以后最小高度的列 const rowIndex = colHeight.indexOf(minColHeight) // 将数据push到以后最小列中 classifyColumns[rowIndex].push(item) // 更新当前列的高度 colHeight[rowIndex] = colHeight[rowIndex] + this.calcWaterfallHeight(item) })// calcWaterfallHeight 依据以后item计算以后卡片高度最初应用 classifyColumns 渲染数据即可。 ...

报错vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 140.82.114.4:443 解决点击查看github.com域名解析之后的ip地址https://github.com.ipaddress....，https://fastly.net.ipaddress.... 而后关上第二个网址github.global.ssl.fastly.net依据以后解析的ip地址批改本地的hosts文件，门路为C:\Windows\System32\drivers\etc\hosts，应用管理员身份关上，在前面累加方才查看的ip地址140.82.112.3 github.com199.232.69.194 github.global.ssl.fastly.net 最初从新创立。

应近期的我的项目需要，应用场景为，一个双屏自助机，用户须要手动输出手机号，故须要手动实现一个虚构键盘组件以下为自定义一个虚构数字键盘的实现成果，须要的小伙伴们能够自行下载源码并革新 附上demo我的项目的地址码云 技术较菜，还请各位多多指教！！！

唱吧 UI 组件库在 2021 年的最初一天开源了！这是一套基于 AdminLTE 的 Vue 组件库，目前已包含 30 个组件和功能模块。 装置npm install --save changba-ui疾速上手import Vue from 'vue'import ChangbaUI from 'changba-ui'import 'changba-ui/lib/theme/index.css'Vue.use(ChangbaUI)更多具体阐明请查看手册的 疾速上手 章节。 浏览器反对古代浏览器和 Internet Explorer 10+ 链接Github 代码库具体文档具体文档国内镜像开源协定本我的项目基于 MIT 协定，请自在地享受和参加开源。

1.装置至chrome网上支流的有2种装置形式，第一种是chrome插件装置（咱们采纳这种），第二种为源码装置（不举荐，很多博主文章已是几年前的 没有跟上源码的更新速度导致有的命令间接报错不失效 源码本生没有提供更多的教程 并且此办法装置步骤繁琐，容易出错） 插件装置能够通过1.Chrome插件商店搜寻装置2.vue.js devtools 官网提供的各个浏览器的装置形式地址为：https://devtools.vuejs.org/gu... 依照地址里的流程去操作设置chrome插件 在以上步骤实现后会发现找不到vue devtools 的图标，是因为没被显示进去解决办法，点击Chrome右上角插件图标，会显示出方才装置好的插件，设置显示即可（vue图标须要在vue我的项目的页面才会高亮，否则为置灰状态） 插件的应用形式跟浏览器终端的 console 一样，实质上 终端的这些都是些插件。在终端找到 vue 点击进入 即可抉择看到对应的vue组件 以及组件传值 用于排除一些因组件传值导致的问题

1、前言wangEditor 5 曾经公测有一段时间了，在公测群里常常有人问一些官网提供的 vue 组件相干的问题，因而我从应用这角度总结了一下以后 @wangeditor/editor-for-vue@next 存在的一些缺点： editorId 的设定让咱们能拿到编辑器的实例，尽管达到了最终成果，但应用起来并不是怎么高效，也不够傻瓜。并且须要在编辑器销毁后应用 editorId 来手动革除缓存，用户如果遗记了这一步就会造成内存透露。异步设置内容时须要额定的变量来管制编辑器的创立，减少了应用的复杂度，同样不够傻瓜defaultContent 必须是深度克隆的数据，且把这一操作交给了用户，减少应用复杂度不反对 v-model，把数据的同步推给了用户，减少应用复杂度vue 是一个反对双向绑定的框架，而咱们的组件库的一些非凡配置项并不是响应式的，如果用户能通过 editable.config.readOnly = false 就能够禁用编辑器，应用 editable.mode = 'simple' 即可切换编辑器模式，那么将为用户省略 n 多行代码，应用起来更傻瓜对事件的解决，明明能够间接应用 config.onChange = () => {} 却硬要独自提出来，这一点我不是很了解非凡场景：在一个页面内，左侧是文章列表，右侧是编辑器，点击列表中的文章，编辑器主动显示文章内容且不会有历史记录（之前 QQ 群中一用户的需要）。针对这种状况，用户只能一直的管制某个变量，给变量先赋值 false 再赋值 true 来销毁重建编辑器，如果能为用户提供一个 reloadEditor API 将使应用更简略针对下面的缺点，在 21/12/21 这天我开始尝试本人封装一个自认为好用的 vue3 组件。到 21/12/30 这天算是全面竣工。 该组件反对的性能有： 反对动静配置编辑器参数（编辑器创立后批改配置项任失效）反对 v-model 和 v-model:html 两种模式的双向绑定反对动态显示默认内容而不会存在旧文档的历史记录同时默认内容的配置项反对 json array、json string 和 html string 三种格局的数据人造反对 TypeScript因为个中原因，目前不公布 npm 包，如有须要能够 GitHub 自取（仅一个文件），如果感觉好用无妨给个 star。 2、自封组件的应用2.1、全局注册组件import { createApp } from 'vue'import wangeditor from 'xxx/wangeditor'// 全局注册 EditorToolbar, EditorEditable 两个组件createApp(App).use(wangeditor).mount('#app')2.2、疾速开始<style lang="scss"> .border { border: 1px solid #ddd; }</style><template> <editor-toolbar class="border" :option="toolbar" @reloadbefore="onToolbarReloadBefore" /> <editor-editable class="border" :option="editable" v-model="formData.json" v-model:html="formData.html" @reloadbefore="onEditableReloadBefore" /></template><script lang="ts"> import { Descendant } from 'slate' import { EditorEditable, EditorEditableOption, EditorToolbar, EditorToolbarOption, useWangEditor, } from 'xxx/wangeditor' import { defineComponent, shallowReactive } from 'vue' export default defineComponent({ components: { EditorToolbar, EditorEditable }, setup() { // 编辑器配置 const editableOption: EditorEditableOption = {} // 菜单栏配置 const toolbarOption: EditorToolbarOption = {} // 防抖时长。当会触发重载的配置项发生变化 365ms 后，编辑器会重载 const reloadDelary = 365 const { editable, toolbar, getEditable, getToolbar, clearContent, reloadEditor } = useWangEditor( editableOption, toolbarOption, reloadDelary ) // 开启只读模式 editable.config.readOnly = true // 不要应用 reactive/ref，应该应用 shallowReactive/shallowRef 来接管 json 数据 const formData = shallowReactive({ json: [] as Descendant[], html: '', }) function onEditableReloadBefore(inst: IDomEditor) { console.log('editable 行将重载: ' + new Date().toLocaleString()) } function onToolbarReloadBefore(inst: Toolbar) { console.log('toolbar 行将重载: ' + new Date().toLocaleString()) } return { editable, toolbar, formData, onEditableReloadBefore, onToolbarReloadBefore } }, })</script>2.3、Vue hook: useWangEditor通过 useWangEditor 解决后，返回的 editable 和 toolbar 别离对应编辑器和菜单栏的配置项，不过此时的配置项对象具备了响应式个性，咱们能够间接批改 editable/toolbar 对应属性来 更新 或 重载 编辑器。 ...

vue3响应式原理如有谬误，欢送指出~ 更多学习笔记申请戳：https://github.com/6fa/WebKno... 1.响应式外围如果上面的例子中，想让sum变为响应式变量： let num1 = 1;let num2 = 2;let sum = num1 + num2;num1 = 10console.log(sum) //sum仍旧是3，非响应式则要实现的局部有： 数据劫持：要晓得num1、num2何时发生变化依赖收集：晓得sum依赖哪些数据，例子中sum依赖了num1、num2，则要建设它们的依赖关系派发更新：当依赖的数据num1、num2产生扭转时，要告诉响应对象sum从新运算vue3通过Proxy拦挡数据的读取和设置（数据劫持），当数据读取时，通过track函数触发依赖的收集；当数据被设置时，通过trigger函数去派发更新。 那么vue3如何应用响应式呢？ vue3既能够通过data函数返回一个响应式对象，也能够通过ref、reactive来创立响应式变量。应用reactive等时，即在外部对数据用Proxy进行了包装。应用computed、watch、视图渲染函数等时，能够看作申明了一个依赖响应式数据的回调，这个回调会被传入effect（副作用函数），当依赖的数据扭转时，回调被从新调用，从而computed等失去更新。要实现简略版的响应式，其大抵构造为： //创立响应式变量，拦挡数据的get和setfunction reactive(obj){}//effect函数包裹那些 依赖响应式数据的函数cb//cb依赖的数据更新时，从新执行effectfunction effect(cb){}//依赖收集，建设响应式数据和effect的映射关系function track(target, property){}//触发更新，依据依赖关系，执行effect函数function trigger(target, property){}应用： let obj = reactive({ num1: 10, num2: 20})let sum = 0effect(()=>{ sum = obj.num1 + obj.num2})console.log(sum) //30obj.num1 = 100console.log(sum) //应该为1202.Proxy & Reflect的根本应用实现响应式变量的创立前，须要晓得Proxy和Reflect的根本应用。 JS很难对单个局部变量进行跟踪，然而能够跟踪对象的属性变动：vue3应用的ES6的Proxy和Reflect。 Proxy拦挡对象的读取、设置等操作，而后进行操作解决。然而不会间接操作源对象，而是通过对象的代理对象。 //Proxy用法//Proxy对象由target（指标对象）、handler（指定代理对象行为的对象）组成let target = {a:1,b:2}let handler = {//receiver指调用该行为的对象，通常是Proxy实例自身get(target, propKey, receiver){return target[propKey] //getter甚至能够不返回数据},set(target, propKey, value, receiver){target[propKey] = value}}let proxy = new Proxy(target, handler)console.log(proxy.a) //1proxy.a = 3console.log(proxy.a) //3Reflect能间接调用对象的外部办法，和Proxy一样有获取、设置等操作。 ...

.eslintrc.js文件配置module.exports = { root: true, env: { browser: true,es6: true,node: true}, extends: ["plugin:vue/essential", "@vue/prettier", "@vue/typescript"], parserOptions: { parser: "babel-eslint"}, rules: { "no-console": process.env.NODE_ENV === "production" ? "error" : "off","prettier/prettier": "on","no-irregular-whitespace": 0, //这禁止掉 空格报错查看"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",eqeqeq: 0, //三等号"no-unused-vars": ["error", { vars: "all", args: "after-used" }], // 不能有申明后未被应用的变量"no-trailing-spaces": "error", // 一行完结前面不要有空格"space-before-function-paren": ["warn", "never"], // 函数定义时括号后面要不要有空格"no-undef": "warn", // 不能有未定义的变量,定义之前必须有var或者let"arrow-parens": "warn", // 箭头函数的参数要有()包裹"spaced-comment": ["warn", "always"], // 正文前必须有空格"no-whitespace-before-property": "error", // 禁止属性前有空格，如obj. a"no-const-assign": "error", // 禁止批改const变量"no-tabs": "warn", // 禁止应用tab"no-unreachable": "warn", // 当有不能执行到的代码时"eol-last": "warn", // 文件开端强制换行"no-new": "error", // 禁止在应用new结构一个实例后不赋值"no-self-assign": "warn","no-constant-condition": "warn","no-useless-escape": "warn","no-redeclare": "warn"}}; ...

如下代码，我通过【type】字段管制一个表单组是否显示： <van-cell-group v-if='type=== "1"'> <van-field readonly clickable name="birthday" :value="birthday" maxlength="50" label="出生日期：" placeholder="请抉择" :rules="[{ required: true, message: '请抉择出生日期' }]" @click="showDatePicker = true" /> <van-popup v-model="showDatePicker" position="bottom"> <van-datetime-picker type="date" title="抉择年月日" :min-date="minDate" :max-date="maxDate" :formatter="formatter" @confirm="confirmDate" @cancel="showDatePicker = false" /> </van-popup></van-cell-group> <van-cell-group v-if='type=== "2"'> <van-field readonly clickable name="idcard" :value="idcard" label="身份证号：" placeholder="请填写" :rules="[{ required: true, message: '请填写身份证号' }]" /></van-cell-group>当type 为1时，显示抉择出生日期当我没有选出生日期，间接点击提交时，vant 谬误提醒就进去了（如下图格局），提醒我“请抉择出生日期” 到这一步都没有问题，于是 我将type 选为2，这个时候，我发现我输出身份证号的表单下，呈现了上一条谬误提醒“请抉择出生日期” 这个时候我就懵了这个errorMessage 没有被替换掉！ 而是被沿用了 用vue官网的解释： “，Vue 会应用一种最大限度缩小动静元素并且尽可能的尝试就地批改/复用雷同类型元素的算法。”也就是说，这两个表单的errorMessage 所用的div都是同一个 问题发现了，然而我不晓得起因，我通过display：none管制了，内容却没有变动......兴许是因为我另一个表单的errorMessage还没有设置，所以它并没有被就地批改？？？求解 不论怎么样，先来解决一下吧，这时候就用到了除了循环外 不怎么应用的vue的key属性 key 的非凡 attribute 次要用在 Vue 的虚构 DOM 算法，在新旧 nodes 比照时辨识 VNodes。如果不应用 key，Vue 会应用一种最大限度缩小动静元素并且尽可能的尝试就地批改/复用雷同类型元素的算法。而应用 key 时，它会基于 key 的变动重新排列元素程序，并且会移除 key 不存在的元素。在最外层form上加一个key属性，这个问题就解决了 ...

Element-uiiView表格的合并，api表格操作列按钮用v-for vue指令联合的形式去生成批量元素，气泡卡片，表格头合并， api表格操作列按钮用render 函数外部实现了模板生成，element 生态更好，应用频率远超过iview ,element开发团队实力更强整体iview 更丰盛（icon组件的丰盛，级联抉择好，时间轴，加载进度条，气泡卡片 ，BackTop,图钉）element 有内置过渡动画 使得组件的切换变动 更具动感iview 更为中规中矩