随笔分类 -  Vue2&Vue3

Vue2&Vue3
vue css >>> /deep/ 穿透
摘要:vue引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>,穿透scoped。 有些Sass 之类的预处理器无法正确解析 >>>。可以使用 /deep/ 操作符( >>> 的别名) <style scoped> 外层 >>> 阅读全文

posted @ 2020-03-30 19:07 漫思 阅读(1480) 评论(0) 推荐(0) 编辑

vue中mixin的一点理解
摘要:vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两 阅读全文

posted @ 2020-03-25 14:25 漫思 阅读(338) 评论(0) 推荐(0) 编辑

在vue-cli + webpack 项目中使用sass
摘要:1、准备工作: 由于npm的服务器在国外,网速慢而且安装容易失败,建议在安装之前,先安装国内的镜像,比如淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 2、安装vue-cli 全局安装 vue-cli cnpm 阅读全文

posted @ 2020-03-25 09:53 漫思 阅读(1045) 评论(0) 推荐(0) 编辑

vue - for 遍历对象和遍历对象数组
摘要:1. 遍历对象时,参数: 第一个为值,第二个为键名,第三个为索引 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=devic 阅读全文

posted @ 2020-03-18 18:27 漫思 阅读(10353) 评论(0) 推荐(0) 编辑

五分钟搞懂Vuex
摘要:这段时间一直在用vue写项目,vuex在项目中也会依葫芦画瓢使用,但是总有一种朦朦胧胧的感觉。于是决定彻底搞懂它。 看了一下午的官方文档,以及资料,才发现vuex so easy! 作为一个圈子中的人,决定输出一下文档,如果你仔细看完这篇文章,保证你对vuex熟练掌握。 我把自己的代码上传到了git 阅读全文

posted @ 2020-03-16 11:35 漫思 阅读(345) 评论(0) 推荐(0) 编辑

vue 背景图片 backgroundImage background-image vue的style方式绑定行内样式-background-image的方式等~
摘要:<template> <div id="app"> <div class="y_bj" :style="y_bj"></div> </div> </template> <script> import { Toast } from "vant"; export default { data() { r 阅读全文

posted @ 2020-03-13 19:36 漫思 阅读(4404) 评论(1) 推荐(2) 编辑

VUE2.0 vue-cli构建项目中使用Less
摘要:vue-cli 构建的项目默认是不支持 less 的,需要自己添加。 首先,在项目目录下安装 less 和 less-loader。 npm install less less-loader --save-dev 安装成功后,打开 build/webpack.base.conf.js ,在 modu 阅读全文

posted @ 2020-03-11 14:14 漫思 阅读(1778) 评论(0) 推荐(0) 编辑

ES6如何引入图片
摘要:Vue-cli脚手架引入图片的几个方法 1、import方法 第一步:在.vue文件中import edit from 'path'(path是图片与.vue的相对路径) 第三步:在template中 给标签绑定属性 最后刷新界面看效果就可以了! 2、static方法 第一步:图片放在static文 阅读全文

posted @ 2020-03-11 10:31 漫思 阅读(4598) 评论(0) 推荐(0) 编辑

vue自定义指令要点
摘要:vue自定义指令的基础使用这里就不阐述,看官网文档:https://cn.vuejs.org/v2/guide/custom-directive.html 本文用一个实例描述自定义指令的要点,自定义一个数据上报的指令。 你可能会这样写demo: // 自定义v-datacenter命令埋点,点击节点 阅读全文

posted @ 2020-03-09 19:14 漫思 阅读(337) 评论(0) 推荐(0) 编辑

vue cli中token验证
摘要:1.设置前端路由跳转 router.beforeEach((to, from, next) => { if (to.matched.some(route => route.meta.auth)) { // 判断token是否存在,如果存在则正常跳转 if (localStorage.getItem( 阅读全文

posted @ 2020-03-09 16:59 漫思 阅读(817) 评论(1) 推荐(0) 编辑

Vue项目中实现用户登录及token验证
摘要:在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token 3、前端拿到token,将token存储到localStorage和vuex中,并跳转路由页 阅读全文

posted @ 2020-03-09 16:57 漫思 阅读(1074) 评论(0) 推荐(0) 编辑

Vue开源前端UI框架有哪些
摘要:1、Vue Element 2、Vuetify 阅读全文

posted @ 2020-02-27 22:24 漫思 阅读(1778) 评论(0) 推荐(0) 编辑

vscode 方法代码块的注释生成方法
摘要:1、安装插件 Document This 2、将光标放置于function上面,快捷键是 Ctrl+Alt+D 加 Ctrl+Alt+D 注:vue里的method方法中的function用这个不行,单独的一个文件中可以,类似下面的代码 /** * * 获取指定的参数值 * @param {*} n 阅读全文

posted @ 2020-02-21 23:17 漫思 阅读(9283) 评论(0) 推荐(0) 编辑

Vue CLI3 开启gzip压缩
摘要:欢迎捐赠 gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积。 webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件: npm 阅读全文

posted @ 2020-02-18 16:59 漫思 阅读(1894) 评论(0) 推荐(0) 编辑

vue之mixin理解与使用
摘要:常见场景 有两个非常相似的组件,他们的基本功能是一样的,但他们之间又存在着足够的差异性,此时的你就像是来到了一个分岔路口:我是把它拆分成两个不同的组件呢?还是保留为一个组件,然后通过props传值来创造差异性从而进行区分呢? 两种解决方案都不够完美:如果拆分成两个组件,你就不得不冒着一旦功能变动就要 阅读全文

posted @ 2020-02-18 16:13 漫思 阅读(902) 评论(0) 推荐(0) 编辑

vue上如何用非表单元素绑定model的双向绑定
摘要:vue上如何用非表单元素绑定model的双向绑定 阅读全文

posted @ 2020-02-17 23:50 漫思 阅读(532) 评论(0) 推荐(0) 编辑

promise all的怎么处理异常
摘要:在每个promise里面都使用resolve,但是通过数据的不同进行编码不同的返回结果。 在大量的promise里面进行返回时,就会有正确的和错误的,那么我们就会对结果进行二次的筛选。 阅读全文

posted @ 2020-02-17 23:44 漫思 阅读(656) 评论(0) 推荐(0) 编辑

vue定义data的三种方式与区别
摘要:在vue中,定义data可以有三种写法。 1.第一种写法,对象。 var app = new Vue({ el: '#yanggb', data: { yanggb: 'yanggb' } }) 2.第二种写法,函数。 var app = new Vue({ el: '#yanggb', data: 阅读全文

posted @ 2020-02-17 23:42 漫思 阅读(3138) 评论(0) 推荐(0) 编辑

element-ui table 点击分页table滚到顶部
摘要:设置element-ui table 点击分页table滚到顶部 设置table的 ref='multipleTable' //切换分页的方法加上下面这句,table就能自动滚到顶部 this.$refs.multipleTable.bodyWrapper.scrollTop = 0; 阅读全文

posted @ 2020-02-14 16:48 漫思 阅读(1726) 评论(0) 推荐(0) 编辑

解决 vue-cli构建项目自动打开浏览器问题
摘要:1、打开项目下的config/index.js 2、找到module.exports的 dev下的 autoOpenBrowser ,将 false 改成 true 3、控制台输入:npm run dev。 结果我打开了IE11,如果我想打开谷歌呢。就要设置默认的浏览器,将谷歌浏览器设置为默认浏览器 阅读全文

posted @ 2020-02-12 23:06 漫思 阅读(2047) 评论(0) 推荐(0) 编辑

导航