文字比较难解释,直接看图应该就懂是要做什么了。需求 工作中遇到的,需求就是超过四行得有个展开按钮,点击展开显示所有内容,不超过四行的话就不需要这个按钮并显示所有内容。 思路首先得判断文本自否超过四行,因为这些一般都是是前端异步请求然后后端发送过来,在组长的指导下,使用了 Vue 中的 nextTick 来监听 DOM 中是数据变化。接下来主要是 css 上的思路,其实上图可以分为两部分,如下图,标号1的部分展示前面三行,标号...
组件的通信一般常见的组件之间的通信有以下几种情况,A和B,B和C,B和D之间都是父子关系,C和D之间是兄弟组件关系。常用的通信手段有两种:1.ref:给元素或组件注册引用信息2.children:访问父级组件和子组件的实例。这两种方式都是直接通过实例的方式获取的方式。示例如下://comA组件A export default {data () {return {title: 测试通信}},methods: {sayHello () {window.alert(你好);}} } 这里引用组件A<template><comA ref="co...
第一次使用mpvue框架来写小程序,项目开发直接搬用mpvue-shop(一个仿网易严选的小程序开发项目),项目结构清楚,实现了大部分功能,对于初次使用mpvue的小伙伴们来说,是一个很好的选择。 关于组件的选择: 1.echarts-for-weixin,官方echarts的小程序版本。使用参考:echarts-for-weixin介绍,如果你是原生开发小程序版本,这个组件非常适合你,开发过程中可使用echarts官方提供的所有配置和Api,但并不适合mpvue项目。 2、wx-chart...
最近项目中由于列表居多且都做了下拉刷新上拉加载,所以就使用了keep-alive组件来缓存页面数据,但是当在其他页面做一些操作改变了列表数据,当来到列表的时候每次都要下拉刷新一下,体验不好,所以就使用到了EventBus,在需要更新的时候就用EventBus来刷新列表。 1.keep-alive组件 keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素。但是...
步骤一:申请百度地图密钥; JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请 认证企业用户。百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二:在index.html中添加百度地图JavaScript API接口; <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script> // v1.4版本以及以前版本 <sc...
VUE 复制内容至剪切板(两种使用方法) 复制内容至剪切板使用的是插件'vue-clipboard2',通过官方文档会发现共有两种使用方式。 第一种方式与大多数文章类似,只粘贴代码: <template><div class="container"><input type="text" v-model="message"><button type="button"v-clipboard:copy="message"v-clipboard:success="onCopy"v-clipboard:error="onError">Copy!</button></div> </template> <script>export default {data() {retu...
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。要在页面之间使用路由,我们建议使用<nuxt-link> 标签。 正文 对我来说,Nuxt 是我所用过最好用的软件代码之一。它可以让我高效率地打造网站应用,无论这些应用是 SPA,还是 SSR,又或者是静态站点,这同时也是 JAM Stack 上面所提到的趋势。 顺便提一点,我们这个网站Vuedose 也是使用 Nuxt 所建立静态站点。 但是,绝大多数自己领悟的很有意思的使用技巧并没有被...
vue 开发过程中,保存一次就会编译一次,如果能够减少编译的时间,哪怕是一丁点,也能节省不少时间。开发过程中个人编写的源文件才会频繁变动,而一些库文件我们一般是不会去改动的。如果能把这些库文件提取出来,就能减少打包体积,加快编译速度。本文主要讲述在 vue-cli3 中利用 DllPlugin 来进行预编译。 1、安装相关插件 yarn add webpack-cli@^3.2.3 add-asset-html-webpack-plugin@^3.1.3 clean-webpack-plugin@^1.0.1 --dev...
Vue数据响应原理官方的解释很清晰:当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。 用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。这里需要注意的问题是浏...
文章举例说明一下在 vue 中如何更好的监听浏览器事件。原文介绍了一种新增 vue 实例的方法,单独监听事件。这样代码书写较为简练,容易管理。 当监听如下事件的传统做法是: window.scrollXwindow.scrollYwindow.innerHeightwindow.innerWidth通常需要书写很多代码: created () {this.$el.addEventListener(click, this.someMethod) }, destroyed () {this.$el.removeEventListener(click, () => this.someMethod) }更好的方式是使...
在生成vue项目的时候,出现如下错误ERROR in static/js/index.d66d806fcdd72b36147b.js from UglifyJs Unexpected token: punc (() [src/components/Hello.vue:26,0][static/js/index.d66d806fcdd72b36147b.js:34,6] ERROR in static/js/cell.89bb6f1195b769a2c949.js from UglifyJs Unexpected token: punc (() [src/components/cell.vue:10,0][static/js/cell.89bb6f1195b769a2c949.js:19,6] ERROR in [copy-webpack-plugin] una...
Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。Vue 的插槽也没有说很难使用,这篇文章简明扼要的介绍了三种插槽的用法。 匿名插槽 子组件定义 slot 插槽,但并未具名,因此也可以说是默认插槽。只要在父元素中插入的内容,默认加入到这个插槽中去。 <template><div>hello <slot>陌生人</slot></div> </template>这里定义了一个默认插槽,只要往里头丢东西,就会被加入到这个插槽里面 slot 元素里面可以加入一系列后备...
项目需求中需要对用户登录时的密码进行加密,在网上查询些许文章后,最终与后端协商使用jsencrypt.js。 jsencrypt.js的github地址: https://github.com/travist/js... 使用yarn安装至Vue项目 yarn add jsencrypt --dep 或者使用npm npm install jsencrypt --dep 引入jsencrypt import { JSEncrypt } from 'jsencrypt' 可封装为全局混合,便于调用 公钥为后端提供,如前端需要解密数据,则需要后端提供私钥。此处只封装了加密。 me...
学习了vue有一段日子了,vue+es6开发非常好用,vue的插件非常多,很充足,但是还是会用到引入第三方外部js的时候,但是很多人在vue-cli中的.vue文件引入es6会出很多错误,因为我们的代码是es6写的,你引入es5的js当然会出问题,那么而接下来我讲大家讲解一波,怎么引入第三方es5写的 js 方法1: import XX from “路径” Vue.use(XX);这里的js文件要导出用export default {Vue.proprtypes.aa=function(){}}方法2: js文件没有用exp...
介绍:前台使用vue开发的单页面,后台使用ant design pro单页面,实现手机端和后台聊天功能。效果如图(PC+移动):一、申请融云账号(token、appKey)建议先看教程:sdk使用介绍过一遍教程,接下来开始写二、引入融云IM如图:位置:public/index.html,引入<script src="https://cdn.ronghub.com/RongIMLib-2.3.5.min.js"></script> 三、可以正常使用RongIMLib其自带方法了app.vue 不是全代码(因为只是连接)created () { //生命周期...