codezha的博客

问题描述：父组件向子组件传递了一个参数，参数有效值通过接口请求动态获取，子组件可能在获取到数据之前就执行created 、 mounted 生命周期，而且只执行一次，所以只能拿到默认值，我们期望的正常效果是子组件可以正常获取到父组件传递过来的参数解决方案：子组件中为传递的参数添加watch监听，来接收参数watch: { propDataKey: { handler:(newVal, oldVal) { this.xx = newVal }, //监听对象是数组

官网传送门安装依赖npm install --save @riophae/vue-treeselect引入组件<template></template><script> // 引入组件 import Treeselect from '@riophae/vue-treeselect' // 引入样式 import '@riophae/vue-treeselect/dist/vue-treeselect.css' export d

使用场景vue项目中，某些特殊情况下，我们需要不想关的组件之间通信，这种情况我们可以通过eventBus来解决问题，通过事件的监听和触发来实现通信和参数传递封装新建eventBus.js文件let events = {}export default { //事件监听 on(eventName,handler){ if (typeof handler === 'function') { if (!events[eventName]) { events[.

开发vue项目过程中vue-devtool可以帮助我们只管看到对应的数据，方便调试，安装方法有以下两种1、在Chrome商店，搜索vue-devtool，安装后启用（网络可能不通）2、GitHub下载插件，完成安装并启用下面我们来介绍下方法二的详细操作步骤下载插件下载链接下载后解压安装依赖vue-devtools-master文件夹下先后执行以下命令npm installnpm run build命令执行完成后，会在shell->chrome目录下生成相应文件浏览器安

Vue项目开发过程中，通常我们会把一些常用或者通用的功能抽取出来作为全局或者局部组件，代码复用率和项目扩展性相对会好一点，下面我们详细看下具体的定义和使用吧定义组件内容新建TestComponent.vue文件，并添加组件内容<template> <div> {{ name }} </div></template><style lang="stylus" scoped>//样式...</style>&lt

Vue项目中，大多数情况我们都可以通过模板来创建HTML， 有些场景需要使用JavaScript来动态创建HTML，这种情况我们可以使用render函数来实现，下面我们来看下详细使用方法。函数调用简写render: function (createElement) { return createElement(App)}按照ES6语法简写函数render (createElement) { return createElement(App)}再简写render (createEl

通常我们使用Vue来开发单页面应用（SPA）时，通常都会使用vue-router来实现页面路由跳转。单页面应用采用前端路由系统，通过改变URL，在不重新请求页面的情况下，更新页面视图。Vue-router提供了以下几种路由跳转方法方法作用router.push添加新路由router.replace替换当前路由router.go跳转到指定索引路由router.back返回上一个路由router.forward跳转下一个路由下面我们通过vue-ro

基本使用方法官方文档传送门使用Vue.use()方法注册插件的时候，可以传入函数或带有install方法的对象，install方法和函数的第一个参数总是VueVue.use()方法需要在new Vue()之前调用原理源码如下：/* @flow */import { toArray } from '../util/index'export function initUse (Vue: GlobalAPI) { Vue.use = function (plugin: Function |

添加环境变量和多环境地址src目录下新建const.js文件,并添加类似下面的配置const env = { development: { API_BASE_ORIGIN: '/base', API_TEST_ORIGIN: '/test' }, test: { API_BASE_ORIGIN: 'https://xx.xx.xx1', API_TEST_ORIGIN: 'https://xx.xx.xxx1' } production: {..

通常我们需要通过路由携带需要传递的参数，有以下三种写法：1、地址后面直接带查询参如果我们只需要传递一个简单的参数，可以采取这种写法，在路由配置中配置查询参，路由跳转时添加查询参配置如下：{ path: '/test/:id', name: 'test', component: Test}跳转如下：this.$router.push({ path: `/test/${id}`})接收参数：this.$route.params.id2、params传参this.$r

van-uploader文件上传组件，如果需要支持多选，按照官方文档指定multiple属性为true可支持多选例如以下代码，我们直接在组件中指定multiple<van-uploader multiple/>但是如果是通过Render函数来实现van-uploader渲染的，我们直接在props中指定multiple属性是不生效的,自己阅读源码我们会发现，需要在attrs中指定多选属性//无效写法h('van-uploader',{ props: { multiple

最近开发遇到这样一种情景，某个页面需要根据路由query查询参变化执行对应的操作，放在生命周期钩子函数里面都不太合适，因为生命周期钩子函数是针对组件的不是针对页面的，所以需要通过watch监听路由query查询参的变化，代码如下：watch: { '$route.query': { if (this.$route.query.xx) { //根据xx参数值的情况，执行对应的操作.... } }, deep: true}...

媒体查询App.vue中样式中添加以下代码/* 适配iphoneX iphoneXS */@media screen and (device-width:375px) and (device-height:812px){ .pay-bot-cont { margin-bottom:34px; }}/* 适配iphoneXR iphoneXSMax */@...

选中记忆<Table no-data-text="暂无任何数据" stripe :columns="column" :data="listData" ref="selection" @on-select="handleSelectRow" @on-select-cancel="handleCancelRow" @on-select-all="handleSelectAll" @on-s..

安装依赖//cd 项目文件夹路径下,执行下面的命令npm install lib-flexible postcss-loader postcss-pxtorem --save//或者npm install lib-flexible postcss-loader postcss-pxtorem -Slib-flexible会自动为页面根据屏幕添加标签，动态控制initial-scal...

前段时间接到了这样一个需求，注册页面中有多个输入框，要求第一个输入框输入汉字后，第二个输入框自动填充对应的拼音开头缩写。实现思路是这样的，第一步完成拼音转汉字缩写功能，第二步为第一个输入框添加失焦时间，失焦时计算当前对应拼音缩写，如第一个输入框对应内容为空，则清空第二个输入框，具体代码如下：完成拼音转汉字缩写功能新建util.js并添加以下代码export default { Con...

之前的博客中提到过使用input标签时，禁止自动填充用户名和密码的解决方法（传送门），但此方法不适用于iview中的input组件，添加额外隐藏input框可以解决问题，代码如下：<Form> <div> <FormItem label="用户名" prop="verCode"> <!--禁止用户名自动填充-...

为什么用？vue本身已经有很多内置指令，如v-model、v-html、v-if、v-else、v-for等，这些指令使用起来非常方便，但是有些时候内置指令不能完全要求，需要自定指令，通常用于局部修改DOM，例如：页面加载时，某个输入框获得焦点（autofocus工作的情况下）。// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当...

日常开发，我们可能会为了安全问题，保证第三方无法通过伪造返回报文欺骗前端，需要在返回报文中添加自定义参数，用于验证身份，后端添加自定义参数，前端校验自定义参数通过后才会执行相应的操作。系统为了安全会去掉自定义头，如果不做任何处理，前端无法通过javascript访问自定义头，所以需要在接口返回中添加这样的操作。response['Cookie'] ='13231231231' #自定义头添加...

开发过程中经常会遇到路由跳转需要携带参数的情况，在大多数单页面中，一般都是通过使用vue-router来实现路由的。通过在Vue实例内部访问$router来访问路由实例，调用this.$router.push导航到不同的URL。提示：如果提供了path,params会被忽略params传参router.push({ name: 'testpath', params: ...

什么是Vuex？Vuex是Vue.js应用的状态管理模式+库，它是应用程序中所有组件的集中存储，可以确保以可预测的方式修改state值。与Vue官方devTools扩展集成，可以提供时间旅行、state快照导入导出等高级功能。Vuex = State+ View +ActionsState:用于驱动程序的数据源View:State对应的视图映射Actions:用户操作视图后，修改S...