csl125的博客

Vue祖孙组件怎么传值先看基础祖孙组件，也就是 3 层嵌套的组件。关于 vue 中父子组件之间的数据传递是通过 props 和 $emit 实现，参考Vue 父子组件传值。那祖孙组件之间传值怎么实现，先了解下面的几个 vue 属性。$props当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象 property 的访问。$attrs$attrs 是一个 Object，它包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (

使用局部注册指令的方式 directives: { // 使用局部注册指令的方式 resize: { // 指令的名称 bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象 let width = "", height = ""; function isReize() { const style = document.defau.

转自：codexujuejin.cn/post/69014669944789401681.分解需求技术栈 考虑到后续招人和现有人员的技术栈，选择 Vue 作为框架。 公司主要业务是 GIS 和 BIM，通常开发一些中大型的系统，所以 vue-router 和 vuex 都是必不可少的。 放弃了 Element UI 选择了 Ant Design Vue（最近 Element 好像复活了，麻蛋）。 工具库选择 lodash。 建立脚手架 搭建..

vue-cli3打包生成环境移除console.log1.安装依赖npm install babel-plugin-transform-remove-console --save-dev2.babel.config.js文件【先配置不同的环境变量VUE_APP_ENV】 const plugins = ["@vue/babel-plugin-transform-vue-jsx"]// 生产环境移除consoleif(process.env.VUE_APP_ENV === 'prod

第一步创建一个websocket.jsimport variable from './variable.js'//ws长连接...var connect = function(userId) { uni.connectSocket({ url: variable.socketUrl + userId }); uni.onSocketOpen(function(res) { console.log('WebSocket连接已打开！'); }); uni.onSocketError.

在制作类似于picker 弹框多选时使用 scroll-view，在安卓上很流畅，但是在ios13上很卡顿，滚动到顶部或底部直接卡死，而且滚动区域的事件也很卡顿，经常无效不能触发，本文解决方案是 使用swiper替代scroll-view此弹框就是scroll-view 滑动卡顿代替方案：<template> <view> <uni-popup ref="multiplePop" type="bottom" style="width: 100%;..

webview 加载时候监听加载完毕//获取webview页面 var currentWebview = this.$mp.page.$getAppWebview().children()[4];//加载时候 loading plus.nativeUI.showWaiting()//监听加载完毕 关闭loading currentWebview.addEventListener('loaded', function() { plus.nativeUI.closeWaiti

1、获取客户端应用版本号plus.runtime.getProperty(plus.runtime.appid,(wgtinfo)=>{ console.log(JSON.stringify(wgtinfo));//客户端详情数据 console.log(wgtinfo.version);//应用版本号})2、跳转应用市场 前提 已在应用市场上架if (plus.os.name == "Android") { let appurl = "...

记录一下在uni-app中使用webview 页面出现刘海问题，查询资料解决iphoneX的“刘海”为相机和其他组件留出了空间，同时在底部也留有可操作区域。那么网站边尴尬了~被限制在了这样的“安全区域”内，两边会出现一道白条。解决的方案是：1、给body添加一个background；2、添加viewport-fit=cover meta标签，使页面占满整个屏幕。<meta name="viewport" content="width=device-width, initial-scale

<template> <div> {{text}} </div></template><script>export default { props: { }, data () { return { text: 0, timerId: 1, // 模拟计时器id，唯一性 timerObj: {} // 计时器存储器 } }, computed: {.

在项目搭建中可能某一模块频繁使用，这样为了方便组件的复用性，就可以单独建一个组件使用本文说演示示例是一个评分打星星组件一、首先在项目中建文件 名称为components uni-app组件目录 和vue项目一样在components新建组件 starComp.vue<template name="helloComp"> <view> <vie...

tabBar 的属性配置官方文档链接https://uniapp.dcloud.io/collocation/pages?id=tabbar在page.json中配置例如：{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "page...

<audio :src="MP3" loop ref="MusicPlay"></audio> musicPause () { this.$refs.MusicPlay.pause() }, musicPlay () { this.$refs.MusicPlay.play()...

许多现代JavaScript框架和库的核心概念是能够将数据和UI封装在模块化、可重用的组件中。这对于开发人员可以在开发整个应用程序时避免使用编写大量重复的代码。虽然这样做非常有用，但也涉及到组件之间的数据通讯。在Vue中同样有这样的概念存在。通过前面一段时间的学习，Vue组件数据通讯常常会有父子组件，兄弟组件之间的数据通讯。也就是说在Vue中组件通讯有一定的原则。父子组件通讯原则为了提高组...

目录1. 安装 vue-cli3.0 ，可以使用下列任一命令安装这个新的包：2.打开终端，创建一个项目3. 配置 自己选择4. 项目构建完成 启动项目4.1启动成功4.2运行报错 无报错 忽略5.安装axios6. 配置 vue.config.js6.1全局 CLI 配置 文档6.2配置跨域代理vue-cli 3.0 官网教程vue-...

事件主要是监听touchstart、touchend与touchmove事件，事件这样可以获取用户触屏结束后的位置，这样就可以计算出用户在屏幕上滑动的方向v-tap： tap点击事件 v-swipe： swipe滑动事件 v-swipeleft： swipeleft左滑事件 v-swiperight： swiperight右滑事件 v-swipedown： swipedown下...

1、首先npm install --save babel-polyfill2、然后在main.js中的最前面引入babel-polyfillimport 'babel-polyfill'3、在index.html 加入以下代码（非必须）&lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;...

html&lt;div v-clickoutside="handleClose"&gt;&lt;/div&gt;//当点击此div外的任何元素 将会触发 v-clickoutside="handleClose"的 handleClose构造点击函数const clickoutside = { // 初始化指令 bind (el, binding, vnode) { ...

做一下记录，在vue项目中配置公用的请求https,(1) 位置，在src中新建 src/utils/http.jsimport axios from 'axios' // 引用axiosimport { MessageBox, Message } from 'element-ui'import Qs from 'qs' //引入数据格式化import router from '@...

基于vue&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;vuejs-购物车&lt;/title&gt;&lt;style type="text/css"&gt;*{ pad

在做一个选择商品时，需要保存用户的查找记录，类似与淘宝的历史记录，我是用的localStorage，菜鸟一枚，各大神指点将用户每次浏览的数据push到数组中，每浏览一次push一次，然后将数组转成字符串JSON.stringify(arr)，然后存储到本地remb: function (Odata, title, key) { var that = this; ...

1、自定义的过滤器，当然这包括注册在全局和注册在实例化的内部（1）注册在全局的fliter(1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面(2) 过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算(3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突(4)用户从input输入的数据在回传到model...

写APP页面的时候遇见坑，布局使用rem，但是再页面渲染加载时出现变形，虽然时间非常短，但是肉眼可见，于是爬坑，1，在页面body加载前引入html font-size计算js(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientati...

新手向：Vue 2.0 的建议学习顺序  注：2.0 已经有中文文档 。如果对自己英文有信心，也可以直接阅读英文文档。此指南仅供参考，请根据自身实际情况灵活调整。欢迎转载，请注明出处。起步1. 扎实的 JavaScript / HTML / CSS 基本功。这是前置条件。2. 通读官方教程 (guide) 的基础篇。不要用任何构建工具，就只用最简单的 &lt;scrip...

前言我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了，通常我们的请求地址是以localhost:8080来请求接口数据的，localhost是没有办法设置cookie的。我们可以在vue-cli配置文件里面设置一个代理，跨域的方法有很多，通常需要后台来进行配置。我们可以直接通过node.js代理服务器来实现跨域请求。vue proxyTable接口跨域...

vue模板引擎语法，关注数据层面Mustache语法:{{msg}} 主要是用date控制 html赋值：v-html=”“ 绑定属性：v-bind:id=”“ 使用表达式：{OK?”yes”:”NO”} 文本赋值：v-text=”“ 指令：v-if=”“ 过滤器：{{message|capitalize}}和v-bind:id=”rawId|formatId”class和sty...

vue-cli项目中如何使用在项目中安装mockjs、axios（http请求库） cnpm install mockjs axios --save 在项目中新建一个mock.js文件，用于定义接口返回的数据 在main.js引入mock.jsmock.jsconst Mock = require('mockjs') // 获取mock对象const Random = M...

通过Vue的$emit发送自定义事件，在需要使用的组件中接收$emit$on（0）创建文件 eventBus.js import Vue from 'vue'const eventBus = new Vue()export { eventBus }(1) 组件一中，在事件中触发 eventBus.$emit('buy-number',this.inputNu...

先来看看vue官网对vue生命周期的介绍 Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。 实例、组件通过new Vue() 创建出来之后...

//路由跳转后，页面回到顶部router.afterEach(() =&gt; { document.body.scrollTop = 0; document.documentElement.scrollTop = 0;})在网上查了一下，网友说还可以试试在main.js入口文件配合vue-router写上面这个； 另一种方法：export default n...

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.

强烈推荐优秀的Vue UI组件库Vue是一个轻巧，高性能，可组件化的MVVM库，API简洁明了，上手快。从Vue推出以来，得到众多Web开发者的认可。在公司的Web前端项目开发中，多个项目采用基于Vue的UI组件框架开发，并投入正式使用。开发团队在使用Vue.js框架和UI组件库以后，开发效率大大提高，自己写的代码也少了，很多界面效果组件已经封装好了。在选择的Vue UI组件库的过程中，通...

在开发vue项目中遇到需要定位显示，需求是：需要根据后台返回的数据动态的将订单定位到产生的位置；然后根据现实的位置；高德地图提供的api 可以调用，用高德地图插件，解决方案非常传统：将高德地图通过cdn的形式引入到项目的index.html文件中，然后即可全局调用AMap。具体文档点击 高德地图开放平台 查看。现在在vue项目中使用，有几个问题不得不考虑：项目中其实只有几处需要用到地图...

vue组件的生命周期Vue所有的生命周期钩子自动绑定在this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文，因此this与你期待的Vue实例不同。1、beforeCreate　　在实例初始化之后，数据观测和event/watcher时间配置之前被调用。2、created　　实例已经创建...

安装echarts依赖npm install echarts --save点击查看  echarts官网安装教程 创建图表全局引入main.js// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts map.vue//html&lt;div id="myChart...

vue事件修饰.stop.prevent.capture.self.once&lt;!-- 阻止单击事件继续传播 --&gt;&lt;a v-on:click.stop="doThis"&gt;&lt;/a&gt;&lt;!-- 提交事件不再重载页面 --&gt;&lt;form v-on:submit.prevent="onSubmit"&gt;&lt;/form&am