Vue.js

首先，遇到问题时，切记：莫慌，办法总比艰难多！！！ 先依照官网文档上的装置步骤，一步一步的来，并引入到四个文件如果还报错的话，记住在App.vue中引入 <style lang="scss"> /* 引入uview全局款式 */ @import "uview-ui/index.scss"; /*每个页面公共css */</style>重点是：lang="scss"

1.开发环境 vue2.电脑系统 windows10专业版3.在开发的过程中,咱们常常会进行一些款式的操作,然而又不想应用原生的办法获取元素,上面我来分享一下我的解决办法,心愿对你有所帮忙。4.需要:在点击按钮,奇数次的时候背景色为红色,偶数次的时候背景色为红色,上面我剖析一下如何实现,废话不多说,间接上代码: //在return中定义两个值selectmoney: { // 定义 点击次数 num: 0,}5.在template中增加如下代码: <p v-for="(sitem,sindex) in $cJs.stringarr(item.support_amount_range)" :key="sindex" v-if="item.name!='网银转卡'" @click="selecttopup($event)">{{sitem}}</p>//要害代码为: @click="selecttopup($event)"6.在对应的办法中进行输入: selecttopup(e) { console.log("我是传进来的e的值"); console.log(e); console.log(e.target); console.log("我是传进来的e的值完结啦"); this.selectmoney.num += 1; if (this.selectmoney.num % 2 == 0) { console.log("我是偶数的状况"); console.log(this.selectmoney.num); console.log("我是偶数的状况完结啦"); e.target.style.backgroundColor = "#fff"; } else { console.log("我是奇数的状况"); console.log(this.selectmoney.num); console.log("我是奇数的状况完结啦"); e.target.style.backgroundColor = "#FED2D6"; } }//打印传进来的 e//打印传进来的 e.target 是你以后点击的元素 这样咱们在点击的时候的时候就能够获取以后的元素,而后判断几次的次数是偶数还是奇数,进行对应的批改背景色。7.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。

<template> <div class="content"> <input type="text" placeholder="请输出数字" class="input-area" v-model.trim="tonnage" maxlength="50" @input="dealInputVal(tonnage)" /> </div></template><script>export default { components: {}, data() { return { tonnage: '', } }, mounted() {}, methods: { dealInputVal(num) { //最大3位整数，一位小数; 100非法，100.1非法，1000不非法，100.11不非法 this.tonnage = num .replace(/[^\d.]/g, '') .replace(/\.{1,}/g, '.') .replace(/^(0(0)+|\.)/g, '') .replace('.', '$#$') .replace(/\./g, '') .replace('$#$', '.') .replace(/^(-)*(\d+)\.(\d).*$/, '$1$2.$3') if (parseInt(this.tonnage) >= 1000) { this.tonnage = '999' } } }}</script><style lang="less" scoped></style>

1.开发环境 vue2.电脑系统 windows10专业版3.在开发的过程中,咱们常常会须要滚动事件,咱们也会用到滚动监听,上面我来分享一下办法。4.废话不多说,间接上代码: <van-popup v-model="showseletboo" class="showseletb" position="bottom" id="showseletb"> <div class="showseletbcon" @scroll="handleScroll" ref="amobile"> <v-distpicker type="mobile"> </v-distpicker> </div> </van-popup>//在这里我应用的是ref进行获取元素5.在mounted中增加如下代码: let _this = this; this.$nextTick(() => { window.addEventListener('scroll', _this.handleScroll, true); })//留神:在这里如果不增加 true这个监听没有成果6.在methods中增加如下代码: // 滚动监听 handleScroll(e) { // scrollHeight（文档内容理论高度，包含超出视窗的溢出局部）、 // scrollTop（滚动条滚动间隔）、 // clientHeight（窗口可视范畴高度）。 // const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; let ascrollheight = this.$refs.amobile.scrollTop; // console.log(this.$refs.amobile); console.log(ascrollheight); // 输入 滚动的间隔 //滚动条到底部的条件 //滚动条到底部的条件 // if (scrollTop + clientHeight == scrollHeight) { // // div 到头部的间隔 + 屏幕高度 = 可滚动的总高度 //依据本人的需要进行操作 // } }, ...

全屏组件FullScreenContainer目录构造 index.vue<template> <div id="sp-full-screen-container" :ref="ref"> <div id="sp-full-screen-container-content"> <template v-if="ready"> <slot></slot> </template> </div> </div></template><script>import autoResize from "./mixin/autoResize.js";export default { name: "FullScreenContainer", mixins: [autoResize], props: { //设计稿画布大小（单位：px） canvasWidth: { type: Number, default: 0, }, canvasHeight: { type: Number, default: 0, }, }, data() { return { ref: "sp-full-screen-container", ready: false, scale: 1.0, }; }, methods: { afterAutoResizeMixinInit() { const { initConfig, setContainerScale } = this; initConfig(); setContainerScale(); this.ready = true; }, initConfig() { const { dom, canvasWidth, canvasHeight } = this; // debugger; if (canvasWidth > 0 && canvasHeight > 0) { dom.style.cssText = `width: ${canvasWidth}px; height: ${canvasHeight}px;`; } }, setContainerScale() { const { width, height, dom } = this; const { innerWidth, innerHeight } = window; let top = 0; let left = 0; let scale = 0; // 设置缩放率并居中 if (innerWidth / innerHeight > width / height) { // 高低居中 scale = innerHeight / height; left = (innerWidth - scale * 1920) / 2; } else { // 左右居中 scale = innerWidth / width; // top = 0; } // 防止死循环 if (this.scale == scale) { dom.style.left = `${left}px`; dom.style.top = `${top}px`; dom.style.transform = `scale(${scale})`; return; } this.scale = scale; if (width == 0 || height == 0) { dom.style.left = `${left}px`; dom.style.top = `${top}px`; dom.style.transform = `scale(${scale})`; } else { // 升高DOM操作次数 dom.style.cssText = `width: ${width}px; height: ${height}px; left: ${left}px; top: ${top}px; transform: scale(${scale});`; } }, onResize() { const { setContainerScale } = this; setContainerScale(); }, },};</script><style lang="less">#sp-full-screen-container { position: fixed; top: 0px; left: 0px; overflow: visible; -webkit-transform-origin: left top; transform-origin: left top; z-index: 999; display: flex; justify-content: center; align-items: center;}</style>autoResize.jsimport { debounce, observerDomResize } from "../util/index";export default { data() { return { dom: "", width: 0, height: 0, debounceInitWHFun: "", domObserver: "", }; }, methods: { async autoResizeMixinInit() { const { initWH, getDebounceInitWHFun, bindDomResizeCallback, afterAutoResizeMixinInit, } = this; await initWH(false); getDebounceInitWHFun(); bindDomResizeCallback(); if (typeof afterAutoResizeMixinInit === "function") afterAutoResizeMixinInit(); }, initWH(resize = true) { const { $nextTick, $refs, ref, onResize } = this; return new Promise((resolve) => { $nextTick(() => { const dom = (this.dom = $refs[ref]); this.width = dom.clientWidth; this.height = dom.clientHeight; if (typeof onResize === "function" && resize) onResize(); resolve(); }); }); }, getDebounceInitWHFun() { const { initWH } = this; this.debounceInitWHFun = debounce(100, initWH); }, bindDomResizeCallback() { const { dom, debounceInitWHFun } = this; this.domObserver = observerDomResize(dom, debounceInitWHFun); window.addEventListener("resize", debounceInitWHFun); }, unbindDomResizeCallback() { let { domObserver, debounceInitWHFun } = this; domObserver.disconnect(); domObserver.takeRecords(); domObserver = null; // NOSONAR window.removeEventListener("resize", debounceInitWHFun); }, }, mounted() { const { autoResizeMixinInit } = this; autoResizeMixinInit(); }, onBeforeUnMount() { const { unbindDomResizeCallback } = this; unbindDomResizeCallback(); },};util/index.jsexport function randomExtend(minNum, maxNum) { if (arguments.length === 1) { return parseInt(Math.random() * minNum + 1, 10); } else { return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); }}export function debounce(delay, callback) { let lastTime; return function () { clearTimeout(lastTime); const [that, args] = [this, arguments]; lastTime = setTimeout(() => { callback.apply(that, args); }, delay); };}export function observerDomResize(dom, callback) { const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; const observer = new MutationObserver(callback); observer.observe(dom, { attributes: true, attributeFilter: ["style"], attributeOldValue: true, }); return observer;}export function getPointDistance(pointOne, pointTwo) { const minusX = Math.abs(pointOne[0] - pointTwo[0]); const minusY = Math.abs(pointOne[1] - pointTwo[1]); return Math.sqrt(minusX * minusX + minusY * minusY);}

Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'我的Swiper定义： <div class="nyswiper-container" ref="my_swiper"> <div class="mySwiperWrapper"> <slot name="content"> </slot> </div> </div>报错信息： 看了官网文档之后发现： 要保留默认名class：swiper-container。 批改之后： <div class="swiper-container" ref="my_swiper"> <div class="mySwiperWrapper"> <slot name="content"> </slot> </div> </div>持续报错，还是什么那个错。 查看GitHub： 他说须要个wrapper，然而我曾经定义了wrapper了，只不过名字不是swiper-wraper,起初还是把类名改回来，我本认为只有定义了里面的container，外面的类名能够轻易写，只有合乎层级关系就好。 最初还是改回来原来的类名： <div class="swiper-container" ref="my_swiper"> <div class="swiper-wrapper"> <slot name="content"> </slot> </div> </div>最初不会报错了： 其实我曾经应用很屡次这个玩意了，之前是这样定义的：能够失常运行。 <div ref="school_swiper" class="swiper-container_home"> <div class="swiper-wrapper"> <div class="swiper-slide swiper_slide_home" v-for="(item, index) in imgList" :key="index" > <div></div> </div> </div> <div class="swiper-pagination" style="color:#ffffff"></div> </div>所以我感觉，里面的类名能够批改，然而wrapper类名不能够批改，因为你即便改了里面的类名，因为你通过refs拿到里面这个container了，而后初始化了Swiper，Swiper外部还是感觉你这样的解决是对的。里面这个container我感觉次要是用来初始化用的，类名无需保留，这个和我看中文的swiper文档写的不一样，它说要保留，可能目标就是为了让用户恪守它的规定，避免报错吧。： new Swiper(this.$refs.school_swiper, { loop: true, // 循环模式选项 width: window.innerWidth * 1, //分页器 pagination: { el: ".swiper-pagination", }, autoplay: { delay: 2000, disableOnInteraction: false, //用户触摸后静止敞开 }, })); },最初订正swiper-slide类名也不能舍弃。。也要加上能力滑动，应用插槽时，间接在里面的组件中定义slide即可 ...

/* 约定: 通过目录后果生产路由信息 目录构造如下 目录1--目录2--目录3--页面 生成的路由path是: 目录1/目录2/目录3/页面 如果页面用index.vue命名, path会被截取, 生成: 目录1/目录2/目录3 举荐的目录层级如下 业务目录 --模块目录 --页面 此时生成的path为: 业务目录/模块目录/页面, 同时应用Layout布局(蕴含菜单和导航) 当path只有一层时, 将不应用Layout布局, 如 页面目录(home) --页面(命名index.vue) 目录中含有components的文件不会生成路由信息 */// 首页不须要Layout// 重定向// 404// views为src下页面所在的目录// 获取所有的路由信息let allFiles = []const contexts = require.context( '@/views', true, /^(?!.*?components).*\.vue$/, 'lazy',)contexts.keys().forEach(file => { allFiles.push(file)})// console.log('allFiles', allFiles)import Layout from '@/layout/Layout2'let routes = []allFiles.forEach(file => { let path = file .substring(1) .replace('/index.vue', '') .replace('.vue', '') let name = path.substring(1).replace(/\//g, '-') let _filePath = file.replace('./', '') let component = loader(_filePath) // console.log(path) let array = path.split('/') // console.log(array.length, path) if (array.length < 2) { return } // 目前一层目录不必Layout if (array.length === 2) { let route = { path, component, name, } routes.push(route) return } path = path.replace(`/${array[1]}/`, '') // fullScreen不加layout if (array[1] === 'fullScreen') { let route = { path: `/fullScreen/${path}`, component, name, } routes.push(route) } else { // 多层目录套用Layout let route = { path: `/${array[1]}`, component: Layout, children: [{ path, component, name }], } routes.push(route) }})const redirect = [ // 页面首页重定向 { path: '/', redirect: '/home', }, { path: '/502', redirect: '/fullScreen/502', }, // 404 { path: '*', redirect: '/fullScreen/404', },]// 增加重定向routes.push(...redirect)// console.log('routes', routes)// import(// /* webpackChunkName: '[request]' */// `@/views/${file}`// )function loader(file) { return () => import(`@/views/${file}`)}import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export let router = new Router({ // mode: 'history', scrollBehavior: () => ({ y: 0 }), routes: routes,})import store from '@/store/index'router.beforeEach((to, from, next) => { // 避免用户手动去清导航的本地存储 if (!localStorage.getItem('boxCategoryDataLocal')) { localStorage.setItem('boxCategoryDataLocal', '21212') next({ path: '/' }) return } // 当url切换时, 切换上下文, 从url中取出上下文, 并且切换上下文 let contextName = to.path.split('/')[1] if ( store.getters.allContainers[contextName] && contextName !== store.getters.currentContainer.contextName ) { store.dispatch('changeContext', contextName) next() return } // 一些公共页面如common, 是找到不到对应的container对象的 // 此时也不会切换上下文, 目前不做任何解决 next()})import { Modal } from 'view-design'router.onError(error => { console.log('发版错误码：', error.message) const pattern = /Loading chunk (.)+ failed/g const isChunkLoadFailed = error.message.match(pattern) if (isChunkLoadFailed) { Modal.error({ title: '提醒', content: '网站有更新，请刷新页面', okText: '刷新', onOk: () => { location.reload() }, }) }})// 修复在跳转时push了雷同的地址会报错的问题const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}

在main.js中注册组件// 注册命名以 DIY 结尾的自定义组件import diyComponents from '@/components'Vue.use(diyComponents)在components文件夹下增加index.js，外围代码如下：// 注册命名以 DIY 结尾的自定义组件export default { install(Vue) { const componentsContext = require.context('@/components', true, /\.vue$/) componentsContext.keys().forEach(component => { const componentConfig = componentsContext(component).default if (componentConfig.name && componentConfig.name.indexOf('DIY') === 0) { Vue.component(componentConfig.name, componentConfig) } }) },}在components文件夹下增加组件Wait在components文件夹下增加文件夹Wait，而后增加Wait.js //Wait.js<template> <div class="development"> <span>开发中，敬请期待</span> </div></template><script>export default { name: 'DIYWait',}</script><style lang="less" scoped>.development { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 400px; // position: absolute; // top: 10%; span { color: #c2cee5; font-size: 12px; }}</style>应用组件应用时，<SFWait></SFWait> ...

vue插件的举荐装置vuetur 关键字高亮 语法错误检测vue 2snippets 语法提醒官网地址 v-on罕用的修饰符@事件名.stop 阻止冒泡@事件名.prevent 阻止默认事件@keyup.enter 回车触发 针对inputv-if v-else-if v-else指令v-if="一句话表达式（最初转换成boolean值，如果为真，则进行该语句所在标签渲染，如果为假则不渲染，该标签将不存在）"v-else-if和v-if 是一样用法，它是v-if不成立状况下才会走到v-else-if这里来 v-else前面毋庸跟任何语句，当后面v-if和v-if-else\`都不成立时，它就会执行，当后面任何一个执行渲染，它就不执行 对于computed<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><!-- 计算属性应用场景：依赖一个或者多个值产生一个新的值1:放到computed:{}2:实质是一个函数 return 一个值3:它return的值就是该计算属性的值4：它可当属性应用--><!-- 计算属性传参 --><body> <div id='app'> <p>{{msg}}</p> <p>{{msg.split("").reverse().join("")}}</p> <!-- 这里的getMsg等效于"xxx" --> <p>{{getMsg("!")}}</p> <!-- <p>xxx</p> --> </div> <script src='./vue.js'></script> <script> new Vue({ el: '#app', data: { msg: "abcdefg", money: 10 }, computed: { getMsg() { // return "xxx" return function (info) { return this.msg.split("").reverse().join("") + info } } } }) </script></body></html>transition 单元素动画动画体要用transition包住，name属性 定义名称，该值就是前面css的一个前缀 ...

一、vue路由携带的参数，params与queryparams：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做paramsquery：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。通常配置的router的index.js，如果是一个详情页，那么个别路由变动只扭转一个id就好了，而后由id来对后盾发动网络申请，来申请不同详情的数据。 范例1：index.js配置动静路由，应用params形式：比方我要写一个中国各个学校的详情页面，那么我要配置一个动静路由： { path:'/schoolDetail/:id', name:'SchoolDetail', component:schoolDetail, meta:{ title:'SchoolDetail' } },下面咱们只看path，前面的冒号示意id是一个变量，这个变量能够响应式变动，很合乎vue的特点。当咱们应用语法跳转路由时（此时间接在地址下面加上你要跳转的id变量，就是params形式跳转）: this.$router.push({ path:'/testDetail/'+id)浏览器是这个样子的：前面一大串的数字是id号。 范例2：index.js不必配置动静路由，应用query形式实现路由动态变化：咱们此时不必在index外面配置这个冒号id的话，其实在路由跳转配置也能够，那么来个例子： { path:'/schoolDetail', name:'SchoolDetail', component:schoolDetail, meta:{ title:'SchoolDetail' } },当咱们应用语法跳转路由时（间接定义个query的参数，此参数是一个对象，你能够往里面增加很多属性值，然而不要超过浏览器限度的长度就好了）: this.$router.push({ path:'/schoolDetail/', query:{id:id}})搜寻框前面的id以问号宰割： 范例3：你也能够同时配置，只不过搜寻框的数字变多，且难看：应用语法跳转路由（同时配置params及query参数）： this.$router.push({ path:'/schoolDetail/'+id, query:{_id:_id}})浏览器搜寻框样子：此时探索vue的params与query跳转路由试验完结，开始进行axios的参数携带： 二、axios发动申请的携带参数与后端解析时拿到的参数1.get申请携带参数，应用params axios.request({ // method:"get",request url:"/school/schools", method:'get', params:{ _id } })}值得注意的是，axios的参数如同没有query的对象，只有params对象，这个是我刚开始的时候纳闷的，因为我用params能够正确传参，用query这个对象，发现传参不了。上面是我复制的文档的参数配置 { // `url` is the server URL that will be used for the request url: '/user', // `method` is the request method to be used when making the request method: 'get', // default // `baseURL` will be prepended to `url` unless `url` is absolute. // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs // to methods of that instance. baseURL: 'https://some-domain.com/api/', // `transformRequest` allows changes to the request data before it is sent to the server // This is only applicable for request methods 'PUT', 'POST', and 'PATCH' // The last function in the array must return a string or an instance of Buffer, ArrayBuffer, // FormData or Stream // You may modify the headers object. transformRequest: [function (data, headers) { // Do whatever you want to transform the data return data; }], // `transformResponse` allows changes to the response data to be made before // it is passed to then/catch transformResponse: [function (data) { // Do whatever you want to transform the data return data; }], // `headers` are custom headers to be sent headers: {'X-Requested-With': 'XMLHttpRequest'}, // `params` are the URL parameters to be sent with the request // Must be a plain object or a URLSearchParams object params: { ID: 12345 }, // `paramsSerializer` is an optional function in charge of serializing `params` // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/) paramsSerializer: function (params) { return Qs.stringify(params, {arrayFormat: 'brackets'}) }, // `data` is the data to be sent as the request body // Only applicable for request methods 'PUT', 'POST', and 'PATCH' // When no `transformRequest` is set, must be of one of the following types: // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams // - Browser only: FormData, File, Blob // - Node only: Stream, Buffer data: { firstName: 'Fred' }, // `timeout` specifies the number of milliseconds before the request times out. // If the request takes longer than `timeout`, the request will be aborted. timeout: 1000, // default is `0` (no timeout) // `withCredentials` indicates whether or not cross-site Access-Control requests // should be made using credentials withCredentials: false, // default // `adapter` allows custom handling of requests which makes testing easier. // Return a promise and supply a valid response (see lib/adapters/README.md). adapter: function (config) { /* ... */ }, // `auth` indicates that HTTP Basic auth should be used, and supplies credentials. // This will set an `Authorization` header, overwriting any existing // `Authorization` custom headers you have set using `headers`. auth: { username: 'janedoe', password: 's00pers3cret' }, // `responseType` indicates the type of data that the server will respond with // options are 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' responseType: 'json', // default // `responseEncoding` indicates encoding to use for decoding responses // Note: Ignored for `responseType` of 'stream' or client-side requests responseEncoding: 'utf8', // default // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token xsrfCookieName: 'XSRF-TOKEN', // default // `xsrfHeaderName` is the name of the http header that carries the xsrf token value xsrfHeaderName: 'X-XSRF-TOKEN', // default // `onUploadProgress` allows handling of progress events for uploads onUploadProgress: function (progressEvent) { // Do whatever you want with the native progress event }, // `onDownloadProgress` allows handling of progress events for downloads onDownloadProgress: function (progressEvent) { // Do whatever you want with the native progress event }, // `maxContentLength` defines the max size of the http response content in bytes allowed maxContentLength: 2000, // `validateStatus` defines whether to resolve or reject the promise for a given // HTTP response status code. If `validateStatus` returns `true` (or is set to `null` // or `undefined`), the promise will be resolved; otherwise, the promise will be // rejected. validateStatus: function (status) { return status >= 200 && status < 300; // default }, // `maxRedirects` defines the maximum number of redirects to follow in node.js. // If set to 0, no redirects will be followed. maxRedirects: 5, // default // `socketPath` defines a UNIX Socket to be used in node.js. // e.g. '/var/run/docker.sock' to send requests to the docker daemon. // Only either `socketPath` or `proxy` can be specified. // If both are specified, `socketPath` is used. socketPath: null, // default // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http // and https requests, respectively, in node.js. This allows options to be added like // `keepAlive` that are not enabled by default. httpAgent: new http.Agent({ keepAlive: true }), httpsAgent: new https.Agent({ keepAlive: true }), // 'proxy' defines the hostname and port of the proxy server. // You can also define your proxy using the conventional `http_proxy` and // `https_proxy` environment variables. If you are using environment variables // for your proxy configuration, you can also define a `no_proxy` environment // variable as a comma-separated list of domains that should not be proxied. // Use `false` to disable proxies, ignoring environment variables. // `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and // supplies credentials. // This will set an `Proxy-Authorization` header, overwriting any existing // `Proxy-Authorization` custom headers you have set using `headers`. proxy: { host: '127.0.0.1', port: 9000, auth: { username: 'mikeymike', password: 'rapunz3l' } }, // `cancelToken` specifies a cancel token that can be used to cancel the request // (see Cancellation section below for details) cancelToken: new CancelToken(function (cancel) { })}附上文档地址，这个网站的文档可能不是最新的，然而足以解决你开发的应用了：axios文档 ...

作为开发人员，您肯定据说过出名的UI库—React、成熟的前端框架—Angular、以及最新的渐进式框架--Vue。显然，它们都有各种独特的劣势和性能指标。本文将和您探讨这三种架构在不同方面的优缺点，以不便您在理论利用中做出抉择。 许可证 作为首要思考的因素，咱们通常在抉择开源框架或软件库之前，彻底查看它们的许可证。目前，React、Angular和Vue都应用着MIT许可证，因而它们为用户提供了无限的应用水平。您须要在应用之前，认真理解每种许可证的具体含意。 架构Angular 隶属于MEAN栈的Angular框架，是各个初创企业热门采纳的技术栈。它基于TypeScript的Web利用开发残缺框架，次要用于构建单页面的Web利用(SPA)。 与原始框架AngularJS不同的是，因为基于组件，因而Angular 2与各种MV*模式并无严密关联。Angular的构造次要包含了模块(Modules)、组件(Components)和服务(Services)。 在Angular框架中，每个组件都有一个独立的类或模板，可用于定义应用逻辑与元数据(Decorators)。此类元数据能够提供，无关创立和显示其视图所需块地位的指引。 Angular体系架构中的另一个重要因素是，由HTML编写的各种模板。它们能够包含带有非凡指令的Angular模板语法，用以输入反馈性数据，并能提交多个元素。 服务作为Angular利用中的一个独特元素，能够被组件用来委派诸如：获取数据或验证输出等业务逻辑工作。虽未明确要求，然而Angular倡议用户将利用结构为一组可被重复使用的齐全不同的服务。 React 作为一种开源的前端库，React次要被用于开发用户界面。因为这种灵便的前端计划，并未对特定的我的项目构造有强制要求，因而React开发人员只需几行代码，即可开始应用。 尽管基于JavaScript，但在大多数状况下，React可与JSX(JavaScript XML)联合在一起。后者是一种语法扩大，它容许开发人员同时创立蕴含HTML和JavaScript的元素。实际上，那些由JSX所创立的任何内容，都能够被开发人员应用React JavaScript API来创立。相比DOM，React岂但有着更弱小的元素，并且它们是React利用的最小构建块。而React组件则是决定了是否要在整个Web利用中，独立且可重用应用的构建块。 Vue 作为一个开源的Model-View-View-Model前端JS库，Vue可被用于开发用户界面和SPA。因为属于渐进式框架，因而它可能与其余工具一起用在前端开发中。Vue凭借着其多功能性、高性能、以及在Web利用上的用户体验，而广受欢迎。 在应用Vue的过程中，开发人员通常会工作在View Model层上，以确保指标框架通过出现最新的视图，来解决利用数据。Vue的模板语法可能将可辨认的HTML，与各种非凡指令性能相结合。开发人员能够应用该语法来创立视图组件。 Vue中的组件岂但可重用，而且体积小且独立。例如，因为扩大名为.vue的单文件组件(Single File Components，SFC)反对HTML、JavaScript和CSS，因而它能够将所有相干代码都集中到一个文件中。 在大型Vue.js我的项目中，为了应用SFC来组织代码，咱们能够借用Webpack或Browserify之类的工具，将SFC转换为无效的JavaScript代码。 用意和范畴Angular Angular比拟适宜大型和高级我的项目。其次要性能包含： 可用来开发渐进式Web利用(Progressive Web App，PWA)。 可从新设计网站利用。 可能设计和建设基于内容的动静网页。 可创立须要简单基础架构的大型企业应用。 React 来自MERN栈家族的React，是一种以构建简单的业务利用闻名的技术栈。作为一款弱小的工具，React可与Redux、MobX或其余流量模式库一起应用。React比拟适宜如下我的项目： 带有导航项、折叠/展开式菜单、能显示沉闷/非沉闷状态与按钮、动静输出、用户登录、以及拜访权限调配等，带有多个组件的应用程序。 因为React组件具备申明性，因而它能够轻松地解决具备增长和可扩大需要简单我的项目构造。 各种以UI为重点的Web利用。 Vue 因为Vue的学习曲线平缓且容易上手，因而它比拟适宜解决短期问题。通过与现有代码块的轻松集成，Vue可能被用于如下场景中： 须要具备动画、或交互式元素的Web利用开发我的项目。 无需高级技术即可交付原型的需要。 须要与多个应用程序无缝集成的利用。 须要疾速推出MVP(Model-View-Presenter)的需要。 性能与开发Angular Angular在性能上具备如下长处： 为了加强产品/利用的性能，可与第三方无缝集成。 通过提供弱小的组件汇合，以简化编写、更改和应用代码的过程。 其“提前编译器(ahead-of-time-compiler)”可能晋升加载工夫和平安强度。 MVC模型通过容许视图拆散，来帮忙缩小后盾的查问。 促成将依赖项注入，用作将组件解耦的内部元素。这些为可重用性、以及简化治理与测试铺平了路线。 通过将工作分成逻辑块，来缩小网页的初始加载工夫。 可齐全定制化的设计。 有助于将HTML和TypeScript编译为JavaScript，进而放慢浏览器在加载Web利用之前的代码编译速度。 React 在性能方面，React可与Vue媲美，毕竟两者都有雷同的架构，都能与DOM交互。React在Web开发方面的性能个性如下： 反对捆绑，这对于缩小最终用户的资源占用是至关重要的。 因为提供了单向数据的绑定反对，因而能够更好地管制我的项目。 用户能够轻松地对其进行测试和监控。 适宜那些须要频繁更改的简单利用。 Vue Vue的性能次要体现在如下方面： 更平缓的学习曲线。 可能高效地解决简单的单页面利用。 提供丰盛的高端性能。 各自劣势Angular 提供各种模板、表单、疏导程序、相干体系架构、组件、以及组件之间交互的详细信息。 平滑的双向数据绑定。 反对MVC体系架构。 内置模块零碎。 ...

问题前端老手小白，动手uni-app框架，一脸懵逼，从最简略的页面生命周期开始吧！ 剖析 uni-app的页面生命周期函数：onInit监听页面初始化，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发机会早于 onLoad onLoad监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参） onShow监听页面显示。页面每次呈现在屏幕上都触发，包含从上级页面点返回露出以后页面 onReady监听页面首次渲染实现。留神如果渲染速度快，会在页面进入动画实现前触发 onHide监听页面暗藏 onUnload监听页面卸载 vue生命周期beforeCreate在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创立，el 和 data 并未初始化，因而无法访问methods， data， computed等上的办法和数据 created实例曾经创立实现之后被调用，在这一步，实例已实现以下配置：数据观测、属性和办法的运算，watch/event事件回调，实现了data数据的初始化，el没有。 挂载阶段还没有开始, $el属性目前不可见，这是一个罕用的生命周期，你能够调用methods中的办法，扭转data中的数据，并且批改能够通过vue的响应式绑定体现在页面上，获取computed中的计算属性等等，通常咱们能够在这里对实例进行预处理，也有一些童鞋喜爱在这里发ajax申请，值得注意的是，这个周期中是没有什么办法来对实例化过程进行拦挡的，因而如果有某些数据必须获取才容许进入页面的话，并不适宜在这个办法发申请，倡议在组件路由钩子beforeRouteEnter中实现 beforeMount挂载开始之前被调用，相干的render函数首次被调用（虚构DOM），实例已实现以下的配置： 编译模板，把data外面的数据和模板生成html，实现了el和data 初始化，留神此时还没有挂载html到页面上。 mounted挂载实现，也就是模板中的HTML渲染到HTML页面中，此时个别能够做一些ajax操作，mounted只会执行一次。 beforeUpdate在数据更新之前被调用，产生在虚构DOM从新渲染和打补丁之前，能够在该钩子中进一步地更改状态，不会触发附加地重渲染过程 updated在因为数据更改导致的虚构DOM从新渲染和打补丁时会调用，调用时，组件DOM曾经更新，所以能够执行依赖于DOM的操作，而后在大多状况下，应该防止在此期间更改状态，因为这可能会导致更新有限循环，该钩子在服务器端渲染期间不被调用 beforeDestroy在实例销毁之前调用，实例依然齐全可用，这一步还能够用this来获取实例，个别在这一步做一些重置的操作，比方革除掉组件中的定时器和监听的dom事件 destroyed在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用 uni-app中的vue的生命周期执行程序：beforeCreateonLoadcreatedonShowbeforeMountonReadymountedbeforeUpdateupdated返回上一页时，会执行onUnLoad，并未有执行destroyed，并未执行onHide进入下一页时，会执行onHideEnd

常识储备：（1）document.addEventListener(event, function, useCapture);（2）window.addEventListener(event, function, useCapture);参数具体先盗个图： 参数形容event必须。形容事件名称的字符串。function必须。形容了事件触发后执行的函数。即回调函数。useCapture可选。布尔值，指定事件是否 在捕捉或冒泡阶段执行。解释： 1.第一个参数是监听的事件类型:常见的事件类型能够参见：HTML DOM 事件关上页面后能够看到许多常见的事件： 留神：应用时，去掉前缀on，如：我要监听点击事件时，间接：document.addEventListener（'click',callback(),[true || false]）不须要应用前缀！ 2.第二个参数为回调函数，即监听到后就触发这个函数。 3.第三个参数是bool值，能够是true或者是false，能够依据传入的值来指定事件的执行形式。给个例子： <!DOCTYPE html><html><head><script language="javascript">function showa(){ var ida=document.getElementById('a'); alert(ida.innerText);}window.addEventListener("click", showa, true); function showb(){ var idb=document.getElementById('b'); alert(idb.innerText);}window.addEventListener("click", showb, false); function showc(){ var idc=document.getElementById('c'); alert(idc.innerText);}document.addEventListener("click", showc, true); function showd(){ var idd=document.getElementById('d'); alert(idd.innerText);}document.addEventListener("click", showd, false);</script></head><body><a id="a">aa</a><br><a id="b">bb</a><br><a id="c">cc</a><br><a id="d">dd</a></body></html>弹窗程序：acdb捕捉时true：先执行window，再执行document；冒泡时false：事件往回传递，先执行document，再执行window。 window.addEventlistener参数为true时，先弹窗再看到页面内容，false时，先看到页面的内容，再弹窗；document.addEventlistener参数为true时，先看到页面内容再弹窗，false时，先弹窗再看到页面内容。 【名词解释】1.捕捉：事件捕捉，从dom构造上到下，window.addEventListener先document.addEventListener被捕捉。 2.冒泡：事件冒泡，从dom构造底层向上传递，document.addEventListener先于window.addEventListener被触发。 在addEventListener第三个参数处可指定事件是否在捕捉或冒泡阶段执行。//这里的element示意了下面的增加监听不止只有window和document，也能够是任何元素，一般HTML通过getElement获取元素，vue中能够通过ref获取该元素，相应的增加点击事件。element.addEventListener(【参数1】event,【参数2】function(){ },【参数3】// true - 事件句柄在捕捉阶段执行// false- 默认, 事件句柄在冒泡阶段执行)题外扩大：事件的流传：*对于事件的流传是历史遗留问题，由前网景公司和微软公司有不同的了解而收回。 -微软公司认为事件应该是由外向外流传，也就是当事件触发时，应该先触发以后元素上的事件，而后再向以后元素的先人元素上流传，也就说事件应该在冒泡阶段执行。 -网景公司认为事件应该是由内向内流传的，也就是以后事件触发时，应该先触发以后元素的最外层的先人元素的事件．而后在向内流传给后辈元素。 -W3C 综合了两个公司的计划，将事件流传分成了三个阶段（当初浏览器执行的默认规范）： 1.捕捉阶段：在捕捉阶段时，从最外层的先人元素，向指标元素进行事件的捕捉．然而默认此时不会触发事件 。2.指标阶段：事件捕捉到指标元素，捕捉完结，开始在指标元素上触发事件 。3.冒泡阶段：事件从指标元素向他的先人元素传递，顺次触发先人元素上的事件。 无关捕捉冒泡的深一点点的探索，请看我的另一篇博文：HTML Dom事件流传：冒泡与捕捉探索 注释：一.监听滚动事件：//函数showbtn showbtn(){ let that = this if(document.body.scrollTop > 400 || document.documentElement.scrollTop > 400||window.pageYOffset>400){ that.s_bTop=true }else{ that.s_bTop=false } },//监听函数this.showbtn window.addEventListener("scroll",this.showbtn,true);//监听到document滚动则触发函数showbtn二、鼠标滑动事件：//函数is_showNavis_showNav(e) { e = e || window.event; let that = this; if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件 if (e.wheelDelta > 0) { //当滑轮向上滚动时 console.log("ie 谷歌 滑轮向上滚动") } if (e.wheelDelta < 0) { //当滑轮向下滚动时 console.log("ie 谷歌 滑轮向下滚动"); } } else if (e.detail) { //Firefox滑轮事件 if (e.detail> 0) { //当滑轮向上滚动时 console.log("Firefox 滑轮向上滚动"); } if (e.detail< 0) { //当滑轮向下滚动时 console.log("Firefox 滑轮向下滚动"); } } }//滚轮事件只有firefox比拟非凡，应用DOMMouseScroll; 其余浏览器应用wheel【注：mousewheel已废除，不倡议应用】上面两个能够同时应用，因为如果没有此事件，就不会触发，IE 谷歌没有DOMMouseScroll则不会触发，火狐有些版本没有wheel所以，为了兼容，两个都能够用。 //DOMMouseScroll监听火狐 window.addEventListener("DOMMouseScroll",this.is_showNav,true) //wheel监听IE 谷歌 window.addEventListener("wheel",this.is_showNav,true); 运行后果：谷歌 edge浏览器： ...

父子组件通信小结以及双向数据绑定问题1.先扯个淡学习了一天的Vue组件化开发,脑瓜子嗡嗡的。遇事不要慌，先去吃个快餐。吃饱才有力量扯淡，程序员还是应该以身材为重。鄙人健身三年，有喜爱静止的小伙伴欢送私聊深刻交换一下。 2.步入正题，有这样一个需要：1.子组件能够获取父组件的data数据 2.子组件中的输入框能够批改获取到的data数据 3.子组件在批改获取到的数据同时反过来扭转父组件的data数据 3.实现过程1.首先子组件获取父组件的data数据置信大家肯定不生疏，只须要通过props自定义属性即可。(prop 是子组件用来承受父组件传递过去的数据的一个自定义属性。父组件的数据须要通过 props 把数据传给子组件，子组件须要显式地用 props 选项申明 “prop”) <body> <div id="app"> <cpn :number1="num1" :number2="num2" ></cpn> </div> <template id="cpn"> <div> <h2>{{number1}}</h2> <h2>{{number2}}</h2> </div> </template> <script> var vm = new Vue({ el: '#app', data: { num1:1, num2:0 }, components:{ cpn:{ template:'#cpn', props:{ number1:Number, number2:Number }, } } }); </script></body>很简略的操作 输入胜利：2.接下来 咱们要通过input输入框扭转props中获取的数据内容，很多人会想到通过v-model实现数据双向绑定。那么可行吗？可行，然而会有一点小问题。 批改template标签内容 通过v-model绑定number1和number2 <template id="cpn"> <div> <h2>{{number1}}</h2> <input type="text" v-model="number1"> <h2>{{number2}}</h2> <input type="text" v-model="number2"> </div> </template> 输入后果如下：能够看到咱们的确能够通过输入框输出内容实现对props内数据的批改。然而红艳艳的报错咱们还是不瞎的。将报错内容百度翻译一下。大略的意思就是 props中是咱们从父组件中获取的数据对吧。那么vue不想让你间接在子组件中批改这个数据，这样会造成一些逻辑的凌乱。而是想让你通过父组件批改这个数据。那么咱们能够通过data（）函数来实现 components:{ cpn:{ template:'#cpn', props:{ number1:Number, number2:Number }, data(){ return{ dnumber1:this.number1, dnumber2:this.number2 } } } }同时扭转标签内容 ...

咱们在应用antd-vue的日期抉择组件时，有时须要限度明天以前的日期不可选中，要怎么实现呢？官网给出的参数，用 disabledDate 传入不可抉择的日期前提确保装置了moment npm i moment废话不多说，间接上代码： <a-date-picker :disabledDate="disabledDate"></a-date-picker>methods: { moment,}methods 中 的disabledDate 依据以下情境抉择，明天是2021.03.25一、限度只能选今天及之后的日期（明天不可选中）disabledDate (current) { return current && current < moment().endOf('day')}, 二、限度只能选明天及之后的日期（明天可选中）disabledDate (current) { return current && current < moment().subtract(1, 'days').endOf('day')}, 三、限度只能选昨天及之前的日期（明天不可选中）disabledDate (current) { return current && current > moment().subtract(1, 'days').endOf('day')}, 四、限度只能选明天及之前的日期（明天可选中）disabledDate (current) { return current && current > moment().endOf('day')},

介绍： 当初咱们要满足的我的项目需要是依据登录用户角色的不同，tabBar的数量和内容显示不同，如下图 用户角色为管理员时：用户为普通用户时： 留神：以下所有的设置在uView框架下的微信小程序中应用没有问题，其余的小程序客户端或者框架未尝试一、配置tabBar创立tabBar中须要展现的所有页面，包含不同角色展现的不同的页面关上pages.json页面配置tabBar项，所有须要在tabBar中呈现的页面这里都须要配置，须要特地留神的是：custom必须配置未true，如果不配置，在关上小程序的时候会先加载自带的tabBar，再加载自定义的tabBar，影响应用的成果"tabBar": { "custom": true, "color": "#909399", "selectedColor": "#303133", "backgroundColor": "#FFFFFF", "borderStyle": "black", "list":[ { "pagePath": "pages/index/index", "iconPath": "static/uview/tabs/discount.png", "selectedIconPath":"static/uview/tabs/discount_selected.png", "text": "优惠" }, { "pagePath": "pages/category/category", "iconPath": "static/uview/tabs/products.png", "selectedIconPath": "static/uview/tabs/products_selected.png", "text": "商品" }, { "pagePath": "pages/user/user", "iconPath": "static/uview/tabs/user.png", "selectedIconPath": "static/uview/tabs/user_selected.png", "text": "用户核心" } ] },"usingComponents": {}创立utils目录，在目录下新建tabBar.js文件，这个文件用于自定义tabBar属性的文件，用来笼罩自带的配置// 一般的用户const generalUser = [ { text: "优惠", pagePath: "/pages/index/index", iconPath: "/static/uview/tabs/discount.png", selectedIconPath: "/static/uview/tabs/discount_selected.png" }, { text: "商品", pagePath: "/pages/category/category", iconPath: "/static/uview/tabs/products.png", selectedIconPath: "/static/uview/tabs/products_selected.png" }, { text: "我的", pagePath: "/pages/user/user", iconPath: "/static/uview/tabs/user.png", selectedIconPath: "/static/uview/tabs/user_selected.png" }]// 小程序管理者const admin = [ { text: "优惠", pagePath: "/pages/index/index", iconPath: "/static/uview/tabs/discount.png", selectedIconPath: "/static/uview/tabs/discount_selected.png" }]// 配送员const courier = [ { text: "首页", pagePath: "/pages/index/index", iconPath: "/static/uview/tabs/discount.png", selectedIconPath: "/static/uview/tabs/discount_selected.png" }, { text: "我的", pagePath: "/pages/user/user", iconPath: "/static/uview/tabs/user.png", selectedIconPath: "/static/uview/tabs/user_selected.png" }]export default { generalUser, admin, courier}这里须要留神配置页面的程序和图片资源的门路，这里的程序是展现时的程序，图片门路static前必须加上/，否则会找不到二、配置vuexuniapp框架集成了vuex，能够间接应用 ...

1.开发环境 vue+vant2.电脑系统 windows10专业版3.在应用vant的过程中,咱们会常常应用到Progress组件,然而可能会遇到一些报错信息,上面我来分享一下遇到的问题和解决办法。4.报错信息如下:5.报错起因剖析: <van-progress :percentage="50" />//起因是因为 percentage 的值是数字0-100,当值大于100的时候就会报下面的谬误。//大家依据本人的我的项目进行对应的调整6.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。

Scroll无奈滚动问题记录：1.wrapper的高度或宽度大于子元素的高度或宽度： 2.若问题1排查过了，那么可能是你没有设置ScrollX，或ScrollY;官网有一句话： （1）你首先配置了eventPassthrough事件后，你如果是配置了纵向滚动，那么你能够不必设置scrollX，与scrollY，因为默认scrollX:false,scrollY：true; 然而当你配置了其为横向滚动的属性后，因为它还是默认scrollX:false,scrollY：true;，所以此时你横向纵向都不能滚动；因为因为eventPassthrough为：'vertical此时scrollY生效，而又因为默认设置了scrollX为false，所以两个其实都为false。注：这个笔者亲身经历，因为过后因为竖向滚动应用得没问题，所以遇到应用横向的时候，就疏忽了这个设置，导致查看了很久，节约大量工夫。 3.待踩坑，踩了之后补上……

Bus 1新建组件store.vue,在路由列表注册,并在components目录下新建一个组件AInput.vue（本人 创立的组件最好带上前缀） { path:'/store', component:()=>import('@/views/store.vue') } components的AInput.vue <template> <input @input="handleInput" :value="value">//绑定input事件和value值 </template> <script> export default{ name:'AInput', props:{ value:{ // 属性value type:[String,Number], default:'' }, methods:{ handleInput(event){ const value = event.target.value//获取文本框输出值 this.$emit('input',value)//把获取到的值传出去 //留神为什么不能间接在这里批改value值，这是vuex强调的单向数据流，父级组件之间传值，值的批改肯定是通过父组件，如果向组件与子组件传值肯定是通过属性，而子组件想批改父组件传来的值肯定要通过事件形式来批改 } } } } </script> store.vue <template> <div> //应用input组件 <a-input v-model='inputValue' />//v-model双向绑定(相当于语法糖，相当于 ：value="inputValue" @input="handleInput") {{ inputValue }}//显示inputValue </div> </template> <script> import AInput from '_c/AInput.vue' //引入组件 export default{ name:'store', components:{ //注册组件 AInput }, data(){ return { inputValue:'' } } ...

1. 路由传参,name和path的区别// 字符串模式 //编程式导航（路由） this.$router.push(`/home/12?newscontent=marco`)//就是实现路由链接的成果 //命名路由 对象模式 //用name跳转的形式能够实现带参数，而且不在页面显示,**留神用path跳转的话，params是不失效的** const location = { name: "home", params: { nid: 12}, query: { newscontent: 'marco '}, }; this.$router.push(location) //path传参this.$router.push({path:'/home',query: {id:'1'}})this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name//router 路由配置 path: "/home/:id" ,// 不配置path ,第一次可申请,刷新页面id会隐没// 配置path,刷新页面id会保留{ path:'/home/:id', component:Home, name:'home'}name 和 path 跳转的区别在于 1.name命名 传参用 params和query, path属性传参，不能用params，会有效2.router 路由x须要配置 path: “/home/:id” ,不然页面的id不会保留 2.路由守卫2.1.全局前置路由守卫router.beforeEach import routes from '@/router/routes'const router = new VueRouter({ routes, scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } }})//增加全局前置路由导航守卫// 必须登录后能力拜访的多个界面应用全局守卫（交易相干、领取相干、用户核心相干） // 主动跳转后面想而没到的页面router.beforeEach((to, from, next) => { //to:代表路由对象，指标（想去哪） //from: 代表路由对象，起始（从哪来） //netx：是一个函数，抉择放行或者不放行的意思还能够去重定向到一个新的中央 //next()就是放行 //next(false)不放行 //next(门路)重定向 let targerPath = to.path if(targerPath.startsWith('/pay') || targerPath.startsWith('/trade') || targerPath.startsWith('/center')){ //看看用户是否登录了 if(store.state.user.userInfo.name){ next() }else{ //在登录的门路前面增加上之前想要去的门路 //配合登录逻辑能够让咱们去到之前想去而没有去的中央 next('/login?redirect='+targerPath) } }else{ next() }})export default router全局解析守卫在 2.5.0+ 你能够用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 相似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。 ...

在vue2.x中，能够通过给元素增加ref='xxx'属性，而后在代码中通过this.$refs.xxx获取到对应的元素然而在vue3中时没有$refs这个货色的，因而vue3中通过ref属性获取元素就不能依照vue2的形式来获取vue3须要借助生命周期办法，起因很简略，在setup执行时，template中的元素还没挂载到页面上，所以必须在mounted之后能力获取到元素。 <template> <div ref='box'>I am DIV</div></template><script>import {ref,onMounted}export default{ setup(){ let box = ref(null); onMounted(()=>{ console.log(box.value) }); return {box} }}</script>如上代码，vue3中，所有生命周期办法都抽离进来了，须要用时间接import。这里导入了一个onMounted当界面挂载进去的时候，就会主动执行onMounted的回调函数，外头就能够获取到dom元素 应用过elementUI <el-form>的都晓得,当咱们须要表单校验时,vue2的写法是在点击事件里传ref绑定的名称,通过this.$refs[formName]获取dom元素,如下: <el-button type="primary" @click="submitForm('ruleForm')">立刻创立</el-button>submitForm(formName) { this.$refs[formName].validate((valid) = >{ if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } });},那么vue3中没有this.$refs又该怎么写呢?如下: <el-form :model="addForm" ref="addFormRef" label-width="90px" class="demo-dynamic"><el-form-itemlabel="标签名称:"prop="newTag":rules="[{required: true, message: '标签名称不能为空', trigger: 'blur'},{ validator: validatePass, trigger: 'blur' }]"><el-input v-model.trim="addForm.newTag" size="small" placeholder="标签名称(仅反对汉字、英文字母、数字、下划线,组成1-5位)"></el-input></el-form-item></el-form><el-button type="primary" @click="submitForm" size="small">保 存</el-button>const {proxy} = getCurrentInstance();const state = reactive({ addForm: { newTag: '', },});//在setup函数中，能够应用ref函数，用于创立一个响应式数据，当数据产生扭转时，Vue会自动更新UI const addFormRef = ref(null);const submitForm = () = >{ addFormRef.value.validate().then(() = >{ console.log('校验胜利'); }). catch(() = >{ console.log('校验失败'); });};

vuex的用法html <div id="app"> 弟弟的年龄：{{$store.state.age}} 哥哥的年龄：{{$store.getters.getAge}} <button @click="$store.commit('changeAge',5)">五年后</button> <button @click="$store.dispatch('changeAge',10)">十年后</button> </div>store import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);export default new Vuex.Store({//状态 state: { age: 18 }, //相当于计算属性 getters: { getAge(state) { return state.age + 10; } }, //批改状态的办法 mutations: { changeAge(state, payload) { state.age = state.age + payload; } }, //解决mutations只有同步没有异步 actions: { changeAge({ commit }, payload) { setTimeout(() => { commit("changeAge", payload); },1000); } }});main import store from "./store";new Vue({ router, store, render: h => h(App)}).$mount("#app");简略的实现vuex/indexvuex/index 作为总进口 应用两种模式导出export {} ===> import {Store} from 'vuex'export default ===> import Store from 'vuex' ...

问题： <a-radio @change="chooseOther" v-model="tempReadio">其余</a-radio> computed: { tempReadio() { if (this.reasonValue == 7) { return true; } else { return false; } },此时就会报错 解决办法： 手动增加set 就好了 computed: { tempReadio: { get() { if (this.reasonValue == 7) { return true; } else { return false; } }, set(val) {}, }, },

问题：应用this.$ref[‘form‘] .resetFields()无奈重置表单项 起因：1.没有给表单增加ref属性 <el-form ref="form"></el-form>2.表单项el-form-item没有增加prop属性，prop属性须要与input框绑定的属性统一 <el-form ref="form" :model="sizeForm" label-width="80px" size="mini"><el-form-item label="流动名称" prop="name"><el-input v-model="sizeForm.name"></el-input></el-form-item></el-form>3.还有一个经常出现这种问题的场景是，当应用vuex的时候，新建表单与编辑表单复用，此时上述属性跟办法都增加了也无奈达到革除表单的成果。 此时咱们再从新看一下element-ui的官网文档 重点：resetField()办法不是将表单重置为空，而是重置为初始值 所以当咱们关上新建表单的时候，表单项绑定的属性值为空，在提交表单后，表单项绑定的值不为空，此时再关上新建表单是会有上一次的值呈现，此时resetField()办法是无奈清空表单的，因为在这次操作的时候，属性初始值就不为空。 解决办法：在提交表单胜利后对绑定的值进行办法重置 // 重置表单项属性resetForm () {　return {　remark: ‘‘,　name: ‘‘　}}// 提交表单胜利后从新给属性赋值submit () {　//......调用胜利　let self = this　let query = self.resetForm()　self.updateForm({ //此办法是自定义的vuex的action办法，大家可依据理论利用场景定义重置表单办法　form: query　)}　self.$ref[‘form‘].resetFields() // 此时再调用resetFields()办法是为了革除表单验证而呈现的谬误}在对属性进行重置后执行resetFields办法，是因为对属性重置为空时，可能会触发表单规定的验证，此时执行resetFields会移除校验后果 ————————————————作者：CSDN博主「只想做个坏蛋啊」原文链接：https://blog.csdn.net/haidong...

vue中应用ztree应用步骤如下 npm install @ztree/ztree_v3ztree依赖jquery，下载jquery npm install jquery所以须要在vue.config.js中配置jqueryplugins: [ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "windows.jQuery":"jquery" }) ],3.在main.js中援用 import '@ztree/ztree_v3/js/jquery.ztree.core.min.js'import '@ztree/ztree_v3/js/jquery.ztree.excheck.min.js'// import '@ztree/ztree_v3/css/zTreeStyle/zTreeStyle.css'(ztree另一种款式)import '@ztree/ztree_v3/css/metroStyle/metroStyle.css'4.封装ztree组件 <template> <div class="treeBox"> <div> <ul :id="id" class="ztree"></ul> </div> </div></template><script>export default { name: "ZTree", props: { zNodes: {//树结构数据 type: Array, default () { return []; } }, id:{ type: String, default () { return 'treeDemo'; } }, isShowBtn_modify:{ type: Boolean, default:false }, isShowBtn_delete:{ type: Boolean, default:false } }, data() { return { setting:{ //树形构造设置参数 data:{ key: { name: "name" }, simpleData:{ enable: true, idKey: "deptId", pIdKey: "parentId", rootPId: 0 } }, view: { showLine: false//连接线 }, edit: {//是否能够删除编辑 enable: true, showRemoveBtn: this.isShowBtn_modify, removeTitle: "删除", showRenameBtn: this.isShowBtn_delete, renameTitle: "编辑" }, callback: { onClick: this.onNodeClick, beforeEditName: this.beforeEditName,//批改节点之前 beforeRemove:this.beforeRemove//删除节点之前 } } } }, mounted(){ this.init(); }, methods:{ // 初始化ztree init() { if (!this.zNodes) { return } $.fn.zTree.init($("#"+this.id), this.setting, this.zNodes); }, // 单击选中目录 onNodeClick(e, treeId, treeNode) { this.$emit('getTreeNode',treeNode); console.log(treeNode); }, //批改节点之前 beforeEditName(treeId, treeNode){ //发射给父组件信息 this.$emit('zTreeBeforeReName',treeNode.deptId); return false // return !treeNode.isParent; }, //删除节点之前 beforeRemove(treeId, treeNode) { this.$emit('zTreeBeforeRemove',treeNode.deptId); console.log('删除节点之前',treeNode.deptId); return false; }, //开展某节点 expandMode(pid){ $.fn.zTree.init($("#"+this.id), this.setting, this.zNodes); let zTree_Menu = $.fn.zTree.getZTreeObj(this.id); let node = zTree_Menu.getNodeByParam("deptId",pid); zTree_Menu.selectNode(node,true);//指定选中ID的节点 zTree_Menu.expandNode(node, true, false);//指定选中ID节点开展 } }}</script>5.父组件中援用，记得引入与注册 ...

1、写data的时候，用function返回一个data对象 export default { data() { return { title: 'segmentfault' } }}2、用kebab-case命名自定义事件的名称，因为当vue发现事件名称不是这种名称规定的时候，在起外部是会被主动转换成kebab-case模式的 <button @click="$emit('increase-num', 1)" ></button><counter @increase-num="increasseNum"></counter>3、在用v-for指令的时候，肯定要加上:key属性。如果渲染列表没有key属性，虚构DOM就无奈辨别每个元素，就很难检测每个元素的变动。 <div v-for="item in items" :key="item.id">{{item.name}}</div>4、:key应用规定：用一个举世无双的id而不是数组的index来做属性:key的值。因为，数组有可能会被add或delete元素，此时，index可能就会随着数组的变动而变动。这样很不稳固。 <div v-for="item in items" :key="item.id">{{item.name}}</div>5、还有一个十分庄重的最佳实际：咱们不应该把v-if和v-for一起用，因为v-for的优先级比v-if高很多。能够看如下代码： <ul> <li v-for="car in carList" :key="car.number" v-if="car.isActive" ></li></ul>在这个例子里，vue会先把所有的list item都渲染进去，而后再检测v-if的操作。然而，事实场景中又会呈现这样的须要，咱们应该如何解决呢？咱们能够用computed过滤掉不是active的car，代码如下： <ul> <li v-for="car in activeCarList" :key="car.number" ></li></ul>export default { computed: { activeCarList() { return this.carList.filter(car => car.isActive) } }}6、数据变动，用computed，不要用methods。 // Using computed:var vm = new Vue({ el: ‘#example’, data: { firstName: “John”, lastName:”Doe” }, computed: { setFullName: function () { return this.firstName + ‘ ‘ + this.lastName } }})// Using methods:methods: { setFullName: function () { return this.firstName + ‘ ‘ + this.lastName }}7、v-if能合并写就合并写8、给input元素加key，如下key=“username-input”，能保障在v-if切换中，input从新渲染。 ...

1.开发环境 vue+vant2.电脑系统 windows10专业版3.在开发的过程中,咱们可能会须要适配多国语言,上面我来分享一下我的办法,心愿对你有所帮忙。4.废话不多说,间接上操作: // 在终端(管理员身份)npm install vue-i18n --save5.我的项目目录构造:6.在src下新建i18n文件夹,在新建i18n.js并增加代码如下: import Vue from 'vue'import VueI18n from 'vue-i18n'import messages from './langs'Vue.use(VueI18n)const i18n = new VueI18n({ locale: localStorage.lang || 'cn', messages})export default i18n7.在i18n文件夹下新建langs文件夹,新建cn.js,代码如下: const cn = { message: { 'hello': '你好，世界', }}export default cn8.在i18n文件夹下新建langs文件夹,新建en.js,代码如下: //en.jsconst en = { message: { 'hello': 'hello, world', }}export default en8-1.在i18n文件夹下新建langs文件夹,新建index.js,代码如下: import en from './en'import cn from './cn'export default { en, cn} 9.在main.js中增加如下代码: import i18n from '@/i18n/i18n';new Vue({ router, store, i18n, render: h => h(App)}).$mount("#app");10.如何在vue模板中应用呢? ...

1.开发环境 vue2.电脑系统 windows10专业版3.在应用vue的过程中,咱们须要配置路由,上面我来分享一下援用路由的形式的区别。4.废话不多说,间接上代码: import Vue from 'vue'import VueRouter from 'vue-router'//1、间接把组件引入进来,不关门路拜访或不拜访,都把组件援用进来import Home from '../views/Home.vue'import Register from '../views/Register.vue'Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', /** * 2、是当我拜访这个门路的时候才加载这个门路,如果始终不拜访/about这个门路是不会加载的 * 益处就是当我的项目比拟大，页面比拟多,因为vue是单页面利用,一次性加载这么多内容,加载会很慢,这样体验就很不好 * 所以在真正的我的项目中,个别应用第二种异步加载/懒加载,就是拜访了才加载,没有拜访就不加载 */ //应用箭头函数引入 component: () => import('../views/About.vue') }, { path: '/Register', name: 'Register', component: Register }]5.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。

此版本更新内容包含： 修复替换 ES6 的用法，兼容 IE11 (#1500)修复 IE11 的主题切换 (#1502)修复谬误 URL 的 isExternal 检查和减少测试 (#1510)加强反对在没有一级题目时的搜寻 (#1519)Chore修复失落 carbon (#1501)批改 Gitter 为 Discord 聊天室 (#1507)降级 docsify 依赖从 4.11.6 到 4.12.0 (#1518)增加 isExternal 的测试 (#1515)我的项目介绍Docsify 是一个神奇的文档网站生成器。能够疾速帮你生成文档网站。不同于 GitBook、Hexo 的中央是它不会生成动态的 .html 文件，所有转换工作都是在运行时。如果你想要开始应用它，只须要创立一个 index.html 就能够开始编写文档并间接部署在 GitHub Pages 等中央。 无论开源我的项目还是外部我的项目，在开发我的项目时，想要应用 Markdown 构建文档，将文档对立治理，docsify 是不错的抉择。无需构建和编译，写完 Markdown 就能够间接公布。 我的项目地址GitHub: docsify Gitee: docsify

Docsify CLI 是用于在本地初始化和预览 Docsify 网站的一个工具，举荐应用 Docsify 的用户全局装置 npm i docsify-cli -g如果想在我的项目的./docs目录里写文档，间接通过init命令初始化我的项目 docsify init ./docs通过运行 docsify serve 启动一个本地服务器，能够不便地实时预览成果 docsify serve ./docs更多命令行工具用法，参考 docsify-cli 的文档 此版本更新内容包含： 加强反对主动生成侧边栏文件 (#130)Chore降级 docsify 依赖从 4.11.5 到 4.12.1 (#133) (#135) (#129)降级 ini 依赖从 1.3.5 到 1.3.7 (#127)我的项目地址GitHub: docsify Gitee: docsify 没有 star 的小伙伴，不要忘了给咱们 star 哦

本文同步公布在我的Github 集体博客 前言始终都是 React 进行开发，尽管 Vue 是接触最早的，但当初理论工作也不怎么有机会用，Vue3 都出了。其中新写法有点像 React Hook，于是，这段时间迅速对 Vue3 进行了基本知识入门，体验下 Vue3。 Vue2.x 有哪些痛点首先 Vue3 呈现之前，让咱们来理理 Vue2.x 有什么痛点，须要 Vue3 补上的。 Vue2.x 对数组对象的深层监听无奈实现。因为组件每次渲染都是将 data 里的数据通过 defineProperty 进行响应式或者双向绑定上，之前没有后加的属性是不会被绑定上，也就不会触发更新渲染。代码的可读性随着组件变大而变差每一种代码复用的形式，都存在毛病vue2.x 对 typescript 反对不太敌对，须要应用一堆装璜器语法Options API 到 Composition API 的转变Options API 即是通过定义 methods，computed，watch，data 等属性与办法，独特解决页面逻辑。 能够看到 Options 代码编写形式，如果是组件状态，则写在 data 属性上，如果是办法，则写在 methods 属性上 当组件变得复杂时，会导致对应属性的列表也会增长，这可能会导致组件难以浏览和了解。 上面示意组件是一个大型组件（不同色彩示意不同逻辑），会看到同个性能逻辑的代码被扩散到各处，这种碎片化使得了解和保护简单组件变得艰难，须要一直"跳"到相干代码处。 而 Composition API 是依据逻辑性能来组织的，一个性能所定义的所有 API 会放在一起（更加的高内聚，低耦合） 用 Composition API 来示意一个大型组件与下面 Options API 的比照，能够直观地感触到 Composition API 在逻辑组织方面的劣势，当前批改一个属性性能的时候，只须要跳到管制该属性的办法中即可，在逻辑组织和逻辑复用方面更好。 Options API 是面向对象的思维，Composition API 是函数式编程的思维。 ...

应用<div id="app"> <router-link to='home'>首页</router-link> <router-link to='about'>对于</router-link> <router-view a=1><router-view/> </div>router-view组件export default {//函数式组件没有this 不能new 没有双向数据绑定，通常用的比拟少，比拟实用于展现详情页因为详情页只展现不进行批改等操作，函数式组件比有状态的组件更加轻量级。 functional:true, render(h,{parent,data}){ parent示意的父组件 app data 是行间属性(下面代码a=1) 也能够应用prop传递 let route = parent.$route; let depth = 0; data.routerView = true; while(parent){ //$vnode指的是虚构dom 如果app上有虚构dom并且这个虚构dom上的routerView为true if (parent.$vnode && parent.$vnode.data.routerView){ depth++; } parent = parent.$parent; } let record = route.matched[depth]; if(!record){ return h(); } return h(record.component, data); }}router-link的实现export default { props:{ to:{ type:String, required:true }, tag:{ type:String } }, render(h){ let tag = this.tag || 'a'; let handler = ()=>{ this.$router.push(this.to); } return <tag onClick={handler}>{this.$slots.default}</tag> }}

在new vueRouter的时候咱们能够传入一个mode属性，他能够接管三个值：hash/history/abstract hash和history的区别history的门路更好看一点 比方http://yoursite.com/user/id,history是基于pushState()来实现 URL 跳转而毋庸从新加载页面。 然而强制刷新还是会有问题（服务端来解决这个问题），所以history模式须要后端人员配合应用。 hash的门路会带有#,比方http://yoursite.com#/user/id HashHistoryclass VueRouter{ constructor(options){ this.matcher = createMatcher(options.routes || []);//这里为了解说hash模式 所以就不进行判断用户传进来的是哪种模式了 this.history = new HashHistory(this);//this vue-router的实例 }}源码这里创立了一个基类咱们这里和源码对立，这个基类封装了三种模式专用的办法和属性,那么咱们在这里创立一个HashHistory和基类History import History from './base'// hash路由export default class HashHistory extends History{ constructor(router){ super(router); //继承调用父类 等于call }}// 路由的基类export default class History { constructor(router){ this.router = router; }}如果是hash路由,关上网站如果没有hash默认应该增加#/ import History from './base';function ensureSlash(){ if(window.location.hash){ return } window.location.hash = '/'}export default class HashHistory extends History{ constructor(router){ super(router); ensureSlash(); // 确保有hash }}再看一下初始化的逻辑（下面的router.init函数） ...

macther是什么？依据用户传递的routes创立匹配关系,它外面提供两个办法：addRoutes和match class VueRouter{ constructor(options){ //createMatcher返回addRoutes和match两个办法 this.matcher = createMatcher(options.routes || []); } init(app){}}编写createMatcher办法function createMatcher(routes) { // 收集所有的路由门路, 收集门路的对应渲染关系 // pathList = ['/','/about','/about/a','/about/b'] // pathMap = {'/':'/的记录','/about':'/about记录'...} let {pathList,pathMap} = createRouteMap(routes); // 这个办法就是动静加载路由的办法 function addRoutes(routes){ // 将新增的路由追加到pathList和pathMap中 createRouteMap(routes,pathList,pathMap); } function match(){} // 稍后依据门路找到对应的记录 return { addRoutes, match }}addRoutes办法的实现addRoutes是初始化路由表和新增路由。 function createRouteMap(routes,oldPathList,oldPathMap){ // 当第一次加载的时候没有 pathList 和 pathMap let pathList = oldPathList || []; let pathMap = oldPathMap || Object.create(null); routes.forEach(route=>{ // 增加到路由记录，用户配置可能是有限层级，稍后要递归调用此办法 addRouteRecord(route,pathList,pathMap); }); return { // 导出映射关系 pathList, pathMap }} // 将以后路由存储到pathList和pathMap中function addRouteRecord(route,pathList,pathMap,parent){ // 如果是子路由记录 须要减少前缀 let path = parent?`${parent.path}/${route.path}`:route.path; let record = { // 提取须要的信息 path, component:route.component, parent } if(!pathMap[path]){ pathList.push(path); pathMap[path] = record; } if(route.children){ // 递归增加子路由 route.children.forEach(r=>{ // 这里须要标记父亲是谁 addRouteRecord(r,pathList,pathMap,route); }) }}

引言接下来几篇文章写一写最近学习的Vue中的路由原理吧。那么在讲原理之前咱们先来看看它是如何应用的。 路由的应用import Vue from 'vue'import Router from 'vue-router'import Home from './views/Home.vue'import About from './views/About.vue'Vue.use(Router);// 应用Vue-Router插件export default new Router({ // 创立Vue-router实例，将实例注入到main.js中 routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About, children: [ { path: 'a', component: { render(h) {return <h1>about A</h1>} } }, { path: 'b', component: { render(h) {return <h1>about B</h1>} } } ] } ]})//mainnew Vue({ router, // 在根实例中注入router实例 render: h => h(App)}).$mount('#app')vue.use(Router)做了什么？首先下面文章曾经写到了Vue.use的原理，那么vueRouter中应该有一个install办法。默认使install函数执行，咱们这一篇文章先看一看install函数中做了什么。应用Vue.mixin办法给全局所有组件注入一个生命周期函数beforeCreate ...

豆宝社区我的项目实战视频教程简介本我的项目实战视频教程全副收费，配套代码齐全开源。手把手从零开始搭建一个目前利用最宽泛的Springboot+Vue前后端拆散多用户社区我的项目。本我的项目难度适中，为便于大家学习，每一集视频教程对应在Github上的每一次提交。 致谢本我的项目借鉴了极光社区我的项目，在此感激原作者的自私开源。本我的项目在其根底上做了一些增删，删除了一些未实现的模块（流动，游览），新增了评论性能，简化了后端认证与受权性能。最次要的工作是将原我的项目从零开始开始搭建，各个性能的实现分解成几十步来实现，便于大家更好的学习。 代码开源地址前端后端 视频教程地址视频教程 我的项目次要业务及实现的性能本我的项目相似一个简版的掘金这样的技术社区，实现了多个用户注册，登录，发帖，回帖，评论，关注，用户核心等性能。 前端技术栈Vue Vuex Vue Router Axios Bulma Buefy Element Vditor DarkReader 后端技术栈Spring Boot Mysql Mybatis MyBatis-Plus Spring Security JWT Lombok 我的项目实战纲要：01.豆宝社区我的项目介绍 02.豆宝社区我的项目所需的基础知识 03.前端我的项目搭建 04.前端布告板性能实现 05.初始化springboot后端我的项目 06.初始化后端数据库，springboot配置mybatis连贯 07.后端我的项目目录构造初始化 08.后端布告板接口性能实现01 09.后端布告板接口性能实现02 10.前端端布告板接口性能实现 11.实现跨域，前后端接口联调 12.每日一句性能前端界面实现01 13.每日一句性能前端界面实现02 14.每日一句性能前端接口实现 15.每日一句性能后端接口实现 16.（十分重要）善用github提交记录进行我的项目学习 17.推广链接性能 前后端实现 18.用户注册前端实现 19.用户注册后端实现 20.jwt以及web通信流程 21.用户登录后端实现 22.vuex简介 23.js-cookie介绍 24.用户登录前端实现 25.前端侧边栏，马上入驻，社区登入性能 26.前端在axios申请拦截器中在申请头中退出jwt 27.后端设置申请拦截器检查用户申请头中是否蕴含jwt01 28.后端设置申请拦截器检查用户申请头中是否蕴含jwt02 29.前端header实现01 30.前端header实现02 31.退出登录 32.前端页脚性能实现 33.帖子列表性能前端 34.帖子列表性能后端 35.帖子分页性能实现 36.前端实现发表帖子性能 37.后端实现发表帖子性能 38.前端实现帖子详情性能 39.后端实现帖子详情性能 40.帖子详情右侧边栏帖子作者详情性能实现（前端） 41.帖子详情右侧边栏帖子作者详情用户关注性能实现（后端） 42.轻易看看模块前端实现 43.轻易看看模块后端实现 44.评论列表性能前端实现 ...

前言最近在逛 Twitter 时，突发奇想去看了一眼尤大的账号，发现了一段乏味的推文，在尤大国内的社交平台账号中(知乎、微博等)并没有发现他发表过相似的话，倒是听过他说会有越来越多的人弃坑 Webpack 用 Vite，还听过有人说 vue-cli 的下一个版本就要用 vite 重构了，不过看尤雨溪这说法，如同是 vite 是 vite，cli 是 cli，所以明天特意来跟大家分享一下： 推文地址：https://twitter.com/youyuxi/status/1354584410482499585译文尤雨溪：Vite 会取代 vue-cli 吗？最开始的时候我不确定，然而当初我置信最终肯定会产生。 现阶段的次要差别只是 test 集成。 彭瑞 (PENG Rui)兴许当初应该整一个 vue-cli-plugin-vite 的插件。（让 vue-cli 也能用上 vite） 俞然费泽尔 (Yuran Faizal)我批准???? 拉奇兰 米勒 (Lachlan Miller)你有没有对于能测试 runners/testing 在 vite 上是否适合的版本？ 乔 卡莫纳 (Joao Carmona)我心愿 vite 能在它启动服务时按需发送要测试的模块，而不是先 building，(实践上)这能实现吗？ 埃莱克斯 维庞德 (Alex Vipond)去看一眼卢克的 uvu 吧。原生反对 ESM，十分合乎 Vite 的精力。默认状况下没有编译测试步骤，不须要额定集成。 当我须要在浏览器中测试的时候，我只须要开启我的 Vite 服务而后操纵 uvu test 即可，这多令人清新啊 卢克 爱德华 (Luck Edwards)谢谢你，然而用错了用户标签 侯赛因 马力克 (Hussain Malik)@艾力沙因UI雅苏布 ...

前言白屏始终是CSR我的项目诞生来困扰前端的一大问题，如何在低成本的状况下，减少用户的等待时间，缩小跳出率，以及进步页面性能，是前端始终在解决的难题，killblanks 作为其中一种的解决方案，将页面节点间接生成骨架屏，通过预渲染让用户能在期待内容加载时显示内容的轮廓，提供了更好的用户体验，并使内容感觉更快。白屏是怎么产生的 这是一个一般CSR我的项目的Chrome performance截图，能够从快照中看到，白屏的工夫大概在330ms左右， 在这段时间里页面的执行逻辑 : 申请HTML -> 期待HTML文档 -> 解析HTML -> 申请JS和CSS资源 -> 执行vendors和index.js逻辑330ms后页面呈现大体框架，页面的执行逻辑： vue render各个组件 -> mounted页面挂载 -> 调用业务的API申请数据 -> 渲染返回的数据 -> 残缺的页面正是因为CSR我的项目在期待文件加载、CSSOM 构建、JS 解析等过程中消耗了大量工夫，导致了用户会长工夫处于不可交互的首屏灰白屏状态，即白屏(blanks) 具体能够看看寒阳的文章构建时预渲染：网页首帧优化实际白屏会影响什么Why Web Performance Matters: Is Your Site Driving Customers Away? 通过剖析150多个网站和1.5亿次页面拜访的页面放弃数据，戈麦斯发现了游客忠诚度的匮乏，页面响应工夫从2秒减少到10秒，页面跳出率减少了38%简略来说每减少1s页面的等待时间，对于app来说是跳出率和成交率的降落，对于老板来说就是赔钱，对于你来说就是涨不了工资 目前罕用的白屏解决方案计划预渲染SSRNSR长处不依赖数据SEO 敌对，构建不便，FMP比预渲染快SEO 敌对，首屏性能高, FMP最快 毛病SEO 不敌对，FMP 慢老本高，前端负载压力大老本高，客户端压力大 SSR和NSR都是十分好的解决白屏的计划，然而毛病也很显著，老本太高，SSR十分依赖服务的稳定性，对于中小公司而言很少有资源能为前端提供一套稳固的服务器环境，一旦node呈现故障，损失很大，而CSR计划则是对于客户端来说老本很高，有很多不确定性。 预渲染不是银弹基于此，预渲染可能是最简略也最理论的一种计划，但预渲染也并非是银弹，来看看咱们团队第一个版本实现的预渲染 当你高高兴兴的把辛苦做好的预渲染交给视觉视检时，可能换来的是只是一个字丑:( 没错，丑或者说是不敌对,感觉网速很慢，这些都是看过第一个版本的共事的反馈，为什么会这样？ 通过两个截图比照能够发现 图片未加载导致页面存在大面积的色块后端的申请未返回也造成了页面的空缺甚至是框架的变形咱们发现问题次要在元素占位上，如果能提前对元素进行占位，预渲染就能渲染出很漂亮的页面，那么有没有不便 快捷 难看的占位元素呢？ 当我搜寻解决方案的时候发现，早有人提出了一种占位计划 一种自动化生成骨架屏的计划 骨架屏是的，正是@Jocs,在18年分享了一种自动化生成骨架屏的计划,以及后续开源的page-skeleton-webpack-plugin,提供了一种老本较低的解决骨架屏的计划，为骨架屏实现形式提供一种新的思路，具体计划能够看看他的文章 比拟惋惜的是page-skeleton-webpack-plugin三年没更新保护了，尽管是一种很可行的计划，然而还有很多能进步的空间，因而我决定在page-skeleton-webpack-plugin的根底上，提供一种更不便的计划，这就是Killblanks的由来 Killblanks2020年这个我的项目正式开始，通过半年的调试和开发，终于胜利通过abtest测试，落地上线，并于2021年2月开源,感激每一位对此付出的人。 原理利用Purpeteer能模仿浏览器申请页面的性能，加载谷歌插件@killblanks/skeleton-ext生成骨架屏组件的页面，直出 html 文件 框架 目前Killblanks依附lerna构建，由三个外围性能组成 @killblanks/prerender 提供预渲染能力，通过Purpeteer读取网页内容，直出HTML@killblanks/skeleton 魔改了page-skeleton-webpack-plugin的skeleton代码，修复其中一些bug@killblanks/skeleton-ext skeleton的谷歌插件，不便调试和输入骨架屏组件应用Killblanks应用十分不便，如果你明确其中原理，三分钟即可上手 ...

package.json { "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=webpack.config.js" }, "devDependencies": { "axios": "^0.19", 'vue' => '^2.5.17', "cross-env": "^7.0", "lodash": "^4.17.19" }}index.html <!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Vue</title> <script src="js/app.js" defer></script> <link href="css/app.css" rel="stylesheet"></head><body> <div id="app"> <example-component></example-component> </div></body></html>src/js/bootstrap.js window._ = require('lodash');window.axios = require('axios');window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';src/js/app.js ...

1.开发环境 vue+vant2.电脑系统 windows10专业版3.在开发的过程中,咱们常常会应用到单选框组件,上面我来分享一下我的应用办法,心愿对你有所帮忙。4.废话不多说,先看效果图:5.在template中增加如下代码: <div @click="Cdefault(item.is_default)"> <van-radio-group v-model.number="listtradio"> <van-radio :name="Number(item.is_default)"> default </van-radio> </van-radio-group> </div>6.在return中增加如下代码: listtradio: 1, //因为我在下面绑定的数字类型,依据本人的我的项目进行批改7.在methods中增加如下代码: Cdefault(id) { console.log("我是默认地址事件"); console.log(id); console.log("我是默认事件完结啦"); console.log(Number(id)); // this.listtradio = 1; this.listtradio = Number(id); // console.log("我是boolean的转换"); // console.log(Number(false)); // console.log("我是boolean的转换完结啦"); },8.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。

咱们在node节点进行拖拽的时候进行监听,应用的是mousedrag事件,而后设置所拖动节点的dragable为false this.scene.mousedrag(function(e)){ e.target.dragable = false;//将拖拽设置为false e.target.visible = false;//将节点设置为不可见}如果不懂 this.scene 构造的能够参考我的另一篇简略入门的topo文章https://segmentfault.com/a/1190000037750737

<mccAndCcTableDialog :tableData="mccTableData" :findData="findOperationList()"></mccAndCcTableDialog>看似很简略的一段代码,编译完一运行。在开发者工具上能够看到浏览器在循环拜访findOperationList这个办法。排除了代码中的各种可能的问题后最终把问题定位在了findOperationList这个办法上。折腾了良久,没目测进去具体起因。次要是以前也没遇到过。起初跟之前的代码一比照，惟一的差异就是这段代码的办法前面多了一对小括号。去掉这对小括号后一切正常，至于为什么加上这对小括号会导致上述问题，目前不是很分明。待当前有空了再跟进一下这个问题。

1.开发环境 vue+vant2.电脑系统 windows10专业版3.在h5端开发的过程中,咱们常常须要点击一个按钮来判断用户应用装置了app(首先判断是安卓还是苹果,而后判断是否装置了app,如果没有装置则跳转到下载页面,如果装置了则关上)。4.废话不多说,间接上代码: <div class="xiding-r" @click="openapp"> Open APP</div>5.在methods中增加如下代码: openapp() { var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (isAndroid) { // alert("我是安卓"); this.android(); } if (isIOS) { // alert("我是苹果"); } },android() { var _clickTime = new Date().getTime(); window.location.href = 'zhihu://'; /***关上app的协定，有安卓共事提供***/ //启动距离20ms运行的定时器，并检测累计耗费工夫是否超过3000ms，超过则完结 var _count = 0, intHandle; intHandle = setInterval(function () { _count++; var elsTime = new Date().getTime() - _clickTime; if (_count >= 100 || elsTime > 5000) { console.log(_count) console.log(elsTime) clearInterval(intHandle); //查看app是否关上 if (document.hidden || document.webkitHidden) { // 关上了 window.location.href = "zhihu://"; // alert('关上了'); window.close(); // return; } else { // 没关上 // alert('没关上'); window.location.href = "";//下载链接 } } }, 20); },5.留神:在这个案例中我是用的知乎的例子:6.留神 ...

数组和对象类型当值变动时如何劫持到？a、对象通过Object.defineProperty将属性进行劫持；多重对象通过递归进行实现。 export function defineReactive ( obj: Object, key: string, val: any, customSetter?: ?Function, shallow?: boolean) { // 1.如果对象不可配置则间接退出 const property = Object.getOwnPropertyDescriptor(obj, key) if (property && property.configurable === false) { return } // 2.获取getter和setter const getter = property && property.get const setter = property && property.set // 3.从新定义set和get办法 Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { const value = getter ? getter.call(obj) : val return value }, set: function reactiveSetter (newVal) { const value = getter ? getter.call(obj) : val if (newVal === value || (newVal !== newVal && value !== value)) { return } if (getter && !setter) return if (setter) { setter.call(obj, newVal) } else { val = newVal } } })}这种形式只会监听对象自带的属性，新增的属性监听不到，因而对于新增的属性应用$set形式进行数据新增，$set办法外部会将新增属性定义成响应式数据b、数组通过重写办法 ...

vue脚手架2.0和4.0+的比照1. 命令：装置 // 2.0npm install vue-cli -g// 4.0+npm install -g @vue/cli初始化一个新我的项目： // 2.0默认标准版：vue init webpack 我的项目名简化版: vue init webpack-slimple 我的项目名// 4.0+vue create 项目名称注：装置@vue/cli须要先卸载vue-cli，如须要同时应用vue-cli和@vue/cli请装置：npm install -g @vue/cli-init -g //装置完后 就还能够应用 vue init 命令另外在终端输出 vue ui将会在浏览器关上一个页面，可通过可视化的形式新建一个我的项目附上选项： Please pick a preset: 抉择配置 Default ([Vue 2] babel, eslint) // vue2默认配置Default (Vue 3 Preview) ([Vue 3] babel, eslint) // vue3默认配置Manually select features // 手动筛选 可选项：| | | | | | :--- | --------------------------------- | ------------------------------------------------------------ | ---- | | 序号 | 选项 | 形容 | | | 1 | Choose Vue version | 抉择Vue版本 | | | 2 | Babel | vue我的项目中广泛应用es6语法，但有时咱们的我的项目须要兼容低版本浏览器，这时就须要引入babel插件，将es6转成es5 | | | 3 | TypeScript | TypeScript通过增加类型来扩大JavaScript。通过理解JavaScript，TypeScript能够节俭您捕捉谬误的工夫并在运行代码之前提供修复。任何浏览器，任何操作系统，任何运行JavaScript的中央。 齐全开源 | | | 4 | Progressive Web App (PWA) Support | 渐进式Web应用程序（PWA）反对 | | | 5 | Router | 路由 | | | 6 | Vuex | Vuex 是一个专为 Vue.js 利用程序开发的状态管理模式。它采纳集中式存储管理利用的所有组件的状态，并以相应的规定保障状态以一种可预测的形式发生变化 | | | 7 | CSS Pre-processors | CSS预处理器，预处理器：比方要用sass或者cssNext就要依照人家规定的语法模式，就是用人家的语法去编写，而后人家把你编写的代码转成css。 | | | 8 | Linter / Formatter | 格式化程序 | | | 9 | Unit Testing | 单元测试 | | | 10 | E2E Testing | 端到端测试（end-to-end） | |Pick the package manager to use when installing dependencies: // 抉择装置依赖项时要应用的包管理器 ...

1、装置node官网：https://nodejs.org/en/download/cmd=》node --version 查看版本 2、装置vue cli 官网：https://cli.vuejs.org/zh/guid... npm install -g @vue/cliORyarn global add @vue/cliORnpm install -g @vue/cli@3.11.0（指定版本） cmd=》vue --version 查看版本 在Vue-CLI4中运行以下命令来创立一个新我的项目：vue create hello-world 而后提醒选取一个 preset。能够选默认的蕴含了根本的 Babel + ESLint 设置的 preset，这里咱们选“手动抉择个性”来选取须要的个性（键盘高低键即可切换） 抉择自定义的配置，我个别抉择这几个插件按空格键选中勾销 抉择vue的版本vue2/vue3，这里选了vue3： 抉择是否应用路由 history routerY抉择应用history，但须要对后端配置；n抉择的是hash，即地址栏URL中的 # 符号，它会在url中加一个#，比方：http://localhost:8080/#/Global，这里我抉择n 抉择css 的预处理器，我选 Sass/SCSS (with dart-sass)node-sass是实时主动编译的，dart-sass须要保留后才会编译 抉择 ESLint 代码校验规定，会提供一个插件化的javascript代码检测工具，ESLint + Prettier 是应用较多的 而后抉择什么时候进行代码校验，我抉择Lint on saveLint on save 保留就查看，Lint and fix on commit 是当 fix 或 commit 时查看 抉择如何寄存配置In dedicated config files 寄存到config独立文件中In package.json 寄存到 package.json 中 ...

新年还没过完，Vite就公布了2.0版本，不得不拜服尤大大。 Vite是什么Vite（法语意思是 “快”，发音为 /vit/，相似 veet）是一种全新的前端构建工具，你能够把它了解为一个开箱即用的开发服务器 + 打包工具的组合，然而更轻更快。Vite 利用浏览器原生的 ES 模块反对和用编译到原生的语言开发的工具（如 esbuild）来提供一个疾速且古代的开发体验。Vite由两个次要局部组成： 一个通过本机 ES 模块提供源文件的开发服务器，具备丰盛的内置个性和快得惊人的热模块替换(HMR)。一个构建命令，它将代码与 Rollup 捆绑在一起，后者事后配置为输入用于生产的高度优化的动态资产。除此之外，Vite 通过其插件 API 和 JavaScript API 具备高度的扩展性，并提供全面的类型反对。 Vite 有多快呢？在 Repl.it 上从零启动一个基于 Vite 的 React 利用，浏览器页面加载结束的时候，CRA（create-react-app）甚至还没有装完依赖。如果你还没听说过 Vite 到底是什么，能够理解一下我的项目的设计初衷。 Vite 2.0新个性相比去年公布的1.0版本，Vite 2.0算得上上第一个稳固版本，此版本带来了多处大的改良。 多框架反对Vite 一开始次要重视于 Vue 的单文件组件反对，但 2.0 基于之前的教训提供了一个更稳固灵便的外部架构，从而能够齐全通过插件机制来反对任意框架。当初 Vite 提供官网的 Vue, React, Preact, Lit Element 我的项目模版，而 Svelte 社区也在开发 Vite 整合计划。 全新插件机制和 APIVite 2.0 受 WMR 的启发采纳了基于 Rollup 插件 API 的设计。很多 Rollup 插件能够跟 Vite 间接兼容。插件能够在应用 Rollup 插件钩子之外应用一些额定的 Vite 特有的 API 来解决一些打包中不存在的需要，比方辨别开发 vs 打包，或是自定义的热更新解决。 ...

from origin 'http://localhost:8080' has been blocked by CORS policy `package com.demo.config; import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.EnableWebMvc;import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; /** Author:jsDate:2019/*/@Configuration@EnableWebMvcpublic class CorsConfig extends WebMvcConfigurerAdapter { @Overridepublic void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**");}}`

最近在写组件发现的，当援用组件进行传值时，如果在援用的组件中进行对传入值的批改，页面上显示并没有什么问题，但关上控制台就会发现呈现以下八错： “防止间接批改道具” *[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "number"Vue 不倡议批改props数据，如果更改传入的值，在子组件中的数据将被从新出现。 如何解决1、如果应用的变量没必要在父组件中传入，进行初始化，那么能够将值的初始化在子组件的data() 函数进行return 进去，或者间接应用状态治理值。 2、子组件是有默认值，如 ：输入框 Input 状况，蕴含v-model和一个展现输出值的Card组件，应用v-model 进行数据绑定，这样咱们就须要增加自定义事件去解决:this.$emit('updata-number',myNumber)也就是将myNUmer通过 updata-number 事件名称发送数据。因为发送自定义数据，因而父组件须要监听 updata-number 事件。`methods: { add() { var myNumber = this.number; myNumber++; this.$emit("update-number", myNumber);}}` 卡片<Card :number="number" @update-number="update" /> 留神 myNumber是作为参数发送,updata函数中须要一个参数来获取数据，而后将自定义事件获取的number数据在每次props更新时从新刷新，这样就能够进行数据绑定而不呈现包错。

前言名字的由来 vue + use + query = vu-query后面两年始终都在写vue，过后在写业务的时候我总是被数据的缓存和反复实现的分页和提早加载数据所困扰。直到往年换了react的技术栈之后发现其实社区曾经有了很多这种轮子，例如react-query、swr等等。然而在写了一段时间的react之后，发现要写出一个性能很好的react利用真的要写很多很多啰嗦的代码，不久之后开始对这些繁琐的事件感到腻烦。开始思念起写vue的时候不必特地优化就能写出性能不错的代码来。上一年年6月时想着不如整一个vue版的react-query的轮子进去怎么样，然而因为迁延症的起因到上个月才开始着手（笑），到了明天终于公布了1.0的版本。它的外围实现来自于react-query，因为自身react-query曾经是一个特地成熟的数据申请库，所以也不必放心vu-query的可用性问题。不必放心上手难的问题，文档中也有很多写好的我的项目能够参照。仓库与文档github仓库文档示例介绍Composables API，用于在Vue 3中获取，缓存和更新异步数据只管大多数传统状态治理库非常适合应用客户端状态，但它们不太适宜应用异步或服务器状态。这是因为“服务器状态齐全不同”。对于初学者，服务器状态： 近程保留在您无法控制或领有的地位须要异步API进行获取和更新示意共享所有权，在您不知情的状况下能够被其他人更改如果您不小心，可能会导致应用程序“过期”一旦把握了应用程序中服务器状态的性质，随之而来的还有更多挑战，例如： 缓存...（这可能是编程中最难的事件）将对同一数据的多个申请反复解决为单个申请在后盾更新过期数据晓得数据何时“过期”尽快反映对数据的更新优化性能，例如分页和提早加载数据治理服务器状态的内存和垃圾回收通过构造共享记忆查问后果如果您不被该列表所吞没，那必须意味着您可能曾经解决了所有服务器状态问题，应该失去处分。然而，如果您像绝大多数人一样，或者尚未解决所有或大多数这些挑战，那么咱们只是在摸索！ Vu Query是用于治理服务器状态的最好的库之一。它开箱即用，配置为零，成果十分好，并且能够随应用程序的增长进行定制**。 通过Vu Query，您能够克服服务状态的辣手挑战和阻碍，并在开始管制您的应用程序数据之前对其进行管制。 从技术上讲，Vu Query可能会： 帮忙您从应用程序中删除 多行简单和误会的代码，并替换为几行Vu Query逻辑。使您的应用程序更易于保护，更易于构建新性能，而不用放心连贯新的服务器状态数据源使您的应用程序比以往任何时候都更快，更灵活，对最终用户有间接影响。潜在地帮忙您节俭带宽并进步内存性能疾速开始此示例十分简要地阐明了Vu Query的3个外围概念： 查问变异使查问有效这三个概念形成了Vu Query的大部分外围性能。 import { defineComponent, createApp } from 'vue'import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider,} from 'vu-query'import { getTodos, postTodo } from '../my-api'const Todos = defineComponent(() => { // Access the client const queryClient = useQueryClient() // Queries const query = useQuery('todos', getTodos) // Mutations const mutation = useMutation(postTodo, { onSuccess: () => { // Invalidate and refetch queryClient.invalidateQueries('todos') }, }) return () => ( <div> <ul> {query.data?.map(todo => ( <li key={todo.id}>{todo.title}</li> ))} </ul> <button onClick={() => { mutation.mutate({ id: Date.now(), title: 'Do Laundry', }) }} > Add Todo </button> </div> )})// Create a clientconst queryClient = new QueryClient()const App = defineComponent({ render() { return ( // Provide the client to your App <QueryClientProvider client={queryClient}> <Todos /> </QueryClientProvider> ) },})createApp(App).mount('#app')待办文档因为也是由react-query的文档复制批改而来的，所以没有中文的，或者之后会加上。因为vue3的测试工具也没有出，等测试工具公布之后会加上残缺的测试用例。

上一篇，小编讲到在vue-router中是通过mode这一参数管制路由的实现模式的。明天就让咱们深刻去观摩vue-router源码是如何实现路由的 路由起源 - 后端路由路由这个概念最先是后端呈现的。在以前用模板引擎开发页面时，常常会看到这样的地址 http://www.vueRouter.com/login大抵流程能够看成这样： 浏览器发动申请服务器监听到端口申请，如（80， 443）申请，解析URL门路依据服务器的配置，返回相应信息（html字符，json数据，图片...)浏览器依据数据包的Content-Type来决定如何解析数据即：路由就是跟后端服务器的一种交互方式，通过不同的门路，来申请不同的资源，申请不同的页面是路由的其中一种性能 前端路由随着前端利用的业务性能越来越简单、用户对于应用体验的要求越来越高，单页利用（SPA）成为前端利用的支流模式。大型单页利用最显著特点之一就是采纳前端路由零碎，通过扭转URL，在不从新申请页面的状况下，更新页面视图。 "更新视图但不从新申请页面"是前端路由原理的外围之一，目前在浏览器环境中这一性能的实现次要有两种形式： hash模式: 利用浏览器中#history 模式： 利用History interface在 HTML5中新增的办法hash模式hash示例： http://www.vueRouter.com/loginhash模式：hash值是URL 的锚局部（从 # 号开始的局部）。hash值的变动并不会导致浏览器向服务器发动申请，浏览器不发动申请，从而不会刷新界面。另外每次 hash 值的变动，还会触发hashchange 这个事件，通过这个事件咱们就能够晓得 hash 值产生了哪些变动。而后咱们便能够监听hashchange来实现更新页面局部内容的操作： function updateDom () { // todo 匹配 hash 做 dom 更新操作}window.addEventListener('hashchange', updateDom)history模式如果不想要很丑的 hash，咱们能够用路由的 history 模式，这种模式充分利用 history.pushState API 来实现 URL 跳转而毋庸从新加载页面。 const router = new VueRouter({ mode: 'history', routes: [...]})源码剖析咱们找到VueRouter类的定义，摘录与mode参数无关的局部如下： export default class VueRouter { mode: string; // 传入的字符串参数，批示history类别 history: HashHistory | HTML5History | AbstractHistory; // 理论起作用的对象属性，必须是以上三个类的枚举 fallback: boolean; // 如浏览器不反对，'history'模式需回滚为'hash'模式 constructor (options: RouterOptions = {}) { let mode = options.mode || 'hash' // 默认为'hash'模式 this.fallback = mode === 'history' && !supportsPushState // 通过supportsPushState判断浏览器是否反对'history'模式 if (this.fallback) { mode = 'hash' } if (!inBrowser) { mode = 'abstract' // 不在浏览器环境下运行需强制为'abstract'模式 } this.mode = mode // 依据mode确定history理论的类并实例化 switch (mode) { case 'history': this.history = new HTML5History(this, options.base) break case 'hash': this.history = new HashHistory(this, options.base, this.fallback) break case 'abstract': this.history = new AbstractHistory(this, options.base) break default: if (process.env.NODE_ENV !== 'production') { assert(false, `invalid mode: ${mode}`) } } } init (app: any /* Vue component instance */) { const history = this.history // 依据history的类别执行相应的初始化操作和监听 if (history instanceof HTML5History) { history.transitionTo(history.getCurrentLocation()) } else if (history instanceof HashHistory) { const setupHashListener = () => { history.setupListeners() } history.transitionTo( history.getCurrentLocation(), setupHashListener, setupHashListener ) } history.listen(route => { this.apps.forEach((app) => { app._route = route }) }) } // VueRouter类裸露的以下办法理论是调用具体history对象的办法 push (location: RawLocation, onComplete?: Function, onAbort?: Function) { this.history.push(location, onComplete, onAbort) } replace (location: RawLocation, onComplete?: Function, onAbort?: Function) { this.history.replace(location, onComplete, onAbort) }}作为参数传入的字符串属性mode只是一个标记，用来批示理论起作用的对象属性history的实现类在初始化对应的history之前，会对mode做一些校验：若浏览器不反对HTML5History形式（通过supportsPushState变量判断），则mode强制设为'hash'；若不是在浏览器环境下运行，则mode强制设为'abstract'VueRouter类中的onReady(), push()等办法只是一个代理，理论是调用的具体history对象的对应办法，在init()办法中初始化时，也是依据history对象具体的类别执行不同操作在浏览器环境下的两种形式，别离就是在HTML5History，HashHistory两个类中实现的。他们都定义在src/history文件夹下，继承自同目录下base.js文件中定义的History类。History中定义的是专用和根底的办法，间接看会一头雾水，咱们先从HTML5History，HashHistory两个类中看着亲切的push(), replace()办法的说起。 ...

1.开发环境 vue+vant2.电脑系统 windows10专业版3.在应用vue开发的过程中,咱们常常会应用到传参,上面我来分享一下vue简略的路由传参,心愿对你有所帮忙。4.通过路由属性中的name来确定匹配的路由,通过params来传递参数,在template中增加如下代码: <div class="delete-edit-r" @click="toEdit(item)"></div>5.在methods中提娜佳如下代码: toEdit(item) { this.$router.push({ name: "addNewAdress", params: { item, } }); }6.在接口的页面中进行打印,代码如下: console.log("我是传进来的只");console.log(this.$route.params.item);console.log("我是传进来的值完结啦"); 7.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。

0、装置依赖cross-env1、内部IP.js文件拿到ip2、保障打包config/index.js引入IP.jsconst ipFile = require('../build/ip')  module.exports/dev/host设置值为获取的iphost: ipFile.getIp(), package.json/"build": "cross-env NODE_ENV=production env_config=prod node build/build.js" 3、保障本地开发config/index.js引入IP.jsmodule.exports--dev--proxyTable上面的对象的target--写上开发的后端地址 const os = require('os') module.exports = {  getIp(){    const ifaces = os.networkInterfaces() // 取得网络接口列表。    let ip = ''    for(const dev in ifaces) {      ifaces[dev].forEach(function(details) {        if(ip === '' && details.family === 'IPv4' && !details.internal) {          ip = details.address          return        }      })    }    console.log(ip,"ip-------")    return ip || '0.0.0.0'  }}

1、装置依赖cnpm i xlsx --D 2、某个模块中引入或者全局引入import XLSX from 'xlsx' 3、导入excelcommonjs(公共函数)/** * 1、 String.fromCharCode(65 + i) + 1 : A1,B1,C1.... * 2、 String.fromCharCode(65 + j) + (i + 2) A2,B2,C2... * A3,B3,C3... * 测试： * const headers = [{ key: 'date', title: '日期' }, { key: 'name', title: '名称' }] * const data = [{ date: '2019-05-31', name: 'megen.huang' }, { date: '2019-06-20', name: '小明' }] * console.log(exportJsonToExcel(headers, data)) * 应用xlsx插件将json数据导出到Excel中----针对表格数据 * @param {Array} headers 表头:[{key: 'date', title: '日期'}, {key: 'name', title: '名称'}] * @param {Array} data 表体数据:[{date: '2019-05-31', name: 'megen.huang'}, {date: '2019-06-20', name: '小明'}] * @param {String} fileName 导出的文件名称 :'export.xlsx' */export function exportJsonToExcel (headers = [], data = [], fileName = 'export.xlsx') {// 先解决数据 data = handleCSV(data) const _headers = headers .map((item, i) => Object.assign({}, { key: item.key, title: item.title, position: String.fromCharCode(65 + i) + 1 })) .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { key: next.key, v: next.title }}), {}) const _data = data // 二维数组 .map((item, i) => headers.map((key, j) => Object.assign({}, { content: item[key.key], position: String.fromCharCode(65 + j) + (i + 2) }))) // 二维转一维 .reduce((prev, next) => prev.concat(next)) // 转成worksheet须要的数据结构 .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { v: next.content }}), {}) // 合并 headers 和 data const output = Object.assign({}, _headers, _data) console.log('output', output) // 获取所有单元格的地位 const outputPos = Object.keys(output) // 计算出范畴 ,["A1",..., "H2"] const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}` console.log('ref', ref) // 构建 workbook 对象 const wb = { SheetNames: ['mySheet'], Sheets: { mySheet: Object.assign( {}, output, { '!ref': ref, '!cols': headers.map(item => ({ wpx: 120 }))// width in screen pixels } ) } } // 导出 Excel XLSX.writeFile(wb, fileName)}// 避免CSV注入解决export function handleCSV (arr) { const reg = new RegExp('(^=|^-)') if (Array.isArray(arr) && arr.length > 0) { for (const item of arr) { Object.keys(item).forEach(key => { if (item[key] && reg.test(item[key])) { item[key] = '\'' + item[key] } }) } } return arr}/** * 日期格局转换 * `第一个参数为传入的以毫秒为单位的工夫戳，第二个参数为格局，具体阐明见代码; * 不传参则返回以后日期，则为“'yyyy年MM月dd日'”格局显示.` * @param {object} _date 日期 * @param {string} _format 转换后的日期格局 */export function FormatDate (_date, _format) { if (_format && !_date) { return '' } var date = _date || new Date() var format = _format || 'yyyy/MM/dd' date = new Date(_date) var map = { M: date.getMonth() + 1, // 月份 d: date.getDate(), // 日 h: date.getHours(), // 小时 m: date.getMinutes(), // 分 s: date.getSeconds(), // 秒 q: Math.floor((date.getMonth() + 3) / 3), // 季度 S: date.getMilliseconds() // 毫秒 } format = format.replace(/([yMdhmsqS])+/g, function (all, t) { var v = map[t] if (v !== undefined) { if (all.length > 1) { v = '0' + v v = v.substr(v.length - 2) } return v } else if (t === 'y') { return (date.getFullYear() + '').substr(4 - all.length) } return all }) return format}html<template><div> <!-- 这里应用了ElementUI的el-upload组件 --> <el-upload ref="upload" class="upload-demo" :action="''" :multiple="false" :show-file-list="false" :limit="1" :before-upload="beforeAvatarUpload" :file-list="fileList" >从Excel导入 </el-upload></div></template>jsimport { exportJsonToExcel, deepClone, FormatDate } from '@/utils'data(){ return { outJson: [], // 最初要发送给后盾的json数据 // 导入表头必填字段 excelHeaderRequired: [ '序号（必填）', '子工作名称（必填）', '子工作内容（必填）', '执行人（必填）', '预计开始工夫（必填）', '预计实现工夫（必填）', '紧急水平（必填）' ], exportHeader: Object.freeze([{ key: 'index', title: '序号' }, { key: 'workItem', title: '事项名称' }, { key: 'taskName', title: '子工作名称' }, { key: 'remark', title: '子工作内容' }, { key: 'executor', title: '执行人' }, { key: 'planStarttime', title: '预计开始工夫' }, { key: 'planEndtime', title: '预计实现工夫' }, { key: 'actualStarttime', title: '理论开始工夫' }, { key: 'actualEndtime', title: '理论实现工夫' }, { key: 'tagList', title: '标签' }, { key: 'orderNum', title: '紧急水平' }, { key: 'taskProgress', title: '工作进展' } ]), order: Object.freeze({ '紧急': 0, '个别': 1, '重要紧急': 2 }), orderObj: Object.freeze({ 0: '紧急', 1: '个别', 2: '重要紧急' }), }}methods:{ <!-- 上传之前进行文件校验 --> beforeAvatarUpload (file) { if (!file) { // 没有文件 return false } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) { // 格局依据本人需要定义 this.$message.error('上传格局不正确，请上传xls或者xlsx格局') return false } this.handleExcel(file)// 解决数据 this.$refs.upload.clearFiles() }, handleExcel (file) { // 表格导入 const files = file // excel文件 const fileReader = new FileReader() fileReader.onload = ev => { try { const data = ev.target.result const workbook = XLSX.read(data, { type: 'binary', cellDates: true }) const wsname = workbook.SheetNames[0]// 取第一张表 const tempArr = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) // 生成json表格内容,如果某个字段列没有填，则解析进去就会没有该字段 console.log('解析进去的数据', tempArr) this.outJson = [] let isValidPass = true for (const item of tempArr) { console.log('几次', item) const obj = {} const bool = this.validFieldRequired(item) if (!bool) { // 如果不是true，阐明有些必填字段没有填 isValidPass = false break } const isValidSuccess = this.handleoutJson(item, obj) if (!isValidSuccess) { isValidPass = false break } else { this.outJson.push(this.successObj)// this.outJson放的就是须要返回给后盾的 } } if (isValidPass) { // 如果this.outJson有数据阐明曾经全副校验胜利能够传给后盾了 batchSaveTask(this.outJson).then(res => { this.$message.success('导入胜利') this.init() }).catch(e => {}) } } catch (e) { console.log(e) return false } } fileReader.readAsBinaryString(files) }, // 校验必填字段的值是否存在 validFieldRequired (item) { let boolean = true for (const el of this.excelHeaderRequired) { if (!Object.keys(item).includes(el)) { this.$message.error(`${el}`) boolean = false break } } return boolean }, // 将解析的json转为后盾须要的字段 handleoutJson (item, obj) { // if (item['事项名称（必填）']) { // } this.successObj = {} obj['matterId'] = this.$route.query.id obj['taskName'] = item['子工作名称（必填）'].trim() obj['remark'] = item['子工作内容（必填）'].trim() // 人员的须要传三个参数 obj['executorAccount'] = item['执行人（必填）'].trim() obj['executorId'] = '' obj['executor'] = '' if (!DataType(item['预计开始工夫（必填）'], 'date')) { this.$message.error('预计开始工夫格局不合乎') return false } if (!DataType(item['预计实现工夫（必填）'], 'date')) { this.$message.error('预计完结工夫格局不合乎') return false } if (item['预计开始工夫（必填）'] > item['预计实现工夫（必填）']) { this.$message.error('预计开始工夫不能晚于预计完结工夫') return false } else { // 须要对工夫进行解决 obj['planStarttime'] = FormatDate(item['预计开始工夫（必填）'], 'yyyy-MM-dd hh:mm:ss') // 须要对工夫进行解决 obj['planEndtime'] = FormatDate(item['预计实现工夫（必填）'], 'yyyy-MM-dd hh:mm:ss') } console.log(item['预计开始工夫（必填）'], item['预计实现工夫（必填）']) if (item['紧急水平（必填）'] && Object.keys(this.order).includes(item['紧急水平（必填）'].trim())) { // 须要把汉字转成key传过来 obj['orderNum'] = this.order[item['紧急水平（必填）'].trim()] } else { this.$message.error('工作等级不存在') return false } this.successObj = { ...obj } return true },}4、导出exceljs // 导出 exportMatter (type, tag) { if (type === '1' && this.completeList.length > 0) { // 这里深copy避免净化原数据 const arr = deepClone(this.completeList) // 须要解决数据 const sourceData = arr.map((item, index) => { item['index'] = index + 1 item['tagList'] = this.tagsText(item.tagList) item['orderNum'] = this.orderObj[item.orderNum] item['planStarttime'] = item.planStarttime ? FormatDate(item.planStarttime, 'yyyy/MM/dd hh:mm:ss') : '' item['planEndtime'] = item.planEndtime ? FormatDate(item.planEndtime, 'yyyy/MM/dd hh:mm:ss') : '' item['actualStarttime'] = item.actualStarttime ? FormatDate(item.actualStarttime, 'yyyy/MM/dd hh:mm:ss') : '' item['actualEndtime'] = item.planStarttime ? FormatDate(item.actualEndtime, 'yyyy/MM/dd hh:mm:ss') : '' Object.keys(item).forEach(key => { item[key] = item[key] === null ? '' : item[key] }) return item }) exportJsonToExcel(this.exportHeader, sourceData, 'exportSubTask.xlsx') } else { this.$message.error('没有可导出的已实现工作') } },

在应用vue开发时，常常会封装很多的组件不便复用，那么不免就有写款式相干组件，比方须要应用时传入色彩、高度等款式参数。那么问题来了：咱们要怎么在款式中应用组件中接管的参数呢？或者说，咱们要怎么在款式中应用data中的变量呢？ 话不多说 上菜~ <template> <div class="box" :style="styleVar"> </div></template><script>export default { props: { height: { type: Number, default: 54, }, }, computed: { styleVar() { return { '--box-height': this.height + 'px' } } },}</script><style scoped>.box { height: var(--box-height);}</style>这样咱们就在vue中实现了在款式里应用js变量的办法：及通过css定义变量的形式，将变量在行内注入，而后在style中应用var()获取咱们在行内设置的数据即可。

Develop WebApps with Vue using Polkadot.jsElement个别的，以下三个因素会呈现在任何程序上的一次操作中 发/收信方：Account钱包地址通道： WebSocket长连贯信息： Message可被加密Account 依赖： @polkadot/util-crypto 用于生成随机的密钥@polkadot/keyring 用于治理钱包账户,/testing能够同步开发测试账户@vue-polkadot/vue-settings 同步链节点的根本信息（比方转账时要用到的货币单位）@vue-polkadot/vue-identicon 用于显示账户头像@polkadot/util 一些工具，例如数据格式化装置keyring // store.tsimport { cryptoWaitReady } from '@polkadot/util-crypto'import testKeyring from '@polkadot/keyring/testing'const myKeyring = async (store: any) => { await cryptoWaitReady() const keyring = testKeyring({ type: 'sr25519' }) Vue.prototype.$keyring = keyring}在组件中调用keyring生成钱包账户 // Account.vueimport { Vue } from 'vue-property-decorator'export default class Account extends Vue { public newAccount: any = { name: '', mnemonicSeed: '', address: '', password: '' } private getAddressFromSeed(mnemonicSeed: string): any { return this.$keyring.createFromUri( mnemonicSeed.trim(), this.getMeta(), 'sr25519' ) } private getMeta(): any { return { name: this.newAccount?.name || '', whereCreated: 'Earth', whenCreated: Date.now() } }}creat接口用于创立账户，add接口用于在本地内存里增加账户。 ...

1.开发环境 vue2.电脑系统 windows10专业版3.在应用vue开发的过程中,咱们常常应用map进行遍历,上面我来分享一下如何优雅的应用map进行遍历。4.在对应的代码中增加如下内容: this.usertimeArr = res.data.data.map((item, index) => { console.log("我是map遍历"); console.log(item.game.time_open); // console.log(item.game.time_open.length); // console.log(index); console.log(item.game.time_open.slice(0, 10)); this.usertimer = []; this.usertimer.push(item.game.time_open.slice(0, 10)); // console.log("我是数组增加办法"); // console.log(this.usertimer); // console.log("我是数组增加办法完结啦"); return this.usertimer; }) console.log("我是数组增加办法"); console.log(this.usertimeArr); console.log("我是数组增加办法完结啦");5.在return中增加如下代码: // 存储 用户工作工夫的 数组usertimeArr: [],// 存储 用户工作的工夫usertimer: [],6.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。

当援用less文件时，报错信息如下 TypeError: this.getOptions is not a function阐明less-loader的版本过高，不兼容getOptions办法。 故：npm uninstall less-loader --save-dev npm i less-loader@4.1.0 --save-dev

删掉 node_modules文件夹和pacakage-locak.json文件而后 npm i

1.开发环境 vue2.电脑系统 windows10专业版3.在应用vue开发的过程中,咱们常常应用watch来监听一些数据的变动,来进行一些操作。然而咱们在很多的时候须要监听对象的某个值的变动,上面我来分享一下如何实现。4.在return中增加如下代码: CreObj: { dxcode: "", },5.在watch中增加如下代码: watch: { "CreObj.dxcode"(newValue, oldValue) { console.log("我是监听的验证码"); console.log(oldValue); console.log(newValue); console.log("我是监听的验证码完结啦"); }}6.成果如下:7.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。

1.开发环境 vue+vue-animate-number2.电脑系统 windows10专业版3.在应用 vue开发的过程中,咱们常常会应用一些插件来实现一些成果,上面我来分享一下是如何应用vue来实现动静展现数字。4.废话不多说,间接上操作: //装置 vue-animate-number插件npm install vue-animate-number5.在main.js中引入 import Vue from 'vue'import VueAnimateNumber from 'vue-animate-number'Vue.use(VueAnimateNumber)6.在vue模板中应用 <animate-number from="19999999":to="to" duration="10000" v-if="toshow" class="canimate"></animate-number>7.配置参数 prop nametypedescriptiondefaultrequiremodestringauto or manual, trigger animation immediately or notautoNfromnumbervalue, at which animate starts-Ytonumbervalue, at which animate ends-YfromColorstringstart color for gradient, in hex format-NtoColorstringend color for gradient, in hex format-NformatterFunctionvalue formatter for number in every step during the animationparseIntNanimateEndFunctioncallback after animation-N 8.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。

<style>/ global styles / @import url('index.css')@import url(index.css) // url()引号可有可无@import 'index.css' //引号必须存在</style>

起因是没有绑定v-model属性,且data中没有绑定的value属性.

1. 我的项目中引入html2canvasnpm install html2canvas 2. html局部<div class="html2canvas" ref="html2canvas">3. js局部import html2canvas from 'html2canvas'export default { mounted () { this.toImage() }, methods: { toImage () { html2canvas(this.$refs.html2canvas, { width: 300, height: 300, backgroundColor: null, useCORS: true // 解决文件跨域问题 }).then(canvas => { let url = canvas.toDataURL('image/png') // 生成的图片 // 能够上传后端或者间接显示 }) } }}

本文章次要用于vue打包到公布npm做一次记录，并且有人遇到相似问题可能提供一些帮忙！！！首先确保node.js装置，没有的同学能够到node官网下载，而后就是无脑是装置；其次装置vue-cli，这里不做过多赘述。以vue-loop-marquee为例: **src目录下创立lib文件夹，**

除了默认设置的外围指令( v-model 和 v-show )，Vue 也容许注册自定义指令。在Vue里，代码复用的次要模式和形象是组件。然而，有的状况下，依然须要对纯 DOM 元素进行底层操作，这时候就会用到自定义指令。本文将具体介绍Vue自定义指令 指令注册 以一个input元素主动取得焦点为例，当页面加载时，应用autofocus能够让元素将取得焦点 。然而autofocus在挪动版Safari上不工作。当初注册一个使元素主动获取焦点的指令站长交易 指令注册相似于组件注册，包含全局指令和部分指令两种 【全局指令】 应用Vue.diretive()来全局注册指令 【部分指令】 也能够注册部分指令，组件或Vue构造函数中承受一个 directives 的选项 而后能够在模板中任何元素上应用新的 v-focus 属性 钩子函数 指令定义函数提供了几个钩子函数（可选） 【bind】 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数能够定义一个在绑定时执行一次的初始化动作 【inserted】 被绑定元素插入父节点时调用（父节点存在即可调用，不用存在于 document 中） 【update】 所在组件的 VNode 更新时调用，然而可能产生在其孩子的 VNode 更新之前。指令的值可能产生了扭转也可能没有。然而能够通过比拟更新前后的值来疏忽不必要的模板更新 【componentUpdated】 所在组件的 VNode 及其孩子的 VNode 全副更新时调用 【unbind】 只调用一次， 指令与元素解绑时调用 钩子函数参数 钩子函数被赋予了以下参数 【el】 指令所绑定的元素，能够用来间接操作 DOM 【binding】 一个对象，蕴含以下属性： 【vnode】 Vue 编译生成的虚构节点 【oldVnode】 上一个虚构节点，仅在 update 和 componentUpdated 钩子中可用 [留神]除了 el 之外，其它参数都是只读的，尽量不要批改他们。如果须要在钩子之间共享数据，倡议通过元素的 dataset 来进行 上面是一个应用了这些参数的自定义钩子样例 【函数简写】 大多数状况下，可能想在bind和update钩子上做反复动作，并且不想关怀其它的钩子函数。能够这样写： 【对象字面量】 ...

形容问题： 作为前端小白，壮壮在写毕设的时候应用了Vuex保留用户数据，来实现切换到集体核心时加载用户信息的性能，而后发现刷新页面后数据失落！ 解决方案： 因为对Vue不是很相熟，所以在一番百度之后，抉择了应用sessionStorage来代替Vuex。 对下面的问题，我仍然很好奇，有晓得的麻烦通知我一下，谢谢啦。

1.开发环境 vue2.电脑系统 windows10专业版3.在应用vue开发的过程中,咱们可能会应用到之前写好的内容,然而可能是应用原生写的。上面我来分享一下我的解决办法,心愿对你有所帮忙。4.在public下新建对应的html文件 而后在新建一个文件,把对应的文件拷贝进去而后批改一下文件门路5.在这里我在vue文件中应用的是iframe,在对应的vue模板中,增加如下代码: <iframe src="down2.html" height="700px" width="100%" name="demo" scrolling="auto"sandbox="allow-same-origin"></iframe>大家依据本人的需要深造批改6.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。

Vue我的项目打包部署到xampp (Apache)部署目录：D:xampp/htdocs/flowmesh，部署到根目录下的子目录。参考：https://router.vuejs.org/zh/g... 如果部署到一个子目录，须要应用 Vue CLI 的 publicPath 选项和相干的 router base属性。还须要对后端配置，把根目录调整成为子目录 (例如用 RewriteBase /name-of-your-subfolder/ 替换掉 RewriteBase /)。 具体操作如下：1、批改xampp的httpd.conf开启rewrite_module性能：去掉LoadModule rewrite_module libexec/apache2/mod_rewrite.so后面的#。将AllowOverride None改成AllowOverride All，使.htaccess文件失效。 <Directory /> AllowOverride none #Require all denied Options +ExecCGI Order allow,deny Allow from all</Directory>改为： <Directory /> #AllowOverride none AllowOverride All #Require all denied Options +ExecCGI Order allow,deny Allow from all</Directory>2、新建.htaccess文件在htdocs/flowmesh目录下新建.htaccess文件，否则刷新页面服务端会间接报404谬误。 .htaccess文件内容： <IfModule mod_rewrite.c> RewriteEngine On RewriteBase /flowmesh/ RewriteRule ^index.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /flowmesh/index.html [L]</IfModule>RewriteBase / 批改为 RewriteBase /flowmesh/RewriteRule . /index.html [L] 批改为 RewriteRule . /flowmesh/index.html [L] ...

咱们在Vue对象中能够通过this.xxx去拜访Vue中data对象中定义的数据，然而为什么能够间接应用this.xxx来拜访呢？咱们能够用过看源码的形式来进行了解。 当咱们应用new的形式创立一个Vue实例的时候，实际上调用的是一个Vue的办法。 /* src/core/instance/index.js */function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword') } this._init(options)} 初始化的时候，Vue办法中次要调用了_init这个办法。 这个_init办法实际上是一个挂在在Vue原型上的一个办法。同样在这个文件中含有一行代码initMixin(Vue)就是实现了挂载_init办法在Vue原型上的一个操作。 而后咱们进入_init(options)来看进行了哪些操作。这个时候进入src/core/instance/init.js找到initMixin办法。 在initMixin一开始就能够看到Vue.prototype._init = function() {} 这个就是Vue对象原型上的_init办法了。而后来看这个办法中进行了哪些操作？这个时候疏忽一些细节，间接看到有一段全是initXXX的函数调用。这一块大抵就是Vue对象初始化的一些流程，比方生命周期，事件等等。 /* src/core/instance/init.js */export function initMixin (Vue: Class<Component>) { Vue.prototype._init = function (options?: Object) { /* more details */ vm._self = vm initLifecycle(vm) initEvents(vm) initRender(vm) callHook(vm, 'beforeCreate') initInjections(vm) // resolve injections before data/props initState(vm) initProvide(vm) // resolve provide after data/props callHook(vm, 'created') /* more details */ }} 对于data的解决就聚焦在这个initState办法上。initState这个办法是引入到这个文件的，所以咱们找到initState这个办法真正定义的中央src/core/instance/state.js。 ...

在iview官网存在这这样一个bug演示地址 iview默认的模式就是所有transfer都会敞开窗口事件，所以date-picker点选后会触发敞开事件，导致popTip一起敞开。 以后最正当的解决办法是：1.只保留popTip为transfer，将date-picker的transfef设为false<DatePicker :transfer="false" ></DatePicker> 2.将date-picker的transfef设为false会呈现popTip容器遮挡问题，这是须要设置.ivu-poptip-body-content css为overflow: visible; 2.1.设置Poptip的popper-class，用于防止全局净化默认款式<Poptip trigger="click" popper-class="time-box" transfer>2.2.编写正确的css款式<style>.time-box .ivu-poptip-body-content {overflow: visible;}</style>

el-select可多选可单选，抉择全副后不能抉择其余，具体参照如下代码： <el-select size="middle" clearable v-model="form.ground" @change="handlePlat" placeholder="请抉择小组" filterable multiple style="width: 400px;"> <el-option label="全副" value="全副"></el-option> <el-option v-for="(item, index) in groundList" :key="index" :label="item.name" :value="String(item.id)" :disabled="item.disabled"></el-option></el-select>handlePlat(){ if (this.form.ground.indexOf("全副") == "-1") { this.groundList.map((res) => { res.disabled = false; }); } else { this.groundList.map((res) => { res.disabled = true; }); this.form.ground = ["全副"]; }}

<h1>装置</h1> <h2>后盾命令窗口输出：</h2>先创立一个新的文件夹，留神文件夹门路不能为中文，而后进入文件夹，按住shift键，点击鼠标右键，抉择在此处关上命令窗口，弹出小黑框，而后在小黑框即后盾进行操作。 第一步输出：npm install -g vue-cli在全局环境（-g）装置vue-cli，装置完之后，输出：vue初始化webpack-simple，我的项目文件夹名称为 vuedemo（名称可任取，不能为中文），输出：vue init webpack-simple vuedemo 接下来，会呈现Project name输出申请，也就是给我的项目取名，不必管，采纳默认即可，按回车键而后是我的项目形容，可写可不写，持续按回车之后是作者，持续按回车Use sass 一种css语法规定，同样没太大关系，输出y，按回车 呈现代码提醒，没有报错，阐明webpack-simple曾经装置结束，接下来依照呈现的代码提醒进行操作首先，找到本人的我的项目文件夹（vuedemo是我获得文件夹名，须要改为你之前获得的我的项目文件夹名），输出：cd vuedemo而后激活npmnpm install最初运行此框架npm run dev期待页面的自动弹出，到此，后盾就曾经搭建实现，之后就是对内容的编写了。

还原问题现场： 第一次应用vue init webpack projectName的时候，因为操作失误，执行了两次npm install -g vue-cli，而后再应用vue init webpack vuedemo创立vuedemo模板，就呈现了 vue-cli · Failed to download repo vuejs-templates/vuedemo: Response code 404 (Not Found)； 解决办法： 执行上面三个命令来查看环境： node -v(小写v)：如果没有显示node版本，先去官网下载安装nodevue -V(大写V)：如果没有显示vue版本，npm i vue-cli -g装置webpack -v(小写v)：如果须要重新安装，就用 npm install webpack -g 当三个条件都满足，应用__vue init webpack vuedemo(__vuedemo是我本人轻易取的名字__)；__ 经验总结： webpack没有全局装置时，每次新建我的项目都须要重新安装webpack，否则报如上谬误

后面写的理解了一下vue这个框架,所有的框架都要在理论利用里感受一下好坏.这里用vue+vuex+Ts+elementEI来做一个我的项目 git地址:https://github.com/544076724/... 首先下载vue-cli 这里用的版本是4.5.9 首先创立我的项目 vue create edu-boss-fed而后来答复一些问题这里咱们本人配置要的选项而后第一个不选默认是2.0版本的vue,这里咱们用2.0。而后把babel,ts,router,vuex,css预处理器,和lint都选上.而后勾选ts之后,咱们把应用类款式的组件语法 也勾选上(能够写jsx语法了)这个也是yes,咱们让ts只解决类型注解,而后语法的转换还是交给babel来解决(ts解决不够欠缺).这里咱们选的no,咱们这个我的项目用hash模式路由,如果前期须要history模式再配置.这里用第一个,最新的sass这里咱们用Standard规定,这个规定绝对比拟松,比拟适宜集体或小团队应用. 这里咱们都勾选上,保留save和commit提交时都对代码进行修复.而后第一个,把eslint以及其余配置都用独自文件配置.最初看集体须要，是否要贮存咱们之前抉择的这一套来生成个模板,不便下次应用.

办法/步骤：1. 装置vue-clipboard2插件 npm install --save vue-clipboard2 2. 查看配置文件package.json，查看vue-clipboard2是否装置胜利 3. 启动服务 npm run dev 4. main.js增加 import Vueimport VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard) 5. copy组件 v-clipboard:copy="message"v-clipboard:success="onCopy"v-clipboard:error="onError" 6. 查看成果点击按钮，弹框显示了copy的内容,后两张图是在微信的输入框中测验刚刚的copy是否真的复制到了剪切板中。 注：以上形式：已测过，可用

1.开发环境 vue2.电脑系统 windows10专业版3.在应用vue开发的过程中,咱们可能会须要动静img的门路,上面我来分享一下遇到的问题和解决办法,心愿对你有所帮忙。4.在template中增加如下代码: <img:src="item.winner==null?WinnerObj.Cimg:item.winner.avatar" alt=""/>5.在return中增加如下代码: WinnerObj:{ Cimg: "../assets/fire.png"}你会惊奇的发现,图片显示不进去,是不是很好受。6.解决办法: 1.把图片放在 src同级的static文件夹下。2.把图片放在 csdn上,把网络地址存在 WinnerObj.Cimg中,而后间接 <img :src="WinnerObj.Cimg" /> 去展现3.图片放在assets文件夹,而后data外面应用require进入图片WinnerObj: { Cimg: require("../assets/fire.png")},7.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。

1.开发环境 vue+vant2.电脑系统 windows10专业版3.在应用vue+vant开发的过程中,咱们可能会须要动静绑定背景色,上面我来分享一下如何实现,心愿对你有所帮忙。4.在这里我是依据后盾返回的一个字符串,取这个字符串的最初一位,而后取模,如果是奇数则渲染 O,偶数渲染E。上面我来分享一下如何实现。5.废话不多说,先看效果图:6.看一下后盾返回的字符串: 如何实现呢?请看上面。6.在template中增加入戏代码: <van-row> <van-col v-for="(itam,index) in item.winners" span="2":style="{'background':$cJs.Zj(itam.lucky_ticket_token)=='E'?'red':'green'}">{{$cJs.Zj(itam.lucky_ticket_token)}} </van-col></van-row>思路:判断 $cJs.Zj(itam.lucky_ticket_token) 这个办法返回的值是什么,如果是E就让背景色为red,否则是 green。7.封装对应的办法: //字符串截取function Zj(cstring) { cstring = cstring + ""; cstring = cstring.charAt(cstring.length - 1); if (cstring % 2 == "0") { cstring = "E" } else { cstring = "O"; } return cstring;}在这个我的项目中,我把公共的办法抽离到了一个文件里,而后挂载到了全局。对应的调用办法,在template中。8.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。

实现申请一次上传多文件前段代码： `<div id="app"> <el-upload class="upload-demo" ref="upload" action="#" //必选参数，上传的地址 :on-change="onChange" //上传文件扭转时触发钩子 --管制文件组 :on-remove="handleRemove" //文件列表删除时触发钩子 --管制文件组 multiple //是否反对多选文件 :on-exceed="handleExceed" //文件超出个数限度时的钩子 accept=".pdf" //上传文件格式 :limit="5" //上传限度 :file-list="fileList" //上传的文件列表 :auto-upload="false"//是否在选取文件后立刻进行上传 show-file-list> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> <div slot="tip" class="el-upload__tip">只能上传pdf文件</div> </el-upload> //上传显示进度条 <div v-show="progressFlag" class="head-img"> <el-progress :text-inside="true" :stroke-width="14" :percentage="progressPercent" status="success"></el-progress> </div> </div>` ``<script> new Vue({ el: "#app", data() { return { fileList: [],//贮存多文件 progressFlag: false,//进度条初始值暗藏 progressPercent: 0//进度条初始值 }; }, methods: { //上传函数 submitUpload(file) { //重新命名 不便setTimeout函数 --因为setTimeout函数在vue外部中有效 var that = this; that.$refs.upload.submit(); //判断上传文件数量 if (this.fileList.length == 0) { that.$message({ message: '请抉择导入的文件', type: 'warning', duration:'2000'--显示工夫 }); }else{ //创立FormData();次要用于发送表单数据 let paramFormData = new FormData(); //遍历 fileList that.fileList.forEach(file => { paramFormData.append("files", file.raw); paramFormData.append("fileNames", file.name); }); //批改progressFlag值 that.progressFlag = true; //控制台打印文件信息 console.log(param.getAll("files")); //axios 发出请求 axios({ url: "你上传的URL", method: 'post', data: paramFormData, headers: {'Content-Type': 'multipart/form-data'}, onUploadProgress: progressEvent => { // progressEvent.loaded:已上传文件大小 // progressEvent.total:被上传文件的总大小 //进度条 that.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100) | 0; } }).then(res => { if(res.data == "success" && that.progressPercent === 100){ setTimeout(function() { that.$message({ message: '导入胜利！', type: 'success', duration:'2000' }); that.progressFlag = false; that.progressPercent = 0 that.$refs.upload.clearFiles(); }, 1000); } }).catch(error => { that.progressFlag = false; that.progressPercent = 0 that.$refs.upload.clearFiles(); that.$message({ message: '导入失败！', type: 'error', duration:'2000' }); }) } }, //文件状态扭转时的钩子，增加文件、上传胜利和上传失败时都会被调用 onChange(file, fileList) { this.fileList = fileList; }, handleRemove(file, fileList) { this.fileList = fileList; }, handleExceed(files, fileList) { this.$message.warning( `以后限度抉择 5 个文件` ); } } }) </script>`` 后端简略接管代码： ...

后端不向前端返回数据然而都端须要继续执行而前端不处于loading过程this.$confirm( '提醒', { title: '提醒', message: h('div', null, newDatas), showCancelButton: true, confirmButtonText: '跳过', cancelButtonText: '勾销', type: 'warning' }).then(() => { this.$message('后盾解决中'); uploadPiles(yesPile).then(); //申请二 uploadProgress().then((res) => { let data = res.data.errcode; console.log(data) });}).catch(() => { this.$message('已勾销');});

部署在http://www.xxx.com/域名的根目录，不须要过多配置，失常配置就能够跑起来； 部署在http://www.xxx.com/xxx这种状况时，须要增加如下配置 一、vue.config.js module.exports = { // 根本门路 publicPath: process.env.NODE_ENV === 'production' ? '/xxx/' : '/', ......}二、路由配置参数 new Router({ mode: 'history', base: process.env.NODE_ENV === 'production' ? '/xxx/' : '/', scrollBehavior: () => ({ y: 0 }), ......})批改这两个中央就能够失常跑起来了。 至于nginx配置能够参照官网文档

1.开发环境 vue+vant2.电脑系统 windows10专业版3.在应用vue+vant开发的时候,咱们常常会应用到其中的组件明码输入框和数字键盘实现领取等性能,上面我来分享一下明码输入框和数字键盘的应用,以及遇到的问题和解决办法,心愿对你有所帮忙。4.废话不多说,先看效果图:5.在template中增加如下代码: <van-popup class="Ps" v-model="Cshow" closeable close-icon="close" @close="handleClosePopup" position="bottom" :style="{ height: '65%' }"> <van-password-input class="Psinp" :value="PassWordObj.value" info="The default payment password is : 123456" :error-info="PassWordObj.errorInfo" :focused="PassWordObj.show" @focus="NumberJObj.show = true" /> </van-field> <van-number-keyboard v-model="NumberJObj.va" :show="NumberJObj.show" @blur="NumberJObj.show = false" @input="Cinput" @delete="onDelete(NumberJObj.va)" /> </van-popup>6.在css中增加如下代码: .Ps { height: 60% !important; } .Psinp { margin-top: 50px; }7.在return中增加如下代码: // 明码输入框 PassWordObj: { show: false, value: "", errorInfo: "", one: "1" }, // 数字键盘 NumberJObj: { show: true, va: "", Ch: "888", },8.在methods中增加如下代码: ...

前言做一个新的我的项目就须要罕用的代码，比方 登录，注册 (模板)全局路由守卫（路由配置）Request封装（申请封装）api集中管理引入依赖的UI库（color-ui,uview-ui）flex罕用布局css,配置分包utils常用工具函数配置Vuex(store)等等为了进步本人的效率（说白了有点懒）决定把这些作为根底模板，下次做新我的项目间接用就行了 效果图 全局路由守卫(1) 路由拦挡uni-simple-router 路由、拦挡、最优雅的解决方案 (2) 路由配置通过 vue.config.js 配合uni-read-pages，能够得心应手的读取 pages.json 下的所有配置 Request封装实用于一我的项目多域名申请、七牛云图片上传、本地服务器图片上传、反对 Promise. api集中管理api集中管理； 为简化逻辑代码量整洁的准则，像调用函数一样调用api，做到代码拆散，在apis目录对立创立api函数，并且封装接口返回数据类型校验的办法，挂载到vue原型中，页面通过this.$apis.apiName()调用 分包sub目录分包治理 因为微信小程序的限度，上传公布机制总包大小不能大于2m，所以我的项目若超出该限度，要在page.json中做分包解决，分包解决的配置与pages目录保持一致 配置vuex不须要引入每个子store模块 import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);const files = require.context("./modules", false, /\.js$/);let modules = { state: {}, mutations: {}, actions: {}};files.keys().forEach((key) => { Object.assign(modules.state, files(key)["state"]); Object.assign(modules.mutations, files(key)["mutations"]); Object.assign(modules.actions, files(key)["actions"]);});const store = new Vuex.Store(modules);export default store;页面应用Vuex import { mapState,mapActions } from 'vuex';computed: { ...mapState(['userInfo']) }methods: { ...mapActions(['getUserInfo']) } 源码下载前面继续更新。。。。作者相干文章反编译获取任何微信小程序源码——看这篇就够了 抽签小程序，妈妈再也不必放心谁洗碗（分配任务）了，so easy ...

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

我的项目介绍Vue3Chatroom 一个基于vue3.0+vant3.x搭建开发的仿微信手机端app界面聊天实例。实现了发送音讯/动图gif、图片/视频预览、网址链接查看、下拉刷新、红包/朋友圈等性能。 技术栈编码+技术：Vscode + Vue3.x/Vuex4.x/Vue-Router4UI组件库：Vant3.x (有赞挪动端vue3.0组件库)弹层组件：V3Popup（基于vue3自定义弹层组件）iconfont图标：阿里字体图标库自定义顶部Navbar栏+底部Tabbar 我的项目构造 vue3.0自定义navbar+tabbar组件我的项目中顶部导航条和底部tab栏均是自定义组件实现。大家如果对其实现形式感兴趣，能够去看看vue2中实现形式。vue.js实现自定义顶部导航+底部tab切换 vue3.0自定义挪动端弹框我的项目中各种弹框场景都是基于vue3开发的自定义弹框组件实现的。v3popup一款汇合多种弹框动画及类型的Vue3多功能mobile弹框组件。vue3.0系列之自定义mobile弹框组件|vue3挪动端对话框 vue.config.js根本配置vue3中 vue.config.js 根底配置信息。 const path = require('path')module.exports = { // 根本门路 // publicPath: '/', // 输入文件目录 // outputDir: 'dist', // assetsDir: '', // 环境配置 devServer: { // host: 'localhost', // port: 8080, // 是否开启https https: false, // 编译完是否关上网页 open: false, // 代理配置 // proxy: { // '^/api': { // target: '<url>', // ws: true, // changeOrigin: true // }, // '^/foo': { // target: '<other_url>' // } // } }, // webpack配置 chainWebpack: config => { // 配置门路别名 config.resolve.alias .set('@', path.join(__dirname, 'src')) .set('@assets', path.join(__dirname, 'src/assets')) .set('@components', path.join(__dirname, 'src/components')) .set('@views', path.join(__dirname, 'src/views')) }}vue3.0主页面main.js引入一些公共组件/款式，路由、状态治理等文件。 ...

1.开发环境 vue2.电脑系统 windows10专业版3.在应用vue开发的过程中,咱们可能会有这样的需要,就是分享到社交的网站和软件上,比方:分享到email/facebook/google/Linkedin/Twitter/Whatsapp等,上面我来分享一下我的教训和解决办法,心愿对你有所帮忙。4.废话不多说,间接上效果图:5.首先是装置: //字体库npm i vue-awesome -S //社交分享插件npm install vue-socialmedia-share -S 6.我在这里进行了封装,在components中增加如下:7.组件Facebook代码如下: <template> <span @click="facebookLink(url)"> <icon name="brands/facebook" color="#3B5998" :scale="scale"></icon> </span></template><script> import objectToGetParams from '@/utils/objectToGetParams'; import 'vue-awesome/icons/brands/facebook'; import Icon from 'vue-awesome/components/Icon'; export default { name: 'facebook', components: { Icon }, methods: { facebookLink(url) { window.open( `https://www.facebook.com/sharer/sharer.php` + objectToGetParams({ u: url }), '__blank' ); } }, props: { url: { required: true, type: String }, scale: { required: false, type: String } } };</script>8.在src下新建一个utils文件夹,在这个文件夹下新建一个 objectToGetParams.js,增加代码如下: ...

1. form表单的布局能够通过<el-row> <el-col :span(默认是将整个屏幕分成24)> 标签来扭转格局;还能够通过<div>外面的style标签(margn-xx[左,右]) 来扭转布局 align 抉择居中靠右还是靠左 ; 2. table表格内文字过多主动换行显示不雅观在<el-table>标签内应用 :show-overflow-tooltip="true"就能够鼠标放在内容哪里就主动显示全部内容然而如果内容过多的话会铺满全屏,在<style>标签内加上 <style>.el-tooltip__popper {max-width: 20%;}.el-tooltip__popper,.el-tooltip__popper.is-dark {background: rgb(48, 65, 86) !important;color: #fff !important;line-height: 24px;}</style> 会比拟难看些3. 对于:model 和v-model form表单应用:model 如果不应用的话 rules输入框就算输出文字 还是会有提示信息,4. 对于elementUI日期组件格局转换<el-form-item label="毕业工夫:" prop="graduationDate"> <template> <div class="block"> <span class="demonstration"></span> <el-date-picker style="width: 200px;" size="mini" v-model="formdata.graduationDate" align="right" type="date" placeholder="抉择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :picker-options="pickerOptions"> </el-date-picker> </div> </template> </el-form-item> value-format="yyyy-MM-dd" 日期格局转换 5.遇到的一个性能 @change再点击下拉选项的时候执行的一个函数依据下拉框的抉择的值不同能够用来扭转其四周的属性值 6. 后盾返回的值是数值 在前台转换为数值对应的label :formatter为每一列绑定属性formatter,值为一个函数,返回要翻译成的中文字符串 <el-table-column prop="expertsp" :formatter="getExpertsp" label="审批状态" width="85"> </el-table-column> data中的定义 Expertsp: [{ value: '1', label: '新增' }, { value: '2', label: '审批中' }, { value: '3', label: '审批通过' }, { value: '4', label: '审批不通过' } ], // 有多少条数据此函数就会触发多少次(后盾传数据,前台遍历显示对应的值)函数 getExpertsp(row, col) { for (var i in this.Expertsp) { if (this.Expertsp[i].value == row.expertsp) { return this.Expertsp[i].label } } }, 7.vue 给每行加序号①咱们想在 el-table 中增加序号列时，如下 ...

在应用vue开发的过程中,咱们会对我的项目做一些性能优化,上面我来分享一下我的教训和办法。心愿对你有帮忙。1.v-if和v-show辨别应用场景:v-if是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听和子组件适当地被销毁和重建;也是惰性的:如果在初始渲染时条件为假,则什么也不做,直到条件第一次变为真时,才会开始渲染条件块。 v-show:就简略多,不论初始条件是什么,元素总会是被渲染,并且只是简略地基于css的display属性进行切换。 所以,v-if实用于在运行时很少百变条件,不须要频繁切换条件的场景;v-show则实用于须要十分频繁切换条件的场景。2.v-for遍历防止同时应用v-ifv-for比v-if优先级高,如果每一次都须要遍历整个数组,将会影响速度,尤其是当之须要渲染很小一部分的时候,必要状况下替换成 computed 属性。 //举荐<ul> <li v-for="item in ChenArr" :key="item.id"> {{item.name}} </li></ul>computed:{ ChenArr:function(){ return this.items.filter(function(item){ return item.isActive }) }}//不举荐<ul> <li v-for="item in ChenArr" :key="item.id" v-if="item.isActive"> {{item.name}} </li></ul>2.事件的销毁vue组件销毁时,会主动清理它与其它实例的连贯,解绑它的全副指令及事件监听器,然而仅限于组件自身的事件。如果在js内应用 addEventListene 等形式是不会主动销毁的,咱们须要在组件销毁时手动溢出这些事件的监听,这样做的益处是便面造成内存透露,如: mounted(){ addEventListene("click",this.click,false);},beforeDestroy() { removeEventListener('click', this.click, false)}3.第三方插件的按需导入咱们在我的项目中常常会须要引入第三方插件,如果咱们间接引入整个插件,会导致我的项目的体积太大,咱们能够借助 babel-plugin-component ,而后能够只引入须要的组件,以达到减小我的项目体积的目标。以下为我的项目中引入 element组件库为例: //1.装置 npm i babel-plugin-component -D//2.批改 .babelrc{ "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ]}//3.在main.js中增加如下代码:import Vue from 'vue';import { Button, Select } from 'element-ui'; Vue.use(Button) Vue.use(Select)4.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。 ...

Vue 应用 ＜keep-alive include＞ 实现多级 ＜router-view＞ 缓存，有限档次缓存应用 <keep-alive> 实现缓存目前有三种办法办法 办法一：在路由元信息中增加缓存标识: { path: 'json', name: 'json', meta: { ... keepAlive: true ... }, component: () => import('../views/components/json')},2 . 应用v-if判断是否缓存 <keep-alive> <router-view v-if="$route.meta.keepAlive"/></keep-alive><router-view v-if="!$route.meta.keepAlive"/>这种办法是比拟早版本时应用的办法，过后<keep-alive>还没有include属性。这个办法尽管不便，然而会带来很多bug，比方无奈应用<transition>、缓存了不必要的，用来实现嵌套路由操作的<router-view>布局组件等。 然鹅，我有强迫症，不能承受没有动效 (￣(00)￣) 因而这里重点讲办法二（正在应用的）：1.将路由元信息中蕴含keepAlive: true的路由记录下来，并将该路由的name属性为保护在应用vuex中的一个keepAliveList: []里。 2.应用<keep-alive>的include属性，来实现动静的组件缓存。 先说一下include属性，它的值能够是：字符串，正则表达式，数组 首先咱们须要晓得keep-alive能够依据include中的值来匹配以后路由对应组件的name属性（！！不是路由的name哦，是组件的name），来判断这个路由中的组件是否须要缓存。因而咱们只须要将keepAliveList: []里保留的须要缓存的路由组件name数组传入include即可 因而应用起来就像这样 <keep-alive :include="keepAliveList"> <router-view :key="key"/></keep-alive><script>export default { name: 'index', data () { return { keepAliveList: this.$store.getters.getKeepAliveList, } }, computed: { // 获取缓存列表 getKeepAliveList () { return this.$store.getters.getKeepAliveList }, key () { return this.$route.path } }, watch: { getKeepAliveList (n, o) { this.keepAliveList = n } }}</script>然而：如果遇到嵌套的<router-view>或者嵌套路由（这是很常见的操作），这个时候前面几层<router-view>中的组件缓存会出问题 ...

1.开发环境 vue2.电脑系统windows10专业版3.本次分享适宜刚开始做我的项目的小伙伴们,在我的项目开发的的过程中咱们会进行数据对接(对接接口),咱们会遇到跨域的问题,上面我来分享一下我是怎么解决的,心愿对你有所帮忙。4.废话不多说,间接上操作: //第一步:装置axios(解决数据申请)npm i axios -S4-1.在main.js中增加如下代码: import axios from 'axios'//挂在到全局Vue.prototype.$axios=axios;5.在package.json的同级新建一个vue.config.js文件,增加如下代码: // vue.config.jsmodule.exports = {devServer: { proxy: { '/api': { target: 'http://192.168.0.109:3000', // 后盾申请地址 ws: true, changeOrigin: true, pathRewrite: { '^/api': '' //通过pathRewrite重写地址，将前缀/api转为/ } } } } }6.咱们在vue模板中如何应用呢? // 在mounted中增加如下代码:this.$axios.post("/pai/feng").then(res=>{ console.log(res);})在这里咱们就能够输入申请到后盾的数据啦。7.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。

1.开发环境 vue2.电脑系统 windows10专业版3.在应用vue开发的过程中,咱们常常会应用到遍历,在这里我分享的是应用map进行遍历数组,心愿对你有所帮忙。4.后盾返回的数据结构:5.那么应用map办法怎么进行遍历呢?废话不多说,间接上代码: res.data.data.map((cmap, index) => { console.log(cmap); console.log(cmap.group); return cmap;})// 留神:这里的cmap相当于一个变量名;index是下标;6.打印输出:7.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。

在编写用前端来治理微信小程序数据库的程序，有大神举荐了在vue-element-admin的根底上进行批改。在装置vue-element-admin的过程中遇到的问题记录一下：vue-element-admin的介绍网址，依照阐明装置即可：https://panjiachen.github.io/... 遇到了一个谬误：启动我的项目时报spawn cmd ENOENT把零碎path门路设置好就能够了。（nodejs要配置好） 参考上面这两篇文章：https://blog.csdn.net/qq_4059...https://blog.csdn.net/weixin_...

data() { return { form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, divFormList: [] }}当你把一个一般的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并应用 Object.defineProperty 把这些 property 全副转为 getter/setter。Object.defineProperty 是 ES5 中一个无奈 shim 的个性，这也就是 Vue 不反对 IE8 以及更低版本浏览器的起因。 这些 getter/setter 对用户来说是不可见的，然而在外部它们让 Vue 可能追踪依赖，在 property 被拜访和批改时告诉变更。这里须要留神的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，所以倡议装置 vue-devtools 来获取对检查数据更加敌对的用户界面。 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会告诉 watcher，从而使它关联的组件从新渲染。 ...

要解决的问题次要针对组件之间的跨级通信 为什么要本人实现dispatch与broadcast？因为在做独立组件开发或库时，最好是不依赖第三方库 为什么不应用provide与inject?因为它的应用场景，次要是子组件获取下级组件的状态，跨级组件间建设了一种被动提供与依赖注入的关系。而后有两种场景它不能很好的解决：父组件向子组件（反对跨级）传递数据；子组件向父组件（反对跨级）传递数据。 代码如下：emitter.jsfunction broadcast(componentName, eventName, params) { this.$children.forEach(child => { const name = child.$options.name; if (name === componentName) { child.$emit.apply(child, [eventName].concat(params)); } else { // todo 如果 params 是空数组，接管到的会是 undefined broadcast.apply(child, [componentName, eventName].concat([params])); } });}export default { methods: { dispatch(componentName, eventName, params) { let parent = this.$parent || this.$root; let name = parent.$options.name; while (parent && (!name || name !== componentName)) { parent = parent.$parent; if (parent) { name = parent.$options.name; } } if (parent) { parent.$emit.apply(parent, [eventName].concat(params)); } }, broadcast(componentName, eventName, params) { broadcast.call(this, componentName, eventName, params); } }};parent.vue<template> <div> <h1>我是父组件</h1> <button @click="handleClick">触发事件</button> <child /> </div></template><script>import Emitter from "@/mixins/emitter.js";import Child from "./child";export default { name: "componentA", mixins: [Emitter], created() { this.$on("child-to-p", this.handleChild); }, methods: { handleClick() { this.broadcast("componentB", "on-message", "Hello Vue.js"); }, handleChild(val) { alert(val); } }, components: { Child }};</script>child.vue<template> <div>我是子组件</div></template><script>import Emitter from "@/mixins/emitter.js";export default { name: "componentB", mixins: [Emitter], created() { this.$on("on-message", this.showMessage); this.dispatch("componentA", "child-to-p", "hello parent"); }, methods: { showMessage(text) { window.alert(text); } }};</script>这样就能实现跨级组件自定义通信了，然而，要留神其中一个问题：订阅必须先于公布，也就是说先有on再有emit ...

后面记录了下next 如何做服务端渲染,最近看了看vue官网得ssr阐明,而后不基于next,本人来做一个vue得ssr服务端渲染.官网文档：https://ssr.vuejs.org/ 官网文档的解释：Vue.js 是构建客户端应用程序的框架。默认状况下，能够在浏览器中输入 Vue组件，进行生成 DOM 和操作 DOM。然而，也能够将同一个组件渲染为服务器端的 HTML 字符串，将它们间接发送到浏览器，最初将这些动态标记"激活"为客户端上齐全可交互的应用程序。 服务器渲染的 Vue.js 应用程序也能够被认为是"同构"或"通用"，因为应用程序的大部分代码都能够在服务器和客户端上运行。 还是老样子,咱们在用ssr服务端渲染之前须要先问本人是否真的须要它. 技术层面： 更快的首屏渲染速度更好的 SEO业务层面： 不适宜管理系统适宜门户资讯类网站，例如企业官网、知乎、简书等适宜挪动网站vue的ssr 次要分为两种 Nuxt.js 开发框架 NUXT提供了平滑的开箱即用的体验，它建设在等同的Vue技术栈之上，但形象出很多模板，并提供了一些额定的性能，例如动态站点生成。通过 Nuxt.js 能够疾速的应用 Vue SSR 构建同构利用。基于 Vue SSR 官网文档提供的解决方案 官网计划具备更间接的控制应用程序的构造，更深刻底层，更加灵便，同时在应用官网计划的过程中，也会对Vue SSR有更加深刻的理解。该形式须要你相熟 Vue.js 自身，并且具备 Node.js 和 webpack 的相当不错的利用教训。next的文档写的很棒了,根本跟着它的文档做就能够了，这里次要是参考vue ssr的文档,来实现一下.首先来个最简略的，把一个vue的实例转换成模板字符串，而后从服务器返回到客户端. npm install vue vue-server-renderer --saveconst Vue = require('vue');const server = require('express')(); //创立服务//抉择模板const template = require('fs').readFileSync('./index.template.html', 'utf-8');//创立渲染器const renderer = require('vue-server-renderer').createRenderer({ template,});//模板应用的数据上下文const context = { title: 'vue ssr', metas: ` <meta name="keyword" content="vue,ssr"> <meta name="description" content="vue srr demo"> `,};//匹配所有地址，返回html界面server.get('*', (req, res) => { const app = new Vue({ //创立vue实例,每次申请都是一个新的实例,避免实例共享,数据错乱 data: { url: req.url }, template: `<div>拜访的 URL 是： {{ url }}</div>`, }); //把vue实例和上下文数据和模板联合返回字符串给客户端浏览器 renderer .renderToString(app, context, (err, html) => { console.log(html); if (err) { res.status(500).end('Internal Server Error') return; } res.end(html); });})//监听端口server.listen(8080);模板留神点：留神 <!--vue-ssr-outlet--> 正文 -- 这里将是应用程序 HTML 标记注入的中央。 ...

1.开发环境 vue+vant2.电脑系统 windows10专业版3.在应用vue+vant开发的过程中,咱们在应用Radio单选组件的时候,可能会存在一些问题,上面我来分享一下遇到的问题,心愿对你有所帮忙。4.在template中增加如下代码: <van-popup v-model="show2" position="bottom" :style="{ height: '48%' }"> <div class="selectCouponsTitle">Select Coupon</div> <van-radio-group v-model="radio2"> <van-cell-group v-for="(item,index) in CouponsArr" :key="index"> <van-cell :title="item.title +': '+ item.amount" clickable @click="chenridio(item)" > <template #right-icon> <van-radio :name="item.id" icon-size="18px" checked-color="#e60012" :label-disabled="true"/> </template> </van-cell> </van-cell-group> </van-radio-group> <div class="DetermineBtn" @click="closeCouponsList"> <van-button>Determine</van-button> </div> </van-popup>留神:这个 点击事件:@click="chenridio(item)" // 在这个组件中,这个点击事件只能有一个参数,传 item 是最好的,因为 item 能够拿到所有;当然也能够应用官网的写法,然而集体还是喜爱这样的写法,能够做一个参考,心愿能对你有所帮忙5.本期的分享到了这里就完结啦,是不是很nice,心愿对你有所帮忙,让咱们一起致力走向巅峰。

:getPopupContainer="(triggerNode) => triggerNode.parentNode"设置改属性即可

芯资管我的项目要求el-transfer减少拖拽排序，左右高低相互拖拽性能；原来的组件不反对拖拽，这里要用个第三方脱宅组件sortablejs 首先装置 sudo npm i sortablejs --save-devhtml代码 <template> <el-transfer ref="transfer" id="transfer" v-model="value" :data="data"> <span slot-scope="{ option }" :draggable="!option.disabled" @dragstart="drag($event,option)">{{ option.key }} - {{ option.label }}</span> </el-transfer></template>```create <script> import Sortable from 'sortablejs' export default { data() { const generateData = _ => { const data = []; for (let i = 1; i <= 15; i++) { data.push({ key: i, label: `备选项 ${i}`, disabled: i % 4 === 0 }); } return data; }; return { data: generateData(), value: [1, 4], draggingKey : null } }, mounted() { const transfer = this.$refs.transfer.$el const leftPanel = transfer.getElementsByClassName("el-transfer-panel")[0].getElementsByClassName("el-transfer-panel__body")[0]; const rightPanel = transfer.getElementsByClassName("el-transfer-panel")[1].getElementsByClassName("el-transfer-panel__body")[0]; const rightEl = rightPanel.getElementsByClassName("el-transfer-panel__list")[0] Sortable.create(rightEl,{ onEnd: (evt) => { const {oldIndex,newIndex} = evt; const temp = this.value[oldIndex] if (!temp || temp === 'undefined') { return }// 解决左边最初一项从左边拖右边，有undefined的问题 this.$set(this.value,oldIndex,this.value[newIndex]) this.$set(this.value,newIndex,temp) } }) const leftEl = leftPanel.getElementsByClassName("el-transfer-panel__list")[0] Sortable.create(leftEl,{ onEnd: (evt) => { const {oldIndex,newIndex} = evt; const temp = this.data[oldIndex] if (!temp || temp === 'undefined') { return } // 解决左边最初一项从左边拖右边，有undefined的问题 this.$set(this.data,oldIndex,this.data[newIndex]) this.$set(this.data,newIndex,temp) } }) leftPanel.ondragover = (ev) => { ev.preventDefault() } leftPanel.ondrop = (ev) => { ev.preventDefault(); const index = this.value.indexOf(this.draggingKey) if(index !== -1){ this.value.splice(index,1) } } rightPanel.ondragover = (ev) => { ev.preventDefault() } rightPanel.ondrop = (ev) => { ev.preventDefault(); if(this.value.indexOf(this.draggingKey) === -1){ this.value.push(this.draggingKey) } } }, methods: { drag(ev,option) { this.draggingKey = option.key } } } </script>

1.element的工夫抉择提交的格局转化例如 Fri Sep 07 2018 00:00:00 GMT+0800 (中国规范工夫)转化为 2020-01-11的格局这记录datepicker中增加一句value-format=”yyyy-MM-dd” <el-date-picker type="date" v-model="createdate" @change="formatTime" value-format="yyyy-MM-dd" placeholder="抉择工夫"></el-date-picker>2.动静循环复选框时，无奈选中问题this.menulist[index].sonList.map((item)=>{ this.$set(item, 'checked', false); ---用vue的set属性赋值})3.el-form动静表单验证（v-if、v-show导致校验生效的bug）当应用v-if或v-show来管制el-form-item的显示与暗藏时，会呈现校验生效的bug。 应用v-if：element在对form表单中带有prop属性的子组件进行校验规定绑定时，是在vue申明周期mounted实现的。而v-if用来切换的元素是会被销毁的，导致了v-if内的表单项，因为在mounted期间没有进行渲染，所以规定也没有绑定上。初始化时不合乎显示条件的不会生成规定，导致前面切换条件，显示的输入框的校验不会失效应用v-show：初始化时会生成所有的规定，即便暗藏了也会进行规定校验解决办法（1）、应用v-if进行校验 每个v-if前面配置一个不同的key值，这样就能够了 （2）、自定义校验规定，喜爱入手的能够本人自定义校验 四、nuxt如何增加Devtools工具必须将以下内容增加到nuxt.config.js： vue: { config: { productionTip: false, devtools: true }}

1.编写表单 <el-table-column type="selection" :reserve-selection="true" v-if="updateShow" fixed="left" :width="100"></el-table-column> <el-table-column reset="桩复位" label="桩复位" fixed="right" :width="100" v-if="resetShow"> <template slot-scope="scope"> <el-button class="reset" @click="inreset(scope.row)">复位</el-button> </template> </el-table-column>2.el-table 上增加事件<el-table ref="multipleTable" :row-key="(row)=>{ return row.id}" tooltip-effect="dark" @selection-change="handleSelectionChange" border style="width: 100%"> <myTable :tableKey="tableKey" :width="width" :update-show="true"></myTable>//这是内容</el-table>3.如果想分明汇合应用this.$refs.multipleTable.clearSelection();