![](https://img-blog.csdnimg.cn/20201227165417716.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue.js
记录日常学习
我在人间贩卖青春
这个作者很懒,什么都没留下…
展开
-
vue2源码浅读:vue2源码中用的工具类方法
vue2源码浅读:vue2源码中用的工具类方法vue2源码浅读:vue2源码中用的工具类方法vue2源码浅读:vue2源码中用的工具类方法vue2源码浅读:vue2源码中用的工具类方法原创 2022-06-29 17:56:47 · 420 阅读 · 0 评论 -
vue.js之路由Router(三)路由守卫的应用
路由守卫的应用组件导航的巧用除了应用于导航栏外,组件导航还可应用用去往详情页:组件内的守卫的应用比如在别的页面在离开当前页面之前,需要一些操作beforeRouteLeave(to, from, next) { if(to.name === "business_create") { ...... } } else{ next(); },beforeRouteUpdate、beforeRouteEnter用法相同全局守原创 2022-02-21 10:17:42 · 328 阅读 · 1 评论 -
vue.js之Vue.delete、Vue.compile、Vue.observabl、vm.$mount
做个资源整合,哈哈哈哈哈哈哈哈哈vue.deleteVue.delete()Vue.delete()删除对象的属性Vue.compile编译模板字符串并返回包含渲染函数的对象var res = Vue.compile('<div><span>{{msg}}</span></div>');new Vue({ data:{ msg:'hello' }, render:res.render})并不是所有Vue.js的构建版.原创 2021-11-15 22:39:36 · 589 阅读 · 0 评论 -
vue.js之Vue.nextTick与vm.$forceUpdate()
Vue.nextTick 的原理和用途vm.$forceUpdate()官方解释:迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。相当于手动触发render()this.$forceUpdate();进行强制渲染。比如数据层次太多,render函数没有自动更新,需手动强制刷新。调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期。有时候在使用多层for循环嵌套时出现的页面没有及时刷新改变后的值的问题.原创 2021-11-14 21:27:36 · 498 阅读 · 0 评论 -
vue.js之Vue.set与Vue.filter
vue.set官方解释:向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = ‘hi’)如果在实例创建之后添加新的属性到实例上,它不会触发视图更新由于 JavaScript 的限制,Vue 不能检测出数据的改变,所以当我们需要动态改变数据的时候,Vue.set()完全可以满足我们的需求原创 2021-11-14 21:27:20 · 660 阅读 · 0 评论 -
vuex状态管理模式(三)(actions,modules)
Vuexactionsmodules原创 2021-01-14 23:25:54 · 354 阅读 · 0 评论 -
vuex状态管理模式(二)(getter,mutation)
getter概述动机 :需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数。如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。和计算属性一样,会缓存。使用通过属性访问:store.getters.xxx。通过函数访问: 返回一个函数,来实现给 getter 传参。mapGetters: 将 store 中的 getter 映射到局部计算属性。示例store/index.js原创 2021-01-13 23:38:57 · 450 阅读 · 0 评论 -
vuex状态管理模式(一)(state)
VuexVuex官网概述是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式;采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。解决什么问题多个视图依赖于同一状态;来自不同视图的行为需要变更同一状态。怎么做把组件的共享状态抽取出来,以一个全局单例模式管理。优势组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的原创 2021-01-13 22:28:09 · 121 阅读 · 0 评论 -
vue.js之路由Router(二)
vue Routervue.js之路由Router(一)导航组件<router-link to=""> ,相当于<a href="/#/class/123">go to class</a>用法:<router-link to="/classView/123">go to class</router-link><router-link :to="{ name: 'classView' }">go to class&l原创 2021-01-05 10:48:04 · 163 阅读 · 0 评论 -
vue.js之路由Router(一)
vue Router官网原创 2021-01-04 23:27:05 · 421 阅读 · 0 评论 -
Vuex状态管理模式
VuexVuex官网概述是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式;采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。解决什么问题多个视图依赖于同一状态;来自不同视图的行为需要变更同一状态。怎么做把组件的共享状态抽取出来,以一个全局单例模式管理。优势组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的原创 2021-01-14 23:33:46 · 78 阅读 · 0 评论 -
vue全局注册组件、局部注册组件及注册插件
全局注册组件适用场景:组件在不同页面复用性较高,比如封装一个接口响应提示弹框,应该全局注册,然后在不同的页面就能使用一般在,main.js里进行全局注册import xxx from './xxxxx/xxx'Vue.component(xxxxx)// 或者Vue.component('xxxx1', xxxxx)局部注册在需要使用的地方引入,注册即可...原创 2021-11-14 17:06:15 · 627 阅读 · 0 评论 -
vue.js之extend()构造器
使用场景:开发插件,挂载到vue原型上,可以全局动态调用,不像ipmort导入后注册才能使用Vue.extend的理解原创 2021-11-14 17:30:02 · 145 阅读 · 0 评论 -
vue.js之非关系组件通信(八竿子打不着的关系组件通信)
非关系组件通信非关系组件通信,依赖vue实例方法中的$on(侦听)、$off(移除侦听事件)、$emit(发出出)、$once(只侦听一次)。首先。需要实例化一个vue对象。eventBus.jsimport Vue from "vue";export const EventBus = new Vue();App.vue<template> <div id="app"> <CompA></CompA> </div>原创 2021-01-03 22:10:09 · 810 阅读 · 0 评论 -
vue.js之多层父子组件通信方式二(provide和inject)
多层父子组件通信方式二(爷爷和孙子通话)provide,提供给子组件要使用的数据。形式有对象和函数。inject,接收父组件的数据,形式有字符串数组、对象(from、default)。假如有组件A CompA(爷爷)、组件B CompB(爸爸)、组件C CompC(孙子),App.vue调用组件A,组件A调用组件B,组件B调用组件C,组件A(爷爷)跨国组件B(爸爸)直接给组件C(孙子)传数据。App.vue<template> <div id="app">原创 2021-01-03 21:34:29 · 675 阅读 · 1 评论 -
vue.js之多层父子组件通信方式一($attrs和$listeners)
多层父子组件通信通信方式一(爷爷和孙子通话)$attrs,包含了父组件作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外);当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件。$listeners,包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器,它可以通过v-on="$listeners" 传入内部组原创 2021-01-03 21:15:50 · 1160 阅读 · 0 评论 -
vue.js之父子组件通信方式三($parent和$children)
父子组件通信方式三$parent 获取当前组件的父组件实例$children 获取当前组件的子组件实例不推荐使用这种方式进行组件通信案例父组件传给子组件title,在父子间里获取子组件的实例和数据子组件<template> <div> <h1> {{title}} <button @click="handleClick">emit</button>原创 2021-01-02 22:53:57 · 4399 阅读 · 0 评论 -
vue.js之父子组件通信之方式二(ref和$ref)
父子组件通信方式二ref 给元素或子组件注册引用信息$refs 获取通过 ref 注册的引用案例:子组件通过props接收父组件的数据,父组件通过ref、 $refs获取子组件的数据子组件<template> <div> <h1>{{title}} <button>emit</button> </h1> child </div&原创 2021-01-02 22:32:45 · 2425 阅读 · 6 评论 -
vue.js组件通信的六种方式(父子组件、多层父子组件、非关系型组件)
vue.js组件通信父子组件通信三种方式父子组件通信方式一(props和$emit)父子组件通信之方式二(ref和$ref)父子组件通信方式三($parent和$children)多层父子组件通信两种方式多层父子组件通信方式一($attrs和$listeners) 多层父子组件通信方式二(provide和inject)非关系组件通信非关系组件通信($on、$off、$emit、$once)...原创 2021-01-03 22:24:54 · 497 阅读 · 0 评论 -
vue.js之directive自定义指令
directive需求:打开页面,input框自动聚焦Vue.directive("focus",{ bind(el,bindiing){ el.focus(); console.log("bing"); }, inserted(el){ console.log("inserted"); el.focu原创 2021-01-02 14:06:45 · 87 阅读 · 0 评论 -
vue.js之minix
vue中为什么要引入minix组件复用逻辑minix的缺点mixin在vue3 被干掉了。主要是因为命名不清晰 找不到来源,存在命名冲突问题发现一篇讲的很清楚的博客,引用一下:minix的使用原创 2021-11-14 11:10:41 · 1815 阅读 · 0 评论 -
vue.js使用v-model父子组件双向传值
父子组件双向传值话不多说,来上帝视角<div id="app"></div><script> Vue.component("ComponentA", { model:{ event:"change", }, methods: { handleClick() { this.count++; this.$emit("change",this.count); },原创 2021-01-01 22:52:33 · 531 阅读 · 0 评论 -
vue中子组件可以修改接父组件数据(.sync-update)
vue是单向数据流,子组件要想修改父组件的值可以通过.sync.sync:允许子组件修改接收到的父组件数据值,并更新给父组件如果子组件直接修改父组件接受到的值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&.原创 2021-11-14 11:27:07 · 3003 阅读 · 0 评论 -
vue.js之父子组件通信方式一(props和emit)
组件通信props 父组件数据传子组件props用于子组件接收父组件的数据案例:接收方式一: props:["title"] <div id="app"></div>Vue.component("ComponentA", { // 默认配置,接收 props:["title"], methods: { handleClick() { this.count++; },原创 2021-01-01 22:28:06 · 561 阅读 · 0 评论 -
vue.js之生命周期钩子(案例详解),父子组件的生命周期的关系
生命周期vue的生命周期有11个状态。分别是beforeCreate、created、beforeMount、mounted、brforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed、errorCaptured。关于activated、deactivated的使用,参考一下大佬们的文章的解释,例子errorCaptured,用来捕获来自组件的错误。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字原创 2021-01-01 21:44:06 · 226 阅读 · 0 评论 -
vue.js之组件注册
组件封装与调用组件的优势封装性复用性单一职责 <div id="app"></div> const ComponentB = { template: `<div>ComponentB</div>`, }; //全局注册组件 Vue.component("ComponentA", { // 局部注册组件 components: { ComponentB, }, method原创 2021-01-01 20:41:38 · 115 阅读 · 0 评论 -
vue.js之插槽v-slot
插槽父组件在引用子组件时希望向子组价传递模板内容;子组件让父组件传过来的模板内容在所在的位置显示;子组件中的就是一个槽,可以接收父组件传过来的模板内容, 元素自身将被替换;用户可以拓展组件,去更好地复用组件和对其做定制化处理。基础插槽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="原创 2021-11-14 11:00:53 · 394 阅读 · 0 评论 -
vue.js中method 、computed 、watch的应用及区别,
method 和 computed 的区别先来看一个例子<div id="app"> {{reverseMsg}} <hr> {{reverseMesssage()}}</div>app = new Vue({ el:"#app", data:{ msg:"hello word", }, methods:{ reverseMesssa原创 2021-01-01 20:14:05 · 165 阅读 · 0 评论 -
vue.js常用的基本指令特性及其用法
基本指令绑定数据 v-bind绑定数据(表达式)到指定的属性上,<div v-bind:参数="值/表达式"></div>,这里的参数就是指定的属性名称。缩写::用法<div :id="myId"></div>也可绑定样式css.red { color: red;}.size { font-size: 50px;}html<div :class="classes"> color&原创 2020-12-31 22:12:28 · 128 阅读 · 4 评论