mossbaoo的博客

【代码】Vue 在methods中使用当前页面过滤器Filter。

vue+elementUI 使用腾讯地图 qqmap。使用script标签加载API服务，v参数是引用的版本号，目前腾讯地图提供两个版本，分别是v=1，v=2.exp，推荐使用2.exp，可以获得最新最快的支持；key参数YOUR_KEY是Key鉴权中申请的key。·

当页面A引入了子组件后，子组件需要运行一些方法，但是mounted只能在初次渲染时执行，第二次进入页面就不执行了。方法：通过父组件的onShow调用子组件里的方法，实现更新子组件的值代码（父组件）：<drag-button :isDock="true" :customBar="true" ref="dragButton"></drag-button>onShow() { this.$refs.dragButton.init();},代码（子组件）：data() {

原因：在uniapp中，只有应用生命周期和页面生命周期，子组件是没有应用周期的。所以onLoad、onShow都不存在。方法：如果想在渲染子组件时运行一些方法，可以用vue自身的生命周期mounted

在使用ElementUI的 “indeterminate 状态” 的checkbox时，感觉有所限制，所以觉得自定义一个可全选或全不选的checkbox-group多选框组。全部代码：<template> <div class="app-container"> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="allChange">全选<.

在vue项目中使用到计算属性computed 时报错：[Vue warn]: Computed property "checkAll" was assigned to but it has no setter.原因是：计算属性computed ：checkAll 主动赋值了，但是它并没有定义 set 方法。解决办法：对该计算属性添加 get 和 set 方法data() { return { dataList: [], }},compu.

介绍1.$emit：触发当前实例上的事件。附加参数都会传给监听器回调。2.$on：监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。3.$off：移除自定义事件监听器。场景从详情页回到列表页时，把详情页的参数带回到列表页。也可以说是在列表页监听并接收详情页在该事件的回调。方法1. 先在项目中新建一个js文件（eventbus.js），内容为：import Vue from 'vue'e...

介绍最近用到 element 的表格的render-header 属性，官方似乎没具体说明怎么使用，然后自己找资料实现了满足需求的解决方案。需求1: 在表头放一个带点击事件的按钮需求2: 点击按钮时需要传输自定义参数（用来区分点击的是哪一列）本文章主要以render-header 进行扩展使用。主要代码html：<el-table-column label="城市" align="center" :render-header="(h, obj) =&g...

模态对话框弹窗效果：父组件（应用页面）主要代码：<template> <view class="app-container"> <modal-dialog showText="确定要取消收藏吗？" :isShowDialog="isDialog" @cancel="isDialog = false" @confirm="confirmDelete"></modal-dialog> </view>.

app.vue里的 onLaunch 中如果有异步方法（比如：登录），返回结果可能会在页面的 onLoad 之后，但 onLoad 中的方法需要登录回调的结果。为了让页面的 onLoad 在 onLaunch 之后执行，解决方案：1. main.js 添加代码Vue.prototype.$onLaunched = new Promise(resolve => { Vue.prototype.$isResolve = resolve;})2. 在 App.vue 的 onLau

按照官方的步骤：（如果你只为解决方法，请跳过前面步骤）安装echarts依赖npm install echarts --save在 main.js 引入import echarts from 'echarts'Vue.prototype.$echarts = echartsECharts.vue绘制图表<div id="myChart" style="width: 400px;height:400px;"></div><script>ex

在uni中，返回页面是不会触发onLoad方法的；如果我们只想在特定情况下返回上一页才需要刷新数据，那么用onShow的话，那刷新就太频繁了；这时候，可以用$emit和$on去解决。比如说，从详情页(detail.vue) 回到 列表页(list.vue)：详情页(detail.vue)：methods:{ back() { uni.$emit('refreshData'); uni.navigateBack({ delta: 1 }) }}列表页(list.vu

首先简述一下什么是数据双向绑定：数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。vue实现双向数据绑定的原理，其实就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值get和设置属性值set的操作来实现的。代码演示defineProperty的用法：// 第一个参数：定义属性的对象var obj =...

这个示例使用vue-cli 脚手架搭建安装echarts依赖npm install echarts --save创建图表可选择全局引入 或者 按需引入全局引入会将所有的echarts图表打包进去，会导致体积过大，个人建议使用按需引入。全局引入main.js// 引入echartsimport echarts from 'echarts'...

微信小程序：wx:if="{{index&lt;5}}"&lt;view wx:for="{{dataArray}}" wx:key="index" wx:for-item="item" wx:if="{{index&lt;5}}"&gt;&lt;/view&gt; mpvue、vue：v-if="index&lt;5"

注释：以下命令均用npm，如您使用的是yarn，可以点击以下链接进入查阅。Vue CLI 3  安装：npm install -g @vue/cli  创建项目：vue create my-project // my-project是项目名称  项目创建完成后，进入项目根目录：cd my-project  如果不需要Vant或其它UI组件库，可以直接运行...

import Vue from 'vue'import Router from 'vue-router'import Home from '@/components/Home'import user from '@/pages/user/user'Vue.use(Router)const router = new Router({ routes: [ { p...

首先，vue开发环境已经安装成功第一步：安装less依赖npm install less less-loader --save 第二步：修改webpack.config.js文件，配置loader加载依赖，让其支持外部的less，在原来的代码上添加{ test: /\.less$/, loader: "style-loader!css-loader!less-...

假设是从列表页带着参数id进入详情页，有两种传参方式：params 与 query1.params列表页 list.vue：toDetail(id) { this.$router.push({ name: 'detail', params: { id: id } })},详情页 detail.vue：created() ...

vue中报错 [Vue warn]: Error in render: "TypeError: Cannot read property 'avatar' of undefined"，如下图：这时候你就要检查下你的项目中template模板中是否有用到了没有定义的数据。举个例子：在我的template模板中有这么一段dom&lt;img :src="dataDetail...

在移动端网页项目中，基本都会有列表页的上拉加载功能。在这篇文章中，我结合vue的生命周期用纯js写了一个监听滚动条的函数。怎样用纯js判断滚动条是否到底部先了解几个重点要素：获取滚动条到顶部的位置：document.documentElement.scrollTop、document.body.scrollTop获取当前窗口内容可视区：document.documentElement.c...

前言：当页面的图片数量过多，或者用户当前网络不佳的情况下，我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。实现方法：使用vue的图片懒加载插件vue-lazyload

【vue子组件与父组件之间的传值】在子组件与父组件之间的通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了。

在做vue移动端项目的时候，我们都会想着在手机上真机测试一下自己做出来的效果，那么如何实现呢？1. 查看IP地址： WIN+R，输入cmd回车，打开命令提示符，输入ipconfig， 查看IP地址2. 在项目中找到 '/config/index.js' 文件中的host 字段，默认值是'localhost'，修改成自己的IP地址'192.168.x.x'3. 运行项...

有时候UI组件提供的默认的样式不能满足项目的需要，就需要我们对它的样式进行修改，但是发现加了scoped后修改的样式不起作用。解决方法：使用深度选择器，将scoped样式中的选择器“深入”，即影响子组件<style scoped> .a >>> .b { /* ... */ }</style>以上的代码会编译成：.a[data-v-f3f...

安装axios（前提是已经安装了vue）npm install axios --save使用axios1. 先在main.js中调用import axios from 'axios'axios.defaults.baseURL = "http://www.xxx.com";Vue.prototype.$http = axios;2. 在Vue实例中使用this....