- 博客(97)
- 收藏
- 关注
RSS订阅原创 解决this.$router跳转路由，mounted不再调用
解决this.$router.push()跳转路由，跳转后mounted不再调用的问题
2023-01-03 10:00:10
2247
原创 混入 (mixin)
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。...
2022-07-04 15:19:21
132
转载 小程序innerAudioContext的使用
实现播放音频很简单,直接上代码啦:this.innerAudioContext = wx.createInnerAudioContext();var voicePath = this.data.voiceTempFilePath;this.innerAudioContext.src = voicePath; this.innerAudioContext.play();this.innerAudioContext.onEnded((res) => { console.log('播
2022-04-12 13:45:00
2002
原创 v-bind绑定class、style、属性和对象
绑定属性使用v-bind：缩写：:预期：any (with argument) | Object (without argument)参数：attrOrProp (optional)修饰符：.camel - 将 kebab-case attribute 名转换为 camelCase。用法：动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。2.2.1. 绑定基本属性前面我们讲的Mustache等语法主要是将内容插入到 innerHTML 中。很多时候，元素的属性也
2022-03-06 23:03:30
918
原创 VSCode增加代码片段
我们在前面练习Vue的过程中，有些代码片段是需要经常写的，我们在VSCode中我们可以生成一个代码片段，方便我们快速生成。VSCode中的代码片段有固定的格式，所以我们一般会借助于一个在线工具来完成。具体的步骤如下：第一步，复制自己需要生成代码片段的代码；第二步，https://snippet-generator.app/在该网站中生成代码片段；第三步，在VSCode中生成代码片段；...
2022-03-06 16:22:28
365
转载 Vue学习笔记——插值表达式、v-text和v-html
前言：插值表达式的格式：{{表达式}}该表达式支持js内置语法，可以调用js的内置函数（必须有返回值）。表达式必须要有返回结果，比如：1+1。像var a = 1+1这样的就不行。可以直接使用Vue实例中定义的数据模型或者函数。1.使用js内置函数示例：<html> <div id = "app"> {{999+999}} </div></html>2.使用数据模型的值示例：定义Vue实例的数据模型：const app
2022-02-25 09:32:20
623
原创 获取url参数，修改url某个参数的值
1. 根据url中type值的不同，切换简版和完整版隐私政策2. 点击从简版切换到完整版，同时url发生变化
2022-02-25 09:19:05
669
原创 vue中定时器一般用法，定时器函数传参以及清除定时器
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
2022-02-16 10:06:41
5426
转载 Echarts入门教程
引语：echarts.js是百度团队推出的一款用于图表可视化的插件，用于以图表的形式展现数据，功能强大，上手简单1、从 官方网站 中下载所需的echarts.js文件，该文件因功能广泛，包体较大，可自行决定按需打包下载。2、从前端页面引入echarts.js，后即可使用<script src="js/echarts.min.js"></script>3、请看如下使用案例：大致就是引入js选一个图表容器（DIV）初始化echarts对象并绑定到该容器上给绑定的ech
2022-02-10 09:18:30
422
原创 uni-app如何使用scss和字体图标
uni-app如何使用scss和字体图标一、uni-app使用字体图标在阿里巴巴矢量图标库中选择字体，加入购物车后，添加至项目，进入我的项目，选择下载至本地。解压后，将下列四个文件添加至uni-app的static文件夹下。在根组件中引入iconfont.css修改iconfont.css文件中其他三个文件的路径。将字体引入相应文件使用。效果：二、uni-app如何使用scssa. 选择工具->插件安装。b. 前往插件市场。c. 搜索并使用HBuilderX引入
2021-12-14 17:51:36
464
原创 启动模式配置
启动模式配置https://uniapp.dcloud.io/collocation/pages?id=condition.仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。
2021-12-13 17:21:07
241
原创 try{}catch{}语句+选择进度条时间
try{}catch{}语句+选择进度条时间chooseVideoTime: function (event) { try { var currentClientX = event.clientX var distance = currentClientX - this.progressBarOffsetLeft // 在进度条上选中的距离 if (distance < 0) return this.pl
2021-11-26 16:18:33
254
转载 节流处理（throttle）
关于节流的实现，有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。一、使用时间戳让我们来看第一种方法：使用时间戳。当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为 0 )，如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。// fn 是需要执行的函数// wait 是时间间隔const throttle = (fn, wait = 50) => { // 上一次执行 fn 的时间 let previous =
2021-11-26 13:14:59
480
转载 什么是token
对于初学者来说，对Token和Session的使用难免会限于困境，开发过程中知道有这个东西，但却不知道为什么要用他？更不知道其原理，今天我就带大家一起分析分析这东西。一、我们先解释一下他的含义：1、Token的引入：Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token便应运而生。2、Token的定义：Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个T
2021-11-18 13:35:43
197
转载 vue过滤器filters的使用
当你在v-for循环渲染一个数组对象的时候，是否遇到过这样的问题：对象里面的字段并不是直接渲染在页面中，而是需要把数据处理过后的内容显示在页面上。方法一：在接口获取到数据的时候，利用数组方法map先处理数据，再直接渲染方法二：利用vue提供的filters钩子，实现数据的过滤处理再渲染处理过后的内容。下面说下方法二怎么实现：1、html代码中，{{}}中实现filters顺序是{{参数 | filters函数 | filters函数 | ...}},| 后面可以多个filters函数，前面fil
2021-11-09 17:11:09
1037
转载 什么时候用promise.all 什么时候用async和await
什么时候用promise.all什么时候用async和await？考验的还是我们对上面俩者的理解程度promise 是用来解决回调地狱的好方法：将异步的执行代码体封装到一个函数体内部，返回一个成功的方法 通过.then()来达到同步的效果。常见的promsie用法是：return new Promise((resolve,reject)=>{ setTimeout(()=>{resolve('a')},3000) //异步代码}).then(res=>{console.
2021-11-02 17:08:07
2360
原创 vue——样式穿透
三大样式穿透在使用很多vue常用的组件库（element, vant, vuetify）时，虽然官方会配好样式但是还是需要更改其他的样式三大样式穿透 >>> , ::v-deep , /deep/在style经常用scoped属性实现组件的私有化,所以才需要样式穿透需要注意： >>> 只作用于css::v-deep 只作用于sass/deep/ 只作用于less，但在vue 3.0会报错，可采用::v-deep示例：1<style
2021-11-01 16:41:42
423
原创 搜索功能实现
搜索功能实现Search.vue要接受City.vue传递的数据 ,所以City.vue中：<city-search :cities="cities"></city-search>Search.vue,添加搜索结果模块,并添加搜索逻辑：//搜索结果模块,keyword有值才显示<div class="search-content” v-show="keyword"> <ul> //循环搜索结果 <li
2021-10-26 14:03:04
440
转载 计算属性缓存vs方法 计算属性 vs 侦听属性
计算属性缓存 vs 方法你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：<p>Reversed message: "{{ reversedMessage() }}"</p>// 在组件中methods: { reversedMessage: function () { return this.message.split('').reverse().join('') }}我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果
2021-10-20 10:23:23
169
原创 函数节流阻止过于频繁的重复操作
函数节流通过定时器，和清除定时器的原理，禁止设定时间内，同样的一个事件操作data () { return { timer: null }},methods: { funcxxx () { if (timer) { clearTimeout(timer) } timer = setTImeout( () => {xxx},time) }}...
2021-09-07 11:05:42
98
原创 vue兄弟组件数据传递
Alphabel.vue字母模块滚动的监听#添加3个touch事件绑定,因为把cities的值push到letters里了,所以原来循环的cities就变为letters, key值变为item值<ul class="list"> <li class="item" v-for="item of letters" :key="item" :ref="item" @click="handleLetterClick"
2021-09-07 10:58:14
132
原创 兄弟组件间联动(以字母模块绑定城市列表模块为例)
兄弟组件间联动(以字母模块绑定城市列表模块为例)City.vue中有Alphabel.vue和List.vue两个子组件1、Alphabel.vue——绑定点击事件获取内容(点击的字母)传给City.vue//添加click点击事件<li class="item" v-for="(item,key) of cities" :key="key" @click="handleLetterClick"> {{key}}</li>//mehtods里添加hand
2021-09-06 21:41:41
204
原创 解决页面无法滚动——BetterScroll的使用
BetterScroll的使用1、终端安装better-scrollnpm install better-scroll —save//或指定版本安装npm install better-scroll@1.15.2 --save2、代码需要符合如下Html结构<div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> .
2021-09-04 15:14:06
319
原创 路由配置,首页与城市选择页面的链接
路由配置,首页与城市选择页面的链接1) src\router\index.js文件中//添加引入组件import Vue from 'vue'import Router from 'vue-router'import Home from '@/pages/home/Home'import City from '@/pages/city/City'routes: [{ path: '/', name: 'Home', component: Home
2021-09-04 14:27:18
122
原创 首页父子组组件间传值
首页父子组组件间传值1)父组件通过属性传值Home.vue//建立data存储页面各种数据data () { return{ city:’’, //城市 swiperList:[], //轮播图 iconList:[],//热点Icon recommendList:[],//热销推荐 weekendList:[],//周末去哪儿 }},//修改m
2021-08-28 22:54:00
159
原创 ajax获取首页数据(axios)
ajax获取首页数据(axios)在vue中发送ajax，可以使用①浏览器自带的fetch函数 ②vue推荐的vue-resource第三方模块。现在vue官方推荐使用axios第三方模块，它可以实现跨平台的数据请求，是基于promise的用于浏览器和node.js的HTTP客户端。可以简单理解为封装好的，基于promise的发送请求的方法。1)安装axios终端打开输入:npm install axios --save2)在每个组件里都发送ajax请求去请求数据太不合理，我们可以在Home.
2021-08-28 22:50:33
763
原创 文字溢出规定区域解决方法
如果超出还规定区域则省略后续，并出现三个点//stylus设置.ellipsis overflow:hidden white-space:nowrap text-overflow:ellipsis如果无效,在父层加 min-width=0 才能显示溢出隐藏
2021-08-28 22:42:27
625
原创 vue轮播图圆点显示
轮播图圆点显示添加圆点配置data (){ return{ swiperOptions:{ pagination:'.swiper-pagination’ //填写配置项，显示轮播圆点 } } }组件里子组件自带样式修改（swiper的圆点） <style scoped> //样式穿透，wrapper下面所有子组件里出现swiper-pagination-b
2021-08-27 21:30:43
1465
原创 vue使用轮播特效的插件
使用轮播特效的插件（npm中的包）1、github上有保存，名为vue-awesome-swiperhttps://github.com/surmon-china/vue-awesome-swiper2、根据提示步骤按步进行 2.1 命令行npm中安装 npm install vue-awesome-swiper@2.6.7 --save 2.2 main.js中全局引入相关的组件和css，vue.use()使用这个插件 import VueAwesomeSwiper from
2021-08-27 21:27:27
518
原创 实现图片的宽高比自适应
实现图片的宽高比自适应1、【这种写法最标准】需要把height设为0、overflow设为hidden，然后通过padding-bottom来设置百分比就可以了。overflow hiddenwidth 100%height 0老师的处理方式是，给容器设置高度为0，然后设置padding-bttom撑开高度。因为padding-bottom设置百分比是相对盒子的宽度计算的。例如在宽度为768px的设备下，padding-bottom的值就是768px乘以31.25%。375px的宽度下，就是375
2021-08-27 21:21:44
884
原创 vue——在Vue中使用插槽：slot
在Vue中使用插槽：slot1、在子组件的template里可以直接使用slot标签<slot></slot>，它可以显示父组件向子组件插入的内容。2、slot标签里面可以写一些默认值，当父组件没有插入内容的时候它就会显示默认值，插入内容时就只显示插入的内容。3、当使用多个slot标签时，直接插入多个内容时，每个slot标签内都会包括所有插入的内容。可以通过slot属性给插入的不同内容设置指定的名字，然后给相应的slot标签设置相应的name属性值，就可以让该slot标签显示
2021-08-24 23:44:22
1694
原创 vue——非父子组件间的传值：Vuex、发布订阅模式（总线机制）
非父子组件间的传值：Vuex、发布订阅模式（总线机制）Bus/总线机制发布订阅模式/观察者模式：1、Vue.prototype.bus = new Vue();给Vue这个类上挂了一个bus属性，通过这个类创建的实例上都会有bus这个属性，它都指向同一个vue的实例。2、在子组件的template里绑定一个事件（如handle），在子组件的methods里定义这个事件（如handle），通过this.bus.$emit('事件名',参数)【this.bus指的是这个实例上挂载的bus，这个bus又是v
2021-08-24 11:19:37
328
原创 vue——给组件绑定原生事件：.native
给组件绑定原生事件：.native1、在组件标签上绑定的事件是自定义事件，在组件模板里绑定的事件才是原生的事件。（自定义事件可以通过在子组件中通过this.$emit去触发，但是这样太麻烦）<div id="root"> <!-- 监听自定义事件 --> <child @click="handleClick"></child> </div> <script> Vue.compone
2021-08-24 11:16:27
1329
原创 vue——组件参数校验与非Props特性
组件参数校验与非Props特性1、组件参数校验：父组件向子组件传递的数据，子组件有权对这些数据进行约束。要进行约束的话，props就要是一个对象而不是数组，对象的键就是接收的参数的名字，对象的值是接收的参数需要满足的条件。<div id="root"> <child :content="'hello world'"></child></div><script>Vue.component('child',{ //参数校验 //1、
2021-08-23 18:28:52
702
原创 vue——父子组件的数据传递
父子组件的数据传递1、 父=>子（通过属性的形式）：（1）在子组件的标签里设置属性【如 :count=“0” 】。给属性前面加上冒号，参数‘0’会变成数字格式（变为一个js表达式）；不加冒号的话参数‘0’会是字符串形式。（2）在子组件里通过props接收数据，如props:[‘count’]，子组件可以使用该数据，但不能修改改数据【这是因为Vue中的单向数据流，子组件只能使用父组件传过来的这个数据，而不能去直接修改这个数据】（3）解决单向数据流子组件不能直接修改传过来的数据的问题：在子组件里
2021-08-23 18:14:51
696
原创 vue——使用组件的细节点
使用组件的细节点1、使用is属性解决模版标签出现Bug的问题当要使用一个组件但是不能直接使用的时候（比如定义了一个组件row，它的内容是"<tr><td>this</td></tr>"，要在一个table标签里使用它，直接写row标签的话会导致tr和table在同一级），可以使用is属性使该标签的内容为组件的内容（如在table内<tr is="row"></tr>，就可以实现table内的每个tr都是自定义组件row的内容），符合
2021-08-23 18:08:37
120
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人