随笔分类 - vue
摘要：本篇文章主要介绍 v-model 在 Vue2 和 Vue3 中使用变化。 一、Vue2 中 v-model 的使用 v-model 是语法糖，本质还是父子组件间的通信。父子组件通信时有两种方式： 父给子传值：通过 props 子给父传值：通过 Events up，使用 $emit 触发事件。 1.
阅读全文
摘要：在做项目时，遇到需求不仅要适配于 pc 端，同时需要适配于 ipad ，由于项目中，一直引用的 element ui，但是其中包含的组件 el-select 中，发现在 ui 设计的设计图中不仅样式不太符合（调整样式不叫耗时），同时在苹果的 iPad 中测试，发现点击下拉选项 option 的时候，
阅读全文
摘要：最近做项目中，用到了input框中的模糊查询，由于项目中用到了element-ui，于是就去查看了当中的selecct组件，其中通过添加 filterable remote reserve-keyword remote-method 等相关属性即可实现模糊查询效果，自己也根据效果写了基于 el-in
阅读全文
摘要：vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据状态持久化，但是太麻烦每次都要操作，所以此时就可以利用vuex-persistedstate插件 安装 npm install vuex-persistedstate --save
阅读全文
摘要：最近项目中的需求，需要根据中国地图的中的某个省份，通过后端返回来的市区，将对应的市区高亮显示，自己提前写了个demo，如下 其中包含了一个中国地图和上海地图： <template> <div> <div class="map-box" ref="mapContainChina" /> <div cl
阅读全文
摘要：1.目录结构 ├── README.md # 说明 |-- dist # 打包后文件夹 ├── babel.config.js # babel语法编译 ├── package-lock.json ├── public # 静态文件夹,这类资源将会直接被拷贝，而不会经过 webpack 的处理。 │
阅读全文
摘要：这篇文章主要介绍了vue中activated的用法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下 1、keep-alive <keep-alive>包裹动态组件的时候，会缓存不活动的组件实例，而不是摧毁他们。其是一个抽象的组件，自身不会渲染一个DOM元素，也不会出现在父组件链中。说白了
阅读全文
摘要：技术栈（vue2.x） vue-cli：使用脚手架工具创建项目。 postcss-pxtorem：转换px为rem的插件。 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小。 1、创建rem.js文件 很多人
阅读全文
摘要：最近在用vue做项目的时候，页面中需要展示后端返回的PDF文件，于是便用到了vue-pdf，其使用方法为 ： 官网地址：https://www.npmjs.com/package/vue-pdf 不多说了，直接上代码： 代码中引用了element-UI中的分页，可以将PDF文件分页展示在页面中，但是
阅读全文
摘要：Vue-Editor底层采取的是quill.js，而quill.js采用的是html5的新属性classList，所以版本低于ie10会报错“无法获取未定义或 null 引用的属性‘confirm’”,而作者写该组件时似乎把ie10也舍弃了,直接支持ie11+，因此需要兼容ie9,ie10的建议更换
阅读全文
摘要：vue基于类的写法，和基于对象的写法并不一致。使用vue-cli3创建的项目，src目录下的文件结构并没有多大区别，store、router、app、view、components、aeests该有的还是有的。但是，多了一个东西：vue-property-decorator，vue-property
阅读全文
摘要：vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而
阅读全文
摘要：为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。 1.安装 2.在当前webpack.base.conf.js目录新建一个postcss.config.js文件 这就是对postCSS一个简单的配置，引入了au
阅读全文
摘要：vue提倡的是在方法中只有对数据的处理，所以提供了事件修饰符用于DOM的事件处理，常用的事件修饰符有以下几个： （１）. stop：阻止冒泡（通俗讲就是阻止事件向上级DOM元素传递） 点击内层div的结果： 点击外层div的结果： 修改代码，为内层点击事件添加事件".stop"修饰符： 再次点击内层
阅读全文
摘要：首先vue环境搭建成功 第一步： 安装 less 和less-loader 第二步： 修改webpack.base.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加 第三步： 在vue文件中的style标签中添加lang="less"即可在标签中使用les
阅读全文
摘要：使用前我们先了解下3.0较2.0有哪些区别 一、3.0 新加入了 TypeScript 以及 PWA 的支持二、部分命令发生了变化： 1、下载安装 npm install -g vue@cli 2、删除了vue list 3、创建项目 vue create 4、启动项目 npm run serve三
阅读全文
摘要：一、首先，active-class是什么， active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换； 相关可查阅文档：https://router.vuejs.org/zh-cn/api/router-link.html 二、在vue-route
阅读全文
摘要：插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。 Slot 是在组件模板中设置的用于在父组件中插入其孙子组件（即自身的子组件）或DOM片段的插槽。 匿名solt 子组件中 父组件中 最后结果 当
阅读全文
摘要：在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。 定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。 总体来讲vue里面提供了三大类钩子，两种函数 1、全局钩子 2、某个路由的钩子 3、组件内钩子 顾名思义，它是对全局有效的一个函数 顾
阅读全文
摘要：昨天看了一篇vue的教程，作者用async/ await来发送异步请求，从服务端获取数据，代码很简洁，同时async/await 已经被标准化，是时候学习一下了。 先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该
阅读全文
