随笔分类 - vue
1
摘要：先附上参考链接： https://juejin.cn/post/7068573328914513928 https://juejin.cn/post/6857135010882387981 https://www.cjavapy.com/article/2382/ 1、创建vue项目 vue cre
阅读全文
摘要：在开发项目得时候遇到这样一个需求，在移动端项目有个支付抽奖页面，大概效果图如下： 简单介绍一下需求，点击抽奖按钮转盘转动，转盘里边黄色块块是个整张背景图，里边的商品是从接口获取得，包括奖品名称和图片，商品和中奖概率后台可以动态修改，唯一确定得是永远有8个奖品。 1、布局样式 每个item对应一个奖项
阅读全文
摘要：1、组件注册，随时随地在页面中使用这些高频组件，无需手动一个个引入 // global.js文件 import Vue from 'vue' //转换单词首字母大写 function changeStr(str){ return str.charAt(0).toUpperCase() + str.s
阅读全文
摘要：在使用vue开发项目时，会遇到很多使用图标的场景。以使用阿里图标为例，假如你的项目中图标很固定，以后都不会变了，那么随便选择哪种方式的图标都可以。但是如果项目中图标会变，时不时的变个图标或者新增、减少一个图标，比较灵活的场景下使用svg会比较方便一些。 1、安装包 npm install svg-s
阅读全文
摘要：vue在初始化的时候，会传入一个data，data内部会默认把这个对象进行遍历，都是用Object.defineProperty这个方法重新定义这些属性。Object.defineProperty会对数据的获取和设置增加一个拦截的功能，做一些逻辑处理，这个逻辑就叫做依赖收集。 开始的时候会初始化用户
阅读全文
摘要：在使用vue开发项目的时候，总会遇到跨域问题，可以在打包的时候使用proxy反向代理解决跨域问题。 vue-cli2配置如下： 找到config文件夹下的index.js dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath:
阅读全文
摘要：1.全局导航守卫 //前置钩子 router.beforeEach((to,from,next)=>{ //do something }) //后置钩子(没有next参数) router.afterEach((to, from)=>{ // do something }) 2.路由独享守卫 cons
阅读全文
摘要：1、父组件如何主动获取子组件的数据 方案1：$children $children用来访问子组件实例，要知道一个组件的子组件可能是不唯一的，所以它的返回值是个数组 定义Header、HelloWorld两个组件 <template> <div class="index"> <Header></Hea
阅读全文
摘要：computed: 有缓存机制；不能接受参数；可以依赖其他computed，甚至是其他组件中的data；不能与data中的属性重复 watch: 可接受两个参数；监听时可触发一个回调，并做一些事情；监听的属性必须存在；允许异步 watch配置：handler、deep（是否深度）、immeditat
阅读全文
摘要：我们在使用vue开发项目的时候，或多或少会用到定时器，那么，在vue中使用定时器和我们在平时写js时候使用定时器一样吗，答案肯定是不一样的，定时器有个销毁操作，如何在vue中销毁一个定时器。 答案：在beforeDestroy生命周期销毁定时器。 1、为什么销毁它： 在页面a中写了一个定时器，比如每
阅读全文
摘要：1、table表头和表格线对不齐问题 解决办法： 在index.html或者入口文件App.vue中添加样式 body .el-table th.gutter{ display: table-cell!important; } 2、dialog对话框中使用form表单验证，再次打开验证依然存在问题
阅读全文
摘要：我们在使用element-ui时，必定会用到表格这个组件，虽然element组件已经为我们封装很好了。但是我们在实际开发中会根据我们的业务在element-ui的基础上再次封装，比如表格最后一列会经常有操作这一列，对应着不同的按钮，像编辑按钮、查看按钮、删除按钮等，有些表格的结构类似，显示数据和操作
阅读全文
摘要：在vue开发中总会遇到组件传值问题，今天总结一下兄弟组件之间的传值方法。 1、子传父，父传子 2、vuex 3、eventBus 接下来介绍如何使用eventBus实现兄弟组件传值 首先我的需求是这样的，页面上由top，left，main，bottom四个组件构成。需要将top中的值传到left中。
阅读全文
摘要：本文将介绍使用vue-cli3创建项目以及一些相关的配置。 手脚架vue-cli最新版本为vue-cli3,，如果电脑上安装了vue-cli2来创建vue项目的话，需要先将vue-cli2先卸载，重新安装vue-cli3。 安装vue-cli3 1、执行npm uninstall vue-cli -
阅读全文
摘要：一开始接触vue时并不知道插槽是什么，后来看了很多文章也是一知半解。然后自己手动敲了一下，在项目中实际应用一下，实在太好用了。后来做小程序后发现也能使用slot，不单单在vue中使用。我就是这么目光短浅（QAQ）。尤其在做组件开发的时候更不能少了slot的使用。 一、对插槽的理解 对于一开始听到别人
阅读全文
摘要：果然，浏览器是明智的，报错了 之后改了代码，如上述代码，两个调换一下，把上边的注释掉，下边的代码打开，然后在浏览器中查看，果然能拿到div里的值 在 Vue 的文档中，说明 Vue 是异步执行 DOM 更新的。 查看网上资料，对异步有这样的解释： （1）所有同步任务都在主线程上执行，形成一个执行栈（
阅读全文
摘要：之前写了vue的生命周期，本以为明白了vue实例在创建到显示在页面上以及销毁等一系列过程，以及各个生命周期的特点。然而今天被问到父子组件生命周期执行顺序的时候一头雾水，根本不知道怎么回事。然后写了一段demo验证一下大佬们说的顺序。 运行此代码，打开f12，进入sources里边 1.首先执行的是父
阅读全文
摘要：1.使用Vue.extend创建全局的Vue组件 把名称以标签的形式放到页面中<my-com1></my-com1> 注意，上边我们组件名称使用的是驼峰命名法，在写到页面中必须将大写的驼峰字母变成小写，标签中不允许使用大写，然后在中间用 "-" 连接，如果不使用驼峰，则直接拿名称引用即可。 2.直接
阅读全文
摘要：分析如上代码： 1、首先创建一个名字为counter的组件，data函数中返回一个外部定义的对象的值，如果直接给data属性设置一个对象而不是函数，那么会在浏览器中直接报错 2、在浏览器中运行代码 每次点击+1按钮，下边的值就会加一 3、如果我们在页面上同时使用三个counter组件 然后在浏览器中
阅读全文
摘要：我从官网上下载了一张vue生命周期的图，接下来实际分析一波vue到底执行了什么东西。 1、我们在使用vue时必不可少的操作就是 var vm = new Vue({}),这样我们就创建了一个vue的实例对象 2、表示，刚初始化了一个vue空的实例对象，这时候，这个对象身上，只有默认的一些生命周期函数
阅读全文
1
