Vue.js

关于vue.js:Vue30-antdV-实现的后台管理项目

背景针对上一篇文章写的小程序我的项目，须要一个绝对应的后盾管理系统来对其中一部分资源进行治理，所以衍生了这个后盾管理系统我的项目。因为工夫紧迫，内容也不是特地多，于是决定应用市面上现成的 vue 后盾我的项目模板。用的比拟多的是 vue-element-admin，一方面想试试新一点的技术 vue3.0，另一方面是因为业务线其余我的项目都用的 react + antd，集体也比拟喜爱 antd ，所以想试试 antd 的 vue UI 框架，所以找到了这个模版：vue-admin-beautiful 我的项目搭建clone 下面说的我的项目模板（留神分支，应用的是 vue3.0-antdv）依照本人我的项目的需要，把不须要的内容删掉，按需减少本人须要的内容，如各个页面，公共资源，动态资源等确定并装置我的项目所须要的其余依赖插件等该我的项目次要波及的技术4.我的项目构造踩坑国际化Vue 3.0 不能间接像 2.0 那样间接应用 i18n,3.0 的 i18n 不是写在 main.js 里，而是应用一种 Provide 与 Inject 的形式。在网上找了一堆文章，大部分都还是 2.0 的用法，最初发现两篇帮忙很大的文章： [ Vue3.0 ] 应用 Vue 3.0 / Vue-cli 4 開發 i18n 國際化多國語言性能Create a i18n Plugin with Composition API in Vue.js 3参考文章，创立国际化插件文件 i18nPlugins.js，创立 i18n 文件夹，用于寄存我的项目所须要的各个语言的 js 文件，集体习惯把各个页面的多语言文案和页面文件放在一起，所以 src 下的 i18n 文件夹中的 lang 寄存的是一些全局可共用的资源，最终多语言相干目录构造如下红框所示：如何应用？首先要在 App.vue 文件中应用provideI18n函数正确的配置初始化插件。 ...

关于vue.js:vue全套教程实操

Vue (读音 /vju/，相似于 View) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为能够自底向上逐层利用。Vue 的外围库只关注视图层，不仅易于上手，还便于与第三方库或既有我的项目整合。另一方面，当与现代化的工具链以及各种反对类库联合应用时，Vue 也齐全可能为简单的单页利用提供驱动。一、MVVM模式和第一个Vue程序1.什么是 MVVM该层向上与视图层进行双向数据绑定向下与 Model 层通过接口申请进行数据交互在这里插入图片形容Vue的装置形式： 1.1 应用CDN办法(初学者应用) 也能够间接应用CDN的形式引入，代码如下： <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>1 1.2Vue-cli脚手架利用Vue-cli 脚手架构建Vue我的项目，在前面第七点具体解说。(中大型项目中举荐应用)。 2.第一个Vue程序 1、创立一个 HTML 文件 2、引入 Vue.js <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>1残缺示例： <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"><title>贝西说</title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script></head><body> <div id="app"> <input type="text" v-model="message"/> {{message}}</div> <script> var vue=new Vue({ el:"#app", /*model数据*/ data:{ message:"hello,vue" } });</script></body></html>12345678910111213141516171819202122232425演示成果：（视图驱动数据，数据驱动视图）在这里插入图片形容二、根底语法v-bind v-bind就是用于绑定数据和元素属性的残缺示例： <body> <div class="app"> <a v-bind:href="url">点我</a></div><script> var app = new Vue({ el:'.app', data:{ url:"https://www.baidu.com", } });</script></body>12345678910111213留神： v-bind前面是：属性名=，我的了解是示意绑定这个属性，绑定之后，对应的值要去vue的数据外面找。当咱们在控制台扭转url时，对应也会变动。雷同的，咱们还能够绑定图片src属性、超链接的class <body> <div class="app"> <a v-bind:href="url">点我</a> ![](imgsrc)</div><script> ...

关于vue.js:vuetable选框问题及案例

具体要实现的细节点击表头的复选项，会进行全选；再次点击，会勾销；每次须要把选中该行的id传过来切换分页的时候，须要有记忆性能：也就是翻页本来选中的不应该隐没。下方图片展现：（展现的是所有的选中的，切换分页的）第一步增加对应的复选框具体参照element官网示例 `<el-table :data="tableData" ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange" v-loading="listLoading" border @cell-dblclick="celldblclick">` * 1 `<el-table-column type="selection"></el-table-column> <el-table-column prop="id" label="编号"></el-table-column> <el-table-column prop="nameOne" label="名称1"></el-table-column> <el-table-column prop="nameTwo" label="名称2"></el-table-column></el-table>` * 1* 2* 3* 4* 5* 6* 7* 8* 9第二步传id过来的话这个是页面布局 `// 点击多选 handleSelectionChange(val) { this.multipleSelection = val; this.batchPassArr = [] //每次点击需清空本来数组的内容 this.multipleSelection.map(item => { //遍历数组，把id存进自定义的数组里 this.batchPassArr.push(item.id) }) this.batchPassArr = this.batchPassArr.join(',') },` * 1* 2* 3* 4* 5* 6* 7* 8* 9* 10* 11* 12* 13* 14* 15* 16* 17 ...

关于vue.js:vuevant按需导入

1.开发环境 vue+vant2.电脑系统 windows10专业版3.在应用vue+vant进行开发的时候,咱们可能不会应用到那么多的组件,很多的时候咱们都是按需导入,上面我来分享一下vue+vant按需导入的办法,心愿对你有所帮忙。4.废话不多说,间接上操作: //应用 npm 模式装置 vantnpm i vant -S5.办法一,手动按需导入,在main.js中增加如下代码: //办法一,手动按需导入:import { Switch,Button } from 'vant';import 'vant/lib/button/style';import 'vant/lib/switch/style';Vue.use(Button);Vue.use(Switch);6.办法二,主动按需导入: //办法二,主动按需导入://在终端执行如下命令(管理员身份):npm i babel-plugin-import -Dbabel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法主动转换为按需引入的形式。而后在 babel.config.js 中配置module.exports = { presets: [ '@vue/app' ], plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ]}在mian.js中增加如下代码:import { Switch,Button } from 'vant';Vue.use(Switch);Vue.use(Button);7.本期的分享到了这里就完结啦,是不是很nice,心愿对你有所帮忙,让咱们一起致力走向巅峰!

关于vue.js:从零开始用elementui躺坑vue-faviconico

ico的作用当咱们进入某些网站的时候，会发现浏览器最上方的标题栏的左侧有一个带logo的图标，这就是ico的作用。应用ico图标能够能够让读者更容易辨认您的网站，减少流量支出；其次，更容易产生业余的美感，还能肯定程序上加重服务器的流量带宽费用 favicon.icofavicon是Favorites Icon的缩写，翻译成中文就是网站头像或者是网站徽标。而ico是文件的后缀名。Favicon是与某个网站或网页相关联的图标。如咱们相熟的百度加载favicon1.生成ico文件通过在线网站生成ico。如比特虫, ico51 文件名：强烈推荐favicon.ico文件目录：强烈推荐放在我的项目的根目录2.批改webpack配置文件同步更新webpack.dev.conf.js 和 webpack.prod.conf.js文件。此处须要用到html-webpack-plugin插件. webpack.dev.conf.js: 开发环境配置 new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true, // 配置favicon favicon: path.resolve('favicon.ico')}),webpack.prod.conf.js: 生产环境配置 new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, // 配置favicon favicon: path.resolve('favicon.ico') ...}),留神：从新加载后失效3.重启后，就会发现浏览器最上方的标题栏的左侧有一个带logo的图标了。参考资料html-webpack-pluginwebpack

关于vue.js:Vue与React的优势

Vue的劣势是：模板或渲染的灵便选项语法以及我的项目设置的简略渲染速度更快，体积更小React的劣势是：更大的规模、更多的使用者、更好的可测试性Web和原生APP能提供更多反对和工具的更大的生态系统~~~~

关于vue.js:vueelementui通用弹窗新增编辑

组件模板<el-dialog :title="title" :visible.sync="dialogShow" :close-on-click-modal="false"> <div class="ym-common-dialog" :class="customClass"> <div v-for="(col,index) in cols"> <span><em v-if="!!col.isRequire">*</em>{{col.name}}</span> <template v-if="col.type === 'text'"> <div>{{submitData[col.key]}}</div> </template> <template v-if="col.type === 'input'"> <input type="text" v-model="submitData[col.key]" :placeholder="'请输出' + col.name"> </template> <template v-if="col.type === 'radio'"> <div class="flexX"> <el-radio v-for="radio in col.data" v-model="submitData[col.key]" :label="radio.label">{{radio.name}}</el-radio> </div> </template> <template v-if="col.type === 'select'"> <el-select v-model="submitData[col.key]" placeholder="请抉择"> <el-option v-for="option in col.data" :key="option.value" :label="option.label" :value="option.value"> </el-option> </el-select> </template> </div> </div> <span slot="footer" class="dialog-footer"> <el-button @click="dialogShow = false">取消</el-button> <el-button type="primary" @click="confirm">确定</el-button> </span></el-dialog>弹窗的内容依据传入的数据去渲染，数据格式如下 ...

关于vue.js:vue如何使用Echarts图表

在vue-cli我的项目中增加webpack配置，本文引入的最新版本。在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方保护的，从 3.1.1 开始由官网 EFE 保护 npm 上 ECharts 和 zrender 的 package。应用npm增加package.json文件中的配置并下载相干npm包依赖npm install echarts --save而后在我的项目文件的入口js文件main.js中增加 import echarts from "echarts"在须要增加图标的组件中创立依赖的实例 var echarts = require('echarts');应用这种形式失去的是曾经加载了所有图表和组件的 ECharts 包，因而体积会比拟大。也能够只按需引入须要的模块。例如 // 引入 ECharts 主模块var echarts = require('echarts/lib/echarts');// 引入柱状图require('echarts/lib/chart/bar');// 引入提示框和题目组件require('echarts/lib/component/tooltip');require('echarts/lib/component/title');各种资源的列表详情请查阅官网的github仓库 https://github.com/ecomfe/echarts/blob/master/index.js 在模板中创立所需的dom  <div id="charts" style="width:'100%',height:'3.54rem'"> <div id="main" :style="{width:'100%',height:'3.54rem'}"></div> </div>写入js： export default { name: 'Bank', data () { return { } }, components: { }, computed: { }, methods: { }, mounted() { /*ECharts图表*/ var myChart = echarts.init(document.getElementById('main')); 下方代码避免越界，重汇canvas处，即为能够解决掉屏幕放大，图表不会随之适应的放大的办法，原理为当浏览器产生resize事件的时候，让其触发echart的resize事件，重绘canvas //避免越界，重绘canvas window.onresize = myChart.resize; myChart.setOption({ series : [ { name: '拜访起源', type: 'pie', radius: '55%', itemStyle: { normal: { // 暗影的大小 shadowBlur: 200, // 暗影程度方向上的偏移 shadowOffsetX: 0, // 暗影垂直方向上的偏移 shadowOffsetY: 0, // 暗影色彩 shadowColor: 'rgba(0, 0, 0, 0.5)' } }, data:[ {value:400, name:'搜索引擎'}, {value:335, name:'间接拜访'}, {value:310, name:'邮件营销'}, {value:274, name:'联盟广告'}, {value:235, name:'视频广告'} ] } ] }) }}eCharts中的事件：ECharts 反对惯例的鼠标事件类型，包含 ...

关于vue.js:Vue中强制组件重新渲染的正确方法

有时候,依赖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.本期的分享到了这里就完结啦,是不是有播种了一些,心愿对你有所帮忙,让咱们一起致力走向巅峰!

关于vue.js:vue项目部署到tomcat时需要修改的配置内容

路由切换404的问题解决方案：在config/index.js文件中把assetsPublicPath:'/'改为assetsPublicPath:'./' 2 动态文件拜访404的问题解决方案：在build/utils.js文件中增加publicPath: '../../'

关于vue.js:项目中复制功能

1.开发环境 vue2.电脑系统 windows10专业版3.在开发的过程中,咱们可能会遇到复制的性能,上面我来分享一下我遇到的问题和解决办法,心愿对你有帮忙。4.对于复制性能,我是通过clipboard.js进行解决的: http://www.clipboardjs.cn///第一步:进行装置 ,npm 命令为:npm install clipboard --save5.我来分享一下简略的应用: 一个很常见的用例是从另外以一个元素复制内容。你能够给指标元素增加一个 data-clipboard-target属性来实现这个性能。这个属性的值就是能匹配到另一个元素的选择器,上面是简略的应用代码:<input id="foo" value="欢送来灰太狼的情与殇主页"><button class="btn" data-clipboard-target="#foo" data-clipboard-action="copy" @click="chencopy">复制</button>//在methods中增加如下代码:chencopy() { let clipboard = new this.clipboard(".btn"); clipboard.on("success", function (e) { console.info("复制胜利"); console.info(e); }); clipboard.on("error", function () { console.error("复制失败"); });},成果如下:6.本期的分享到了这里就完结啦,是不是很nice,心愿对你有所帮忙,让咱们一起致力走向巅峰!

关于vue.js:vue子组件向父组件传值

1.开发环境 vuecli32.电脑系统 windows10专业版3.在应用 vue开发的过后中,咱们常常会遇到组件传值的问题,上面我来分享一下vue中子组件向父组件传值的办法,心愿对你有所帮忙。4.废话不多说,间接上代码: //父组件代码:<template> <div> <p>我是父组件</p> <Chenperson1 :method="parentMethod"></Chenperson1> </div></template><script>import Chenperson1 from "@/components/Chenperson1.vue";export default { name: "ChenPerson", components: { Chenperson1, }, data() { return {}; }, mounted() {}, methods: { parentMethod(valueFromChild) { console.log('From the child:', valueFromChild); }, },};</script><style></style>//子组件代码:<template> <div> <p>我是子组件一</p> </div></template><script>export default { name: "Chenperson1", props: { method: { type: Function }, }, data() { return { chenvalue:"I am the child", }; }, mounted() { this.method(this.chenvalue); }, methods: { ggg(){ } },};</script><style></style>成果如下: ...

关于vue.js:Vue前端HTML保存为PDF的两种常用方式-干货分享

Vue前端HTML保留为PDF罕用形式有两种。应用html2Canvas和JsPDF库，转化为图片后保留PDF。调用浏览器window.print()，而后手动保留为PDF。第一种长处没有预览点击即可保留不须要手动配置保留可选取局部Dom保留毛病较不清晰须要先转化为图片没有提前预览不适宜保留过长分页内容依赖html2Canvas和JsPDF库第二种长处能够提前预览适宜保留过长分页内容比拟适合间接由浏览器API保留，内容清晰开发便当疾速。毛病第一次须要在预览框手动配置参数须要手动点击保留会有Print预览弹窗不可选取局部Dome，只能保留以后整页面。第一种:应用html2Canvas和JsPDF库，转化为图片后保留PDF。装置html2canvas库 npm install html2canvas装置jspdf库 npm install jspdf编写保留函数文件地位：src/utils/htmlToPdf.js/** path: src/utils/htmlToPdf.js name: 导出页面为PDF格局**/import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'const htmlToPdf = { getPdf(title) { html2Canvas(document.querySelector('#pdfDom'), { allowTaint: true, }).then(canvas=>{ //内容的宽度 let contentWidth = canvas.width; //内容高度 let contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度,a4纸的尺寸[595.28,841.89]; let pageHeight = contentWidth / 592.28 * 841.89; //未生成pdf的html页面高度 let leftHeight = contentHeight; //页面偏移 let position = 0; //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 let imgWidth = 595.28; let imgHeight = 592.28 / contentWidth * contentHeight; //canvas转图片数据 let pageData = canvas.toDataURL('image/jpeg', 1.0); //新建JsPDF对象 let PDF = new JsPDF('', 'pt', 'a4'); //判断是否分页 if (leftHeight < pageHeight) { PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { while (leftHeight > 0) { PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight); leftHeight -= pageHeight; position -= 841.89; if (leftHeight > 0) { PDF.addPage() } } } //保留文件 PDF.save(title + '.pdf') }) }};export default htmlToPdf;复制代码 ...

关于vue.js:在-vue3-中轻松实现-switch-功能组件-简单易懂

编程语言外面，除了应用 if 语句来做条件判断，还有另外一个罕用的就是 switch 了。而在 vue 中，官网曾经帮忙咱们实现了 v-if 这个指令，然而还没有 switch ，那咱们能不能自己实现一个呢？这篇文章就是来摸索这个问题，并且最终实现一个 Switch 组件以终为始先来看看咱们心愿用户是如何应用 Switch 的用 js 的形式来比照一下：用户能够通过一个 VSwitch 组件来利用 switch 性能通过 case 来确定匹配的条件而后每一个 case 匹配的条件用 template 来示意这样咱们曾经规定好用户该如何应用了，剩下的其实就是实现了这一步背地的思维就是确定组件的规格，也能够说是确定组件的应用接口how那么咱们应该如何实现呢？咱们先来思考一下 switch 的性能拆分 Switch 性能某个等于 case 值的那个模板显示，别的都不应该显示举个栗子： case = "xiaohong" 时那么就只能显示名字为 "xiaohong" 的插槽如果没有匹配到任何一个 case ，并且还有 defalut 插槽时，显示 defalut 插槽当然，switch 还有更简单的性能，咱们这里先从最外围的性能动手，缓缓在复杂化（迭代思维）实现原理首先咱们必须先晓得该组件的 slots，都有哪些在 vue3 中，咱们只须要通过以下形式就能够轻松获取 slots ...

关于vue.js:从零开始用elementui躺坑vue-npm

npm: node package manager, 翻译成中文就是node包管理工具。随着Node.js的火爆，应用npm共享js代码曾经成为每个前端开发者的必备工具。但就现状而言：一部分开发者还只是停留在npm install层面。更有甚者，一言不合就开删, rm -f node_modules。明天就让小编带你去理解npm的基本原理和实际。 1. npm init初始化package.json文件，生成name，version，script等字段。具体阐明举荐npm的package.json中文文档 2. npm install依赖治理是npm的核心内容。原理是执行npm install从package.json中装置依赖。 npm install \<package\>后，咱们能够在node_modules中查看装置的依赖包。尽管开发者只需关注业务中的援用依赖即可。这是开发者最罕用的指令，clone我的项目或者新建必须的第一个指令。 3. npm --save-dev与npm --save--save || -S：运行依赖（公布）,将包信息增加到dependencies，是须要公布到生产环境的。 --save-dev || -D:开发依赖（辅助），将包信息增加到devDependencies，只用于开发环境装置依赖时如何判断？官网说法是：--save-dev咱们只在开发时才用失去它，生产部署后则不执行。--save：咱们在开发实现后，必定还要依赖他们，否则就用不了。简略的说：就是如果没有该依赖则程序就跑不起来，则必须应用--save。如vue-router. 如果该依赖只是为了编译、构建、生成文档则应用--save-dev 4. package-lock.jsonpackage-lock.json文件的作用是锁定装置时的包的版本号。 4.1 ^: 主版本号管制^是npm默认的版本符号，举个例子 "requires": { "graceful-fs": "^4.1.2", "inherits": "~2.0.0", "mkdirp": ">=0.5 0", "rimraf": "2"}这个符号定义了向后（新）兼容依赖，通知npm能够装置8.0.33或者一个大于它的版本，然而次要版本为4.x.x的版本 4.2 ~：次版本号管制~是次版本号管制，举个例子 "requires": { "graceful-fs": "^4.1.2", "inherits": "~2.0.0", "mkdirp": ">=0.5 0", "rimraf": "2"}与^的区别是，～版本只能规定次版本号2.0.x，仅仅是作用域不同而已 4.3 >: beta版本指定了能够装置的beta版本。能够了解为大于或等于。如： 0.5.1因而，当咱们应用npm install会依据package-lock.json文件进行装置，保障不同环境、不同工夫下当依赖是一样的。而不是依据package.json文件。因为pacakge-lock.json给每个依赖都表明了版本、获取地址、哈希值，所以，每次装置都是同一个雷同的后果。不论你在什么机器下面或者什么时候装置。 ...

关于vue.js:vue中使用wasm

刚学前端的货色弄了很久才放进去，记录一下，刚开始应用插件间接加载wasm发现多个参数没方法传，还是应用原始产生的js文件来加载。怎么编译c/c++代码可见 wasm总结把wasm放到vue里，要批改：在vue.config.js中增加配置const CopyWebpackPlugin = require('copy-webpack-plugin');plugins: [ new CopyWebpackPlugin([ { from: "./src/wasm/out/sig_handler.wasm", to : "./static/js/sig_handler.wasm" }, ]) ]意思大略是把wasm文件放到打包后的static/js/地位，这样编译wasm过程中生成的胶水js文件就能拜访到wasm文件了而后在生成的胶水js文件开端加上export default Module;这样就能在main.js中导入了const OriginalVueWasm = import('@/wasm/out/sig_handler')导入之后应用 async function waitwasm() { const wasmmodule = await OriginalVueWasm; wasmmodule.default.onRuntimeInitialized = () => { Vue.prototype.$wasm = wasmmodule.default; //new Vue ... }}(async () => { waitwasm()})()这样在vue里就能通过this.$wasm来拜访了

关于vue.js:Vue-3-组件开发搭建基于SpreadJS的表格编辑系统环境搭建

Vue是一套用于构建用户界面的渐进式框架，与其它大型 JS 框架不同，Vue 被设计为能够自底向上逐层利用，更易上手，还便于与第三方库或既有我的项目整合，因而，Vue齐全可能为简单的单页利用提供驱动。 2020年09月18日，Vue.js 3.0 正式公布，作者尤雨溪将其形容为：更快、更小、更易于保护。 Vue 3都退出了哪些新性能？本次公布， Vue框架自身迎来了多项更新，如Vue 此前的反馈零碎是应用 Object.defineProperty 的 getter 和 setter。然而，在 Vue 3中，将应用 ES2015 Proxy 作为其观察者机制，这样做的益处是打消了以前存在的正告，使速度加倍，并节俭了一半的内存开销。除了基于 Proxy 的观察者机制，Vue 3的其余新个性还包含： 1. Performance（性能晋升）在Vue 2中，当某个DOM须要更新时，须要遍历整个虚构DOM树能力判断更新点。而在Vue 3中，无需此项操作，仅需通过动态标记，比照虚构节点上带有patch flag的节点，即可定位更新地位。比照Vue 2和Vue 3的性能差别，官网文档中给出了具体数据阐明： · SSR速度进步了2~3倍 · Update性能进步1.3~2倍 2. Composition API（组合API） Vue 2中有data、methods、mounted等存储数据和办法的对象，咱们对此应该不生疏了。比如说要实现一个轮播图的性能，首先须要在data里定义与此性能相干的数据，在methods里定义该性能的办法，在mounted里定义进入页面主动开启轮播的代码…… 有一个不言而喻的问题，就是同一个性能的代码却要扩散在页面的不同中央，保护起来会相当麻烦。为了解决上述问题，Vue 3推出了具备清晰的代码构造，并可打消反复逻辑的 Composition API，以及两个全新的函数setup和ref。 Setup 函数可将属性和办法返回到模板，在组件初始化的时候执行，其成果相似于Vue 2中的beforeCreate 和 created。如果想应用setup里的数据，须要将值return进去，没有从setup函数返回的内容在模板中不可用。 Ref函数的作用是创立一个援用值，次要是对String、Number、Boolean的数据响应做援用。绝对于Vue 2，Vue 3的生命周期函数也产生了变更，如下所示： · beforeCreate -> 请应用 setup() · created -> 请应用 setup() ...

关于vue.js:elementui-表格设置显示列

先写一个设置显示列的组件 Vue.component('ym-set-cols',{ template: ` <el-popover placement="bottom" width="200" trigger="click"> <div class="cols-flex"> <div v-for="item in tableCols"> <el-checkbox v-model="item.isCheck" :label="item.name" @change="checkChange"></el-checkbox> </div> </div> <div class="set-cols" slot="reference">设置显示列</div> </el-popover> `, data() { return { tableCols: [] } }, model: { // 自定义组件双向绑定 prop: 'cols', event: 'complete' }, props: { cols: Array }, mounted() { this.tableCols = this.cols.map(item=>item) }, methods: { checkChange(item) { // 过滤勾销选中的列 let temp = this.tableCols.filter(item=>item.isCheck) this.$emit('complete',temp) } } })父组件：1.申明一个表格列的对象 let tableCols = [{ name: '头像', width: '66', align: 'center', key: 'FHEADIMGURL', isCheck: true }, { name: '标签组', minWidth: '200', align: 'center', key: 'TAG_LIST', isCheck: true }]2.加载组件ym-set-cols ...

关于vue.js:vue自定义组件vmodel

自定义组件ym-set-cols Vue.component('ym-set-cols',{ template: ` <div v-for="item in tableCols"> <el-checkbox v-model="item.isCheck" :label="item.name" @change="checkChange"></el-checkbox> </div>`, data() { return { tableCols: [] } }, model: { // 外围 prop: 'cols', // 接管父组件传值属性 event: 'complete' // 自定义一个事件，用于触发向父组件传值 }, props: { cols: Array }, mounted() { // 讲props进行本地存储 this.tableCols = this.cols.map(item=>item) }, methods: { checkChange(item) { // 扭转值，传给父组件 let temp = this.tableCols.filter(item=>item.isCheck) this.$emit('complete',temp) } }})父组件调用 <ym-set-cols v-model="tableCols"></ym-set-cols>v-model语法糖就相当于:cols="tableCols" @complete="changeCols"

关于vue.js:vuedevtools-安装错误解决办法

最近装置应用vue的devtools工具打包构建即：npm run build 报错: npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! vue-devtools@5.3.3 build: `cd packages/shell-chrome && webpack --progress --hide-modules`npm ERR! Exit status 1npm ERR! npm ERR! Failed at the vue-devtools@5.3.3 build script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm WARN Local package.json exists, but node_modules missing, did you mean to install?``` 此起因是因为咱们git clone时默认分支为最新的develop分支。develop是测试分支，不是正式分支，git时更换分支即可。自己亲测v5.1.1分支是可用的，预计再向前的分支也是可用，当然master分支更是可用。正确获取办法（应用分支:v5.1.1）1、克隆 git clone -b v5.1.1 https://github.com/vuejs/vue-devtools.git2、批改mainifest.json 中的persistant为true ...

关于vue.js:7-天开发后台系统技术小结

在确定了后盾零碎的具体布局和整体性能当前，破费工夫更多的其实是对技术细节的打磨。本主题借鉴我开发集体网站魚立说的教训，整顿了在开发后盾零碎过程可能会遇到的各种技术要点。波及到的代码曾经整顿到 https://github.com/yulis-say/... 中的 end-skills 目录，若感觉有用，请分享并 star 。 1 后盾开发小结上面对后盾零碎的开发技术要点顺次进行概括，包含必要的阐明和资源疏导。 1.1 后盾零碎模板搭建后盾零碎，为了省时省力，能够选用一些风行的后盾零碎模板。对于这部分，能够浏览本站整顿的《风行的后盾管理系统模板》一文。思考到技术的流行性和后盾性能的欠缺，本站应用了基于 Vue.js 和 Element-UI 实现的 vue-admin-template 作为参考，进行了后盾零碎的搭建和二次开发。参考 vue-element-admin 后盾零碎模板，最终的后盾零碎成果将如图所示： 1.2 vue-admin-template 应用技巧配置代理申请，解决跨域问题。做如下批改：批改 .env.development 文件，VUE_APP_BASE_API 示意某个前缀：VUE_APP_BASE_API = '/api' 批改 vue.config.js 文件，当遇到以 VUE_APP_BASE_API 结尾的申请时，就会把 target 字段加上：devServer: { ……proxy: { [process.env.VUE_APP_BASE_API]: { target: 'http://api.com',// 你本人的域名 secure: false,// 配置 https 接口 changeOrigin: true,// 是否跨域 pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '/api'// 替换配置中的前缀 } } } }修复 Markdown 排版款式。应用 tui.editor 作为新编辑器，请参考 https://github.com/PanJiaChen... 修复此 bug。具体批改： ...

关于vue.js:springboot在controller层注入service时报NullPointerException空指针异常

springboot controller层autowire service层时为null空指针异样的谬误这个谬误是因为本人的大意导致的，在编写controller时将申请action办法定义为了private，这样会导致spring注入失败，太不仔细了，必须要改！

关于vue.js:解决Echartseltabpane的警告Cant-get-DOM-width-or-height

1 问题形容环境： Chrome 87Element-PlusVue3.0.5<el-tab>+<el-tab-pane>中应用Echarts正告如下： 2 代码<el-tabs type="border-card"> <el-tab-pane label="xxx"> <div id="main" style="width: 500px;height: 500px;"> </div> </el-tab-pane></el-tabs>export default { mounted() { var category = echarts.init(document.getElementById('main')) //... }}3 起因剖析起因是<el-tab-pane>，具体能够查看这里的issue： Echarts正告的要害是clientWidth和clienHeight，间接在代码中固定高宽时： <div id="main" style="width: 500px;height: 500px;"></div>控制台打印为clientHeight/clientWidth： console.log(document.getElementById('main').clientWidth)console.log(document.getElementById('main').clientHeight)两者均为0，起因在于<el-tab-pane>，将图表放到里面时并没有正告： <el-tabs type="border-card"> <div id="main" style="width: 500px;height: 500px;"> </div> <el-tab-pane label="xxx"> </el-tab-pane></el-tabs>初始化Echarts时，<el-tab-pane>并没有让Echarts获取正确的clientHeight以及clientWidth，尝试过的解决办法是监听tab-click： <el-tabs type="border-card" @tab-click="xxx"> <el-tab-pane label="xxx"> <div id="main" style="width: 500px;height: 500px;"> </div> </el-tab-pane></el-tabs>然而这须要手动点击tab能力监听到，也就是如果设置了默认tab这是无奈监听到的。另一个尝试过的计划是手动设置width/height： <el-tabs type="border-card"> <el-tab-pane label="xxx"> <div id="main" ref="main" style="width: 500px;height: 500px;"> </div> </el-tab-pane></el-tabs>mounted(){ this.$refs.main.style.width=500 this.$refs.main.style.height=500 var chart = echarts.init(document.getElementById('main'))}也是不行。 4 解决方案应用Object.defineProperty设置clientWidth/clientHeight： mounted(){ Object.defineProperty(document.getElementById('main'),'clientWidth',{get:function(){return 500;}}) Object.defineProperty(document.getElementById('main'),'clientHeight',{get:function(){return 500;}}) var chart = echarts.init(document.getElementById('main'))}同时也能够把div上的style去掉： ...

关于vue.js:项目开发中到底能不能使用vite干货分享

前言就在2020的最初一天,我把公司的一个小我的项目降级到了vue3,我的项目很简略,外围性能就是一个H5拼图(公司外部我的项目,不便给出链接) 原来的我的项目架构:vue2 + vue-cli2 + vant 降级后的我的项目架构: vue3 + vite1.0 + vant 一天工夫重构上线,在元旦节中应用一切正常 ???? 上面咱们不卑不亢,来探讨下vue3及vite1.0 vite降级到了2.0元旦节的时候,尤雨溪送给了咱们一个跨年礼物,公布了vite的2.0版本是不是很震惊!1.0的还没用呢,2.0的就进去了? 不要慌,在我看来2.0最次要的更新点就是vite和vue解耦,还有就是出了vite官网文档,尽管是英文版,但急躁看下来,也能够看懂个七七八八我在应用vite中遇到的槽点很多人其实并没有拿vite用于正式的我的项目开发中,仅仅是用vite运行下vue3跑跑demo。因为当初基于webpack构建的脚手架足够稳固及好用。 vite的长处显而易见,集体认为当前很有可能代替webpack,那vite在正式我的项目开发中体现如何呢? 上面就我本人在vite应用中遇见的槽点而言,和大家分享下现阶段vite应用上的一些不爽之处,如有谬误,欢送留言评论。 require不能应用在应用vue-cli的时候,出于业务须要咱们可能须要这样援用图片 { imgUrl:require("../assets/images/bg.png")}复制代码而后在template中应用 <img :src="imgUrl" alt="">复制代码如何图片的门路是动静的,咱们也须要应用require援用,从而让框架在打包的时候剖析出正确的门路但这种图片援用计划在vite中并不能用,浏览器中会报require相干谬误这种报错天然能够了解,因为vite应用的是浏览器自带的module去解析js的,而require语法是node语法,天然报错,然而vite并没有给出正当的解决方案。最初只好是把须要require引入的图片放到public文件夹下????,这样打包前后门路都不会被解决,能够保障门路的正确性全局css文件无奈配置在vue-cli中咱们能够应用css预处理器来提取专用css变量及css函数并放在一个文件中,而后再vue.config.js中如下配置 module.exports = { css: { // 不必在每一个页面都进行引入款式，就能间接援用。 loaderOptions: { sass: { prependData: `@import '@/assets/scss/variables.scss';` } } }}复制代码这样咱们就能够在任何sass文件中都能够应用到sass变量了但在vite中却没有提供这样的配置????,官网也提供了如何配置css变量 export default { css: { preprocessorOptions: { scss: { additionalData: `$injectedColor: orange;` } } }}复制代码然而,如果我想把所有的变量及函数抽离到一个文件中引入,像以下这样: export default { css: { preprocessorOptions: { scss: { additionalData: "@import '../assets/scss/_base.scss';" // 有效 } } }}复制代码发现并不起作用 ...

关于vue.js:Vuex使用流程

一、应用Vuex的目标实现多组件状态治理。多个组件之间须要数据共享时，Vuex是个很好的帮手哦二、Vuex 的五大外围其中state和mutation是必须的，其余可依据需要来加1.state 负责状态治理，相似于vue中的data，用于初始化数据2.mutation 专用于批改state中的数据，通过commit触发3.action 能够解决异步，通过dispatch触发，不能间接批改state，首先在组件中通过dispatch触发action，而后在action函数外部commit触发mutation，通过mutation批改state状态值4.getter Vuex中的计算属性，相当于vue中的computed,依赖于state状态值，状态值一旦扭转，getter会从新计算，也就是说，当一个数据依赖于另一个数据发生变化时，就要应用getter5.module 模块化治理三、Vuex 怎么用1.首先当然要装置啦 (假如你曾经装置了vue) npm install vuex 2.引入并应用Vuex import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)3.实例化一个Vuex对象--Store状态机并抛出 const store = new Vuex.Store({})export defaul store 4.在main.js中引入并注入Vuex import Vue from 'vue'import App from './App.vue'import store from './store'new Vue({ render: h => h(App), store}).$mount('#app') 5.通过this.$store拜访Vuex的数据到此，Vuex已筹备实现，接下来就依据本人须要退出数据吧~四、示例代码1.首先筹备至多两个组件，不然怎么数据共享呢 <template> <div> 我是组件1 </div></template><script> export default { } </script><style scoped></style> <template> <div> 我是组件2 </div></template><script> export default { } </script><style scoped></style> 2.在store.js中写Vuex相干代码 ...

关于vue.js:每日一题有人上次在dy面试面试官问我vue数据绑定的实现原理你说我该如何回答

关注「松宝写代码」，精选好文，每日一题工夫永远是本人的每分每秒也都是为本人的未来铺垫和增值作者：saucxs ｜ songEagle起源：原创一、前言文章首发wx的「松宝写代码」 2020.12.23 日刚立的 flag，每日一题，题目类型不限度，能够是：算法题，面试题，论述题等等。本文是「每日一题」第 5 题：「每日一题」到底该如何答复：vue数据绑定的实现原理？往期「每日一题」：第 4 道「每日一题」与面试官手撕代码：如何迷信高效的寻找反复元素？第 3 道「「每日一题」面试官问你对 Promise 的了解？可能是须要你能手动实现各个个性」第 2 道[「[每日一题]ES6 中为什么要应用 Symbol？」](https://mp.weixin.qq.com/s/om...第 1 道「一道面试题是如何引发深层次的灵魂拷问？」二、vue数据绑定的实现原理？这个题目自身不是特地难，只能说是作为社招的根底面试题，然而如果想答复好这道题也不是很容易。不信接着往下看 1、概括答复vue.js是一个十分优良的前端开发框架，应用vue的版本是v2.x vue几个外围的中央：vue实例化，虚构DOM，模板编译过程，数据绑定。咱们开始回到正题，vue.js的作者尤雨溪最后就是尝试实现一个相似angular1的货色，发现外面对于数据处理十分不优雅，于是创造性的尝试利用ES5中的Object.defineProperty来实现数据绑定，于是就有了最后的vue。 vue的数据绑定的实现原理离不开vue中响应式的数据处理形式。咱们能够回忆一下官网的图： vue的响应式基本原理： 1、vue会遍历此data中对象所有的属性，2、并应用Object.defineProperty把这些属性全副转为getter/setter，3、而每个组件实例都有watcher对象，4、它会在组件渲染的过程中把属性记录为依赖，5、之后当依赖项的 setter被调用时，会告诉watcher从新计算，从而以致它关联的组件得以更新。2、亮点答复概括答复咱们只答复了应用ES5的办法 Object.defineProperty 实现数据的监听的，那么具体是如何实现还是没有讲的很分明。这时候咱们须要问本人，如何找亮点？ vue的响应式原理设计三个重要对象：Observer，Watcher，Dep。 Observer对象：vue中的数据对象在初始化过程中转换为Observer对象。Watcher对象：将模板和Observer对象联合在一起生成Watcher实例，Watcher是订阅者中的订阅者。Dep对象：Watcher对象和Observer对象之间纽带，每一个Observer都有一个Dep实例，用来存储订阅者Watcher。当属性变动会执行主题对象Observer的dep.notify办法，这个办法会遍历订阅者Watcher列表向其发送音讯， Watcher会执行run办法去更新视图。依赖关系图如下，更能方面咱们的了解接着咱们须要补充的是：模板编译过程中的指令和数据绑定都会生成Watcher实例，实例中的watch属性也会生成Watcher实例。说的这些有没有感觉有点乱，那咱们总结一下如何亮点答复 1、在生命周期的initState办法中将data，prop，method，computed，watch中的数据劫持，通过observe办法与Object.defineProperty办法将相干对象转为换Observer对象。2、而后在initRender办法中解析模板，通过Watcher对象，Dep对象与观察者模式将模板中的指令与对象的数据建设依赖关系，应用全局对象Dep.target实现依赖收集。3、当数据变动时，setter被调用，触发Object.defineProperty办法中的dep.notify办法，遍历该数据依赖列表，执行器update办法告诉Watcher进行视图更新。vue是无奈检测到对象属性的增加和删除，然而能够应用全局Vue.set办法（或vm.$set实例办法）。vue无奈检测利用索引设置数组，然而能够应用全局Vue.set办法（或vm.$set实例办法）。无奈检测间接批改数组长度，然而能够应用splice而后写一个应用Object.defineProperty实现监听变量 var obj = {};var a;Object.defineProperty(obj, 'a', { get: function() { console.log('get val');　return a; }, set: function(newVal) { console.log('set val:' + newVal); a = newVal; }});obj.a; // get val obj.a = 'saucxs' //set val如果下面代码格局呈现问题，能够查看上面代码图片 ...

关于vue.js:从零开始用elementui躺坑vue-ESLint

程序是写给人读的，只是偶然让计算机执行一下。就执行而言，计算机只关怀对错，然而就团队合作而言，格调统一且优雅的代码，会让人看上去赏心悦目（痛哭流涕）。因而，确定编码格调，就尤为重要在此，小编举荐应用VSCode进行编码，应用插件eslint编写vue，相对会让你体验飞个别的感觉。联合vue官网代码格调指南，让咱们编写可保护的高质量代码附：vue格调指南 1. 装置插件 2. 配置文件 3. 更改配置文件 { "window.zoomLevel": 1, "workbench.startupEditor": "welcomePage", "git.enableSmartCommit": true, "javascript.updateImportsOnFileMove.enabled": "never", "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript",{ "language": "vue", "autoFix": true },"html", "vue" ]}配置实现后，每次编辑实现，只须要Ctrl + C，即可主动格式化代码，赏心悦目。 VSCode插件举荐VSCode插件举荐参考文献：vue格调指南如何编写可保护的优雅代码编写可保护的javascript

关于vue.js:从零开始用elementui躺坑vue-初始化项目

我的项目简介小编公布本博客的目标是应用PanJiaChen大佬的vue-element-admin、elunez大佬后有感而发，依据这两位大佬的前端模版编写文档。本次博客预计公布周期预计为3个月，公布数量预计在30～50篇。心愿各位看客多多珍藏，点赞，评论。特此说明技术栈本我的项目采纳Vue + ElementUI + axios + Vue-Router + Vuex。对于技术选型，我会在下一篇中独自做阐明。 1. 装置Node下载地址：https://nodejs.org/en/download/留神：下载LTS版本。即Long Term Suppot：长期反对版本装置并配置胜利： node -vnpm -v 2. 装置webpackwebpack官网文档： https://www.webpackjs.com npm install --save-dev webpack留神：不举荐全局装置 webpack。这会将你我的项目中的 webpack 锁定到指定版本，并且在应用不同的 webpack 版本的我的项目中，可能会导致构建失败。装置并配置胜利： webpack -v 3. 装置vue-cli对于旧版本Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你曾经全局装置了旧版本的 vue-cli (1.x 或 2.x)，你须要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。npm install -g @vue/cli装置并配置胜利： vue -V 4. 初始化我的项目vue init webpack <项目名称> ...

关于vue.js:从零开始用elementui躺坑vue-技术选型

技术栈本我的项目采纳Vue + ElementUI + Axios + Vue-Router + VuexElementUI篇1. 为什么抉择elementui有大厂背书 : 尽管外围开发只有两三个人，但至多不必放心哪天就不保护，带着小姨子跑路了2016 年 3 月 13 日 Element 悄悄诞生，经验了 4 年的风雨洗礼，咱们从一个饿了么外部业务组件库成长为 Vue 生态里最风行的 UI 组件库之一。继续迭代 : Element 已取得 48200 Github Star， NPM 下载量 95 万次/每月的可喜成绩。超过 530 名社区贡献者的参加保护，一起实现了 4400 次 commit 的更新迭代。生态圈优异，社区沉闷：其 contributors曾经有250多人，社区里也有很多基于element-ui 的拓展组件，也有很多相干的 qq 探讨群或者 gitter。社区的认可:目前Element曾经是vue相干最多star的开源我的项目了，体现出了社区对其的认可2. 装置npmnpm i element-ui -D3. 引入 Element残缺引入import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI);new Vue({ el: '#app', render: h => h(App)});按需引入，即只引入须要的组件（举荐）import { // element组件 Message, Form, FormItem} from 'element-ui'let elemtuiArray = [ Message, Form, FormItem]elemtuiArray.forEach(item => { Vue.use(item)})Axios篇1. 为什么抉择AxiosAxios 是一个基于 promise 的 HTTP 库，能够用在浏览器和 node.js 中 ...

关于vue.js:vue2x安装sass常见问题

1、装置 cnpm install node-sass --save-dev //装置node-sass`cnpm install sass-loader --save-dev //装置依赖包sass-loader`cnpm install style-loader --save-dev //装置style-loader`2、应用 build/webpack.base.conf.jg，module->rulses作如下配置{ test: /.sass$/, loaders: ['style', 'css', 'sass'] },3、应用 <style lang="scss" scoped>4、常见问题，因为node版本不断更新，vue2.x的webpack的版本是3，所以报错大多数起因是依照版本过高，所以作如下批改。 cnpm install node-sass@4.13.1 --save-dev //装置node-sass`cnpm install sass-loader@7.3.1 --save-dev //装置依赖包sass-loader`

关于vue.js:基于elementui封装一个Table模板组件

大家在做后盾管理系统的时候，写的最多的可能就是表格页面了，个别分三局部：搜寻功能区、表格内容区和分页器区。个别这些性能都是应用第三方组件库实现，比如说element-ui，或者vuetify。这两个组件库都各有各的长处，但就table组件来说，我还是比拟喜爱vuetify的实现，不必手写一个个column，只有传入headers的配置数组就行，甚至分页器都内置在了table组件里，用起来非常不便。有趣味能够看看：vuetify data table。下面是一个经典的用element-ui开发的table页面，而且理论工作中如果每个table页面都写一遍，反复代码太多了，所以无妨写一个table模板组件，缩小反复代码。我的思路是这样的：搜寻功能区：提供searchBar插槽，能够自定义搜寻输入框，搜寻、重置按钮必有，新增按钮通过props管制显隐。这里对应的代码如下： genSearchBar() { if (this.noSearchBar || !this.$scopedSlots.searchBar) return ''; return ( <el-form class="seatch-form" inline={true} label-width="100"> {this.$scopedSlots.searchBar()} <el-button class="filter-item" icon="el-icon-search" type="primary" onClick={this.handleSearchBtnClick} > 查问 </el-button> <el-button class="filter-item" icon="el-icon-refresh" onClick={this.handleResetBtnClick} > 重置 </el-button> <el-button class="filter-item" icon="el-icon-plus" type="primary" v-show={this.showAddBtn} onClick={this.handleAddBtnClick} > 新增 </el-button> </el-form> );}表格内容区：通过传入headers主动生成columns，参数如下： { label: '性别', prop: 'sex', width: '180', filter: 'sexFilter'}可对应如下代码： <el-table-column prop="sex" label="性别" width="180"> <template slot-scope="scope">{{scope.row.sex | sexFilter}}</template></el-table-column>留神，只反对全局filter。如果你想自定义column，也提供tableColumn插槽，反对自定义column，能够如下配置： { prop: 'action'}<el-table-column prop="action" label="操作" width="180"> <template slot-scope="scope"> <el-button>编辑</el-button> <el-button>删除</el-button> </template></el-table-column>这样，就会按传入的prop匹配对应的column，非常不便。实现代码如下： genTableSlot(h) { let customeColumns = this.$scopedSlots.tableColumn ? this.$scopedSlots.tableColumn() : []; return this.headers.map((item) => { // 依据item.prop判断是否应用传入的插槽内容 let foundItem = customeColumns.find( (ele) => ele.componentOptions && ele.componentOptions.propsData.prop === item.prop ); return foundItem ? foundItem : h('el-table-column', { props: { ...item, }, scopedSlots: { default: (props) => { // 依据传入的全局filter解决column数据 let filter = this.$options.filters[ item.filter ]; let itemValue = props.row[item.prop]; return h( 'span', filter ? filter(itemValue) : itemValue ); }, }, }); });}genTable(h) { return h( 'el-table', { ref: 'tableRef', props: { ...this.$attrs, data: this.data, }, on: { 'selection-change': (val) => { this.$emit('selection-change', val); }, }, }, [...this.genTableSlot(h)] );}分页器区： ...

关于vue.js:vite10还没学呢-这就出20了

前言明天逛微博的时候不小心看到了尤雨溪的一条微博：新年礼物????？啥礼物？vue3 的 IE11 兼容包出了？还是 Long Time Support 的 vue2.7 出了？或者是 vite 出1.0了？连忙点进去看一眼：看来 vite 终于出 1.0 了啊，连忙点 Get Started 进去看看：嗯？从 v1 版迁徙？个别不都是出了更高的版本才会让你从低版本迁徙么？点进去一看：好家伙！vite 都 2.0 了？！我还认为 vite 始终在致力公布 1.0 版呢！本想着等它公布了 1.0 了，稳固了再学，后果它居然以迅雷不及自欺欺人之势 2.0 了！真像评论里说的：我学的还没你写的快呢！埋怨没有用尽管我都忍不住想吐槽一句学不动了，不过认真想想更新到 2.0 也未尝不是件坏事，置信大多数人都和我一样基本没有深刻的去理解过 vite，只不过是看了几篇文章晓得 vite 是干嘛的，和 webpack 有什么区别？当初间接就学新的好了，咱们先来简略的翻译一下从 v1 版本迁徙这部分：译文配置选项更改以下选项已被删除，应通过插件实现： resolverstransformsindexHtmlTransformsjsx 和 enableEsbuild 已被删除；请改用新的 esbuild 选项。当初，与CSS相干的选项嵌套在 css 外面。当初，所有特定于构建的选项都嵌套在 build 里。 rollupInputOptions和rollupOutputOptions被替换为build.rollupOptions。esbuildTarget被替换为build.target。emitManifest被替换为build.manifest。因为能够通过插件钩子函数或其余选项实现以下构建选项，因而已删除它们： entryrollupDedupeemitAssetsemitIndexshouldPreloadconfigureBuild当初，所有服务器特定的选项都嵌套在了server里。 hostname被替换为server.host。httpsOptions已被删除，server.https能够间接承受 options 对象。chokidarWatchOptions被替换为server.watch。assetsInclude当初承受string | RegExp | (string | RegExp)[]类型的参数，而不是一个function。删除所有Vue特定选项；将选项传递给 Vue 插件。Vue 反对Vite 2.0 core 当初与框架无关。当初通过@vitejs/plugin-vue这个插件来反对Vue。只需装置并将其增加到 Vite 配置中即可： ...

关于vue.js:vue源码分析二从new-Vue到渲染到页面

_init办法new Vue()会执行Vue构造函数的_init办法，_init办法被initMixin中扩大的，src\core\instance\init.js export function initMixin (Vue: Class<Component>) { Vue.prototype._init = function (options?: Object) { const vm: Component = this // a uid vm._uid = uid++ let startTag, endTag /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { startTag = `vue-perf-start:${vm._uid}` endTag = `vue-perf-end:${vm._uid}` mark(startTag) } // a flag to avoid this being observed vm._isVue = true // 合并配置 if (options && options._isComponent) { // optimize internal component instantiation // since dynamic options merging is pretty slow, and none of the // internal component options needs special treatment. initInternalComponent(vm, options) } else { vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ) } /* istanbul ignore else */ if (process.env.NODE_ENV !== 'production') { initProxy(vm) } else { vm._renderProxy = vm } // expose real self vm._self = vm // vue实例vm扩大 // 生命周期 initLifecycle(vm) // 事件 initEvents(vm) // 渲染 // createElement也就是咱们手写render函数的参数h // slots initRender(vm) // 第一个生命周期 // data,props还没有 callHook(vm, 'beforeCreate') // inject 的实现，在provide之前 initInjections(vm) // resolve injections before data/props // props，data,computed,methods都在这里，须要重点看，所以beforCreate钩子函数中无奈读取props和data的变量 initState(vm) // provide 的实现 initProvide(vm) // resolve provide after data/props // 第二个生命周期，这是能够获取到data,props,computed,methods // 所有的生命周期函数都是调用的callHook函数 callHook(vm, 'created') /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { vm._name = formatComponentName(vm, false) mark(endTag) measure(`vue ${vm._name} init`, startTag, endTag) } // 如果有el，则调用$mount if (vm.$options.el) { vm.$mount(vm.$options.el) } }}_init办法次要做的就是合并配置，初始化生命周期，初始化事件核心，初始化渲染，初始化 data、props、computed、watcher 等等 ...

关于vue.js:vue源码分析一源码入口

vue源码剖析（一）-源码入口vue提供不同的平台和版本，浏览器环境版本包含：Runtime only版本和Runtime + compiler版本。 Runtime + compiler版本：new Vue({template: '<div>{{ hi }}</div>'}),须要将template中的字符串编译成render函数，须要用到compiler，具体在scripts\config.js const builds = { 'web-runtime-cjs-dev': { entry: resolve('web/entry-runtime.js'), dest: resolve('dist/vue.runtime.common.dev.js'), format: 'cjs', env: 'development', banner }, ... 'web-full-cjs-dev': { entry: resolve('web/entry-runtime-with-compiler.js'), dest: resolve('dist/vue.common.dev.js'), format: 'cjs', env: 'development', alias: { he: './entity-decoder' }, banner }, ... }本文剖析runtime + complier版本，entry属性值就是Vue源码入口，接下来查看web/entry-runtime-with-compiler.js import Vue from './runtime/index'...// 将runtime/index.js中定义的mount办法缓存const mount = Vue.prototype.$mount// 重写$mount// runtime + compiler版本的mountVue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean // 和服务器渲染无关): Component { el = el && query(el) /* istanbul ignore if */ // el不能时body和html if (el === document.body || el === document.documentElement) { process.env.NODE_ENV !== 'production' && warn( `Do not mount Vue to <html> or <body> - mount to normal elements instead.` ) return this } const options = this.$options // resolve template/el and convert to render function // 如果没有定义 render 办法，则会把 el 或者 template 字符串转换成 render 办法 if (!options.render) { let template = options.template // 获取template if (template) { if (typeof template === 'string') { if (template.charAt(0) === '#') { template = idToTemplate(template) /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && !template) { warn( `Template element not found or is empty: ${options.template}`, this ) } } } else if (template.nodeType) { template = template.innerHTML } else { if (process.env.NODE_ENV !== 'production') { warn('invalid template option:' + template, this) } return this } } else if (el) { template = getOuterHTML(el) } if (template) { /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { mark('compile') } // 将template转换成render函数compileToFunctions const { render, staticRenderFns } = compileToFunctions(template, { outputSourceRange: process.env.NODE_ENV !== 'production', shouldDecodeNewlines, shouldDecodeNewlinesForHref, delimiters: options.delimiters, comments: options.comments }, this) options.render = render options.staticRenderFns = staticRenderFns /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { mark('compile end') measure(`vue ${this._name} compile`, 'compile', 'compile end') } } } // 这里调用的mount是下面被缓存的mount return mount.call(this, el, hydrating)}这里的Vue还是通过import引入，一路向上找，最终找到src\core\instance\index.js ...

关于vue.js:永远考虑那个拥有更强写作能力的程序员

永远思考那个领有更强写作能力的人工欲善其事,必先利其器 markdown思维导图流程图换位思考这个需要,「不做」闭环写作套路铺垫下定义逻辑清晰说人话视角版本延续性结语本文摘自《Spring Boot 实战纪实》,智客工坊出品。永远思考那个领有更强写作能力的人如果一个岗位有几个候选人，永远思考那个领有更强写作能力的人。无论这个人是设计师、程序员、市场或销售人员，写作能力总是能够带来回报的。无效、简洁的写作能带来无效、简洁的代码、设计、邮件、即时通讯等等。写作带来：更深度的思考，更认真的生存，更清晰的沟通，更无效的社交，更弱小的心田。工欲善其事,必先利其器小人生非异也，善假于物也思维诚然重要,然而长于借助工具表白本人的思维也很重要。这里介绍一些好用的写作方面的工具。 Markdown 依据百度百科-markdown,Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（英语：John Gruber）。它容许人们应用易读易写的纯文本格式编写文档，而后转换成无效的XHTML（或者HTML）文档。 Markdown是一种简略的格式化文本的办法，让排版变得简答,在任何设施上看起来都很棒。有道笔记,印象笔记,博客园,vscode,github,码云等都反对markdown语法。相干教程 Markdown编辑器教程。想学 Markdown？这篇文章帮你疾速上手。思维导图对于某些需要涵盖性能点较多,后者分支较多场景,应用思维导图出现更直观。比方,这是我整顿的考试零碎的后期需要的一个思维导图：当初有很多工具都反对画思维导图: processonxmind百度脑图流程图程序员童鞋对流程图必定不会生疏,常见程序流程图设计应该是信手拈来。针对简单需要,有时候应用语言和文字难以描述分明。这个时候,流程图该上场了。流程图在整个需要的整顿中的外围,他能将产品业务背地的逻辑展现进去。这个须要你对吃透需要,而后内化,加工,再输入。说句题外话,如果你参加了这个需要,肯定要抠细节,流程越细化,越有助于胜利的实现需求。。这里举荐几个罕用的流程图工具： processonEdrawdraw.io【开源】换位思考接到需要之后,技术同学往往会先思考技术实现,而后陷入技术细节,这也是大多数技术人的通病。在此前的文章《需要治理》中,我曾指出技术同学要放下高傲和偏见,跳出技术思维。这对于需要的了解和整顿至关重要。跳出技术思维,而后换位思考,这有助于全方位,多角度的了解需要。一个性能可能由不同的角色人员应用,视角不同,需要不同。你须要像导演拍电影一样,针对不同角色，一个场景一个场景的拍摄,最终串联成一个残缺的电影作品。这个需要,「不做」懂得回绝是一门艺术。技术人不是一个没有灵魂的代码工具。"这是需要爸爸提的,我没法回绝","这是产品爸爸喊做的,不论我的事"。当呈现问题的时候,咱们常常听到技术同学这样说。不合理的需要,对用户不敌对的需要,低收益,高投入的需要,要敢于回绝。当然,回绝也是一门艺

关于vue.js:vue-table多选改状态

<template> <div> <el-form> <el-form-item> <el-button type="primary" size="mini" @click='readed'>标记为已读</el-button> </el-form-item> </el-form><el-table ref="multitable" :data="tableData" border tooltip-effect="dark" style="width:100%" @selection-change = "handleSelected"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="sender" label="发送人姓名"> </el-table-column> <el-table-column prop="title" label="题目"> </el-table-column> <el-table-column prop="content" label="内容"> </el-table-column> <el-table-column prop="read" label="状态" sortable> <template slot-scope='scope'> <div v-if="scope.row.is_read==1"><el-link type="primary" @click="handleRead(scope.row)">未读</el-link></div> <div v-else>已读</div> </template> </el-table-column> <el-table-column prop="created_at" label="发送工夫"> </el-table-column></el-table><el-pagination layout="total,prev, pager, next" @current-change="requestData" :total="paginate.total" :current-page.sync='paginate.current_page' :page-size='paginate.size'></el-pagination></div></template><script>import http from '../../../libs/http';export default { data(){ return { tableData:[], multiVal:[], paginate:{ current_page:1, total:1, from:1, to:1, size:15 } }},methods:{ handleSelected(val){ this.multiVal = []; this.multiVal = val; }, requestData(){ http.get('/api/supplier/supplierPrivateMessage',{params:{page:this.paginate.current_page}}).then(res=>{ this.tableData = res.data.data; this.paginate.current_page= res.data.meta.current_page; this.paginate.total = res.data.meta.total; this.paginate.from = res.data.meta.from; this.paginate.to = res.data.meta.to; }) }, handleRead(row){ console.log(row); this.multiVal =[]; this.multiVal.push( row.id ); this.readed(); }, readed(){ let data={ msg_ids : this.multiVal } http.post('/api/supplier/backPrivateMessageToRead',data).then(res=>{ if(res.data.code==200){ this.$message({type:'success',message:"批改胜利"}); this.requestData(); }else{ this.$message({type:'danger',message:'批改失败'}); } }) }},created(){ this.requestData();}}</script> ...

关于vue.js:基于-Vue20-开发的-Lumen-IM-在线聊天应用

Lumen IM 在线聊天1. 我的项目介绍Lumen IM 是一个网页版在线即时聊天我的项目，前端应用 Element-ui + Vue，后端采纳了基于 Swoole 开发的 Hyperf 协程框架进行接口开发，并应用 WebSocket 服务进行音讯实时推送。目前后端 WebSocket 已反对分布式集群部署。 2. 功能模块基于 Swoole WebSocket 服务做音讯即时推送反对私聊及群聊反对多种聊天音讯类型例如:文本、代码块、图片及其它类型文件，并反对文件下载反对聊天音讯撤回、删除(批量删除)、转发音讯(逐条转发、合并转发)、群禁言反对编写集体笔记、反对笔记分享(好友或群)3. 我的项目预览地址： http://im.gzydong.club账号： 18798272054 或 18798272055明码： admin123源码地址 https://github.com/gzydong/LumenIM or https://gitee.com/gzydong/LumenIM4. 图片预览

关于vue.js:vue-源码解析323模板编译和组件化

vue相干的源码剖析最初一篇,模板编译和组件化模板编译模板编译的次要目标是将模板 (template) 转换为渲染函数 (render) <div> <h1@click="handler">title</h1> <p>somecontent</p></div>渲染函数 render render(h){ return h('div',[ h('h1',{on{click:this.handler}},'title'), h('p','somecontent') ])}模板编译的作用: Vue 2.x 应用 VNode 形容视图以及各种交互，用户本人编写 VNode 比较复杂用户只须要编写相似 HTML 的代码 - Vue 模板，通过编译器将模板转换为返回 VNode 的render 函数.vue 文件会被 webpack 在构建的过程中转换成 render 函数带编译器版本的 Vue.js 中，应用 template 或 el 的形式设置模板例如： <div id="app"> <h1>Vue<span>模板编译过程</span></h1> <p>{{ msg }}</p> <comp @myclick="handler"></comp> </div> <script src="../../dist/vue.js"></script> <script> Vue.component('comp', { template: '<div>I am a comp</div>' }) const vm = new Vue({ el: '#app', data: { msg: 'Hello compiler' }, methods: { handler () { console.log('test') } } }) console.log(vm.$options.render) </script>编译出： ...

关于vue.js:vscode远程开发启动报错WDS-Disconnected-Invalid-HostOrigin-header

解决：在vue.config.js中配置： devServer: { disableHostCheck: true}~~~~

关于vue.js:如何优化-Vue-祖传代码

目录前言为什么要优化从哪里开始下手当初开始 1.代码压缩2.删除一些废除的页面3.应用 cdn 优化4.批改路由引入形式后果前言“这页面加载也太慢了！”，一个平静的下午就此突破，在老板和 PM 的威逼利诱之下，我开始了对这个祖传(shi)山我的项目进行了优化，因为这个我的项目传到我手上至多通过了4-5代前端了，很多货色也不敢随便删，找不到负责人。<img src="http://ww2.sinaimg.cn/large/006APoFYjw1f8zf375pm1j30m80m8aal.jpg" style="zoom:25%;" /> 为什么要优化？咱们次要看首屏加载速度，在测试环境咱们我的项目其实跑得还是蛮快，然而生产环境是用印尼比拟差的服务器，再加上须要 kexue 上网（总是网络呈现稳定），在这次 UI 2.0 上线之后，沉积的货色终于越来越多，我的项目也越来越宏大。毫不夸大的说咱们当初应用 4G 首次关上页面的速度大略在 16 秒以上，依据上面的表格推断出客户流失率，可是在印尼还在用着 3G 网络，可想而知这流失率太恐怖了。并且这是一个 C 端产品，所以要更加思考用户体验了客户期待页面时长的流失率作为一个开发者，你对首页关上速度又有多高的要求呢？从哪里开始下手在察看了这个我的项目架构之后呢，我推断出以下几个可行计划对于代码打包进行压缩破除以前不该用到的组件及页面应用 CDN 引入局部资源优化路由，批改引入形式对于这几个优化计划，也是试了一遍又一遍。的确是成果挺大的才收回来给大家围观一下当初开始记住这张图中三个比拟大的文件 size, 咱们每进行一步计划就看看成果 1.代码压缩代码压缩是一个很不错抉择，咱们首先须要下载一些依赖 css 代码压缩 (optimize-css-assets-webpack-plugin) 下载 npm install optimize-css-assets-webpack-pluginwebpack.config.js 应用 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');plugins: [ new OptimizeCSSPlugin()]js 代码压缩 (uglifyjs-webpack-plugin) 下载 npm install optimize-css-assets-webpack-pluginwebpack.config.js 应用 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')plugins:[ new UglifyJsPlugin({ cache: true, // 开启缓存 parallel: true, // 开启多线程编译 sourceMap: true, // 是否sourceMap uglifyOptions: { // 美化参数 comments: false, warnings: false, compress: { unused: true, dead_code: true, collapse_vars: true, reduce_vars: true }, output: { comments: false } } }),]开启gzip ...

关于vue.js:vue30-传送门teleport

咱们先看一段代码，性能很简略，模板里有一个按钮，点击按钮，展现一个模态窗口。 const app = Vue.createApp({ data() { return { show: false, }; }, methods: { handleShowModal() { this.show = true; }, }, template: ` <div class="box" id="box"> <button @click="handleShowModal">显示模态窗口</button> <div class="modal" v-if="show">模态窗口</div> </div> `}模态窗口款式如下： .box { position: absolute; width: 100px; height: 100px; background-color: cadetblue;}.modal { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.5);}整个模态窗口呈相对定位，left、right、top、bottom 全副给0，背景色为彩色半透明。咱们冀望的成果，应该点击按钮，模态窗口笼罩整个页面。当初咱们来运行下，咱们会发现，其实模态窗口只笼罩了 #box 元素，因为 #box 自身就是相对定位，模态窗口元素是他的子节点，所以模态窗口只笼罩了 #box 元素。 ...

关于vue.js:关于代码覆盖率你不可不知的两大陷阱

在做单元测试时，代码覆盖率经常被拿来作为掂量测试好坏的指标，甚至，用代码覆盖率来考核测试工作实现状况。然而我置信，你不是为了覆盖率才要求覆盖率的。你须要有意义的覆盖率，以表明你曾经很好地测试了该软件。掂量代码覆盖率相干的问题总是可能引起我的留神。一方面，我常常发现，公司和组织不肯定晓得他们在测试期间笼罩了多少代码，这的确很令人诧异！另一方面，对于一些组织来说，代码覆盖率的数字是如此重要，以至于测试的品质和有效性却变得简直无关紧要了。他们自觉地追赶100％的代码覆盖率，并置信，如果领有这个数字，该软件将是优良的，甚至可能是最好的。其实，这样跟不晓得你所测试的内容一样危险，实际上可能更危险，因为它可能给你带来谬误的安全感。代码覆盖率能够用来评估软件品质，这是一个很好且乏味的数字，但请务必记住，这是一种伎俩，而非目标。咱们并不是为了覆盖率而要求覆盖率，因为它应该表明咱们在测试软件方面做得很好。如果测试自身没有意义，那么再高的覆盖率也并不意味着软件会更好。重要的指标是确保测试每个代码，而不仅仅是执行代码。没有足够的工夫和金钱来全面测试所有内容，至多要确保对所有重要的内容都进行了测试。这就是说，低覆盖率意味着咱们可能测试有余，而高覆盖率自身并不一定与高质量相关联——理论状况要简单得多。显然，领有一个欢快的测试环境，使你领有“足够”的覆盖率，能够放心使用一个良好、稳固、可保护的测试套件来公布软件，该套件具备“足够的测试”，这是最好的状态。然而，实际上，这些覆盖率陷阱依然很常见。陷阱1：“咱们不晓得咱们的覆盖率”不晓得本人的代码覆盖率仿佛并不合理——市面上的代码覆盖率工具既便宜又丰盛。我的一个敌人通知我，其实开发人员个别都晓得本人的代码覆盖率不现实，因而开发人员和测试人员不愿将覆盖率不高的破绽裸露给管理层。当然我心愿这不是广泛的状况。团队在尝试评估覆盖率时遇到的一个理论问题是该零碎过于简单。当你逐块构建应用程序时，仅晓得将覆盖范围计数器搁置在何处可能是一项艰巨的工作。我倡议，如果实际上很难掂量应用程序的覆盖范围，则应该对架构进行三思。陷入这种陷阱的第二种办法产生在可能进行大量测试但没有理论笼罩数量的组织中，因为他们没有找到适合的办法来汇总来自不同测试运行的数量。如果你要进行手动测试、功能测试、单元测试和端到端测试，则不能简略地将数字加起来。即便它们各自实现了25％的覆盖率，联合起来也不太可能达到100％。实际上，当您查看后果时，它更可能靠近25％，而不是100％。事实证明，实际上存在一种以有意义的形式一起测量和减少覆盖范围的办法。在Parasoft，利用报告和剖析工具Parasoft DTP捕捉的大量细粒度数据，能够在这种状况下应用它来提供全面、汇总的代码覆盖率视图。应用程序监视器可能在测试过程中间接从应用程序中收集覆盖率数据，而后将其发送到Parasoft DTP，后者会汇总所有测试实际以及测试团队和测试运行中的覆盖率数据。如果听起来像是蕴含了相当大的信息量，那你是对的！DTP提供了一个交互式仪表板，可帮忙你浏览此数据并就将测试重点放在哪里做出决策。请参阅上面的示例仪表板：如果多个测试笼罩了雷同的代码，则不会被计算在内，而未经测试的代码局部则能够疾速、轻松地看到。这向你显示了应用程序的哪些局部曾经过良好的测试，哪些没有通过测试。你能够在收费的白皮书中浏览所有内容。因而，没有更多的借口不掂量覆盖率。陷阱2：“覆盖率就是所有！”人们经常误以为覆盖率就是所有。一旦团队可能掂量覆盖率，领导通常会说“让咱们来减少这个数字”。最终，数字自身变得比测试更重要。正如Parasoft的创始人Adam Kolawa所说的： “这就像要求钢琴家依照100％的覆盖率敲击钢琴琴键，而不是依据乐谱的须要仅敲击那些有意义的琴键。当他演奏作品时，他会取得有意义的任何数量的按键笼罩。” 问题就出在这里——自觉的要求覆盖率与自觉的音乐演奏雷同。覆盖率须要反映出对代码的实在、有意义的应用，否则只会是“乐音”。说到“乐音”……覆盖率的老本会随着覆盖率的减少而减少。请记住，你不仅须要创立测试，而且还必须保护它们。如果你不打算重复使用和保护测试，则可能一开始就不要浪费时间来创立它。随着测试套件的变大，“乐音”量也会以意想不到的形式减少。两倍的测试可能意味着两倍甚至三倍的“乐音”。无意义的测试最终会比好的测试产生更多的“乐音”，因为它们没有实在的上下文，然而每次执行测试时都必须加以解决。想一想技术债权吧！无用的测试是真正的危险。当初，在某些行业（例如对平安至关重要的行业）中，必须达到100％的覆盖率指标。然而即便在这种状况下，将一行代码的任何执行都视为有意义的测试也太容易了，这基本不是事实。我要问两个根本问题，以确定一个测试是否是一个好的测试：测试失败意味着什么？测试通过意味着什么？现实状况下，当测试失败时，咱们会晓得出了什么问题，如果测试真的很好，它将为咱们指明正确的方向进行修复。当测试失败时，很多时候没有人晓得为什么，没有人能够复制它，而测试被忽略了。相同，当测试通过时，咱们应该可能晓得所测试的内容——这意味着某个特定性能或某项性能失常运行。如果您不能答复其中一个问题，则可能是你的测试有问题。如果你不能答复它们中的任何一个，则测试带来的麻烦可能比它产生的价值更多。解脱陷阱的办法首先是要理解覆盖率自身并不是指标。真正的指标是创立有用的有意义的测试。这当然须要工夫。在简略的代码编写中，单元测试很简略，然而在简单的理论应用程序中，这意味着编写存根和模仿并应用框架。这可能会破费很多工夫，如果你始终不这样做，很容易遗记所波及的API的细微差别。即便你认真对待测试，创立真正好的测试所破费的工夫也可能比你预期的要长。为了进步单元测试的效率，Java开发测试工具Parasoft Jtest中有一个针对于此的新技术——单元测试助手。单元测试助手承当着实现正确的模仿和存根的繁琐工作。它也能够帮忙你以一种无效的形式来扩大现有测试，以减少覆盖范围——帮忙你创立良好的单元测试，并提出倡议以进步测试覆盖率和测试品质。心愿你曾经理解到覆盖率的重要性，并且进步覆盖率是一个值得实现的指标。然而请记住，单纯的谋求百分比并没有编写稳固、可保护和有意义的测试更有价值。https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...

关于vue.js:持续提升程序员幸福指数使用abp-vnext设计一款面向微服务的单体架构

可能你会面临这样一种状况，在架构设计之前，你对业务不甚了解，需要给到的也不置可否，这个时候你既无奈明确到底是要应用单体架构还是应用微服务架构，如果应用单体，后续业务扩大可能带来大量批改，如果应用微服务，后期可能在工期上把我的项目给耽搁了，你该怎么办？这就是这篇文章想要研究的面向微服务的单体架构的由来。为什么不必传统单体架构？咱们能够看到随着业务的降级，单块的代码的拆分会变得越来越艰难，如果在后期没有做好布局和伏笔，那么后续的演变就是一场劫难。所以，目前的设计如果是企业级别的，都必然要做架构的适当冗余，因为没有人能晓得将来长什么样，架构必然和业务一样是随着综合因素缓缓长进去的，不可能欲速不达，一步到位。为什么不必微服务架构？微服务痛点数据一致性散发数据聚合 Join分布式事务单体零碎解耦拆分什么时候开始用微服务这里援用架构师杨波(前Ebay架构师/携程/拍拍贷研发部总监，资深技术架构师，微服务技术专家)的一些观点： “企业一开始不举荐间接应用微服务，因为微服务须要后期基础设施的投资，复杂性很高(详见上面微服务的四大痛点)，如果对问题畛域并不是很了解，一开始用微服务，你很难去划分服务的边界，你的生产力反而会比拟低，而且你花了很大精力进行开发，你的产品并没有被市场验证过，有可能会失败，所以这个选项危险会比拟高。所以咱们举荐的是单块优先，先从单块使用做起，这样成本低，团队成员也比拟少，毋庸太多研发投入，就能够交付一些根本的性能给客户应用。随着利用越来越胜利，客户减少，你的零碎复杂度会越来越高，就会呈现单块利用和团队规模之间的矛盾，生产力会随着业务复杂度逐步升高。所以在一些初创型公司，你更多看到的是单块利用，只有一些中大型的公司会看到微服务架构。” “交叉点表明，业务曾经达到了肯定的复杂性，单块利用曾经无奈满足业务增长的须要，研发效率开始降落了，而微服务能够晋升研发和交付的效率。这个点须要架构师去综合、衡量。集体教训，个别团队须要达到百人规模，才去思考微服务。” 并发量不高——业务流量并没有达到千万或亿级别团队规模——团队成员并没有达到百位规模零碎复杂度——没有高并发也就谈不上复杂度实用场景——互联网/物联网微服务兼容的单体架构演变不便——低代码演变如上所示，咱们能够看到API在拆解过程中，根本没有做任何代码变更(具体代码能够查看我的GitHub或者你也能够参看我的视频《ABP vNext框架实战系列》)，Domain的演变也只是做代码简略迁徙，整个重构过程并没有做多大的变动。这就是所谓“继续晋升程序员幸福指数"的模块化之道啊。总结　ABP vNext的模块化思维给了微服务演变提供了底层能力，我在这儿只是抛砖引玉，心愿有更多的人能参加进来进行分享。如果你想理解更多ABP vNext的中央，你也能够参看我的另外一篇文字《浅谈Abp vNext的模块化设计》，谢谢您的捧场。 Abp vNext是一款优良的框架，然而要从零开始能把每个角落都熟悉起来须要不少摸索工夫，心愿通过本人的教训给你的疾速学习赋能，抛开生成器，一起从零开始，手工打磨一款生产级别的框架，让你对AbpvNext知其然，知其所以然。https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...https://github.com/hitl837/ml...https://www.github.com/hitl83...http://github.com/hitl837/mlo...

关于vue.js:Vuejs教程Vue基本指令

Vue.js教程-Vue根本指令前言Vue指令插值表达式v-bindv-modelv-onv-if、v-else、v-else-ifv-show和v-if的区别v-forv-slot具名插槽作用域插槽动静插槽名总结前言本文仅介绍根本罕用指令(不包含自定义指令和相应的修饰符，这两个当前再写)。再附上官网API文档，大家也能够去看官网解释，更全面更具体。VueAPI本文所有指令写在views文件夹下的Home.vue文件中，本人学习的时候间接在App.vue中引入一下该文件就行了，不必配置路由。Vue指令插值表达式在data中定义字符串或对象，在html语句中应用{{}}双花括号形式获取data里的字符串或者对象。字符串：对象：在这里分为两种状况：第一种是间接取出对象。第二种是取出对象的相应字段，也就是字符串或者数字呗。间接取出对象：取出对应字段：在插值表达式中也反对三目运算符、数字和数组的一些根本办法，能够本人去尝试。v-bindv-bind用于绑定数据和元素属性，父传子数据时也能用到。v-bind的简写是:v-bind：接的是本人起的属性名(能够轻易起)，而后接等于号=，双引号外面写在data里的货色，也能够间接在外面写个对象，例如设置Css啥的。最次要的还是应用父传子，在子组件中定义props，下一章再说这个，也是比较简单。两张图片惟一的不同就是第二张用了v-bind的简写，很不便。v-model对数据进行双向绑定的指令，也是常常用。具体成果亲自试一试。v-on它就是一个调用办法的指令，简写为@怎么应用在v-if里会提到。v-if、v-else、v-else-ifv-if和v-else一听就能搭配应用，也没有什么好说的，和Java外面一样，if里如果为true，就显示if里的货色，否则显示else里的货色。我这里应用官网样例，就是切换登录形式，点击按钮切换登录形式，并不是真的登录。`<template> <div> <div v-if="logintype === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </div> <div v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </div> <button @click="changelogintype">切换登录形式</button> </div></template><script>export default { data () { return { logintype : 'username' } }, methods:{ changelogintype(){ if(this.logintype === "username"){ this.logintype = "email" } else{ this.logintype = "username" } } }}</script><style scoped></style>` * 1* 2* 3* 4* 5* 6* 7* 8* 9* 10* 11* 12* 13* 14* 15* 16* 17* 18* 19* 20* 21* 22* 23* 24* 25* 26* 27* 28* 29* 30* 31* 32* 33* 34* 35* 36* 37解释一下代码，v-if中应用了双引号，所以在双引号外面要应用单引号。key的作用是让这个区域是惟一的，因为如果不加key的话，无奈做到切换时刷新该区域，就相当于是这个区域的身份证，给他个名字。@click是单击事件，@是v-on的简写。@click外面的办法名字其实是简写，残缺写法@click="changelogintype()"，当咱们不须要为这个办法传递参数时，咱们能够不传参，有些特定的办法中传入的是event，依据具体情况应用。在methods里要想获取同一组件内data里的货色，那么要应用this关键字。v-show和v-if的区别v-show和v-if的作用是一样的，顾名思义，是让某个区域进行显示或隐没。在原理上的区别： ...

关于vue.js:转优秀技术人如何做到高效沟通

转自微信公众号：阿里巴巴云原生；作者: 鲁佳(鹿迦)导读：世界上有两件最难的事：把他人的钱装进本人的口袋；把本人的思维装进他人的脑袋。为什么沟通那么重要谁都晓得在工作中沟通是十分重要的，那大家有没有真正想过为什么沟通这么重要呢？首先咱们想想看，在你的日常工作工夫调配上，“沟通”所用的工夫占比多少呢？日常的会议、在钉钉上的探讨、解决邮件等等，反正我集体是远远超过了 50% 的。这就和管理学上的一个驰名实践很符合了：管理者 50% 以上的工夫用在了沟通上，但同时工作中 50% 以上的阻碍都是在沟通中产生的。这就是“双 50% 实践”，这直观的反馈了不论是在占用工夫上，还是对工作的影响水平上，沟通都是至关重要的。为什么团队里散会大家总是很缄默，有想法的同学也不吭声？下面这个图大家应该在各种不同的渠道都看到过吧，置信大在第一次看到这个图的时候都会和我一样会心一笑吧。为什么这张图能有这样的成果呢？因为这个图所体现进去的问题真的十分好的隐射了咱们日常理论工作的状况：因为沟通不到位的问题导致一个产品在不同的角色的了解上造成了这么微小的差别。那么在像阿里这样的互联网公司，工作量常见的沟通问题都要哪些呢？这里做一些简略的列举：为什么推动兄弟团队配合这么难，他们配合的进度齐全不可控？为什么工作安排给了上司，然而最初又都沉积到了我这里？为什么会议探讨留下来的 action 执行起来总是拖拖拉拉实现不了？为什么老板最近的音讯常常已读不回？为什么终日被钉钉音讯吞没了，集体的事件只能在夜深人静加班做了？……这么多的沟通问题，那沟通问什么这么艰难呢？这里从最常见的状况来看，特地是在 1 对 1 的沟通中，次要有三个次要的起因：既然沟通的问题很多，导致问题的起因也非常复杂，那咱们的前途在哪里呢？是不是解决办法就是标准化咱们的工作，而后通过标准化、流程化来让咱们的工作缩小沟通的需要，而后大家都能够在本人的工位安安静静写代码、写计划、这样就高枕无忧了呢？答案是否定的。咱们来看这个象限图，这个是李开复博士在对将来 AI 的构想中提到的一个模型：能够看到，在区间图的左下角的岗位对应的是低社交需要，并且是结构化的畛域，在这样的畛域的岗位，将来 5-10 就会被 AI 机器人所取代。如果咱们的工作可能简略的通过定义标准化的接口做到按流程执行，从而防止或缩小沟通，那咱们的工作的价值就会升高，从而最终被机器取代，就像流水线上的工人正在大量被智能机器人所取代那样。我想说的意思不是说为了体现工作的价值，要成心进步工作的沟通老本，相同，咱们确实须要通过演绎总结梳理规范话的流程、甚至是工具化的伎俩来升高一个畛域的沟通，但咱们同时工作在找更简单、更须要去沟通的场景中，去发明更大的价值。所以咱们要做的是放弃竞争力，继续晋升沟通能力。这个才是大家每个人要继续致力的方向。沟通的根底有一个东方的谚语是这么说的，“世界上有两件最难的事：把他人的钱装进本人的口袋；把本人的思维装进他人的脑袋。”就像图上的这个场景一样，在沟通遇到问题的时候，大家往往都会感觉本人是对的，都想要压服对方，但有都总是困难重重。沟通失败的起因总是多种多样，要么是表白上的问题，要么是聆听和反馈上的问题，要么是环境上带来的问题。列举下来，个别的状况有：不足信息或常识没有阐明重要性只重视了表白、没有重视聆听没有齐全了解对方的话，以至于询问不当没有重视反馈工夫不够不良情绪职位的差距、文化的差距首先，咱们来一起理解一下沟通模型。沟通是从信息发送者登程，到信息接受者收到音讯，而后给出反馈到信息发送者的一个残缺闭环。这里的编码，可能是文字，也能够是声音，甚至是手势、表情；通道能够是钉钉、邮件、视频、也能够是面对面；各种外界环境可能带来乐音，比方情绪不好，或者大家背景不同、短少共同语言，并行沟通的影响等等。能够看到，一个最小闭环的沟通过程，因为波及多个环节，其实造成了一个较长的链路，链路一旦长了，在链路上的各个环节都容易呈现问题，最终就会将问题层层放大。这里就必须给大家介绍一下沟通漏斗的实践了。这里必须要晓得沟通漏斗的造成过程。举个例子，比方一个开发的 leader，发现最近我的项目开发中引入的问题比拟多，产品好几次遇到重大的线上质疑，于是他决定开个会整改，早晨睡不着觉心里想怎么解决呢？想到了 10 个方面（100%）的问题的，须要与上司员工讲。当第二天站在众人背后散会时，因为没劳动好并且缓和，想到的 10 件事件，只说出了其中的 8 件，漏掉了 2 件，也就是只说出了 80%。而这 8 件事在当众讲的时候，因为场地的限度、人员的多少等关系影响，造成员工真正听到的是有 6 件事（60%）。又因为员工程度、常识背景的差别，咱们的技术 leader 语言表达的高下、语言口音方言等理论状况，真正被他人了解、消化的货色大略只有 40%。等到这些人去落地执行时，因为每件事件与集体关系的大小、执行的志愿强弱等因素，造成到最初失去执行的曾经变成 20% 了；尽管这个比例比拟夸大，理论并没有这么重大，然而这个沟通造成的漏斗确是实实在在存在的，咱们只能想方法将他变得影响越小越好。 ...

关于vue.js:你真的会学习吗从结构化思维说起

简介：学习是咱们从呱呱坠地开始就在进行的事，从简略的模拟，到零碎的训练，学习对咱们而言仿佛曾经司空见惯。然而，咱们真的学会学习了吗？学习的终极目标是什么？技术性学习思维又有什么不同？本文从结构化思维说起，分享学习如何学习的办法。一前言试想，接手一个新的业务方向，业务方的诉求是要求你能疾速相熟并投入，你会如何去应答这样的挑战呢？再试想，作为一名风控技术的新人，你须要在原先的防控策略上引入新的图计算技术，又该如何疾速学习新的技术，从而达成业务指标？如何你恰好据说过XY问题的实践，你就会晓得，上述问题其实都是笔者抛出来的Y问题，X问题是咱们到底应该如何疾速去学习一项新的课题。 XY问题是别人询问本人的尝试的解决方案Y，而不是理论问题X。这会节约大量的工夫和精力，无论是寻求帮忙的人，还是那些提供帮忙的人。二什么是结构化思维？来看这样一个例子，一个平台战斗KO前的筹备工作，有A组和B组两种划分形式。 A组 B组以上例子中，B组比A组多出了一个“维度”，将原来的元素进行了归类分组，从而让整体信息更有条理和逻辑，也更不便记忆。咱们身处信息爆炸的环境，然而信息不等于认知，大脑须要将接管到的信息进行加工解决，最终造成认知并在须要时迁徙使用，这样的过程就是思维。信息的加工解决是及其简单的过程，须要一套迷信的方法论来进步工作效率，结构化思维应运而生。结构化思维是一个建设清晰、稳固、有序的思考构造，有助于咱们将常识体系从零散到系统化。咱们罕用金字塔构造进行结构化了解和思考，金字塔构造是《金字塔原理》一书中提出来的概念，它是将结构化思维具象成相似三角形构造的树状图，直观地体现了由论断、论点、论据组成“先总后分”的立体化剖析形式（纵向构造），再通过归类分组的形式将信息排序和穷尽（横向构造）。金字塔构造有意思的是，金字塔构造先总后分，咱们看表象仿佛横向构造越扩越宽，信息越来越多。事实上随着信息的归类分组，信息开始知识化、系统化，信息越加工越少，如果再次提炼造成本人的方法论层面，最终能够变成一种长波记忆。如下图所示，当咱们遇到某项课题的海量信息时，须要做到像“漏斗”一样的思考过程。漏斗模型[1] 在前言中，笔者抛出几个问题，咱们来思考一下，结构化思维能帮忙咱们疾速的学习好一门课题吗？咱们尝试用结构化思维来解决这个问题，从学习自身这个课题来看，先从维基百科[2]取得学习的定义：学习是透过外界传授或从本身教训进步能力的过程，从广义角度来具体形容是通过浏览、听讲、钻研、察看、了解、摸索、试验、实际等伎俩取得常识或技能的过程，是一种使个体能够失去继续变动（常识和技能，办法与过程，情感与价值的改善和升华）的行为形式。对学习这个课题进行剖析，从广义的角度，学习通过横向拆解能够分为收集、加工、积淀、使能四个方面，而结构化思维是一种结构化的思考和了解信息的过程，和学习这个课题的整体纵向构造匹配能够得出结论，结构化思维次要能够帮忙实现学习的加工阶段，小局部笼罩到学习的积淀阶段。因此咱们能够得出一个简略的论断，对于学习而言，只有结构化的思维还不够。三学习须要学习吗？在阿里巴巴公益培训Java柚子训练营开班第一期分享上，孤尽老师分享了学习四部曲，即记忆、了解、表白、交融。记忆是信息获取的第一步，就像CPU运算时，要先把数据读取到内存个别，有记忆的数据能力被大脑加工解决。如何高效的记忆呢？事实上，记忆的第一性原理还是反复，但在理论工作学习中，有一些办法可能帮忙大脑更容易记住信息。记忆分为长波记忆和短波记忆：长波记忆：曾经长久化到大脑中，遗记的时候只是因为没有检索到，然而很容易回想起来，相似磁盘存储。短波记忆：记住一段时间就遗记了，前面怎么也想不起来，相似内存存储。就记忆而言，有以下要点值得注意：有场景的信息有助于记忆有法则的信息有助于记忆有分类的信息有助于记忆有图像的信息有助于记忆天然连贯的信息有助于记忆如果没有在记忆之前进行思考，单纯的反复效率不敢恭维。举个例子，上面有两组词语，哪组更容易在极短的工夫外面记住呢？第一组是形象的名词，而第二组是具象的物品，显然第二组能让咱们更快想到具体的场景画面，并且还能够用结构性思维疾速给它们分门别类，造成短波记忆。同一性矛盾性螺旋性斗争性对抗对立形而上唯物主义唯心主义兽性西瓜苹果香蕉梨子黄瓜南瓜西红柿白菜香葱花椒辣椒香菜车厘子疾速记忆之后的内容是还没有消化的内容，很容易遗记，须要反复的了解，将常识内化成本人的认知的一部分，并且要去表白，传递进来，让内化的常识可能使能，边学边实际能力死记硬背。孤尽老师以记忆这一因素为启发点，通知咱们要造就疾速学习的能力，考究办法和致力，并且要学会如何学习。值得分享的是，很多时候咱们是不晓得本人不晓得，没有认真去思考过如何学习自身这个命题，往往一头扎进本人的业务和工作中，不可自拔，没有跳进去看看一些基本的因素。再举个例子，Java中，LinkedList是单向链表还是双向链表？在很多开发同学的固化思维外面就是单向链表，并且在应用时也不分明是否是适合的场景，在学习的四部曲外面其实只做到了第一点，记住了有这样一个List子类，前面的三部曲通通没有做到。再如，浮点数为何会有精度问题，为什么损失精度后是这样一个后果，如果脑中没有呈现计算机浮点数清晰的存储结构图（有图像的信息有助于记忆），那在学习的过程中就有很大的缺失。单精度浮点数存储构造这样看来，你还会学习吗？四技术视角的学习思维从技术同学的角度登程聊学习思维，咱们无妨先从畛域驱动设计（Domain-Driven Design）开始。在撑持业务时，要正确地了解业务畛域，对问题域进行剖析和畛域常识建模，其中一种活泼的形式就是6W模型，即刻画场景的过程必须蕴含 Who、What、Why、Where、When 与 hoW 这六个因素，领域专家或业务分析师从畛域中提炼出“场景”，咱们在学习畛域时，就如同是在讲故事，又如同是在拍电影。6W 模型如下图所示： ...

关于vue.js:引领云原生发展浪潮-阿里云开启云原生大规模落地元年

简介：减速企业数字化翻新阿里云发表成立云原生实战联盟点击观看《原生 · 新生》视频 12 月 23 日，由阿里云主办的 “2020 云原生实战峰会” 隆重揭幕，此次峰会以“原生减速·数创降级”为主题，峰会主论坛上德勤中国合伙人刘俊龙、阿里云云原生利用平台负责人丁宇等人别离发表演讲，深剖云原生大规模落地现状，探讨企业级云原生如何助力企业数据上云，以及云原生数据智能与 AI 如何助力企业实时决策；并面向全行业成立云原生实战联盟，推动全行业的云原生实际过程。峰会分设教育实战专场、互动娱乐实战专场、企业 CIO 大咖面对面、互联网 CTO 研发效力三板斧等论坛，围绕“企业云原生落地实战”这一外围主题，竟然之家、T3 出行、玩物失意、好将来、江娱互动、玩吧、兴为教育、学霸君、VIPKID 为代表的十余家数字翻新先锋企业，与现场 300 余位技术管理者分享本身业务的云原生架构设计与技术建设的丰盛教训，独特探讨云原生在不同行业的最佳落地办法。阿里云云原生利用平台负责人丁宇新冠疫情期间，云计算向市场证实了本身价值，如何充沛开掘云红利成为企业抢滩数字翻新的事不宜迟。丁宇示意，“云原生是开释云计算红利的最短门路，减速企业数字化翻新降级。当企业面对业务变动、迭代、翻新以及平安挑战时，云原生是实现资源高效极致弹性、利用麻利交付、业务智能化、外围业务平安保障的最佳路径。”会上，阿里云联结行业先锋企业广州趣丸、学霸君、玩物失意，以及云原生产业头部企业杭州谐云、博睿宏远、易联通达、德勤和用友政务，独特发表成立云原生实战联盟，致力于打造云原生落地最佳实际标杆，推动云原生在全行业的落地普惠。实战联盟成立云原生实战联盟正式成立与此同时，云原生实战联盟将在后续开展理论落地流动，真正践行技术普惠。其中包含：成立 CTO 数创先锋营，面向全国 100+ 互联网 CTO，在行业洞察、技术策略及组织治理等方面深度交换，打造高质量的技术管理者顾问团；成立互联网技术实战营，基于业务场景，面向技术人打造场景化的技术实战空间。其中，CTO 数创先锋营在此次峰会上发展了“研发效力三板斧”的课程，阿里云云效 DevOps 平台高级解决方案架构师张裕，提出了云原生 DevOps 降级五步曲。现场案例与办法解说联合，帮忙企业从手工不确定交付运维、工具辅助窗口制交付运维、管控的继续交付和自动化运维、继续交付和人工辅助智能，走向全链路继续交付和自运维的云原生门路，最终落地实际云原生 DevOps，助力企业实现 10 倍效力晋升。阿里云数据库产品事业部总经理占超群面对数据量井喷、实时化、业务交融多样化等挑战，云计算时代的数据库须要进行交融翻新和改革，企业须要更加智能化、一体化、麻利化的数据库平台。阿里云数据库产品事业部总经理占超群示意，“阿里云企业级数据库系统全面云原生化，减速数据处理向分布式、数据库与大数据一体化、在离线一体化演进，一站式解决数据生产、存储、剖析、生产的全链路用户需要。利用云原生数据库技术和产品体系，助力业务进行数智化翻新更实时在线、更全局、更简略、更麻利。例如：中国邮政引入云原生分布式数据库 PolarDB-X 和云原生数据仓库 AnalyticDB，实现全国业务大集中，在订单业务峰值超过 1 亿件的状况下，零碎平滑稳固运行。” 阿里云通用计算平台负责人关涛为应答更加复杂多变的业务环境，企业须要更加高效智能的实时决策能力。阿里云通用计算平台负责人关涛示意，“基于极致弹性、扩展性、存储拆散、免运维、容灾的云原生架构，企业级数据智能与 AI 进一步具备了智能剖析与决策的能力，例如基于实时计算 Flink 和 SaaS 模式云数据仓库 MaxCompute，天猫双11 业务决策从 ‘3 小时’ 降级为实时，流量匹配效率晋升 300%。” 洞悉云原生在行业的落地现状、挑战与实际，是致力于数字翻新企业的必修课。会上，围绕“企业级云原生数据库系统助力数据上云”的主题，T3 出行技术核心副总经理汤义强、竟然之家 IT 负责人薄青松、阿里云数据库产品事业部总经理占超群缺席圆桌会议，独特探讨“阿里云原生数据库如何让竟然之家、T3 出行的业务更快、更稳、更平安？”围绕“云原生数据智能与 AI 助力企业实时决策”的主题，玩物失意 CTO 张淼、好将来 AI 中台算法科学家杨非、江娱互动数据分析经理董文强、阿里云通用计算平台负责人关涛缺席圆桌会议，独特探讨“企业如何通过数据智能助力业务继续且衰弱的增长”。 ...

关于vue.js:RegExp正则表达式

么是正则表达式（Regular Expression）？可用于对指标字符串进行匹配的_字符串_表达式。经常须要匹配检测工具。一般字符字母、数字、汉字、其余没有非凡定义的标点符号等非打印字符打印不进去的字符：缩进：t，又称之为“制表符”换行：n特殊字符又称为“元字符”，可匹配 '多种字符'，罕用的有： d：任意一个数字，0~9 中的任意一个（digit）w：任意一个字母或数字或下划线，也就是 A~Z,a~z,0~9,_ 中任意一个（word）s：包含空格、制表符、换页符等空白字符的其中任意一个（space）.：小数点能够匹配除了换行符（n）以外的任意一个字符留神下面的字母全是小写，如果变成大写就“取反”，比方： D：所有非数字的字符W：所有非字母数字下划线的字符S：所有非空格（制表/换行等）字符也能够将“非打印字符”视为特殊字符边界符号不匹配任何字符： ^：与字符串开始的中央匹配$：与字符串完结的中央匹配@想一想@：^和$有什么用呢？b：匹配一个单词边界，也就是单词和空格之间的地位（break）转义字符上述特殊字符都有非凡含意（比方：^ $ .），但如果咱们就须要匹配这些特殊字符呢？用一个斜杠示意本义（即勾销其非凡含意）即可，比方：^ $ . 抉择特殊字符有时候还不能满足咱们的要求，比如说咱们可能须要匹配一些自定义规定的字符：奇数数字：能够把所有满足条件的字符列举进去，即：[13579] 5-9之间的数字：能够用短横线（-）将起止数字连接起来，即[5-9] 字母也一样，比方[a-d]，或者[X-Z] 不能为0的数字：能够用小尖符号示意取反，即：1 单个字符用方括号 [ ]。多个字符就须要用竖线（|）示意"或" 关系。比方：在这句话 this is a goverment for the people, thank you! 外面找到this和the，其正则表达式就能够是： this|the或者用圆括号包裹可选局部 th(is|e)留神：方括号中应用竖线（|）没有“或”的意思^符号在圆括号中没有“取反”的意思反复无论一般/非凡，正则表达式的字符都能够组合应用，比方： 1d：示意以1结尾，前面跟一个数字但我想以1结尾，前面跟9个或者若干个数字呢？能够用{}指定可反复次数： {n}：表达式反复n次，比方：点击测试 "w{2}" 相当于 "ww"； "a{5}" 相当于 "aaaaa"{m,n}：表达式至多反复m次，最多反复n次，比方："ba{1,3}"能够匹配 "ba"或"baa"或"baaa"{m,}：表达式至多反复m次，比方："wd{2,}"能够匹配 "a12","_456","M12344"...简写形式 ?：匹配表达式0次或者1次，相当于 {0,1}，比方： "1D?"能够匹配 "1","1+"，不能匹配"11"+：表达式至多呈现1次，相当于 {1,}，比方： "1D+"能够匹配 "1+"，不能匹配"1","1-"...：表达式不呈现或呈现任意次，相当于 {0,}，比方： "1D"能够匹配 "1","1+","1++"...PS：sS和.的区别是什么？贪心与非贪心默认取最大长度的匹配后果：贪心模式。比方这句话 this is a goverment, for the people, thank you! 里我想取this is a goverment,（以逗号完结） ...

关于vue.js:vue30-mixin-混入

首先是官网定义：混入 (mixin) 提供了一种非常灵活的形式，来散发 Vue 组件中的可复用性能。一个混入对象能够蕴含任意组件选项。当组件应用混入对象时，所有混入对象的选项将被“混合”进入该组件自身的选项。艰深来讲，就是 mixin 中的属性，比方 data、methods 或者自定义属性，将被混入到全副或者指定的组件中，让这些组件能够调用 mixin 中所定义的属性或者事件全局 mixin首先，咱们间接定义全局的 mixin // 定义全局 mixinapp.mixin({ message: 'mixin', data() { return { count: 100, }; },});混入 data全局mixin默认会混入所有组件中，接下来，咱们再定义一个组件，模板中插入 message 字段，如下所示： const app = Vue.createApp({ template: ` <div>{{message}}</div> `,}); 此时mixin中的data属性将会混入到组件中，尽管组件的 data 中并没有蕴含 message 字段，然而在运行的页面中仍然显示出 message 的值 mixin message。当初，咱们在组件外部的 data 中也增加 message 字段。 const app = Vue.createApp({ data() { return { message:'app message' } } ...}); 这时候，运行页面，模板中的内容将显示组件中 data 里的值 app message，这阐明，组件外部 data 的优先级是高于 mixin 外部 data 的优先级的。 ...

关于vue.js:FPGA基于FPGA的数字跑表

版权基于FPGA的数字跑表的设计与实现一、设计要求用FPGA设计并实现一个数字跑表，范畴为0~59分59.99秒。能够实现数字跑表进行启动、进行计时和显示读数三个操作，能够在数码管上显示读数。二、设计工作2.1根本局部（1）理解FPGA开发板，理解数字跑表的性能。（2）VHDL语言编程实现数字跑表零碎的功能模块，数字跑表进行启动、进行、显示读数操作，并具备计时清零性能；（3）程序编译正确，在Modelsim中仿真正确；（4）采纳FPGA开发板作为开发平台，可能下载验证。2.2进步局部可能采纳原理图设计法设计。三、设计原理图3.1零碎框图如图，如果要实现计时范畴为0~59分59.99秒的数字跑表并在数码管上显示读数，那么须要设计时钟电路、分频电路、计数器电路、译码显示1电路。将DE1-SOC开发套件中提供的50MHZ时钟进行分频至100HZ后送入100进制计数器，计数器计满100后收回进位信号送入计秒模块的60进制计数器，计数器满60后收回进位信号送入计分模块的60进制计数器，每个计数器别离连贯不同的数码管显示电路，实时显示计时成果。因而应用原理图输出设计法，应用QuartusII软件编写元件代码和绘制原理图，而后进行综合仿真。四、设计方案4.1 硬件设计本设计须要用到一个稳固的50MHZ的时钟，一个500000分频的分频器，一个100进制计数器，两个60进制计数器，两个拨码开关，六个7段数码管。综上所述，DE1-SOC开发套件提供的FPGA芯片可满足对分频器和计数器的设计需要，丰盛的外部设备可满足对数码管和拨码开关的需要。图4.1 DE1-SOC开发板实物图 4.2 软件设计一百进制计数器采纳两个十进制计数器级联的形式实现，六十进制计数器采纳十进制和六进制计数器级联的形式实现。4.2.1 分频器 `LIBRARY IEEE;USE IEEE.STD_LOGIC_1164.ALL;USE IEEE.STD_LOGIC_ARITH.ALL;USE IEEE.STD_LOGIC_UNSIGNED.ALL;ENTITY CLOCK ISPORT(CLK:IN STD_LOGIC; CLKOUT:OUT STD_LOGIC);END CLOCK;ARCHITECTURE RTL OF CLOCK ISSIGNAL CLK_1_REG: STD_LOGIC := '1';BEGINCLKOUT<=CLK_1_REG;PROCESS(CLK)VARIABLE COUNT :INTEGER RANGE 0 TO 500000;BEGIN IF(CLK'EVENT AND CLK='1')THEN IF COUNT = 500000 THEN COUNT:=0; CLK_1_REG<=NOT CLK_1_REG; ELSE COUNT:=COUNT+1; END IF; END IF; END PROCESS; END RTL;` * 1* 2* 3* 4* 5* 6* 7* 8* 9* 10* 11* 12* 13* 14* 15* 16* 17* 18* 19* 20* 21* 22* 23* 24* 254.2.2 数码管显示电路 ...

关于vue.js:SQL-Server创建主键自增列我们可以使用

SQL 588988 Server创立主键自增列咱们能够应用”ID INT IDENTITY(1,1) NOT NULL PRIMARY KEY“一步到位创立，而Oracle创立主键自增列和SQL Server不同，步骤会简单一点，具体如下： --1.创立表CREATE TABLE TESTTABLE (ID NUMBER(8) NOT NULL PRIMARY KEY,NAME NVARCHAR2(10) NOT NULL);--2.创立一个序列(sequence)CREATE SEQUENCE TESTTABLE_SEQUENCEINCREMENT BY 1-- 每次加几START WITH 1-- 从1开始计数NOMAXVALUE-- 不设置最大值NOCYCLE-- 始终累加，不循环NOCACHE-- 不建缓冲区--3.创立一个触发器CREATE OR REPLACE TRIGGER TESTTABLE_TRIGGERBEFORE INSERT ON TESTTABLEFOR EACH ROWBEGINSELECT TESTTABLE_SEQUENCE.NEXTVAL INTO :NEW.ID FROM DUAL;END;

关于vue.js:Oracle主键自增列

SQL Server创立主键自增列咱们能够应用”ID INT IDENTITY(1,1) NOT NULL PRIMARY KEY“一步到位创立，而Oracle创立主键自增列和SQL Server不同，步骤会简单一点，具体如下： --1.创立表CREATE TABLE TESTTABLE (ID NUMBER(8) NOT NULL PRIMARY KEY,NAME NVARCHAR2(10) NOT NULL);--2.创立一个序列(sequence)CREATE SEQUENCE TESTTABLE_SEQUENCEINCREMENT BY 1-- 每次加几START WITH 1-- 从1开始计数NOMAXVALUE-- 不设置最大值NOCYCLE-- 始终累加，不循环NOCACHE-- 不建缓冲区--3.创立一个触发器CREATE OR REPLACE TRIGGER TESTTABLE_TRIGGERBEFORE INSERT ON TESTTABLEFOR EACH ROWBEGINSELECT TESTTABLE_SEQUENCE.NEXTVAL INTO :NEW.ID FROM DUAL;END;测试通达网络

关于vue.js:Docker-新发布的-hubtool-可直接查看账户配额

Docker Desktop v3.0 已于前两周正式公布，从这个版本起，Docker 官网承诺每次的更新将以增量更新的形式来提供，以便缩小下载包的体积，晋升效率。除了将 Docker Engine 更新至 v20.10.0 外，也对其余的依赖做了更新，如下图：最吸引我的是本次新增的 Docker Hub Tool v0.2.0 ，它是 Docker 官网提供的 Docker Hub CLI 工具，具备治理 DockerHub 上的帐号，镜像等相干资源的能力。以下，我来为你介绍下 Hub Tool 的次要性能。 (MoeLove) ➜ hub-tool -hA tool to manage your Docker Hub imagesUsage: hub-tool hub-tool [command]Available Commands: account Manage your account help Help about any command login Login to the Hub logout Logout of the Hub org Manage organizations repo Manage repositories tag Manage tags token Manage Personal Access Tokens version Version information about this toolFlags: -h, --help help for hub-tool --verbose Print logs --version Display the version of this toolUse "hub-tool [command] --help" for more information about a command. 从一级菜单来看，次要性能包含： ...

关于vue.js:vue-源码解析321

Vue源码解析之前咱们解析了mini-vue的响应式实现，和虚构dom库的实现，当初咱们就来解析一下vue外部具体是如何做的，看看它在咱们繁难实现上减少了什么。筹备工作：首先下载一份vue源代码地址：https://github.com/vuejs/vue这个版本是2.6的，剖析这个版本的起因：到目前为止vue3.0正式版还没有公布新版本公布后，现有我的项目还不会立刻降级到3.0,2.x还有很长一段过渡期如果对3.0有趣味，也能够下下载看看：https://github.com/vuejs/vue-... src/platform 文件夹下是 Vue 能够构建成不同平台下应用的库，目前有 weex 和 web，还有服务器端渲染的库这是咱们下载下来的一个vue源码src下代码目里构造代码里应用了flow做动态类查看打包工具应用的Rollup，比照webpack更轻量，Webpack 把所有文件当做模块，Rollup 只解决 js 文件更适宜在 Vue.js 这样的库中应用，Rollup 打包也不会生成冗余的代码。这里在做一个调试的辅助工作： vscode中关上设置把javascript.validate.enable临时设置为false,不查看javascript的语法问题，避免flow报错。这回源码里局部代码是没有高亮显示的，vscode下载一个插件Babel javascript开其它就有高亮显示了npm i 下载依赖这里举荐用淘宝源cnpm 不然有的包下载不下来而后批改一下 package.json文件scripts中dev命令： "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",-w是监听文件变动，文件变动主动打包 -c设置配置文件而后设置sourcemap不便调试最初设置下环境变量web-full-dev，这个意思就是应用 web平台下带编译器的 dev开发版本 umd是通用版本，默认vue-cli生成我的项目应用的是vue.runtime.esm.js版本，esm格局被设计成能够动态剖析，所以打包工具能够利用这点来进行tree-shaking摇树。咱们调试的是 web下带编译器（编译器：用来将模板字符串（new Vue时传入template选项时须要编译器把template转换成render函数）编译成为 JavaScript 渲染函数的代码，体积大、效率低）的 dev开发版本也就是web-full-dev 找到config文件，能够看到这里能够看到咱们以后版本的入口文件，以及输入门路文件。而后筹备工作做好，咱们就能够启动npm run dev，关上examples目录下子集目录里的html进行调试了.(这里是通过serve . 又启动了一个服务,间接关上文件应该也能够),接下来就要正式进入咱们的剖析了。咱们分三个方向来进行解析响应式原理虚构dom剖析模板编译和组件化

关于vue.js:都-2021-年了Serverless-能取代微服务吗

简介：马上就要 2021 年了，Serverless 是否终将取代微服务？从微服务到 Serverless 须要通过怎么的门路？本文将对 Serverless 与微服务在劣势劣势上进行深度比照。起源 | Serverless 公众号编译 | OrangeJ作者 | Mariliis Retter “Serverless 能取代微服务吗？” 这是知乎上 Serverless 分类的高热话题。有人说微服务与 Serverless 是相背离的，尽管咱们能够基于 Serverless 后端来构建微服务，但在微服务和 Serverless 之间并不存在间接的门路。也有人说，因为 Serverless 内含的 Function 能够视为更小的、原子化的服务，人造地符合微服务的一些理念，所以 Serverless 与微服务是天作之合。马上就要 2021 年了，Serverless 是否终将取代微服务？从微服务到 Serverless 须要通过怎么的门路？本文将对 Serverless 与微服务在劣势劣势上进行深度比照。从概念上讲，微服务完全符合 Serverless 性能构造，微服务能够轻松实现不同服务的部署和运行时隔离。在存储方面，像 DynamoDB 这样的服务能够让每个微服务领有独立的数据库，并独立地进行扩大。在咱们深入探讨细节之前，先别急着“站队”，无妨先基于你团队的理论状况，实在的去思考是否适宜应用微服务，千万不要因为 "这是趋势 "而去抉择它。微服务在 Serverless 环境下的劣势可抉择的可扩展性和并发性Serverless 让治理并发性和可扩展性变得容易。在微服务架构中，咱们最大限度地利用了这一点。每一个微服务都能够依据本人的需要对并发性/可扩展性进行设置。从不同的角度来看这十分有价值：比方加重 DDoS 攻打可能性，升高云账单失控的财务危险，更好地分配资源......等等。细粒度的资源分配因为可扩展性和并发性能够自主抉择，用户能够细粒度管制资源分配的优先级。在 Lambda functions 中，每个微服务都能够依据其需要，领有不同级别的内存调配。比方，面向客户的服务能够领有更高的内存调配，因为这将有助于放慢执行工夫；而对于提早不敏感的外部服务，就能够用优化的内存设置来进行部署。这一个性同样实用于存储机制。比方 DynamoDB 或 Aurora Serverless 数据库就能够依据所服务的特定（微）服务的需要，领有不同级别的容量调配。 ...

关于vue.js:vue模板编译原理

转自微信公众号：前端时空；来源于微信公众号：更了不起的前端；作者: shenfq写在结尾写过 Vue 的同学必定体验过， .vue 这种单文件组件有如许不便。然而咱们也晓得，Vue 底层是通过虚构 DOM 来进行渲染的，那么 .vue 文件的模板到底是怎么转换成虚构 DOM 的呢？这一块对我来说始终是个黑盒，之前也没有深入研究过，明天打算一探到底。 <center>Virtual Dom</center> Vue 3 公布之后，原本想着间接看看 Vue 3 的模板编译，然而我关上 Vue 3 源码的时候，发现我如同连 Vue 2 是怎么编译模板的都不晓得。从小鲁迅就通知咱们，不能一口吃成一个瘦子，那我只能回头看看 Vue 2 的模板编译源码，至于 Vue 3 就留到正式公布的时候再看。 Vue 的版本很多人应用 Vue 的时候，都是间接通过 vue-cli 生成的模板代码，并不知道 Vue 其实提供了两个构建版本。 vue.js：残缺版本，蕴含了模板编译的能力；vue.runtime.js：运行时版本，不提供模板编译能力，须要通过 vue-loader 进行提前编译。 <center>Vue 不同构建版本</center> <center>完整版与运行时版区别</center> 简略来说，就是如果你用了 vue-loader ，就能够应用 vue.runtime.min.js，将模板编译的过程交过 vue-loader，如果你是在浏览器中间接通过 script 标签引入 Vue，须要应用 vue.min.js，运行的时候编译模板。编译入口理解了 Vue 的版本，咱们看看 Vue 完整版的入口文件（src/platforms/web/entry-runtime-with-compiler.js）。 // 省略了局部代码，只保留了要害局部import { compileToFunctions } from './compiler/index'const mount = Vue.prototype.$mountVue.prototype.$mount = function (el) { const options = this.$options // 如果没有 render 办法，则进行 template 编译 if (!options.render) { let template = options.template if (template) { // 调用 compileToFunctions，编译 template，失去 render 办法 const { render, staticRenderFns } = compileToFunctions( template, { shouldDecodeNewlines, shouldDecodeNewlinesForHref, delimiters: options.delimiters, comments: options.comments, }, this ) // 这里的 render 办法就是生成生成虚构 DOM 的办法 options.render = render } } return mount.call(this, el, hydrating)}再看看 ./compiler/index 文件的 compileToFunctions 办法从何而来。 ...

关于vue.js:vue-连线-svg

<template> <div class="index"> <div class="img-box"> <div @click="drawlines('img', '50,0,1')"></div> <div @click="drawlines('img', '250,0,2')"></div> <div @click="drawlines('img', '450,0,3')"></div> </div> <svg> <line v-for="(val, key) in svgArr" :key="key" :x1="val.x" :y1="val.y" :x2="val.x1" :y2="val.y1" :style="{ stroke: val.isTrue ? 'green' : 'rgb(255, 0, 0)', 'stroke-width': 5, 'stroke-dasharray': val.isTrue ? 0 : 8, }" :class="{ 'err-line': val.isTrue ? false : true }" /> </svg> <div class="english"> <div @click="drawlines('eng', '50,100,3')">red</div> <div @click="drawlines('eng', '250,100,2')">blue</div> <div @click="drawlines('eng', '450,100,1')">skyblue</div> </div> </div></template><script>export default { components: { Demo, }, data() { return { textObj: { title: '', }, isClick: false, svgArr: [], svgObj: {}, isDrawlines: true, } }, computed: {}, watch: {}, methods: { /** * 图案连线点击事件 * 如果对象只有 img || english 属性时阐明以后只有一个点不进行push数组（联线） */ drawlines(type, xy) { /** * 如果有谬误禁止再次画线 */ if (!this.isDrawlines) { return } if (!this.svgObj.type) { this.svgObj[type] = { x: xy.split(',')[0], y: xy.split(',')[1], z: xy.split(',')[2], } } /** * 只有对象长度时2的时候push */ if (Object.keys(this.svgObj).length == 2) { let obj = { x: this.svgObj.img.x, y: this.svgObj.img.y, x1: this.svgObj.eng.x, y1: this.svgObj.eng.y, isTrue: this.svgObj.img.z == this.svgObj.eng.z ? true : false, } /** * 去重操作 */ if (this.unique(obj)) { this.svgArr.push(obj) /** * 如果有谬误 1s 后主动删除 */ if (!obj.isTrue) { this.isDrawlines = false setTimeout(() => { this.svgArr.splice(this.svgArr.length - 1, 1) this.isDrawlines = true }, 3000) } this.svgObj = {} } } }, unique(obj) { var str = JSON.stringify(obj) var num = 0 this.svgArr.forEach((val) => { if (JSON.stringify(val) === str) { num = 1 } }) return num == 0 ? true : false }, }, created() {}, mounted() {},}</script><style scoped>.img-box,.english { margin: 0 auto; width: 500px; height: 100px; display: flex; justify-content: space-between;}.img-box div,.english div { width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; font-size: 30px; color: #ffffff;}.img-box div:nth-child(1) { background-color: red;}.img-box div:nth-child(2) { background-color: blue;}.img-box div:nth-child(3) { background-color: skyblue;}.english div:nth-child(1) { background-color: red;}.english div:nth-child(2) { background-color: blue;}.english div:nth-child(3) { background-color: skyblue;}svg { width: 500px; height: 100px;}@keyframes blink { 0% { opacity: 0; } 35% { opacity: 0.35; } 55% { opacity: 0.55; } 75% { opacity: 0.75; } 100% { opacity: 0; }}@-webkit-keyframes blink { 0% { opacity: 0; } 35% { opacity: 0.35; } 55% { opacity: 0.55; } 75% { opacity: 0.75; } 100% { opacity: 0; }}svg .err-line { animation: blink 0.5s infinite ease-in; -webkit-animation: blink 0.5s infinite ease-in; /*Safari and Chrome*/}</style>

关于vue.js:圣诞节要到了如何制作自己的一个给头像戴帽子的小程序请看这

一.技术栈微信小程序 uniapp框架二.首先先申请本人的集体小程序首先进入这个微信官网https://mp.weixin.qq.com/wxop...注册一个集体小程序按步骤申请就好 1.进入小程序后盾拿到appid 2.下载微信开发者工具通过这个网站下载微信开发者工具 https://developers.weixin.qq.... 3.下载hbuilderx编辑器https://www.dcloud.io/hbuilde... 三.下载戴头像的小程序我的项目1.下载我的项目点击进入我的项目网站，感激作者提供的插件https://ext.dcloud.net.cn/plu... 而后点引入插件即可，把我的项目导入编辑器里 2.配置我的项目这里填入微信小程序后盾拿到的appid 3.发行小程序最初点发行即可，就能够看到咱们的小程序了，而后提交审核，后盾公布下就行了四.成果能够扫码看成果，有什么不懂的能够分割我 *

关于vue.js:一劳永逸解决基于-keepalive-的后台多级路由缓存问题

用过 vue-element-admin 的同学肯定很分明，路由的配置间接关系侧边栏导航菜单的展现，也得益于这种设计思路，简直大部分后盾框架都采纳这个计划，当然也包含了我写的 Fantastic-admin 这个中后盾框架。但这个计划有个显著的问题，就是为了实现多级侧边栏导航菜单，则须要将路由配置成多级嵌套的模式，一旦超过两级，达到三级甚至更多级，就须要减少一个空布局页面（Empty.vue）用来给 component 应用，仅仅是为了生成层级菜单。此时就呈现了一个问题，因为 keep-alive 是在 Layout 上解决的，所以超过两级以上的路由都会变得难以解决，也没有一个绝对完满的解决方案。在思考并解决这个问题之前，咱们先来看下页面大抵构造： +------------------------------+| Layout || +------------------------+ || | Empty | || | +------------------+ | || | | Page | | || | +------------------+ | || +------------------------+ |+------------------------------+首先 keep-alive 是在 Layout 上进行解决，如果不缓存 Empty ，则 Empty 上面的页面将无奈被缓存，如果缓存 Empty ，又会导致 Empty 外面的所有页面都被缓存，无奈按需革除，置信接触过的同学必定感同身受其中的大坑。解决思路其实有一个绝对清晰简略的解决思路，既然缓存二级路由是没问题，而超过二级的两头层级页面也是没太大意义的，那为什么不将路由间接解决成二级，这样页面显示也就是二级的构造。 +------------------------------+ +------------------------------+| Layout | | Layout.vue || +------------------------+ | | +------------------------+ || | Empty | | +----------> | | Page | || | +------------------+ | | | | | || | | Page | | | | | | || | +------------------+ | | | | | || +------------------------+ | | +------------------------+ |+------------------------------+ +------------------------------+这里须要留神，路由配置还是放弃多级嵌套的模式，而这个配置并非最终注册应用的路由，仅仅是提供侧边栏导航菜单应用，同时再生成一份用于动静注册路由的数据，图例如果没看明确的话，能够看上面两组数据。 ...

关于vue.js:Saber前端框架用ESlint规范统一项目代码风格

一、前言因为公司Saber前端框架没有进行ESlint代码标准的束缚，导致在开发过程中，各种代码格调迥异，无奈造成标准，造成当前保护的艰难。为此，我司决定用ESlint标准对立我的项目格调。二、代码格调整体格调 javascript大体上遵循ESlint标准html、wxml大体上遵循prettyhtml标准javascript细节调整结尾无分号超过140个字符换行应用单引号无尾随逗号箭头函数单个参数不加分号函数申明时禁止圆括号前有空格三、后期筹备参考VS Code配置主动格式化，对立代码标准四、我的项目增加ESlint1、在我的项目.eslintrc.js中增加函数申明时禁止圆括号前有空格规定解决Prettier格式化时与ESlint标准抵触报错。抵触起因可参考prettier 不反对函数后空格? 看社区怎么说 // 函数申明时禁止圆括号前有空格'space-before-function-paren': 'off' 2、我的项目根目录增加.prettierrc，规定Prettier格式化规定解决格式化js文件时，定义的规定没有失效。因为.editorconfig格式化高于编译器的格式化规定，导致Prettier定义的格式化没失效。没有失效起因可参考EditorConfig-优先级 { "semi": false, "printWidth": 140, "singleQuote": true, "trailingComma": "none", "arrowParens": "avoid"} 3、我的项目增加ESlintvue add @vue/eslint抉择Standard和Lint on Save 4、批改报错信息批改报错信息有两种，一种是疏忽文件查看，暗藏报错信息；第二种是依据报错信息规定批改。以下提供两种形式二选其一即可疏忽文件查看，暗藏报错信息疏忽整个文件查看，个别写在文件头部/* eslint-disable */疏忽单行查看/* eslint-disable-line */疏忽下一行测验/* eslint-disable-next-line */疏忽多行查看/* eslint-disable */// js code/* eslint-enable */疏忽具体谬误类型 /* eslint-disable-line [谬误类型] */ 依据报错信息进行批改没有用驼峰命名没有用强等===或强不等!==框架代码自身有误解决形式：为了框架能正确运行，如果是框架自身的报错信息，用疏忽文件或单行文件进行批改，本人写的代码严格遵循ESlint标准。

关于vue.js:vue26-实现tinymce5富文本编辑器以及图片上传

装置tinymcenpm install tinymce -Snpm install @tinymce/tinymce-vue -S 下载中文语言包地址：https://www.tiny.cloud/get-ti...下载选中的中文包下载完之后在我的项目里新建public文件夹 1）在public目录下新建tinymce文件夹，并将下载的语言包解压到该目录下 2）在node_modules外面找到tinymce，将skins目录复制到public/tinymce外面，目录如下： 3.tinymce应用1）封装组件 <template> <div class="tinymce-editor"> <Editor :id="tinymceId" :init="init" :disabled="disabled" v-model="myValue" @onClick="onClick" ></Editor> </div></template><script> import axios from "axios"; import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入不显示 import Editor from '@tinymce/tinymce-vue'//编辑器引入 import 'tinymce/themes/silver/theme'//编辑器主题 import 'tinymce/icons/default' //引入编辑器图标icon，不引入则不显示对应图标 // 引入编辑器插件（根本收费插件都在这儿了） import 'tinymce/plugins/advlist' //高级列表 import 'tinymce/plugins/autolink' //主动链接 import 'tinymce/plugins/link' //超链接 import 'tinymce/plugins/image' //插入编辑图片 import 'tinymce/plugins/lists' //列表插件 import 'tinymce/plugins/charmap' //特殊字符 import 'tinymce/plugins/media' //插入编辑媒体 import 'tinymce/plugins/wordcount'// 字数统计 import Cookies from "js-cookie"; const fonts = [ "宋体=宋体", "微软雅黑=微软雅黑", "新宋体=新宋体", "黑体=黑体", "楷体=楷体", "隶书=隶书", "Courier New=courier new,courier", "AkrutiKndPadmini=Akpdmi-n", "Andale Mono=andale mono,times", "Arial=arial,helvetica,sans-serif", "Arial Black=arial black,avant garde", "Book Antiqua=book antiqua,palatino", "Comic Sans MS=comic sans ms,sans-serif", "Courier New=courier new,courier", "Georgia=georgia,palatino", "Helvetica=helvetica", "Impact=impact,chicago", "Symbol=symbol", "Tahoma=tahoma,arial,helvetica,sans-serif", "Terminal=terminal,monaco", "Times New Roman=times new roman,times", "Trebuchet MS=trebuchet ms,geneva", "Verdana=verdana,geneva", "Webdings=webdings", "Wingdings=wingdings,zapf dingbats" ]; export default { components: { Editor }, props: { //内容 value: { type: String, default: '' }, //是否禁用 disabled: { type: Boolean, default: false }, //插件 plugins: { type: [String, Array], default: 'advlist autolink link image lists charmap media wordcount' }, //工具栏 toolbar: { type: [String, Array], default: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table' } }, data() { return { //初始化配置 tinymceId: 'tinymce', myValue :this.value, init: { selector: '#tinymce', language_url: '/tinymce/langs/zh_CN.js',//汉化门路是自定义的，个别放在public或static外面 language: 'zh_CN', skin_url: '/tinymce/skins/ui/oxide',//皮肤 plugins: this.plugins,//插件 //工具栏 toolbar: this.toolbar, toolbar_location: '/', fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', //字体大小 font_formats: fonts.join(";"), height: 500,//高度 placeholder: '在这里输出文字', branding: false,//暗藏右下角技术支持 //图片上传 images_upload_handler: function (blobInfo, success, failure) { //文件上传的formData传递，遗记为什么要用这个了 const isAccord = blobInfo.blob().type === 'image/jpeg' || blobInfo.blob().type === 'image/png' || blobInfo.blob().type === 'image/GIF' || blobInfo.blob().type === 'image/jpg' || blobInfo.blob().type === 'image/BMP'; if (blobInfo.blob().size/1024/1024>2) { failure("上传失败，图片大小请管制在 2M 以内") } else if (blobInfo.blob().type == isAccord) { failure('图片格式谬误') } else { let formData = new FormData() // 服务端接管文件的参数名，文件数据，文件名 formData.append('file', blobInfo.blob(), blobInfo.filename()) axios({ method: 'POST', headers: { Authorization: 'bearer ' + Cookies.get('access_token') }, // 这里是你的上传地址 url: window.SITE_CONFIG['apiURL'] + '/oss/file/upload', data: formData, }).then((res) => { console.log(res) // 这里返回的是你图片的地址 success(res.data.data.url) }).catch(() => { failure('上传失败') }) } } } } }, watch: { //监听内容变动 value(newValue) { this.myValue = (newValue == null ? '' : newValue) }, myValue (newValue) { if(this.triggerChange){ this.$emit('change', newValue) }else{ this.$emit('input', newValue) } } }, mounted () { tinymce.init({}) // console.log(this.toolbar,'======') }, methods: { onClick(e) { this.$emit('onClick', e, tinymce) }, //能够增加一些本人的自定义事件，如清空内容 clear() { this.myValue = '' } } }</script>注：当遇到报错信息 Uncaught SyntaxError: Unexpected token '<' 时，查看引入的语言包和编辑器主题的门路是否正确语言包的门路引入不须要加 public/static 文件夹4.组件注册及应用 ...

关于vue.js:Vue-组件

Vue 组件组件的次要目标是为了复用，升高耦合，在构建大型零碎时是十分有必要的，简直所有的利用界面都能够形象成一个组件树在VUE2里，能够应用如下形式创立一个新组件 Vue.component('example', { template: ` <span>I am a component</span>`,})<div>  <example></example></div>显示成果，就和你间接把<span>I am a component</span>写进去的成果是一样的通过这种形式，就能够定义一个新的名为example的组件，当你想应用它的时候，能够像上面这样创立一个组件的实例

关于vue.js:vue学习笔记is属性使用

在写table时,tr标签用组件包裹，尽管页面上显示进去，然而代码是有问题的，tr标签跑到table标签里面去了，与table标签并列 <div id="app"> <table> <row></row> </table> </div> <script> Vue.component("row", { template: `<tr><td>test</td></tr>` });解决办法：改成用is属性包裹，不必is属性会被认为是特定标签内的有效内容 <tr is="row"></tr>相干内容查阅官网文档：解析DOM模板注意事项

关于vue.js:阿里云OSS文件上传及vue-axios终止当前请求

一、前言在我的项目中，很多状况下咱们都会用到文件上传，然而当某个文件太大，或者不小心选错了文件时，咱们就须要终止以后的申请，从新上传文件。同时也能进步网站性能，去除多余申请。二、代码当初咱们上传文件，很多都会上传到OSS，当初以阿里云的OSS上传为例(仅为前端代码，Vue实例)： uplodaFile组件封装<template> <div :class="$style.uploadPack"> <input type="file" @change="$_onUpload" /> <slot /> </div></template><script>import { commonService } from '@/common/service' // 封装的接口申请，依据我的项目状况而定import axios from 'axios'export default { methods: { async $_onUpload(e) { this.$emit('input', { status: 'begin', data: null }) const files = e.target.files let formData = new FormData() const fileName = files[0].name /** getOssToken 返回的数据格式 { expire: 1607499265904 params: { signature: "1", OSSAccessKeyId: "1", key: "1", policy: "1", success_action_status: "200", x-oss-security-token: "1" }, url: "http://xxx.aliyuncs.com" } */ const { data } = await commonService.getOssToken({ filename: fileName }) // 获取阿里云oss返回的数据 Object.keys(data.result.params).forEach(key => { formData.append(key, data.result.params[key]) }) formData.append('file', files[0]) const self = this try { /** * 留神此处接口没有数据返回只有状态 * 胜利后须要本人依据 getOssToken 接口返回的数据组装返回 */ await axios.post(data.result.url, formData, { cancelToken: new axios.CancelToken(function executor(c) { self.source = c }), }) /** * 通过同步数据给父组件 */ this.$emit('input', { status: 'end', data: { file_name: fileName, url: data.result.url + '/' + data.result.params['key'] } }) /** * 上传胜利后清空表单，防止重名文件不再次执行change事件 */ e.target.value = '' } catch (err) { /** * 是否是手动终止勾销导致的失败 */ if (axios.isCancel(err)) { this.$message.error(err.message) } else { this.$message.error('上传失败') } this.$emit('input', { status: 'end', data: {} }) e.target.value = '' } }, /** * 终止上传接口申请 */ cancelRequest() { if (typeof this.source === 'function') { this.source('勾销文件上传') } }, },}</script><style lang="scss" module>.uploadPack { position: relative; overflow: hidden; input { position: absolute; z-index: 1; width: 100%; height: 100%; opacity: 0; }}</style>组件应用<template> <div> <uploadPack v-model="packInfo" ref="uploadPack"> <a-button :loading="loading" type="primary">上传</a-button> </uploadPack> <a-button @click="cancelRequest"></a-button> </div><template><script>export default { data() { return { loading: false, fileData: {}, } }, watch: { /** * 监听文件上传的数据变动 */ packInfo(newValue) { if (newValue.status === 'begin') { this.loading = true } else if (newValue.status === 'end') { this.loading = false this.fileData = newValue.data } } }, methods: { /** * 终止上传 */ cancelRequest() { this.$refs['uploadPack'] && this.$refs['uploadPack'].cancelRequest() } }}<script>三、结语应用场景：页面中新增弹层中有须要上传文件，点敞开弹层按钮时须要终止以后申请。文件上传谬误，须要点击勾销，从新抉择。屡次申请时，终止上一次申请，例如搜寻框，每输出一个字符都要发送一次申请，但输出过快的时候其实后面的申请并没有必要真的发送进来。

关于vue.js:Vue中computed和watch的区别

计算属性computed：反对缓存，只有依赖数据产生扭转，才会从新进行计算不反对异步，当computed内有异步操作时有效，无奈监听数据的变动computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中申明过或者父组件传递的props中的数据通过计算失去的值如果一个属性是由其余属性计算而来的，这个属性依赖其余属性，是一个多对一或者一对一，个别用computed如果computed属性属性值是函数，那么默认会走get办法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set办法，当数据变动时，调用set办法。var vm = new Vue({ el: '#app', data: { message: 'hello' }, template: ` <div> <p>我是原始值: "{{ message }}"</p> <p>我是计算属性的值: "{{ computedMessage}}"</p> // computed 在 DOM 里间接应用不须要调用 </div> `, computed: { // 计算属性的 getter computedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }})后果：我是原始值: "Hello"我是计算属性的值: "olleH" 如果不应用计算属性，那么 message.split('').reverse().join('') 就会间接写到 template 里，那么在模版中放入太多申明式的逻辑会让模板自身过重，尤其当在页面中应用大量简单的逻辑表达式解决数据时，会对页面的可维护性造成很大的影响而且计算属性如果依赖不变的话，它就会变成缓存，computed 的值就不会从新计算所以，如果数据要通过简单逻辑来得出后果，那么就举荐应用计算属性侦听属性watch不反对缓存，数据变，间接会触发相应的操作。watch反对异步；监听的函数接管两个参数，第一个参数是最新的值；第二个参数是输出之前的值；当一个属性发生变化时，须要执行对应的操作；一对多；监听数据必须是data中申明过或者父组件传递过去的props中的数据，当数据变动时，触发其余操作，函数有两个参数：new Vue({ data: { n: 0, obj: { a: "a" } }, template: ` <div> <button @click="n += 1">n+1</button> <button @click="obj.a += 'hi'">obj.a + 'hi'</button> <button @click="obj = {a:'a'}">obj = 新对象</button> </div> `, watch: { n() { console.log("n 变了"); }, obj:{ handler: function (val, oldVal) { console.log("obj 变了") }, deep: true // 该属性设定在任何被侦听的对象的 property 扭转时都要执行 handler 的回调，不管其被嵌套多深 }, "obj.a":{ handler: function (val, oldVal) { console.log("obj.a 变了") }, immediate: true // 该属性设定该回调将会在侦听开始之后被立刻调用 } }}).$mount("#app");不应该应用箭头函数来定义 watcher 函数，因为箭头函数没有 this，它的 this 会继承它的父级函数，然而它的父级函数是 window，导致箭头函数的 this 指向 window，而不是 Vue 实例 ...

关于vue.js:Win10环境前后端分离项目基于VuejsDjangoPython3实现微信扫码支付流程2021年最新攻略

原文转载自「刘悦的技术博客」https://v3u.cn/a_id_182 之前的一篇文章：mpvue1.0+python3.7+Django2.0.4实现微信小程序的领取性能，次要介绍了微信小程序外部领取的流程，然而实际上微信小程序有肯定的局限性，也就是用户范畴仅限于小程序外部生态圈，在生活中真正具备广泛性、高效性、应用方便性的领取形式还得是扫码领取，扫码的长处在于推广成本低，上至钓鱼台国宾馆，下至发廊地摊都能用，打印进去就完事了，而相比其余领取形式，现金的找零及假钞问题，信用卡的办理门槛、pos机的沉没老本，就算微信可集成的h5领取和小程序领取，奈何很多老年人基本不会用小程序和手机浏览器，更别说再进行领取操作了，所以基于二维码的扫码领取确实是十分符合国情的。本次咱们应用前后端拆散我的项目Vue.js+Django来集成微信的扫码领取性能，体验一下21世纪泛用性最高的领取形式，首先注册微信公众平台：https://mp.weixin.qq.com 取得开发者id和秘钥(appid & appsecret) 同时确保获取微信领取接口的权限：随后注册微信领取商户平台：https://pay.weixin.qq.com/ 获取微信领取的商户号(在账户信息页面)：获取微信领取接口的秘钥(账户核心->api平安): 同时在产品核心->开发配置页面，将领取域名配置好：这里不像微信小程序，小程序只能容许https协定接口，而扫码领取域名既反对https也反对http，十分不便，同时留神域名必须是一个备案域名。至此，微信领取的前置操作就搞定了，上面咱们来编写后盾接口wx\_pay.py，首先导入依赖的库和一些工具办法： import requests from django.http import HttpResponse, HttpResponseRedirect import random import time import hashlib import qrcode from bs4 import BeautifulSoup def trans_xml_to_dict(data_xml): soup = BeautifulSoup(data_xml, features='xml') xml = soup.find('xml') # 解析XML if not xml: return {} data_dict = dict([(item.name, item.text) for item in xml.find_all()]) return data_dict def trans_dict_to_xml(data_dict): # 定义字典转XML的函数 data_xml = [] for k in sorted(data_dict.keys()): # 遍历字典排序后的key v = data_dict.get(k) # 取出字典中key对应的value if k == 'detail' and not v.startswith('<![CDATA['): # 增加XML标记 v = '<![CDATA[{}]]>'.format(v) data_xml.append('<{key}>{value}</{key}>'.format(key=k, value=v)) return '<xml>{}</xml>'.format(''.join(data_xml)) # 返回XML def get_sign(data_dict, key): # 签名函数，参数为签名的数据和密钥 params_list = sorted(data_dict.items(), key=lambda e: e[0], reverse=False) # 参数字典倒排序为列表 params_str = "&".join(u"{}={}".format(k, v) for k, v in params_list) + '&key=' + key # 组织参数字符串并在开端增加商户交易密钥 md5 = hashlib.md5() # 应用MD5加密模式 md5.update(params_str.encode()) # 将参数字符串传入 sign = md5.hexdigest().upper() # 实现加密并转为大写 return signqrcode模块用来生成二维码，bs4模块用来将微信接口返回的xml解析成json，在21世纪的第二十个年头，微信接口竟然还在应用原始的xml，这种反人类行为切实不能了解。 ...

关于vue.js:Python-命令行库的大乱

当你想实现一个命令行程序时，或者第一个想到的是用 Python 来实现。比方 CentOS 上赫赫有名的包管理工具 yum 就是基于 Python 实现的。而 Python 的世界中有很多命令行库，每个库都各具特色。但咱们往往不晓得其背地的设计理念，也因而在抉择时感到迷茫。这些库的作者为何在反复造轮子，他是从哪个角度来思考，来让命令行库“演变”到一个新的更好用的状态。为了可能更加直观地感触到命令行库的设计理念，在此之前，咱们无妨设计一个名为 calc 的命令行程序，它能：反对 echo 子命令，对输出的字符串做解决来输入若不提供任何选项，则输入原始内容若提供 --lower 选项，则输入小写字符串若提供 --upper 选项，则输入大写字符串反对 eval 子命令，针对输出调用 Python 的 eval 函数，将后果输入（作为示例，咱们不思考安全性问题）argparseargparse 作为 Python 的规范库，可能会是你想到第一个命令行库。 argparse 的设计理念就是提供给开发者最细粒度的管制。换句话说，你须要通知它必不可少的细节，比方参数的类型是什么，解决参数的动作是怎么的。在 argparse 的世界中，须要：设置解析器，作为后续定义参数和解析命令行的根底。如果要实现子命令，则还要设置子解析器。定义参数，包含名称、类型、动作、帮忙等。其中的动作是指对于此参数的初步解决，是间接存下来，还是作为布尔值，亦或是追加到列表中等等解析参数依据参数编写业务逻辑以下示例是基于 argparse 的 calc 程序： `import argparse def echo_text(args): if args.lower: print(args.text.lower())elif args.upper: print(args.text.upper())else: print(args.text)def eval_expression(args): print(eval(args.expression))# 1. 设置解析器parser = argparse.ArgumentParser(description='Calculator Program.')subparsers = parser.add_subparsers() # 2. 定义参数# 2.1 echo 子命令# echo 子解析器echo_parser = subparsers.add_parser( 'echo', help='Echo input text in multiple forms')# 增加地位参数 textecho_parser.add_argument('text', help='Input text')# --lower/--upper 互斥，须要设置互斥组echo_group = echo_parser.add_mutually_exclusive_group()# 增加选项参数 --lower/--upper，这里action的作用就是将之变为布尔变量echo_parser.add_argument('--lower', action='store_true', help='Lower input text')echo_parser.add_argument('--upper', action='store_true', help='Upper input text')# 设置此命令的处理函数echo_parser.set_defaults(handle=echo_text) ...

关于vue.js:Nuxtjs实战经验总结

近期公司成立了一个新我的项目，须要做SEO。做过前后端半拆散（局部数据是后端模板渲染，局部用AJAX获取）我的项目的同学都晓得跟后端人员把代码写在同一个页面有多好受，我的项目不易保护且开发体验很差，因而采纳了Nuxt.js SEO大家都晓得，网页在搜索引擎中能被搜寻进去是因为他们有本人的爬虫，能够爬取网页中的内容并保留下来，然而它们只会保留网页中的第一个申请返回的内容，即HTML文档。在传统的前后端不拆散网站中，在浏览器上查看源代码，能够看到网页上有什么内容，源代码中就有与之对应的代码。随着前后端拆散开发越来越风行，也衍生了越来越多的单页面利用(SPA)，在浏览器中关上一个SPA的源代码，往往只能看到寥寥无几的几个标签，其余内容全都是由JS渲染的，也就是客户端渲染。因而单页面利用的一大痛点就是搜索引擎无奈收录，有痛点就会有相应的计划产生，呈现了SSR。 SSRSSR意思是服务端渲染，乍一看会认为是回到以前的前后不拆散开发模式，实际上相比以前，客户端与服务端之间多了一个中间层，用于接收数据并渲染页面返回到客户端。有了中间层帮客户端渲染页面，在搜索引擎爬到页面时，就解决了前后端拆散页面不收录的的痛点。不仅如此，因为中间层也是一个服务端，前端工程师能够做更多事儿了，比方简略解决数据、做代理等等。 Nuxt.jsVue官网提供了vue-server-renderer模块实现SSR，而Nuxt.js是对其封装后的框架，用于提供一个开箱即用的NodeJS SSR服务。生命周期通过在地址栏输出链接，或者从其余网站点击链接跳转到Nuxt站点的页面时（首屏拜访），出现的第一个页面的数据会由中间层向服务端发动申请，而后渲染Vue组件，再将渲染实现后生成的HTML文档返回到客户端。随后点击页面的<NuxtLink>组件或者通过vue-router的push,replace等办法跳转页面都是在客户端实现的，除非刷新浏览器，否则不会再次拜访中间层服务器。因而在页面中申请服务端的数据有可能是中间层发动的，也有可能是客户端发动的。拜访Nuxt站点的页面时，会经验以下几个生命周期，咱们能够在不同的节点对站点的行为做解决依照nuxt.config.js中的plugins配置程序执行插件。nuxtServerInit: 如果Nuxt利用中应用了Vuex，会运行actions中的nuxtServerInit函数，用于在进入页面之前将数据填充到Vuex中。Middleware: 按程序执行nuxt.config.js中配置的router中间件、layout中间件、page中间件，能够用来对用户做权限验证。validate(): 返回true、false或者Promise，返回false时，将会跳转到谬误页面，次要用于验证动静路由的参数。asyncData(): 返回一个对象，执行结束之后Nuxt会将返回的对象合并到Vue实例的data属性中，用于在拜访到页面之前调用接口获取数据，这个钩子取代了SPA中罕用的created钩子。beforeCreate: Vue组件生命周期钩子。created: Vue组件生命周期钩子。fetch(): 与asyncData一样，也是用于调用接口获取数据，不同的是它不会将返回值合并到data，个别用于对本地数据处理，比方Vuex，值得一提的是，这个钩子在Vue实例创立之后执行，因而能够用this拜访Vue实例。执行beforeMount、mounted等其余Vue的生命周期钩子。以上生命周期中，只有前两个是齐全在中间层执行的，其余的有可能在中间层执行，也有可能在客户端执行，这次要取决于页面是首屏渲染还是站内跳转，因而搞懂哪些代码什么时候在什么环境运行十分重要。插件vant-ui我的项目中应用了vant ui作为组件库，Nuxt我的项目中没有相似main.js的入口文件，如果须要装置依赖，须要在plugins中申明。每次拜访Nuxt站点的首屏时，都会将nuxt.config.js中申明的plugins执行一遍，从而让开发这能够把本人所需的插件注册到利用中 // nuxt.config.jsmodule.exports = { ..., plugins: [ '@/plugins/vant-ui' ], ...}在根目录的plugins目录下须要创立一个对应的文件 // /plugins/vant-ui.jsimport Vue from 'vue'import { Button, Search, Toast} from 'vant'Vue.use(Button)Vue.use(Search)Vue.use(Toast)为了按需引入，还须要装置babel-plugin-import和进行相干配置 // nuxt.config.jsmodule.exports = { build: { analyze: true, transpile: [/vant.*?less/], babel: { // 按需引入配置 plugins: [ [ 'import', { libraryName: 'vant', style: name => `${name}/style/less.js` }, 'vant' ] ] }, loaders: { less: { lessOptions: { modifyVars: { // 此处能够批改vant款式中的less变量，从而自定义ui款式 '@button-primary-background-color': '#000' } } } } }}axiosNuxt官网提供了专门封装的@nuxtjs/axios模块，看过文档后发现与平时的用法略有不同，闲麻烦就还是用了原汁原味的axios，毕竟此前也做了进一步的封装（官网强烈推荐的模块尽量能用就用，像我这种不听话的就会默默踩坑，通过摸索才悟出了上面这段话）。然而与SPA不同的是，axios发动的申请可能是在中间层服务端，也可能是在客户端，这取决于是否是首屏渲染（在下面生命周期有提到），因而须要在代码中利用process.client和process.server对相应的环境做出判断和解决。 ...

关于vue.js:Vue设置less全局变量

重要的是：要先插件装置vue-cli-plugin-style-resources-loader，再去依赖装置style-resources-loader const path = require('path') // 本人增加的module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [ path.resolve(__dirname, './src/base.less') // 本人增加的, less全局变量所在文件门路 ] } }}

关于vue.js:分享一个基于vue的图片查看器组件

分享一个实用于后盾管理系统、网站等的图片查看器。 demo在线链接: duo-image-viewer 反对以下性能： 1.缩放： 2.旋转 3.拖拽 4.全屏技术栈：vue如何应用： 1.装置依赖npm i duo-image-viewer --save // cnpm i duo-image-viewer --save复制代码2.引入并注册组件找到vue我的项目中的main.js 文件并退出如下代码： import duoImageViewer from 'duo-image-viewer' // 引入组件 Vue.use(duoImageViewer) // 注册组件复制代码3.在页面中应用<template> <div> <button @click="handleOpen">关上查看器</button> <duo-image-viewer :src="src" :srcList="srcList" @close="handleClose" :showViewer="showViewer" /> </div></template><script>export default { data() { return { src: { name: '', url: "https://baidu.com/pictures/2020-09-08/1599535213868-GDJJZizFVtepBxlXpq.jpg" }, srcList: [ "https://baidu.com/pictures/2020-09-08/1599535213868-GDJJZizFVtepBxlXpq.jpg", "https://baidu.com/pictures/2020-09-08/1599535221238-tQfrTrrwOLSdhtiVBY.jpg", ], showViewer: false, }; }, methods: { handleOpen() { this.showViewer = !this.showViewer }, handleClose() { this.showViewer = false } }};</script>复制代码其中showViewer管制显示暗藏，src示意以后展现的图片，srcList示意要展现图片列表 ...

关于vue.js:vue-element-UI-中省市区三级联动

依赖引入装置：npm install element-china-area-data -S 在页面中应用1、页面中注入import {provinceAndCityData, CodeToText, TextToCode} from 'element-china-area-data';// 地址级联选择器2、页面中应用<el-cascader :options="areaSelectData" :disabled="isNotEdit" @change="handleChange" class="full-width" size="large" v-model="selectedOptions" placeholder="请抉择您所在的城市" /> 3.引入数据源areaSelectData: provinceAndCityData, // options绑定的数据就是引入的 provinceAndCityDataselectedOptions: [], // 地区抉择参数，['省区域码', '市区域码']4.依据需要格式化地址1.获取用户信息中已抉择的以后省市 getCity() { var self = this; let data = localStorage.getItem('kimid'); self.$api.getcustomers(data).then(res => { self.infoForm.province = res.data.province,//省 self.infoForm.city = res.data.city; self.formatCity(); })}, 格式化地址使其展现在页面上// 获取到省市数据，进行格式化formatCity(){ var self = this; console.log(self.infoForm.province,self.infoForm.city); // TextToCode属性是汉字，属性值是区域码 TextToCode['北京市'].code输入110000 // 省份 var provinceCode = TextToCode[self.infoForm.province].code; // 城市 var cityCode = TextToCode[self.infoForm.province][self.infoForm.city].code; self.selectedOptions = [provinceCode, cityCode];},3.编辑用户新抉择的地址 ...

关于vue.js:vue中vfor循环选中点击元素并添加样式

v-for循环时，点击某一个元素并对该元素增加款式，这里用到v-for循环的index索引，代码如下：html: <div v-for="(item,index) in itemList" :class="{'onClickStyle':clickFlag == index}" @click="onClickItem(index)"> {{item.name}} </div>data中初始化该变量 data(){ return{ clickFlag:-1, }}js: onClickItem(index){ this.clickFlag = index;}css .onClickStyle{ background: #cfcfcf;}

关于vue.js:从0到1搭建项目基座

本文是参考2020年了,再不会webpack敲得代码就不香了(近万字实战)一点一点手动敲代码实际的，不同的中央就是当初是webpack5+vue3。一、初始化1. 创立文件夹antdv，cd antdv，执行npm init初始化 2. 装置webpack、webpack-clinpm i -D webpack webpack-cli这里有个留神点是在我的项目内装置而不是全局装置webpack和webpack-cli，因为有时候不同我的项目须要不同版本的webpack。这里装置了最新版本的： 3. 测试下webpack的打包a) 在我的项目内（antdv文件夹下）新建src/main.js b) 在package.json配置命令 "scripts": { "build": "webpack ./src/main.js" },c) 运行胜利，会呈现一个dist文件夹，里边是打包后的main.js 二、开始配置1. 新建/build/webpack.config.js// webpack.config.jsconst path = require('path')module.exports = { mode: 'development', // 开发模式 entry: path.resolve(__dirname, '../src/main.js'), // 入口文件 output: { filename: 'main.js', // 打包后的文件名称 path: path.resolve(__dirname, '../dist') // 打包后输入的文件所在的目录 }}其中dist文件夹中的main.js就是咱们须要在浏览器中理论运行的文件。咱们在html文件中引入打包好的js。然而为了每次改变浏览器都能拿到最新的js，咱们往往会这样配置： // webpack.config.jsconst path = require('path')module.exports = { mode: 'development', // 开发模式 entry: path.resolve(__dirname, '../src/main.js'), // 入口文件 output: { filename: '[name].[hash:8].js', // 每次打包hash值会变，这样就不会被浏览器缓存命中，每次就能拿到最新的文件 path: path.resolve(__dirname, '../dist') // 打包后输入的文件所在的目录 }}2. 配置在html中主动引入打包好的js文件a) 装置插件HtmlWebpackPlugin ...

关于vue.js:vue项目刷新当前页面的三种方法

想必大家在刨坑vue的时候也遇到过上面情景：比方在删除或者减少一条记录的时候心愿以后页面能够从新刷新或者如上面这种：如果心愿点击确定的时候，Dialog 对话框敞开的时候，以后http://localhost:9530/#/supplier/supplierAll页面能够从新刷新下那么表格的数据能够从新加载，Dialog 对话框设置的数据能够在确定后刷新呈现在页面上这时候咱们最间接的思维就是想到上面这种：然而，试过的会发现用vue-router从新路由到以后页面，页面是不进行刷新的，基本没有任何作用~所以这个办法out！上面我这边整顿几种可圈可点的三种形式，大家能够自行的抉择： 1、最间接整个页面从新刷新： location. reload()this.$router.go(0)这两种都能够刷新以后页面的，毛病就是相当于按ctrl+F5 强制刷新那种，整个页面从新加载，会呈现一个霎时的空白页面，体验不好 2、新建一个空白页面supplierAllBack.vue，点击确定的时候先跳转到这个空白页，而后再立马跳转回来空白页supplierAllBack.vue外面的内容：这个形式，相比第一种不会呈现一瞬间的空白页，只是地址栏有个疾速的切换的过程，可采纳 3、provide / inject 组合形式是我试过最实用的，上面用我的项目截图给大家阐明下：首先，要批改下你的app.vue 通过申明reload办法，管制router-view的显示或暗藏，从而管制页面的再次加载，这边定义了 isRouterAlive //true or false 来管制而后在须要以后页面刷新的页面中注入App.vue组件提供（provide）的 reload 依赖，而后间接用this.reload来调用就行总结以上所述是小编给大家介绍的vue我的项目刷新以后页面的三种办法，心愿对大家有所帮忙，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的反对！

关于vue.js:vue-项目的搭建与推送

搭建1.全局装置淘宝镜像 (已装置跳过此步)npm install -g cnpm --registry=https://registry.npm.taobao.org2.全局装置vue-cli脚手架 (已装置跳过此步)cli 3.x版本 cnpm install -g @vue/clicli 2.x版本 cnpm install -g vue-cli3.创立我的项目cli 3.x版本 vue create 我的项目名cli 2.x版本 vue init webpack 我的项目名4.设置presetbabel: js编译器，将 ECMAScript 2015+ 版本的代码转换为向后兼容的js语法 typescript: 给 JavaScript 增加个性的语言扩大Progressive Web App(PWA) Support: 渐进式web应用程序router: vue路由vuex: vue状态治理CSS Pre-processors: CSS预处理(如：scss,less)linter/formatter: 代码格调检查和格式化(如：ESlint)Unit Testing: 单元测试E2E Testing: e2e测试5.运行cli 3.x版本 npm run servecli 2.x版本 npm run dev图像化运行 vue ui6.打包我的项目npm run build推送到git1.git init2.git add.3.git commit -m "正文内容"4.git remote add origin 仓库地址5.git push -u origin master

关于vue.js:Vue3-项目从零开始搭建项目及插件的使用

导读vue3.0 进去有段时间，借助年底这段时间不怎忙，摸会鱼，开始学习Vue3。本文次要从我的项目搭建到我的项目实战，一步步的学习Vue3 的我的项目搭建以及一些插件及库的应用，缩小入坑。浏览三连：点赞（????）、关注（????）、珍藏（????）。本文 github(demo) 已上传，更多往期文章已分类整理。注释版本node v12.16.2npm 6.14.9残缺的package.json{ "name": "vue3-demo", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0", "vue-router": "^4.0.1" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "ant-design-vue": "^2.0.0-rc.5", "autoprefixer": "^9.8.6", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0-0", "postcss": "^8.2.1", "postcss-loader": "^4.1.0", "sass": "^1.30.0", "sass-loader": "^10.1.0", "vuex": "^4.0.0-rc.2" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ]}1. 初始化我的项目1.1 应用Vue3，须要降级vue-cli，全局装置最先版本@vue/cli； ...

关于vue.js:umyui-一个基于-vue-的-PC-端表格UI库解决万级数据渲染卡顿问题过万数据点击全选卡顿等等问题

npm装置npm install umy-ui按需引入在main.js中增加按需引入代码 import { UTable } from 'umy-ui'Vue.use(UTable)示例 <template> <u-table :data="tableData" :border="false" style="width: 100%"> <template slot="empty"> 没有查问到符合条件的记录 </template> <u-table-column prop="name" label="名字" width="180"> </u-table-column> <u-table-column prop="sex" label="性别" width="180"> </u-table-column> <u-table-column prop="age" label="年龄"> <template v-slot="scope"> <el-select v-model="scope.row.sex"> <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </template> </u-table-column> </u-table></template><script> export default { data() { return { sexList: [ { value: 1,label: '男' }, { value: 2,label: '女'}, { value: 3,label: '未知'} ], tableData: [{ sex: '男', name: '王小虎', age: '15' }, { sex: '女', name: '王小明', age: '15' }, { sex: '女', name: '王小丽', age: '15' }, { sex: '未知', name: '王小狗', age: '15' }] } } }</script>甚至你还能这样做，都是兼容的应用element-ui中的table组件，在外层用u-table包裹起来就行了 ...

关于vue.js:minivue响应式312

前言：最近关注了vue，想比照一下和react的实现的区别，不便当前我的项目做选型。打算理解比照一下根本实现，能力写出更合乎框架设计思维高效率的代码，出了问题能力更好的排错。 vue响应式模仿筹备工作数据驱动响应式外围公布订阅和观察者数据驱动数据响应式：数据模型仅仅是一般的js对象，而当咱们批改数据时，视图会进行对应的更新，防止了繁琐的dom操作，进步开发效率双向绑定：数据扭转，视图扭转；视图扭转，数据也随之扭转，应用v-model在表单元素上创立双向数据绑定数据驱动是vue最独特个性之一：开发过程仅须要关注数据自身，不须要关怀数据是如何渲染到视图的数据响应式vue2是用的Object.defineProperty来进行对对象的get,set进行劫持来实现的双向绑定相似： let data ={msg:'hello'}let vm={}Object.defineProperty(vm,'msg',{ enumerable:true, configurable:true, get(){ return data.msg } set(newValue){ if(newValue === data.msg){ return } data.msg=newValue document.querySelector('#app').textContent=data.msg }})vm.msg='HelloWorld'console.log(vm.msg)vue3应用的是代理对象,间接监听对象，不监听属性，性能由浏览器优化， let data={msg:'hello',count:0}let vm = new Proxy(data,{ get(target,key){ return target[key] } set(target,key,newValue){ if(target[key] === newValue){ return } target[key] = newValue document.querySelector('#app').textContent=target[key] }})贴个图来展现下俩的区别 Object.defineProperty 只能劫持对象的属性,因而咱们须要对每个对象的每个属性进行遍历。Object.defineProperty不能监听数组。是通过重写数据的那7个能够扭转数据的办法来对数组进行监听的。Object.defineProperty 也不能对 es6 新产生的 Map,Set 这些数据结构做出监听。Proxy不会间接侵入对象去做劫持，而是间接对对象整体进行包装一层。不过咱们目前实现的简易版vue是基于vue2去做的。公布/订阅模式和观察者模式公布/订阅模式订阅者发布者信号核心阐明：咱们假设，存在一个"信号核心"，某个工作执行实现，就向信号核心"公布"（publish）一个信号，其余工作能够向信号核心"订阅"（subscribe）这个信号，从而晓得什么时候本人能够开始执行。这就叫做"公布/订阅模式"（publish-subscribe pattern）vue中的自定义事件就是一个公布订阅模式$emit，$on. //eventBus.js//事件核心let eventHub=newVue()//ComponentA.vue//发布者addTodo:function(){//公布音讯(事件) eventHub.$emit('add-todo',{text:this.newTodoText}) this.newTodoText='' }//ComponentB.vue//订阅者created:function(){//订阅音讯(事件) eventHub.$on('add-todo',this.addTodo)}咱们模仿一个vue的公布订阅,如下 class EventEmitter{ constructor(){ this.subs={} } $on(eventType,handler){//订阅 this.subs[eventType] = this.subs[eventType]||[] this.subs[eventType].push(handler) } $emit(eventType){//公布 if(this.subs[eventType]){ this.subs[eventType].forEach(handler=>{ handler() }) } }}var bus= new EventEmitter()//注册事件bus.$on('click',function(){ console.log('click')})bus.$on('click',function(){ console.log('click1')})//触发事件bus.$emit('click')观察者模式观察者watcher：update当事件产生时更新指标(发布者)-Dep ...

关于vue.js:vuerouter简易源码解析311

最近理解了一下vue,而后简略理解了一下vue-router，而后当初简略得写一个vue-router得简易版得源码解析.这是vue-router得根本用法 vue-router根本用法 vue的生命周期官网给出的好棒https://cn.vuejs.org/images/l... 安利一下首先咱们要理解：插件，slot插槽，混入，render函数，运行时和完整版得vue 首先咱们用vue-cli创立一个我的项目，要应用带编译器得版本，因为要编译模板。而后咱们找到对应得router/index.js，把官网得vue-router,替换成咱们本人新建得 //import VueRouter from 'vue-router'import VueRouter from '../../Vue-router'路由界面配置 const routes = [ { path: '/', name: 'Index', component: Index }, { path: '/login', name: 'Login', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue') }, { path: '/detail/:id', name: 'Detail', props: true, component: () => import(/* webpackChunkName: "detail" */ '../views/Detail.vue') }]const router = new VueRouter({ routes})app.vue界面咱们简略设置一下 ...

关于vue.js:vue-基于abstract-路由模式-实现页面内嵌

abstract 路由模式abstract 是vue路由中的第三种模式，自身是用来在不反对浏览器API的环境中，充当fallback，而不论是hash还是history模式都会对浏览器上的url产生作用，本文要实现的性能就是在已存在的路由页面中内嵌其余的路由页面，而放弃在浏览器当中仍旧显示以后页面的路由path，这就利用到了abstract这种与浏览器拆散的路由模式。路由示例export const routes = [ { path: "/", redirect: "abstract-route", }, { path: "/embed-route", name: "embedded", component: () => import(/* webpackChunkName: "embed" */ "../views/embed.vue"), }, { path: "/abstract-route", name: "abstract", component: () => import(/* webpackChunkName: "abstract" */ "../views/abstract.vue"), },];const router = new VueRouter({ mode: "history", base: process.env.BASE_URL, routes,});本次示例有两个路由，别离为abstract，embedded，其中abstract视图上开展一个抽屉，抽屉当中显示embedded的视图。即： // abstract views<template> <div> <RouterDrawer :visible.sync="visible" :path="{ name: 'embedded' }" size="50%" title="drawer comps" ></RouterDrawer> <el-button @click="visible = true">open drawer</el-button> </div></template>// embedded views<template> <div> embedded views </div></template> ...

关于vue.js:VueElectron项目简洁快速搭建教程

Vue+Electron我的项目搭建教程最近写一个我的项目，须要应用Electron集成Vue，特此记录搭建过程 Vue+Electron 罕用搭建形式在之前，通常咱们会应用electron-vue脚手架来疾速搭建，然而这个脚手架搭建的Electron版本曾经太旧了，目前github曾经一年没提交更新了，所以咱们须要应用其余新的形式来搭建。 Vue CLI Plugin Electron Builder本教程应用Vue CLI Electron插件，疾速的搭建Electron+Vue我的项目，对于插件的信息可进入Vue CLI Plugin Electron Builder官网自行理解，上面咱们开始搭建开始搭建1：应用Vue脚手架创立Vue我的项目1. 装置Vue脚手架，若已装置则能够跳过，未装置可用如下形式装置npm install -g @vue/cli# ORyarn global add @vue/cli2. 创立我的项目# 下方 myproject 为我的项目名，可本人定义vue create myproject执行之后，呈现如下选项：其实就是默认配置和自定义配置，次要是代码查看、语言(js or ts)、路由、CSS(Scss等)等等...,我这边间接抉择default，如果有非凡需要你能够自定义设置如图，装置实现，我这边装置的有yarn，所以vue默认用yarn作包治理了，如果你应用的npm或cnpm，应用npm run serve 运行即可 2.配置Electron接下来就开始配置Electron了首先进入我的项目目录cd myproject而后通过运行以下命令装置并调用vue-cli-plugin-electron-builder的生成器：vue add electron-builder如下图所示，提醒咱们抉择Electron版本，间接抉择最新9.0.0版本即可接下来依据您的网络状况，安装时间各异，个别为15-60秒左右，装置胜利后如下提醒：启动如果您应用yarn（强烈推荐），则间接执行yarn electron:serve或者，如果您应用NPM，则执行：npm run electron:serve 到此为止，整合结束启动胜利，整体还是比较简单的，感激脚手架大佬们的贡献者，不便了像我这样的搬砖者，向大佬们学习，向大佬们致敬！如果您装置过程中遇到了问题，欢送留言，我看到会尽量及时回复，若有须要，接下来我会再写一遍对于Electron简略入门的教程

关于vue.js:翻译-JavaScript-Everywhere第24章-移动应用程序认证

翻译 | 《JavaScript Everywhere》第24章挪动应用程序认证写在最后面大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。为了进步大家的浏览体验，对语句的构造和内容略有调整。如果发现本文中有存在瑕疵的中央，或者你有任何意见或者倡议，能够在评论区留言，或者加我的微信：code_maomao，欢送互相沟通交流学习。 (ﾟ∀ﾟ)..:*☆哎哟不错哦第24章挪动应用程序认证如果你已经与亲戚同住过，或者在度假的旅馆里或租了带家具的公寓，那么你就会体验到被不属于你的事物突围着是什么样的感触。在这些类型的环境中可能很难感到安宁，不想将某些货色放到适当的地位或弄乱它们。当我处于这些状况下时，无论房东如许友善或容纳，这种所有权的不足使我处于焦躁的边缘状态。我能说什么，我只是不难受，除非我能够不必杯垫放玻璃杯。因为无奈自定义或读取特定于用户的数据，咱们的利用可能会给用户带来同样的不适感。他们的笔记与其余所有人的笔记混在一起，而不是使应用程序真正属于本人。在本章中，咱们将向咱们的应用程序增加身份验证。为此，咱们将介绍一个身份验证路由流，应用Expo的SecureStore存储令牌数据，在React Native中创立文本表单以及执行身份验证GraphQL申请。认证路由流程让咱们从创立身份验证流程开始。当用户首次拜访咱们的应用程序时，咱们将为他们显示登录界面。当用户登录时，咱们会将令牌存储在设施上，从而容许他们绕过未来应用程序应用时的登录界面。咱们还将增加一个设置界面，用户能够在其中单击按钮以退出应用程序，并从其设施中删除令牌。为此，咱们将增加几个新界面： authloading.js这将是一个插页式界面，用户将不会与之互动。关上应用程序后，咱们将应用界面查看令牌是否存在，并将用户导航到登录界面或应用程序内容。 signin.js这是用户能够登录其帐户的界面。胜利登录后，咱们将令牌存储在设施上。 settings.js在设置界面中，用户将可能单击按钮并登记该应用程序。一旦登记，它们将被路由回登录界面。应用现有帐户在本章的前面，咱们将增加通过该应用程序创立帐户的性能。如果还没有，间接通过你的API实例的GraphQL Playground或Web利用程序界面创立一个帐户将很有用。为了存储和应用令牌，咱们将应用Expo的SecureStore库。我发现SecureStore是在设施上本地加密和存储数据的间接办法。对于iOS设施，SecureStore应用内置的钥匙串服务，而在Android上，它应用操作系统的“共享首选项”，并应用Keystore加密数据。所有这些都是在后盾进行的，这使咱们可能简略地存储和检索数据。首先，咱们将创立登录界面。目前，咱们的登录界面将蕴含一个Button组件，当按下该按钮时，它将存储令牌。让咱们在src/screens/signin.js中创立一个新的界面组件，导入依赖项： import React from 'react';import { View, Button, Text } from 'react-native';import * as SecureStore from 'expo-secure-store';const SignIn = props => {return (<View> <Button title="Sign in!" /> </View> );}SignIn.navigationOptions = {title: 'Sign In'};export default SignIn;接下来，让咱们在src/screens/authloading.js中创立咱们的身份验证加载组件，该组件当初仅显示一个加载指示器： import React, { useEffect } from 'react';import * as SecureStore from 'expo-secure-store';import Loading from '../components/Loading';const AuthLoading = props => {return <Loading />;};export default AuthLoading;最初，咱们能够在src/screens/settings.js中创立设置界面： ...

关于vue.js:vuecli安装指定的版本

1.电脑系统 windows10专业版2.在开发的过程中,咱们可能习惯了应用vuecli的某个版本,上面我来分享一下,npm装置指定的vuecli版本。3.废话不多说,间接上操作: 在终端(以管理员身份运行)中指定如下命令:首先,先卸载之前装置的:命令如下:npm uninstall vue-cli -g //以管理员身份运行而后,在指定如下命令:npm install -g @vue/cli@3//这里以装置 vuecli3 版本。//如何查看是否装置胜利,执行如下指令:vue --version//如果输入版本号,就示意装置胜利啦。4.本期的分享到了这里就完结啦,是不是很nice,心愿对你有所帮忙,让咱们一起致力走向巅峰!

关于vue.js:vue移动端项目骨架屏的实现

Vue利用加载过程咱们先来看看vue的入口文件index.html外面的内容， <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div>  </body></html> 从图里看到vue页面从关上到加载实现是有一段白屏的工夫的，那白屏的加载体验对于首次拜访的用户来说是难以承受的，咱们能够应用尺寸稳固的骨架屏，来辅助实现实在模块占位和霎时加载。 vue利用从关上到页面展现残缺大抵经验了一下几步1.先渲染index.html的内容2.动静插入chunk-vendors.js（第三方库)3.动静插入app.js(业务代码)4.渲染路由对应的页面只有当app.js文件渲染实现之后，以后路由对应的vue才会被渲染到页面外面，而app.js是最初才被插入到index.html里的，因而会导致在app.js未加载之前会有一段空白的显示。这会引出了一个用户体验的问题：用户看到页面内容之前的空白工夫过长，这样页面流失率会大大的减少，这也是咱们不违心看到的。据统计：加载超过5秒就会有74%的用户来到页面。骨架屏是什么在页面齐全渲染实现之前，用户会看到一个款式简略，描述了以后页面的大抵框架，感知到页面正在逐渐加载，最终骨架屏中各个占位局部被齐全替换，体验良好。罕用于文章列表、动静列表页等绝对比拟规定的列表页面。很多我的项目中都有利用: 饿了么h5版本,知乎,facebook等网站中都有利用。这个过程中用户会感觉内容正在逐步加载行将出现，升高了用户的烦躁情绪，使得加载过程主观上变得晦涩。骨架屏相比于传统的loading图会在感官上感觉内容呈现的晦涩而不突兀，体验更加低劣。所以骨架屏的利用大大提高了用户体验。上面咱们看看具体的实现办法骨架屏实际从vue渲染过程动图中咱们能看到index.html是最快加载的进去的所以骨架屏须要放到index.html外面在index.html将骨架屏Dom构造写好，而后在规定好的钩子函数外面去移除这个骨架屏就能够实现骨架屏机制。然而这种形式有一个问题，如果每个页面的骨架屏的款式都不同，咱们须要手动在index.html写好每个页面对应的构造款式，而后再去解析路由去显示对应的骨架屏。这样很麻烦，不好保护。呢有没有一个插件帮咱们去干两件事件：1.将骨架屏vue文件提前渲染到index.html外面2.渲染路由对应的骨架屏这样一来就大大解放了双手，代码维护性也大大提高了。 vue-skeleton-webpack-plugingithub地址：https://github.com/lavas-proj... 这是一个基于 Vue 的 webpack 插件，为单页/多页利用生成骨架屏 skeleton，缩小白屏工夫，在页面齐全渲染之前晋升用户感知体验。将骨架屏也看成路由组件，在构建时应用 Vue 服务端渲染性能，将骨架屏组件的渲染后果 HTML 片段插入 HTML 页面模版的挂载点中，将款式内联到 head 标签中。这样等前端渲染实现时，Vue 将应用客户端混合，把挂载点中的骨架屏内容替换成真正的页面内容。 ...

关于vue.js:vuecli3搭建项目之webpack配置

vue-cli3搭建残缺我的项目之webpack配置后面篇介绍了我的项目初始化，上面就要开始对我的项目webpack进行配置，因为vue-cli3将webpack的根底配置全副内嵌了，这就导致咱们初始化我的项目实现之后发现原先的webpack的config配置全副都隐没不见了，那该怎么办呢？别慌，vue-cli3早就思考到了这一点，它预留了一个vue.config.js的js文件供咱们对webpack进行自定义配置。 vue.config.js官网配置指南一、在我的项目根目录下新建vue.config.js文件与package.json同级上面是我的vue.config.js文件,外面有具体的正文，这里不再赘述 `const path = require('path')module.exports = { publicPath: './', // 根本门路 outputDir: 'dist', // 输入文件目录 lintOnSave: false, // eslint-loader 是否在保留的时候查看 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md // webpack配置 chainWebpack: (config) => { }, configureWebpack: (config) => { if (process.env.NODE_ENV === 'production') { // 为生产环境批改配置... config.mode = 'production' } else { // 为开发环境批改配置... config.mode = 'development' } Object.assign(config, { // 开发生产独特配置 resolve: { alias: { '@': path.resolve(__dirname, './src'), '@c': path.resolve(__dirname, './src/components'), '@p': path.resolve(__dirname, './src/pages') } // 别名配置 } }) }, productionSourceMap: false, // 生产环境是否生成 sourceMap 文件 // css相干配置 css: { extract: true, // 是否应用css拆散插件 ExtractTextPlugin sourceMap: false, // 开启 CSS source maps? loaderOptions: { css: {}, // 这里的选项会传递给 css-loader postcss: {} // 这里的选项会传递给 postcss-loader }, // css预设器配置项详见https://cli.vuejs.org/zh/config/#css-loaderoptions modules: false // 启用 CSS modules for all css / pre-processor files. }, parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 应用 thread-loader。该选项在零碎的 CPU 有多于一个内核时主动启用，仅作用于生产构建。 pwa: {}, // PWA 插件相干配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa // webpack-dev-server 相干配置 devServer: { open: process.platform === 'darwin', host: '0.0.0.0', // 容许内部ip拜访 port: 8022, // 端口 https: false, // 启用https overlay: { warnings: true, errors: true }, // 谬误、正告在页面弹出 proxy: { '/api': { target: 'http://www.baidu.com/api', changeOrigin: true, // 容许websockets跨域 // ws: true, pathRewrite: { '^/api': '' } } } // 代理转发配置，用于调试环境 }, // 第三方插件配置 pluginOptions: {}}` * 1* 2* 3* 4* 5* 6* 7* 8* 9* 10* 11* 12* 13* 14* 15* 16* 17* 18* 19* 20* 21* 22* 23* 24* 25* 26* 27* 28* 29* 30* 31* 32* 33* 34* 35* 36* 37* 38* 39* 40* 41* 42* 43* 44* 45* 46* 47* 48* 49* 50* 51* 52* 53* 54* 55* 56* 57* 58* 59* 60* 61* 62* 63* 64* 65* 66* 67二、优化打包chunk-vendors.js文件体积过大当咱们运行我的项目并且打包的时候，会发现chunk-vendors.js这个文件十分大，那是因为webpack将所有的依赖全都压缩到了这个文件外面，这时咱们能够将其拆分，将所有的依赖都打包成独自的js。 ...

关于vue.js:Vueextend有怎么用

Vue.extend传入一个合乎vue选项的对象，返回一个vue结构类， Vue.extend在任何中央都能拿到vue实例。例如，做一个揭示类的弹窗，只是更改了文字内容和色彩、图标 import alert from "./components/alert";Vue.mixin({ methods: { showNotice: function(msg, el) { const Constructor = Vue.extend(alert); const vm = new Constructor(); vm.$data.message = msg; vm.$mount(el); } }})<template> <button @click="showNotice('弹我', $refs.cover)">点我</button> <div ref="cover">这是一个弹出层的蒙版</div></template>这样在页面中只有调用那个定义的办法，而后传参(参数能够用对象的模式传过来，本人改一下就行了)过来就能实现弹窗，不必再每个页面去引入组件，data定义一个变量去保留message，components注册组件，再调用加载绑定理论开发过程中很多中央都能用这样形式去抽离组件，UI库外面的一些组件也是这样的模式装载的。 Vue.extend另一个用得很多的是在单元测试中

关于vue.js:vue组件-emit调用

emit形式调用父组件的办法还能够用$parent.list(1)//1 父组件<editcomponent ref="edit" @toList="list(1)" ></editcomponent>自定义事件, 事件名为toList//2 子组件 self.$emit('toList');//向父组件emit toList事件

关于vue.js:eltree-静态demo

加一些属性就能够做菜单受权页面<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>data: [{ label: '一级 1', children: [{ label: '二级 1-1', children: [{ label: '三级 1-1-1' }] }] }, { label: '一级 2', children: [{ label: '二级 2-1', children: [{ label: '三级 2-1-1' }] }, { label: '二级 2-2', children: [{ label: '三级 2-2-1' }] }] }, { label: '一级 3', children: [{ label: '二级 3-1', children: [{ label: '三级 3-1-1' }] }, { label: '二级 3-2', children: [{ label: '三级 3-2-1' }] }] }], defaultProps: { children: 'children', label: 'label' }//3handleNodeClick(data) { console.log(data); alert(data); if(data.name!=undefined){ alert(data.name); } if(data.label!=undefined){ alert(data.label) } }

关于vue.js:vue-静态路由

能够联合动静路由一起应用js part//1.定义内容var routes = [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/stu', name: 'Stu', component: Stu }, { path: '/person', name: 'Person', component: Person }, { path: '/job', name: 'Job', component: Job }, { path: '/jobAllot', name: 'JobAllot', component: JobAllot }, { path: '/notice', name: 'Notice', component: Notice }, { path: '/expressInspect', name: 'ExpressInspect', component: ExpressInspect } ];//2.申明var router = new VueRouter({ mode: 'history', routes:routes});//3.调用Vue.use(VueRouter);export default { router: router, name: 'App', components: { }}页面内容<router-link to="/stu">stu</router-link>, <router-link to="/person">person</router-link>, <router-link to="/job">job</router-link>, <router-link to="/jobAllot">jobAllot</router-link>, <router-link to="/notice">notice</router-link>, <router-link to="/expressInspect">ExpressInspect</router-link>, <hr> <router-view>Emp.vue</router-view>

关于vue.js:VUE常见问题整理

vue我的项目打包element-icons门路谬误1.在build/utils下的ExtractTextPlugin.extract下增加publicPath:'../../' if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:'../../' })} else { return ['vue-style-loader'].concat(loaders)}2.更改config/index.js中build下的assetsPublicPth, 本来为/, 改为./ index: path.resolve(__dirname, '../dist/index.html'),assetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: './',v-for遍历数组谬误：提醒：(Emitted value instead of an instance of Error) <el-button v-for="key in errType">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.... for more info.起因：谬误的遍历形式： <el-button v-for="(key,index) in errType" v-on:click="selType(index,key.errtype)" v-bind:class="{on:seltype==index}">{{key.name}}</el-button>循环必须要给每个循环体加上惟一的key： <el-button v-for="(key,index) in errType" v-on:click="selType(index,key.errtype)" :class="{on:seltype==index}" :key="index">{{key.name}}</el-button>

关于vue.js:vueelement-自定义指令数字限制及悬浮框

数字限度有一个element的表单组件当初心愿只能输出数字，如果应用.number修饰符的话那么不能输出小数，所以本人应用vue的自定义指令实现一个这样的性能；反对录入正数；应用办法v-num-rule="form"给自定义指令传一个绑定的表单对象，这样更改vNode的时候比拟不便 <el-form-item label='金额:' prop="je"> <el-input v-num-rule="form" v-model="form.je" ></el-input></el-form-item>办法import Vue from 'vue'function rule(val,data){ if(isNaN(data)){ val='' }else{ let index = val.indexOf('.'); if(index>0){ val= val.slice(0,index+3) } } return val}const numRule = Vue.directive("numRule", { bind: (el, builing, vNode) => { let form = builing.expression let key = vNode.componentInstance.$parent.$options.propsData.prop; el.addEventListener('input',()=>{ let val = vNode.context[form][key]; if(val[0]=='-'){ vNode.context[form][key] = rule(val,val.slice(1,val.length)) }else{ vNode.context[form][key] = rule(val,val) } }) }});export {numRule }鼠标移上显示弹窗我的项目中遇到一个需要，form表单的label固定宽度，超出显示省略号，鼠标移上显示悬浮框；应用办法 <el-form-item v-form-tooltip label='我是一个长文字:'> <el-input v-model="form.gfNsrsbh"></el-input> </el-form-item>办法const formTooltip = Vue.directive('formTooltip', { bind(el, binding, vnode, oldVnode) { const label = el.querySelector('.el-form-item__label') var labelText = label.innerText // el-form-item label 名称 var tipContent = binding.value // v-form-tooltip 值 const ep = new Vue({ el: document.createElement('span'), template: `<el-popover content="${labelText}" popper-class="el-tooltip__popper" placement="top-start" :open-delay="500" trigger="hover"> <span slot="reference">${labelText}</span> </el-popover>` }) label.innerText = '' label.appendChild(ep.$el) } })

关于vue.js:使用vuebaidumap时找不到BMap对象报错BMap-is-not-defind

我的项目中须要用百度地图计算两个坐标点的间隔，在我的项目中引入vue-baidu-map后，组件中没有找不到BMap对象，一番寻找后。。。正确应用形式如下 1、在我的项目中引入vue-baidu-map main.js中import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: '你的密钥' })2、在组件中应用须要先加载地图组件才能够应用BMap，不须要显示地图组件能够让他暗藏 <div v-show="false"> <baidu-map @ready="onMapReady"/></div>methods: { //检测地图加载实现 onMapReady({BMap, map}) { this.BMap = BMap; }， getDistance(p1, p2) { try { const _this = this; const BMap = this.BMap; const driving = new BMap.DrivingRoute(new BMap.Point(116.404, 39.915), { onSearchComplete: function (results) { _this.distance = Math.floor((results.taxiFare.distance)/1000)// 公里数 } }); driving.search(p1, p2); } catch (e) { console.warn(e, 'e') } }, handleAddressChange() { const BMap = this.BMap; if(!BMap) return; const p1 = new BMap.Point(Longitude1, Latitude1); const p2 = new BMap.Point(Longitude2, Latitude2); this.getDistance(p1, p2) } }

关于vue.js:Vue3语法

视频课地址https://www.bilibili.com/vide... P5:Global API改为应用程序实例调用vue2中有很多全局api能够扭转vue的行为，比方Vue.component，这样的话所有创立的Vue实例共享雷同的全局配置。vue3中应用createApp返回app实例，由它裸露一系列全局api。例举如下：Vue.config --> app.configVue.config.productionTip --> removedVue.config.ignoredElement --> app.isCustomElementVue.component --> app.componentVue.directive --> app.directiveVue.mixin --> app.mixinVue.use --> app.useVue.filter --> removedP6:Vue2中不少global-api是作为动态函数间接挂在构造函数上的，例如Vue.nextTick()，如果咱们从未在代码中用过它们，就会造成所谓的dead code。Vue3把全局API抽取成独立函数，这样打包工具的摇树优化能够将这些dead code排除掉。受影响api：Vue.nextTickVue.observablee(replaced by Vue.reactive)Vue.versionVue.compile (only in full builds)Vue.set (only in compat builds)Vue.delete (only in compat builds)P7:.sync语法糖被移除，对立为v-model参数模式。语法糖：指计算机语言增加的某种语法，这种语法对语言的性能并没有影响，然而更不便程序员应用。 1、子组件传值未命名双向绑定<comp v-model="data"></comp>语法糖开展为：<comp :modelValue="data" @update:modelValue="data=$event"></comp>子组件comp接管属性和自定义事件为：app.component('comp', { template: '<div @click="$emit('update:modelValue', modelValue++)">{{modelValue}}</div>', props: ['modelValue']})2、子组件传值命名双向绑定<comp v-model:counter="data"></comp>语法糖开展为：<comp :counter="data" @update:counter="counter=$event"></comp>子组件comp接管属性和自定义事件为：app.component('comp', { template: '<div @click="$emit('update:counter', counter++)">{{counter}}</div>', props: ['counter']})

关于vue.js:elformitem校验多个字段

<el-form-item label="考勤周期：" prop="cycleEnd"> <el-select @change="cycleChange" v-model="formmodel.cycle"> <el-option v-for="item in cycleOption" :key="item.id" :label="item.label" :value="item.id" > </el-option></el-select><el-select v-model="formmodel.cycleStart"> <el-option v-for="item in cycleDateOption" :key="item.id" :label="item.label" :value="item.id" > </el-option></el-select><el-select v-model="formmodel.cycleEnd"> <el-option v-for="item in cycleDateOption" :key="item.id" :label="item.label" :value="item.id" > </el-option></el-select></el-form-item> data() { return { visible: false, formmodel: { cycle:'1' }, formRules: { date: [{ required: true, message: "请抉择考勤月份" }], cycleEnd: [{ required: true, validator:(rules,value,callback)=>{ let {cycleStart} = this.formmodel if (!value||!cycleStart) { return callback(new Error("请抉择考勤周期")) } return callback() } }], }, formRules2: { date: [{ required: true, message: "请抉择考勤月份" }] }};}, ...

关于vue.js:面试官你对vue生命周期的理解

面试官：你对vue生命周期的了解？一、生命周期是什么生命周期（Life Cycle）的概念利用很宽泛，特地是在政治、经济、环境、技术、社会等诸多畛域经常出现，其根本涵义能够艰深地了解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程在Vue中实例从创立到销毁的过程就是生命周期，即指从创立、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程咱们能够把组件比喻成工厂外面的一条流水线，每个工人（生命周期）站在各自的岗位，当工作流转到工人身边的时候，工人就开始工作 PS：在Vue生命周期钩子会主动绑定 this 上下文到实例中，因而你能够拜访数据，对 property 和办法进行运算这意味着你不能应用箭头函数来定义一个生命周期办法 (例如 created: () => this.fetchTodos()) 二、生命周期有哪些Vue生命周期总共能够分为8个阶段：创立前后, 载入前后,更新前后,销毁前销毁后，以及一些非凡场景的生命周期生命周期形容beforeCreate组件实例被创立之初created组件实例曾经齐全创立beforeMount组件挂载之前mounted组件挂载到实例下来之后beforeUpdate组件数据发生变化，更新之前updated数据数据更新之后beforeDestroy组件实例销毁之前destroyed组件实例销毁之后activatedkeep-alive 缓存的组件激活时deactivatedkeep-alive 缓存的组件停用时调用errorCaptured捕捉一个来自子孙组件的谬误时被调用三、生命周期整体流程Vue生命周期解释图具体分析beforeCreate -> created 初始化vue实例，进行数据观测created 实现数据观测，属性与办法的运算，watch、event事件回调的配置可调用methods中的办法，拜访和批改data数据触发响应式渲染dom，可通过computed和watch实现数据计算此时vm.$el 并没有被创立created -> beforeMount 判断是否存在el选项，若不存在则进行编译，直到调用vm.$mount(el)才会持续编译优先级： render > template > outerHTMLvm.el获取到的是挂载DOM的beforeMount 在此阶段可获取到vm.el此阶段vm.el虽已实现DOM初始化，但并未挂载在el选项上beforeMount -> mounted 此阶段vm.el实现挂载，vm.$el生成的DOM替换了el选项所对应的DOMmounted vm.el已实现DOM的挂载与渲染，此刻打印vm.$el，发现之前的挂载点及内容已被替换成新的DOMbeforeUpdate 更新的数据必须是被渲染在模板上的（el、template、render之一）此时view层还未更新若在beforeUpdate中再次批改数据，不会再次触发更新办法updated 实现view层的更新若在updated中再次批改数据，会再次触发更新办法（beforeUpdate、updated）beforeDestroy 实例被销毁前调用，此时实例属性与办法仍可拜访destroyed 齐全销毁一个实例。可清理它与其它实例的连贯，解绑它的全副指令及事件监听器并不能革除DOM，仅仅销毁实例应用场景剖析 <style> table th:first-of-type { width: 120px; } </style> | 生命周期 | 形容 || ------------- | ------------------------------------------------------------ || beforeCreate | 执行时组件实例还未创立，通常用于插件开发中执行一些初始化工作 || created | 组件初始化结束，各种数据能够应用，罕用于异步数据获取 || beforeMount | 未执行渲染、更新，dom未创立 || mounted | 初始化完结，dom已创立，可用于获取拜访数据和dom元素 || beforeUpdate | 更新前，可用于获取更新前各种状态 || updated | 更新后，所有状态已是最新 || beforeDestroy | 销毁前，可用于一些定时器或订阅的勾销 || destroyed | 组件已销毁，作用同上 |四、题外话：数据申请在created和mouted的区别created是在组件实例一旦创立实现的时候立即调用，这时候页面dom节点并未生成 ...

关于vue.js:前端将后端返回的文件流转为excel并下载

在日常开发中，咱们可能会遇到导出excel的状况，而后端此时给咱们返回的是一个文件流，须要前端将文件流转为url地址进行下载。能够将这个办法封装成一个工具类，不便其余中央调用，我这里放到了utils.js外面 import axios from 'axios'import Vue form 'vue'/** * 依据后端返回的文件流转为excel导出 * @param {Object} data */export function exportExcelMethod(data) { axios({ method: data.method, url: `${data.url}${data.params ? '?' + data.params : ''}`, responseType: 'blob', headers: { token: data.token }, timeout: 8000, data: data.data }) .then((res) => { const link = document.createElement('a') const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) link.style.display = 'none' link.href = URL.createObjectURL(blob) // link.download = res.headers['content-disposition'] //下载后文件名 link.download = data.fileName //下载的文件名 document.body.appendChild(link) link.click() document.body.removeChild(link) Vue.prototype.$message.success('导出胜利！') }) .catch((error) => { Vue.prototype.$message.error('参数谬误！') })}<el-button type="primary" plain size="small" @click="exportLog">导出</el-button>import { exportExcelMethod } from '@/utils'exportLog() { const url = this.baseUrl const data = this.data const myObj = { method: 'post', url: url, fileName: 'xxx日志', token: this.token, data: { data } } exportExcelMethod(myObj) }

关于vue.js:翻译-JavaScript-Everywhere第21章-使用React-Native创建移动应用程序

翻译 | 《JavaScript Everywhere》第21章应用React Native创立挪动应用程序写在最后面大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。为了进步大家的浏览体验，对语句的构造和内容略有调整。如果发现本文中有存在瑕疵的中央，或者你有任何意见或者倡议，能够在评论区留言，或者加我的微信：code_maomao，欢送互相沟通交流学习。 (ﾟ∀ﾟ)..:*☆哎哟不错哦第21章应用React Native创立挪动应用程序在1980年代前期的某一天，当我正和父母一起购物，发现了一台小型便携式电视，这是一个由电池供电的方盒，带有天线、小扬声器和一个玲珑的黑白屏幕。在周六早上的院子里，我被看到的卡通片震惊到了。只管我可能永远不会领有一个这样的电视，然而只有晓得存在这样一种设施，我就会感觉本人生存在科幻小说的将来世界中。我齐全不晓得我成年后会在口袋里携带一个设施，使我不仅能够观看宇宙巨匠，还能够拜访有限的信息，听音乐，玩游戏，做笔记，拍照。叫汽车，买货色，查看天气并实现有数的其余工作。 2007年，史蒂夫·乔布斯（Steve Jobs）推出了iPhone，他说：“每隔一段时间，就会呈现革命性产品，它扭转了所有。当然，智能手机是在2007年之前存在的，然而直到iPhone的衰亡（以及随后的Android的衰亡），它们才真正变得智能。在过来的几年中，智能手机应用程序曾经超过了最后的“所有皆有”淘金热阶段，已成为用户要求品质并寄予厚望的事物。当今的应用程序具备高标准的性能、交互和设计。更糟的是，古代挪动利用程序开发扩散在Apple iOS和Android平台上，每种平台应用不同的编程语言和工具链。你可能曾经猜到了（它就在书名），但JavaScript使咱们的开发人员能够编写跨平台的挪动应用程序。在本章中，我将介绍跨平台的库：React Native以及Expo工具链。咱们还将克隆示例我的项目代码，这将在接下来的几章中进行构建。咱们正在构建什么在接下来的几章中，咱们将为Notedly社交笔记应用程序构建一个挪动客户端版本。指标是应用JavaScript和Web技术来开发用户能够在其挪动设施上装置的应用程序。咱们将实现性能的一部分，以防止在Web应用程序章节中过多反复。具体来说，咱们的应用程序将：在iOS和Android操作系统上均可应用从咱们的GraphQL API加载笔记摘要和单个用户笔记应用CSS和款式化的组件进行款式化执行规范和动静的路由这些性能将全面概述应用React Native开发挪动应用程序的外围概念。在开始之前，让咱们认真看一下将要应用的技术。咱们将如何构建它React Native是咱们将用于开发应用程序的核心技术。React Native容许咱们在JavaScript中应用React编写应用程序，并为本地挪动平台出现它们。对于用户而言，这意味着React Native应用程序与以平台的编程语言编写的应用程序之间没有显著的区别。这是React Native绝对于其余风行的基于Web技术的挪动框架的次要劣势，该框架通常将Web视图包装在应用程序shell中。Facebook，Instagram，彭博，特斯拉，Skype，沃尔玛，Pinterest和许多其余公司已应用React Native来开发应用程序。咱们的利用程序开发工作流程的第二个要害局部是Expo，这套工具和服务通过真正有用的性能简化了React Native开发，例如设施上预览，应用程序构建和扩大外围React Native库。在开始咱们的开发之前，倡议你执行以下操作：拜访 expo.io并创立一个Expo帐户。通过在终端应用程序中键入npm install expo-cli --global来装置Expo命令行工具。通过在终端应用程序中键入expo login本地登录你的Expo帐户。为你的挪动设施装置Expo Client应用程序。能够在expo.io/tools中找到指向Expo Client iOS和Android应用程序的链接。在Expo Client应用程序中登录你的帐户。最初，咱们将再次应用 Apollo Client 与GraphQL API中的数据进行交互。Apollo Client蕴含用于应用GraphQL的一系列开源工具。入门在开始开发之前，你须要将我的项目启动程序文件复制到你的计算机上。该项目标源代码蕴含所有脚本和对第三方库的援用，这些第三方库是咱们开发应用程序所需的。要将代码克隆到本地计算机，请关上终端，导航到保留我的项目的目录，而后 git clone 我的项目存储库。如果你曾经浏览了API，Web和desktop章节，则可能曾经创立了一个 notedly 目录来放弃我的项目代码的条理性： $ cd Projects$ # type the `mkdir notedly` command if you don't yet have a notedly directory$ cd notedly$ git clone git@github.com:javascripteverywhere/mobile.git$ cd mobile$ npm install装置第三方依赖项通过制作本书的入门代码的正本并在目录中运行 npm install ，你无需为任何第三方依赖项再次运行 npm install 。 ...

关于vue.js:利用免费内网穿透-穿透内网vue项目

搭建vue我的项目并保障失常能够拜访vue-cli全家桶装置vue我的项目就不多说了，本地内置服务器用的是webpack-dev-server本地启动 8080 端口之后,间接拜访 http://localhost:8080/#index 启动胜利阐明能够看上面的配置了。启动网云穿客户端这里以pc版为例. 假如您曾经注册装置了客户端, 并曾经开明了隧道。如果没有注册请返回官网地址进行注册并支付收费隧道。www.xiaomy.net 注册胜利,官网支付收费隧道开明收费端口调配收费域名 biz.xiaomy.net ,设置 8080 端口和vue我的项目启动端口保持一致即可结束之后,点击官网最新下载地址，下载windows客户端。解压压缩包执行网云穿内网穿透.exe 查看隧道通过网云穿外网拜访本地vue全家桶遇到vue拜访失败的问题Invalid Host header 飘红的小红色字体,如许相熟的感觉... 解决办法package.json 中的 script 中 "dev": "webpack-dev-server --disableHostCheck=true --inline --progress --config build/webpack.dev.conf.js" 拜访胜利

关于vue.js:阿里iconfont在vuereact中引用及使用

1.下载下来所须要的icon，解压后失去文件：2.将文件放到我的项目外面：在react.js外面：在public外面新建一个文件夹iconfont(无要求)，将文件放进去在index.html中援用 <link rel="stylesheet" href="./iconfont/iconfont.css" />如果不是本地运行，能够全局配置PUBLIC_URL <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><link rel="stylesheet" href="%PUBLIC_URL%/iconfont/iconfont.css" />在组件中利用：简略利用，icon不变动状况下： <span className="icon iconyonghu"></span>icon可配置，能够批改变动，此处icon为可变动参数： <span className={`iconfont ${icon || 'iconyonghu'}`}></span>在Vue.js外面：在asssets中新建一个文件夹iconfont(无要求)，将文件放进去在组件中利用：在组件中引入 import '../assets/iconfont/iconfont.css';简略利用，icon不变动状况下： <span class="iconfont iconzhuti "></span>icon可配置，能够批改变动，此处i~~~~con为可变动参数 <span class="iconfont" :class="item.icon || 'iconzhuti'"></span>

关于vue.js:vue-element-组件添加拖动效果

应用vuedraggable插件装置npm install vuedraggable -S(可能须要装置Sortable)页面援用import draggable from 'vuedraggable'页面注册组件components: { draggable }，通过draggable标签应用调用update办法，该办法事件返回新索引和旧索引，数据同样是响应式的 <draggable v-model="postForm.recite" @update="datadragRecite"> <div class="content-box" v-bind:key="index" v-for="(item, index) in postForm.recite" > <el-input v-model="item.text" type="textarea" rows="3" placeholder="请输出必背内容"/> </div> </draggable>methods办法 datadragRecite(evt) { console.log('拖动前的索引 :' + evt.oldIndex) console.log('拖动后的索引 :' + evt.newIndex);}