VUE
腊十二
这个作者很懒,什么都没留下…
展开
-
vue $bus
一、bus的使用流程1.bus就是vue的一个实例,可以理解为vue实例化后的一个组件2.var bus = new Vue();3.把bus挂载Vue实例的原型对象上,也就是说用Vue实例化的每个组件都可以访问到这个$bus属性了。4.Vue.prototype.$bus = bus;5.之后就可以使用$bus进行监听和触发了。6.his.$bus.$emit(event)7.this.$bus.$on(event,fn)二、为什么把Vue的实例挂载Vue原型上就可以通讯了呢?原创 2022-03-04 10:22:42 · 1245 阅读 · 0 评论 -
vue中的let声明,const声明
原创 2022-02-21 14:10:18 · 569 阅读 · 0 评论 -
v-if和v-for谁的优先级更高
1.两个指令不可以用在同一个元素身上1.1vue2:v-for的优先级比v-if高,每次循环都会去执行一次v-if,1.2vue3:v-if的优先级高于v-for,原创 2022-02-21 13:36:13 · 1473 阅读 · 0 评论 -
this指向以及(call,apply,bind)
1.所谓的this其实可以理解成一根指针:其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象,这就是精髓。最关键所在,function test() { console.log(this);};test();指向window 输出下面的代码:// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Stora转载 2022-02-14 22:56:56 · 105 阅读 · 0 评论 -
获取验证码增加滑块拼图验证
1.用法1.在public里面的index.html文件中引入:<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>//使用:const appId = "xxxx" //腾讯滑块验证码appidsendSms() { this.form.validateFields(["phone"], (err, values) => { if (err) return;原创 2021-12-30 11:43:36 · 427 阅读 · 0 评论 -
vue-router配置
路由配置参数是个变量就要用绑定属性router-link 标签必须要加 to=‘’方法,不加的话不显示内容声明式:编程式:this.router.push()添加一个新的页面(this.router.push()添加一个新的页面 (this.router.push()添加一个新的页面(this.router.push(‘/detail’))this.router.replace()替换当前页面this.router.replace()替换当前页面this.router.replac原创 2020-07-07 19:02:02 · 106 阅读 · 0 评论 -
导航守卫
导航守卫:vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。(在路由跳转时触发)导航守卫:只关心去哪里,不关心从哪里来,所以to是必须设置的每个守卫方法接收三个参数:to: 即将要进入的目标路由对象from: 当前导航正要离开的路由next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。next(): 进行管道中的下一个钩子。如果全部钩子原创 2020-07-07 01:17:52 · 106 阅读 · 0 评论 -
MVC,MVP,MVVM模式
MVX模式:MVC模式:model + view + controller 数据模型,页面,控制器最早出现在java中,一种业务逻辑,数据,界面显示分离的方法组织代码优点:耦合性低,重用性高,生命周期成本低,部署快,可维护性高,有利于软件工程化管理。缺点:用于模型和视图要严格的分离,这样也给调试应用程序带来了一定的困难,每个构件中使用之前都需要经过彻底的测试MVP模式: model view presenter 数据层 ,视图层,发布层,它是mvc的一种演变MVP 模式将 Controller原创 2020-07-07 00:57:19 · 104 阅读 · 0 评论 -
vuex理解
Vue状态管理:把组件的共享状态抽取出来,以一个全局单例模式管理,这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为,通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性,我们的代码将会变得更结构化且易维护‘为什么使用状态管理:1:传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力2: 我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代原创 2020-07-07 00:53:06 · 169 阅读 · 0 评论 -
vue双向绑定原理
Vue:双向绑定原理:是由数据劫持结合发布者-订阅者模式实现的,通过Object.defineProperty()来劫持对象属性的setter和操作,在数据变动时做你想要做的事情原理:1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。首先要对数据进行劫持监听,所以原创 2020-07-07 00:50:04 · 113 阅读 · 0 评论 -
Number类型
Number()可以用于任何数据类型的转换。转换规则如下:1.如果是Boolean值,true和false将分别被转换为1或0.2.如果是null值,返回0;3.如果是undefined,返回NaN;4.如果是字符串则遵循以下规则:字符串只把含数字(包含前面带正号或负号的情况),则将其转换为十进制数值,前导零会被忽略。(例如“011”会变成11);如果字符串中包含有效的浮点格式,则将其转换为相应的浮点数值,前导零会被忽略;如果字符串中包含十六进制格式,则将其转换为相同大小的十进制整数;//nu原创 2020-07-07 00:48:50 · 707 阅读 · 0 评论 -
安装vue
全局安装vue:cnpm i @vue/cli -g图形化创建项目界面:vue uiVue创建项目命令:vue create myapp选择:Manually select features2.除了typescr不选择,其他全选3.输入y4.选择:Sass/SCSS (with node-sass)5.选择代码的校验规则:ESLint + Standard config 这是标准的规则6.什么时候去校验 选择:Lint on save7.选择:Mocha + Chai 测试8.选择原创 2020-07-07 00:34:11 · 86 阅读 · 0 评论 -
vue中的Keep-alive组件
Keep-alive在动态组件上使用 keep-alivekeep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,避免重新渲染 ,以避免反复重渲染导致的性能问题kepp-alive“组件”/kepp-alive能在组件切换过程中将状态保留在内存中,防止重复渲染DOMkeep-alive生命周期钩子函数:activated、deactivated,使用会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在activated阶段获取数据,承担原来creat原创 2020-07-07 00:17:53 · 174 阅读 · 0 评论