yihanzhi的博客

动态获取git版本号

插槽使用不仅仅存在于父子组件间，当涉及跨级使用时如何处理呢？这里我们以示例的方式进行说明。有一爷爷辈（Level1）组件嵌套了爸爸辈（Level2）组件，爸爸辈组件中又嵌入了儿子辈（Level3）组件，现需要在爷爷辈组件中设置孙子组件中插槽的内容，实现方式如下：儿子（level3）组件：<template> <div> <h1>谁的{{goods}}？</h1> <!-- 定义插槽用于接受其父级组件的插槽内容 --> <s

查看vue cli3项目的webpack配置信息npx vue-cli-service inspect --mode [production|development]导出vue cli3项目的webpack配置信息到文件npx vue-cli-service inspect --mode [production|development] >> fileName

1、lib库模式打包vue组件语法：vue-cli-service build --target lib --name libName [entry]示例：vue.config.js配置：module.exports = { configureWebpack: { output: { libraryExport: 'default' } }}打包vue组件：npm run lib执行打包命令后，可看到项目根目录下生成了含有vue组件文件的lib目

一、问题描述采用history模式的vue的单页面应用，刷新时404。问题分析：vue-router设置的路径不是真实存在的路径，故页面刷新后访问的资源在服务端找不到二、解决办法1、本地调试时，解决404的办法webpack配置文件修改：module.exports = { //... devServer: { historyApiFallback: true, // 自动将404响应跳转到首页入口文件 index.html }};在devServer里面有个hist

v-for中key属性的值应唯一，起到身份认证的作用，避免v-for“就地更新”的策略。官方说法是：当 Vue 正在更新使用 v-for渲染的元素列表时，（没有key属性）它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。<!-- 示例代码: 没有key属性的v-for

页面同时出现多个提示框不是很美观，那么如何限制同一时刻仅出现一个弹窗呢？解决方案：每次弹窗都会出现类名为el-message的元素，通过判断该元素是否存在来限制是否弹新窗。1）创建message.js文件，代码如下：// message.jsimport { Message } from 'element-ui'const showMessage = Symbol('showMessage')class gtMessage { success(options, single=true)

vue-router在新窗口打开页面的方法：let routeUrl = this.$router.resolve({ name: "detail", query: { id: item.id },});window.open(routeUrl.href, '_blank');

1）安装插件：‘babel-plugin-dynamic-import-node’npm install babel-plugin-dynamic-import-node -D2）修改配置文件：babel.config.jsmodule.exports = { env: { development: { plugins: ['dynamic-import-node'] } }}

一、应用场景：多个项目需要用到共同的组件，这时用多页面vue应用再适合不过了。但是这多个项目需要分别部署在不同服务器上，所以需要我们针对每个项目（即每个页面）进行单独打包。二、单独打包某个页面：这里我们以单独打包vue多页面应用中的其中一个页面（detail.html）为示例进行说明。1）创建新的打包模式：新建文件".env.detail"# set ENVNODE_ENV = 'production'# 需要打包的页面PAGE_NAME = 'detail'2）配置打包指令：修改pac

需求背景：在构建vue单页面项目时，会将所有依赖打包成一个文件，如果依赖文件过大，会影响页面渲染。为了好的用户体验我们需要对依赖文件进行拆分，那么如何拆分呢？解决方案：修改webpack的配置文件externals，从输出的依赖文件中排除某些依赖包，将被排除的依赖包单独引入到html页面中。示例：1）webpack配置文件修改externals: { 'vue': 'Vue', 'element-ui': 'ElementUI',}2）去除main.js中element-ui的引

报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location解决办法：在路由文件中加入如下代码，即可解决import VueRouter from "vue-router";//pushconst VueRouterPush = VueRouter.prototype.pushVueRouter.prototype.push = function push (to

1、安装自动补全css3前缀的插件：autoprefixernpm install -D autoprefixer2、修改package.json文件// package.json文件部分代码"browserslist": [ "> 1%", "last 2 versions", "ie > 8"]3、添加.postcssrc.js文件//.postcssrc.jsmodule.exports = { plugins: { autoprefixer:

如何用element-ui的el-menu组件动态实现多级菜单？1）创建menuTree.vue组件<!--menuTree.vue--><template> <div class="gtd-menu-tree"> <template v-for="(item, index) in data"> <el-submenu :key="index" v-if="item.children && item.chil

问题描述：vue单页面应用的路由为history模式时，刷新页面后时常会404。问题分析：页面刷新时会重新向服务器发起请求，因是单页面应用，故仅存在一个页面，非首页页面刷新时（路径并非首页路径），服务器接收到请求后，找不到对应的文件，故返回404。解决办法：#项目根路径root /opt/nginx/html; #路径配置location /{ try_files $uri $uri/ /index.html}...

vue结合webpack构建多页面应用时，若一个个页面配置显然过于繁琐。这里我们以示例介绍下多页面应用如何实现动态配置。一：src目录下建pages文件夹，将所有页面放在pages目录下二、创建scanner.js文件，用于动态遍历pages子目录，以获取entry入口文件对象 和 html-webpack-plugin实例数组遍历pages目录下的所有孙辈js和html，以其父目录（即pages子目录）命名js和html。scanner.js文件：const path = require('p

1、$route：路由信息对象，只读；用于读取路由参数，如this.$route.params.appId2、$router：路由操作对象，只写用于进行路由跳转，如this.$router.push({ name: 'index', query: { appId: 1 }})...

首先需要安装node环境，具体安装步骤我们不在这里赘述，可以度娘查找。vue-cli构建vue项目的过程：1）全局安装vue-cli脚手架npm install -g vue-cli2）全局安装模块打包工具webpacknpm install -g webpack3）构建名为yihanzhi的vue项目vue init webpack yihanzhi注：执行改命令后会弹出...

vue销毁实例方法：this.$destroy()使用keep-alive不能销毁实例; 否则再进入页面，即使keep-alive为true也不会保存组件

常规情况下我们在vue实例的data中设置响应数据。但当数据为对象，我们增加或删除对象属性值时，视图并不触发更新，如何解决这个问题呢？实例代码如下：let vm = new Vue{ data: { obj: { k: 'v' } }} 有三种解决方案： 方案一：利用Vue.set(object,key,val)例

vuex是状态管理仓库，可实现组件间数据共享，但vuex适合大型项目应用，用于小项目过于繁琐。那么vue如何实现兄弟组件数据共享呢？ 可借助父子组件间值传递方法，实现原理是：子传父，父传子。 这里我们用例子来简单介绍下：子组件传值给父组件： 子组件通过触发父组件事件传值给父组件，子组件child1.vue代码：&lt;template&gt; &lt;div&gt; ...

转载自：https://segmentfault.com/a/1190000006178770 如有侵权，联系必删！ 本文能帮你做什么？ 1、了解vue的双向数据绑定原理以及核心代码模块 2、缓解好奇心的同时了解如何实现双向绑定 为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也难免存...

原理：vue主要是借助对象的访问器属性（Object.defineProperty）劫持数据，并结合订阅者-发布者模式来实现数据双向绑定。通过Object.defineProperty把data中的各数据属性改为访问器属性，来劫持每个属性的setter、getter；setter劫持到数据变化后，作为发布者 发布通知，订阅者们接到通知后更新数据。为了进一步说明vue原理，这里我们借助实...

原创文章，转载请标明出处：vue组件中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。上面解释了data不能为对象的原因，这里我们简单说下data为函数的原因。data为函数，通过return 返回对象的拷贝，致使每个实例都有自己独立的对象，实例之间可以互...

官方解释：Vue.nextTick( [callback, context] )参数：{Function} [callback] {Object} [context]用法： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。// 修改数据vm.msg = 'Hello'// DOM 还没有更新Vue.n...

vue支持所有兼容ECMAScript5的浏览器，因IE8不支持ECMAScript5特性，故IE8及其以下浏览器均不支持vue。vue一般多用在移动端开发；因PC端存在浏览器兼容问题，应用较少。在不考虑IE8兼容性的情况下（譬如，内部使用系统），可以使用vue。...

vue生命周期图示