![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
半仙code
各位老铁 如果对我写的一些博文有问题的可以加我QQ:1023047818 共同学习 fighting!!!
展开
-
Vue调用外部js事件
问题描述:当项目是vue项目时,动态插入一些html/js代码的时候,此时无法交互的原因是此时dom已经加载结束,无法与Vue项目交互解决思路强行启动生命周期 将js方法定义成全局js方法实现过程:1.强行启动生命周期varMyComponent=Vue.extend({ template: '<a style="color:#07bb49;" v-on:click="world('+"'"+id+"'"+')">删除</a>', meth...原创 2021-01-21 16:17:18 · 1200 阅读 · 0 评论 -
js防抖的一些疑问解答:为什么addEventListener调用防抖可以,onClick不行
刚学习防抖/节流的时候就一直有一个疑问:为啥addEventListener调用防抖函数可以,但是我再HTML里写onClick方法就不行呢?百思不得其解,后来还是屈服了,用了addEventListener,但是后来学到了vue.....这下不能这么干了(因为vue不建议直接操作dom)懵圈了,在仔细整理闭包后才知道原因:这种防抖函数(生成器)的原理是防抖函数每执行一次返回一个受time变量控制的函数!上代码:/** * 防抖函数 * @param {*} func 回调函数 必传...原创 2020-09-02 22:55:35 · 1632 阅读 · 1 评论 -
css样式使用vue定义值
在vue中想要修改组件的值本来就很麻烦了在你的dom节点使用 /deep/ 或者 >>>来穿透样式:.inputSearch >>> input { border-radius: 3px 0px 0px 3px;}.inputSearch /deep/ input { border-radius: 3px 0px 0px 3px;}要想在这种情况下修改穿透样式里面的值就很麻烦,至少常规办法不行--就算你通过ref获取了dom节点也不行原创 2020-09-02 16:35:34 · 356 阅读 · 0 评论 -
uniappH5中使用高德API
高德的API有现成的SDK支撑安卓/IOS 但是没有专门的API支撑H5(或者说不用专门支撑)当uniapp中调用高德API的时候就会遇到问题:因为直接用<sctipt>引入外部js肯定不行了所以为了解决这个问题就必须引入在线jsAPI下面就介绍步骤1.引入在线jsAPI 专门新建个工具类,这样当需要调用地图的时候直接引用该方法就行a.直接引用js肯定不行,所以采用回调函数的方式引入b.因为高德的API是异步的,所以我们把他封装成Promise函数expo...原创 2020-05-19 22:34:55 · 5186 阅读 · 4 评论 -
02模仿格式类似Vue初探究
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&.原创 2020-05-08 18:01:37 · 125 阅读 · 0 评论 -
01初步模仿vue实现插值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&.原创 2020-05-08 17:54:52 · 132 阅读 · 0 评论 -
数据绑定问题
1. $nextTick当数据变化的时候Dom并不会立马渲染视图,而是有一定的延迟,等待数据不变的时候再行渲染所以就会异步操作:console.log($("#id").val())this.id+=1;console.log($("#id").val())如果我们setTimeOut函数也行,但是不合理所以为了解决引入新概念$nextTick==>>...原创 2020-04-15 23:09:56 · 103 阅读 · 0 评论 -
Vue之计算属性computed
啥是计算属性:当一个data变化的时候想监控变化(只想取特定的值)就是计算属性计算属性用起来像属性,定义起来像方法:定义:var vm = new Vue({ el: '#example', data: { a:1, b:2, c:3 }, computed: { subAB: function () { return th...原创 2020-04-14 23:39:22 · 148 阅读 · 0 评论 -
Vue之scoped限制优劣
.vue文件里的style标签里加上scoped标签后就会限制所有的样式为当前组件私有,不会造成样式泄露,但是这样也会有劣势非本组件内渲染,比如不能渲染父节点(body/html/app) 动态添加的html片段不展示根据2的劣势有下面解决方案1.再加个style不加scoped属性 2.穿透 父组件/deep/子组件3.另一种穿透 >>> 替换/deep...原创 2020-02-04 21:26:32 · 790 阅读 · 0 评论 -
Vue之保留页码
在刷新页面的时候,页码想不动解决思路:1.url到页面(上到下)在定义router转发规则的时候,可以定义一个坑位const router=new =new VueRouter({routes:[{path:'/',redirect:'/login'}, {path:'/login',name:'login',component:Login}, {path:'/home'...原创 2020-02-03 22:11:53 · 809 阅读 · 0 评论 -
Vue模块化之路由router
在使用vue-cli脚手架时我们在自定义路由的时候的步骤新建router文件夹 新建router的js文件 引入Vue、router等文件 import Vue from 'vue'import VueRouter from 'vue-router' 模块化使用vue-router //模块化加载Vue.use(VueRouter) 实例化及导出路...原创 2020-01-29 23:55:25 · 323 阅读 · 0 评论 -
Vue之导航模式
url式导航 ---‘/one’ 声明式导航 <router-link to='one'></router-link> 编程式导航后退this.$router.back()前进 this.$router.push('one') 有记录式前进 this.$router.replace('one') 无记录式前进...原创 2020-01-26 19:48:13 · 193 阅读 · 0 评论 -
Vue中的获取DOM元素 refs
功能:获取DOM中的东西 跟子组件交互第一步: 注册:在dom中声明,<div ref='d'></div>第二步: 调用,获取: this.$refsrefs里的东西是键值对方式存放的...原创 2020-01-25 18:11:27 · 262 阅读 · 0 评论 -
Vue组件传值(父子/子父)
1.父子传值先在子组件上定义一个属性 再在props里接受,=》 props=['msg'] 在标签里可以使用了{{msg}}2.子传父传值先在子标签里自定义一个事件 =》 @msFun='msPar' 在父组件里定义一个方法接受 msPar() 在子组件调用 =》 this.$emit('msFun','子传递到父了');...原创 2020-01-25 00:11:06 · 102 阅读 · 0 评论 -
Vue之监听器
监听器:watch主要功能是监听数据变化基本语法是:其中监听器的方法名要和data中要监听的值相同。newValue是新值 oldValue是旧值当监听复杂类型时:比如对象要启用深度监听简单粗暴点也可以监听到具体的值:'obj.message'(newValue){ console.log(newValue) ...原创 2020-01-17 16:54:31 · 2636 阅读 · 0 评论 -
vue之数据响应式问题
methods: { fn() { console.log('123') // 下面 这样直接添加是不行的,是无法实现正常的数据劫持,无法正常的进行数据响应式 // this.obj.name = 'zs' // this.$set this.$set(thi...原创 2020-01-17 16:16:05 · 372 阅读 · 0 评论 -
Vue之DOM异步更新问题
vue采用的虚拟dom,在改变dom属性的时候采用的是异步策略document.getElementById("app").innerHTML(); this.num+=1; this.$nextTick(()=>{ console.log(num) }...原创 2020-01-17 15:59:13 · 618 阅读 · 0 评论 -
vue之双向绑定
上一博客说了MVVM,这一章就讲讲双向绑定双向绑定按照Vue官方文档说的意思是实现了Object.defineProperty(),正因为ie8及以下不支持这个方法所以Vue完全无法在ie8上运行 <input type="text" id="txt" /> <script> let obj={}; let temp=""...原创 2020-01-15 11:02:30 · 149 阅读 · 0 评论 -
vue之设计模式MVVM
传统的前端设计模式是MVC模式===》这样一般不会优化的新手写出来的代码性能会有很大问题,为了解决这个问题,vue根据MVVM设计出了一套虚拟DOM,啥是Vue中的MVVM呢:M:数据层(后台)V:视图层(前端代码html)VM:viewModel视图数据层,也就是Vue的封装,Vue的实例名称就是vm...原创 2020-01-15 10:43:43 · 291 阅读 · 0 评论