vue
文章平均质量分 52
奥D
前端工程师,快乐肥宅
展开
-
限制el-input 只能输入包含小数点的数字
限制el-input 只能输入包含小数点的数字<el-input v-model.trim="form[item.propName]" onkeyup="value=value.replace(/[^\d^\.]+/g,'')" :placeholder="item.placeholder" clearable size="small" >原创 2022-04-22 16:36:39 · 471 阅读 · 0 评论 -
Vue生命周期钩子函数hook解析
声明:文章摘自https://www.cnblogs.com/goloving/p/13879157.htmlVue的各生命周期,其实就是Vue开发者规定的一些hook,和git里面规定的hook类似,你只要往hook里面填自定义内容,它就可以执行。如vue实例里的beforeCreate,created,mounted等,都是hook。简单来说,hook其实就是一种回调函数,只不过这种回调函数的名称已经被固定,内容不固定,且函数名称作为了一个接口被暴露出去。这样也更好了进行了抽象化:将经常变化的内.转载 2022-03-02 10:25:16 · 6811 阅读 · 0 评论 -
面试题(不定期更新)
说几条写JavaScript的基本规范不要在同一行声明多个变量请使用===/!==来比较true/false或者数值使用对象字面量替代new Array这种形式不要使用全局函数Switch语句必须带有default分支If语句必须使用大括号for-in循环中的变量 应该使用var关键字明确限定作用域,从而避免作用域污染请描述一下cookies,sessionStorage和localStorage的区别?cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上原创 2022-02-23 19:24:45 · 122 阅读 · 0 评论 -
一些简单常用网站
1.echarts渐变色的各种方式https://www.cnblogs.com/liuwei54/p/9962182.html2.git 配置usernamehttps://blog.csdn.net/qq_44409163/article/details/1139336303.and-vue分页表格https://www.cnblogs.com/theblogs/p/14738545.html4.最新数组方法https://www.cnblogs.com/sqh17/p/8529401.h原创 2021-12-03 17:25:25 · 774 阅读 · 0 评论 -
二十.导航守卫,滚动位置记录函数
导航守卫 、 导航钩子函数滚动位置导航守卫 、 导航钩子函数监听甚至 拦截 路由变化全局守卫 (拦截所有的路由)// 全局前置 守卫router.beforeEach((to,from,next)=>{ // to 目标路由 // from 从哪来路由 // next 拦截器 不调用next()路由无法进入,next参数同router-link to属性的值,重定向地址 next()})// 全局后置守卫router.afterEach((to,from)=.原创 2020-11-22 18:31:52 · 190 阅读 · 0 评论 -
十九.vue中路由基本方法
文章目录vue路由基本使用路由query传参路由params传参 (常用⭐)⭐children路由嵌套vue路由基本使用1.在new路由对象的时候,可以为构造函数,传递一个配置对象。//创建一个路由对象,当导入 vue-router 包之后,在window 全局对象中,就有了一个路由的构造函数。叫做VueRouter.1.1.route这个配置对象中的routes表示路由匹配规则的意思,不能修改且必传//每个路由规则,都是一个对象,这个规则对象,有两个必须属性。//属性一:path,表示监听原创 2020-11-19 21:25:46 · 548 阅读 · 0 评论 -
十八.vue中axios库
文章目录axios ajax库 (vue+axios react+axios angular+axios)axios ajax库 (vue+axios react+axios angular+axios)axios 是一个 封装好的 第三方ajax请求的库 特点:支持restfulapi 支持promise 解决回到地狱 支持ajax请求拦截vue-resource 停止维护了 ,官网不推荐使用get请求: axios.get('url?param原创 2020-11-19 21:24:57 · 157 阅读 · 0 评论 -
十七.vue中请求ajax
目录vue中请求ajaxvue中请求ajaxfetch如何使用: "key=v&key2=v" fetch(url,{ headers:{ "token":localStorage.getItem('token'), "content-type":"apllication-xxx-urlencoded" }, method:"GET/POST", data:{ } }).then(function(res){ return res.json()原创 2020-11-19 21:24:08 · 137 阅读 · 0 评论 -
十六.混入与vue自定义指令
文章目录mixinvue自定义指令mixin当多个组件有相同的部分(可以是属性,数据,方法…),定义一个混入,在混入中定义公共的部分,然后注入到需要使用的组件中①const mixin={};②使用:mixins=[mixin]const mixin = { data(){ return { name:"123", } } }//子组件使用const title1 =原创 2020-11-18 19:21:19 · 178 阅读 · 0 评论 -
十五.vue动画与过滤器
文章目录transition动画transition组件 控制 单组件(标签)状态切换transition结合动画过滤器transition动画transition组件 控制 单组件(标签)状态切换注意:有一种情况可以同时写多个元素,就是使用v-if v-else-if v-else等控制前提:永远不可能同时出现两个如果 想要控制 列表动画 (同时控制多个元素)使用 transition-group组件 用法相同1.给需要过渡的box使用transition容器包裹,v-if是必须的&原创 2020-11-18 19:20:18 · 134 阅读 · 0 评论 -
十四.Vue实例的生命周期
文章目录vue实例的生命周期1.什么是生命周期?2.生命周期钩子 = 生命周期函数 = 生命周期事件3.主要的生命周期函数分类:创建期间的生命周期函数运行期间的生命周期函数销毁期间的生命周期函数:组件再一次激活时被触发(keep-alive直接包裹需要保留的内容)vue实例的生命周期1.什么是生命周期?从Vue实例创建,运行,到销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期!2.生命周期钩子 = 生命周期函数 = 生命周期事件3.主要的生命周期函数分类:创建期间的生命周期函数·b原创 2020-11-16 19:25:12 · 102 阅读 · 0 评论 -
十三.插槽
插槽插槽:子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。解决问题:多个组件使用同一个子组件,需要传入或修改数据时,需要利用插槽。1.子组件设置插槽 2.父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中,父组件填充内容时,是可以根据这个名字把内容填充到对应插槽中的子组件设置插槽:1.使用<slot></slot> 默认插槽2.设置指定的需要使原创 2020-11-16 19:24:08 · 96 阅读 · 0 评论 -
十二.vue组件
组件组件组件通信父--子 props通信子向父通信 自定义事件兄弟组件通信 自定义事件 事件中心总线 (event bus)ref组件通信 (⭐⭐⭐)$parent $childrenprovide inject组件mvvm 数据驱动 组件化组件:网页上组成部分(预定义组件、自定义组件)组件语法:组件也是Vue的实例(new Vue 他有的属性 组件都有) // 全局组件(挂载到Vue上,可以在任意组件以及实例的模板中使用) Vue.component(组件名,{ t原创 2020-11-13 15:46:53 · 85 阅读 · 0 评论 -
十一.vue计算属性-处理data
computed : Vue提供的一个配置项注意: 当data中的数据发生变化,页面中的指令和表达式会重新计算, 有时候不相关数据变化会导致一直重新计算,所以这里引出了计算属性如何使用?computed 和 data同级,计算属性写在computed中;写起来像方法;用起来像属性。特点(注意点):1)一定要有返回值。2)可以使用data中的已知值。3)只要跟计算属性相关的数据发生了变化,计算属性就会重新计算,不相关的属性无论如何变化,都不会导致计算属性变化。4)计算属性名不能原创 2020-11-12 20:16:06 · 3516 阅读 · 0 评论 -
十.vue侦听器
侦听器监听 实例上的 某个属性的值得变化const vm = new Vue({ el:"#app", data:{ msg:"", obj:{ a:10, b:20 } }, watch:{ msg(newVal, oldVal){ console.log(`值变化了,新值是${newVal},旧值是${oldVal}`) // 监听的是非对象的数据 直接在watch中新增一个同名的方法即可 },原创 2020-11-12 20:15:23 · 87 阅读 · 0 评论 -
九.动态生成元素的获取方法
动态生成元素的获取当数据改变(改变数据时同步) 视图刷新(更新dom,异步 中间要通知观察者,调用render生成虚拟dom,比较两个虚拟dom用diff算法,在更新)所有 我们无法 立即获取,数据改变后生成最新的domvue 提供了一个watcher(观察每一次的dom更新,更新完成后,回调触发,在回调中获取最新的dom)this.$nextTick(()=>{ <!-- 在这里获取最新的dom -->})Vue.nextTick(()=>{ <!--原创 2020-11-12 20:14:25 · 352 阅读 · 0 评论 -
八.vue获取dom元素
vue获取dom元素方法一:直接给相应的元素加id,然后再document.getElementById(“id”);获取,然后设置相应属性或样式方法二:使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素例<div ref="tet" id="tet">我是tet</div>const vm = new Vue({ el:"#app", mounted(){ document.querySelector原创 2020-11-12 20:13:39 · 1060 阅读 · 0 评论 -
七.MVVM问题
es6之扩展运算符 三个点(…)对象的扩展运算符:常用于浅克隆理解对象的扩展运算符其实很简单,只要记住一句话就可以:对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中let bar = { a: 1, b: 2 };let baz = { ...bar }; // { a: 1, b: 2 }上述方法实际上等价于:let bar = { a: 1, b: 2 };let baz = Object.assign({}, bar); // { a: 1, b:原创 2020-11-12 18:33:48 · 100 阅读 · 0 评论 -
六.todolist练习
todolist笔记<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=" "> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3原创 2020-11-12 10:38:07 · 194 阅读 · 1 评论 -
五.解决页面刷新刚打开时闪烁问题
解决 页面刷新 刚打开时 闪烁问题问题原因:代码执行顺序从上往下,在 vue实例还未创建,vue还没有作用html上,此时我们模板 只是单纯字符串实例作用到html,模板开始解析style [v-cloak]{ display:none; }<div v-cloak> {{ m sg }} </div>在 vue 实例还未作用到html上,此时v-cloak只是一个普通的自定义属性[v-cloak]属性选择器可以选中这个元素,此时隐藏,当vue实原创 2020-11-12 10:36:43 · 586 阅读 · 1 评论 -
四.MVVM原理
MVVM原理es5 Object.defineProperty(obj,‘属性’,{value:1,set:function(){},get:function(){}})’’<script> var obj = { a:10 } var a = 10 // Object.defineProperty() 可以定义没有属性或者存在属性 Object.defineProperty(obj,'a',{ get:functi原创 2020-11-12 10:35:58 · 77 阅读 · 0 评论 -
三.vue简易计数器
/*注意:data中数据一定要使用this指向*/<style> #app{ padding: 20px; background-color: pink; }</style><body> <div id="app"> <input type="button" value="-" @click = "sub"> <span>{{n}}&l原创 2020-11-12 10:35:15 · 96 阅读 · 0 评论 -
二.vue基本语句
文章目录其他常用指令条件渲染 v-if v-else-if v-elseelsev-else-if 使用场景不多条件与循环例子列表渲染 循环:class:style回顾:mvvmconst vm = new Vue({ el: '#app', //挂载vue data: { // 放数据 data属性 会直接挂载到实例上 msg: 'xxx' }, methods: { // 用于放置 实例方法 直接挂载到实例上 changeMsg (){ }原创 2020-11-10 19:01:17 · 319 阅读 · 0 评论 -
一 . vue入门
文章目录什么是vuevue雏形模板 {{ }}外部挂载vue指令什么是vuehttps://cn.vuejs.org/是 MVVM js 渐进式 视图层 框架mvvm m model 数据 v view 视图 mv vm 数据改变 视图会自动刷新(vm Vue实例驱动刷新) 命令式 将程序 每一个 运行步骤 写出来 程序运行 声明式 告诉 计算机 我要干什么 (中间怎么做 不管)一切以数据为核心、尽量不要操作dom(由数据驱动视图)渐进式 v原创 2020-11-09 15:32:46 · 77 阅读 · 0 评论