vue
文章平均质量分 61
虞南北
种一棵树最好的时间是在十年之前,其次是现在,世间之事向来如此
展开
-
二次封装组件element-ui的el-select多选tag数值多余隐藏
element-ui的Select 选择器,多选自动隐藏多余标签原创 2022-11-18 17:05:44 · 3021 阅读 · 2 评论 -
Vue组件>一个简单人物介绍轮播组件
人物介绍轮播原创 2022-07-26 14:52:27 · 633 阅读 · 0 评论 -
vue自定义封装一个多选选择器组件
vue自定义封装一个多选选择器组件原创 2022-07-12 10:08:31 · 1065 阅读 · 0 评论 -
vue获取短信验证码倒计时
vue获取短信验证码倒计时原创 2022-07-06 15:11:01 · 1120 阅读 · 0 评论 -
vue中富文本tinymce使用
vue中富文本tinymce使用tinymce是国外的一款富文本编辑器,开源可商用,免费免费免费!!!插件丰富、可扩展性强、界面好看、提供经典、内联、沉浸无干扰三种模式、对标准支持优秀(自v5开始)、多语言支持都是对他的描述!使用下载npm i tinymce@5.10.3 @tinymce/tinymce-vue@3.2.8 -S下载好了后在node_modules里会看到如下结构在vue项目中新建tinymce文件夹(一般放在static或者public文件夹中)然后复制下面这几原创 2022-05-30 12:00:05 · 2020 阅读 · 1 评论 -
el-input自定义指令封装
自定义指令 - 输入框限制将以下代码复制到一个js文件中,然后在入口文件main.js中import引入即可;指令参数 max 限制最大输入(可选) min 限制最小输入(可选) places保留小数点位数(可选,默认为2位)step限制输入长度(可选,默认为16位长度)/***@max {number}//最大值*@min {number}//最小值*@places {number}//小数位数(默认为2)*@step {number}//步长(默认为16位)*/imp原创 2022-04-21 09:19:55 · 1025 阅读 · 0 评论 -
vue返回顶部组件
返回顶部<template> <div class="topnav" v-if="isShow"> <div @click="top"><i class="iconfont icon-zhiding"></i></div> </div></template><script>export default { name: 'topnav', data() { return {原创 2021-11-02 17:28:40 · 247 阅读 · 0 评论 -
Vue-Js中文字展开折叠(多余隐藏)
1. 通过计算属性监听文字的长度来判断 <div class="text"> {{ sliceStr }} <span v-if="!textIf" class="text-item" @click="Text"> {{ textShow == false ? ' 展开全部' : '收起' }} </span> </div>data() { return {原创 2021-07-29 14:44:54 · 1298 阅读 · 1 评论 -
axios封装
//1. 导入axios依赖包,axios确定已经装上了import axios from "axios";import store from "@/store";//2. 创建axios实例对象const Server = axios.create({ baseURL:"http://ttapi.research.itcast.cn/app/v1_0",//接口基准地址,比如管理后台的地址 timeout:5000,//超时时间});//3. 定义请求拦截器的代码? 管理后台原创 2021-07-06 11:44:00 · 145 阅读 · 0 评论 -
vue数据双向绑定原理实现
Vue的响应式原理,也可以叫双向绑定原理,MVVM模式原理。一、MVVM 理解MVVM分为Model、View、ViewModel三者。Model 代表数据模型,数据和业务逻辑都在Model层中定义;View 代表UI视图,负责数据的展示;ViewModel 负责监听 Model 中数据的改变并且控制视图的更新,处理用户交互操作;Model 和 View 并无直接关联,而是通过 ViewModel 来进行联系的,Model 和 ViewModel 之间有着双向数据绑定的联系。 因此当 Mo原创 2021-06-17 08:41:42 · 713 阅读 · 0 评论 -
iframe的优缺点
iframe的优点:1.iframe能够原封不动的把嵌入的网页展现出来。2.如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。3.网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。4.如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。iframe的缺点:1.会产生很多页面,不容易管理。2.iframe框架结构有时会让人感到迷惑,如果框架个数多的话原创 2021-06-14 20:31:29 · 324 阅读 · 2 评论 -
vue 中vue-router的鉴权守卫
路由守卫一、全局路由守卫所谓全局路由守卫,就是小区大门,整个小区就这一个大门,你想要进入其中任何一个房子,都需要经过这个大门的检查全局路由守卫有个两个:全局前置守卫全局后置守卫在路由文件(router)中:import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const router = new VueRouter({ mode:'history', // 路由模式 hash原创 2021-06-04 16:21:06 · 221 阅读 · 0 评论 -
css3新特性transition
transition有四个值语法transition: property duration timing-function delay;值 描述transition-property规定设置过渡效果的 CSS 属性的名称。transition-duration规定完成过渡效果需要多少秒或毫秒。transition-timing-function规定速度效果的速度曲线。transition-delayv定义过渡效果何时开始。transition-prope原创 2021-06-01 21:39:48 · 156 阅读 · 0 评论 -
vue中keep-alive
介绍<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和<transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中,activated 和 deactivated 将会在 <k原创 2021-06-01 20:22:21 · 100 阅读 · 0 评论 -
js中的深拷贝
深拷贝为什么要是用深拷贝:列如把一个数组,对象a赋值给另一个变量b,当b改变的时候,a中对应的值不发生变化。改变新的数组(对象)的时候,不改变原数组(对象)内存模型JS内存空间分为栈(stack)、堆(heap)、池(一般也会归类为栈中)。 其中栈存放变量,堆存放复杂对象,池存放常量。基本数据类型与栈内存JS中的基础数据类型,这些值都有固定的大小,往往都保存在栈内存中(闭包除外),由系统自动分配存储空间。我们可以直接操作保存在栈内存空间的值,因此基础数据类型都是按值访问 。 基础数据类型:转载 2021-05-23 21:44:48 · 978 阅读 · 0 评论 -
vue-router(路由) 知识点汇总
概念由于Vue在开发时对路由支持的不足,于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,实际上就是组件的切换。路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是我们WebApp的链接路径管理系统。通过改变 URL,在不重新请求页面的情况下,更新页面视图。vue-Router两种模式Ha原创 2021-05-23 20:51:06 · 287 阅读 · 1 评论 -
vuex知识点总结
VuexVuex 是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。这个状态自管理应用包含以下几个部分:state,驱动应用的数据源;view,以声明方式将 state 映射到视图;原创 2021-05-23 19:36:50 · 222 阅读 · 0 评论 -
vue 组件父子,子父,兄弟通信
第一种:父传子:主要通过 props 来实现的具体实现:父组件通过 import 引入子组件,并注册,在子组件标签上添加要传递的属性,子组件通过 props 接收,接收有两种形式一是通过数组形式[‘要接收的属性’ ],二是通过对象形式{ }来接收,对象形式可以设置要传递的数据类型和默认值,而数组只是简单的接收第二种:子传父:主要通过$emit 来实现具体实现: 子组件通过通过绑定事件触发函数, 在其中设置this.emit(‘要派发的自定义事件’,要传递的值),emit(‘要派发的自定义事件’,要传递原创 2021-05-20 21:36:00 · 223 阅读 · 0 评论 -
Vue生命周期
总共分为8个阶段简记创建前/后: 在beforeCreated阶段,vue实例的挂载元素el和数据对象 data 都为undefined,还未初始化。在 created阶段,vue实例的数据对象data有了,el还没有。载入前/后: 在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染更新前/后:当data变化时,会触发beforeUpda原创 2021-05-20 21:34:55 · 237 阅读 · 0 评论 -
vue组件通信汇总
第一种:父传子:主要通过 props 来实现的具体实现:父组件通过 import 引入子组件,并注册,在子组件标签上添加要传递的属性,子组件通过 props 接收,接收有两种形式一是通过数组形式[‘要接收的属性’ ],二是通过对象形式{ }来接收,对象形式可以设置要传递的数据类型和默认值,而数组只是简单的接收Vue.component('child',{ data(){ return { mymessage:this.mess原创 2021-05-19 22:02:35 · 98 阅读 · 0 评论 -
promise、async,await、generator函数
Promise一般来讲,有以下的名词约定: promise(首字母小写)对象指的是“Promise实例对象” Promise首字母大写且单数形式,表示“Promise构造函数” Promises首字母大写且复数形式,用于指代“Promises规范”什么是Promise?Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。 从语法上说,promise 是一个对象,从它可以获取异步操作的的最终状态(成功或失败)。 Promise是原创 2021-05-07 20:15:33 · 752 阅读 · 0 评论