- 博客(99)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue双向绑定原理
Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给 订阅者，触发相应的监听回调。需要 observe 的数据对象进行递归遍历，包括子属性对象的属性， 都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据 变化compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲 染页面视图，并将每个指令对应的节点绑定更
2022-08-30 17:15:29
221
原创 vue 状态管理 pinia
pinia成为正式的vue状态库，pinia就是vuex5配置store.js使用store替换整个state$state 可以让你通过将 store 的属性设置为新对象来替换 store 的整个 state重置状态可以通过store上的$reset()方法重置为初始值状态pinia在setup之外使用在工作中需要在路由守卫中去请求用户信息将用户信息放到pinia中。解决办法：确保始终应用此功能的最简单方法是延迟调用 useStore()，方法是将它们放在安装 pi
2022-06-27 10:28:07
854
1
原创 i18n国际化
需要场景：需要满足不同地区用户的语言习惯全局国际化配置 main.js//npm i vue-i18n -D// 国际化引入import VueI18n from 'vue-i18n'//对应语言文件引入import { cn } from './language/zh-CN'import { en } from './language/en'Vue.use(VueI18n)// 国际化使用const i18n = new VueI18n({ locale: 'zh-CN',
2022-04-01 17:44:29
358
原创 react(包括react-router、redux、reduxToolkit)
reactjsx 语法js 内嵌入 的 html 标签 就是 jsx 语法。 html 标签内嵌入 js。 jsx 内写 js 直接使用 {}。 jsx 内标签的属性有几个需要特殊记忆 1. class 写成 className 2. lable 内的 for 写成 htmlFor 3. 自定义属性名写成小驼峰 4. 标签内无内容写成单闭合返回多个根节点默认只能返回一个根节点可以结束 Fragments 返回多个节点 <></> 就是空标签 不会渲染任何标签 空标签是简写
2022-01-24 09:32:42
615
1
原创 vue 路由 NavigationDupLicated 解决
vue 路由 NavigationDupLicated 解决编程式路由跳转到当前路由(参数不变)，多次执行会抛出 NavigationDupLicated 的警告错误。怎么解决为什么编程式导航进行路由跳转的时候，就会有这种警告错误呢因为 vue-router:3.5.3 版本引入了 promise，假如没有回调函数，错误信息就会交给全局的路由错误处理，因此就会报上述的错误。解决方法方法一 运用编程式路由的时候加上成功，失败的回调this.$router.push( { name: "
2021-12-08 21:10:56
749
原创 vue路由params 参数可传可不传写法？如果传递的为空串，该怎么解决？
vue路由params 参数可传可不传写法？如果传递的为空串，该怎么解决？参数可传可不传的写法 在占位符后面加?routes: [ { path: "/home/:id?", },];空串解决办法加 undefinedthis.$router.push({ name: "home", params: { id: "" || undefined, },});...
2021-12-08 19:57:19
2272
原创 vue2x 实现数据响应的原理
vue 数据响应一、对象的数据响应通过 Objec.defineProperty 对数据进行描述例如:const dataObj = { num: 10, post: { title: "vue 响应式原理", comment: [ { id: 1, text: 666, }, { id: 2, text: 555, }, ], }, tab:
2021-11-30 19:38:16
105
原创 vue 中封装 axios 取消请求功能
vue 中封装 axios 取消请求功能import Vue from "vue";import axios from "axios";// 取消请求功能// 请求取消令牌const CancelToken = axios.CancelToken;let cancel;// 请求拦截器axios.interceptors.request.use((config) => { if (cancel) cancel("取消请求"); config.cancelToken = new
2021-11-29 20:26:26
953
原创 vue2x 路由
路由理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。前端路由：key 是路径，value 是组件。1.基本使用安装 vue-router，命令：npm i vue-router应用插件：Vue.use(VueRouter)vue.use 的主要功能是将路由添加成整个项目的全局功能 主要实现了将路由注册成全组件,给 vue 构造原型 Vue.prototype 添加了一些路由相关的属性编写 router
2021-11-29 20:25:46
558
原创 vue2x vuex
Vuex1.概念在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。2.何时使用？多个组件需要共享数据时3.搭建 vuex 环境创建文件：src/store/index.js//引入Vue核心库import Vue from "vue";//引入Vueximport Vuex from "vuex";//应用Vuex插件Vue.use(Vuex);//准
2021-11-22 15:05:43
363
原创 vue2x 插槽
插槽作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。分类：默认插槽、具名插槽、作用域插槽v-slot:名字 简写 #名字使用方式：默认插槽：父组件中： <Category> <div>html结构1</div> </Category>子组件中： <template>
2021-11-22 15:04:44
76
原创 vue2x 配置代理
vue脚手架配置代理方法一 在vue.config.js中添加如下配置：devServer:{ proxy:"http://localhost:5000"}说明：优点：配置简单，请求资源时直接发给前端（8080）即可。缺点：不能配置多个代理，不能灵活的控制请求是否走代理。工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）方法二 编写vue.config.js配置具体代理规则：module.exports = { de
2021-11-22 15:04:06
178
原创 vue2x nextTick
nextTick语法:this.$nextTick(回调函数)作用:在下一次DOM更新结束后执行其指定问题什么时候用:当改变数据后，要基于更新后的DOM进行某些操作时，要在nextTick所指定的回调函数中执行组件 mounted 钩子，执行的时候，并不代表所有的子组件也都渲染完毕了，如果想要在所有子组件全部渲染完毕(整个组件的视图完全展示)之后，再进行一些操作，可以使用组件下的$nextTick方法，该方法传递一个回调函数作为参数，该回调函数自动触发这也是一个异步操作，他会在beforeUpd
2021-11-22 15:03:26
266
原创 veu2x 消息订阅与发送
消息的订阅与发布(pubsub)一种组件间的通信方式，使用于任意组件间通信使用步骤安装pubsub:npm i pusub-js引入:import pubsub from ‘pubsub-js’接收数据:A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身mthods() { demo(data){....}}.....mounted() { this.pid = pubsub.subscribe("xxx",this.demo)//订阅消息}提供
2021-11-22 15:02:51
184
原创 vue2x 依赖注入
依赖注入 祖先将数据共享给后代组件provide(提供者) 选项允许我们指定我们想要提供给后代组件的数据/方法。然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性或者方法注意: 当传递的数据是一个值的时候，这个值就是静态的，不会随着数据的变化而变化当直接将 count 传递过去的时候并不会动态改变，需要写成 函数 返回 countindect 的时候接收的是一函数，所以使用的时候要使用函数调用的形式// My组件export default
2021-11-22 15:02:07
417
原创 vue2x 全局事件总线
全局事件总线一种组件间通信方式，适用于任意组件间通信安装全局事件总线:new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, ......}) 使用事件总线接受数据:A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身methods(){ demo(data){......}}mounted() {thi
2021-11-22 15:01:33
273
原创 vue2x props
props让组件接收外部传过来的数据传递数据 接收数据:第一种方式(只接收):props:[‘name’]第二种方式(限制类型):props:{name:String,}，或者props:{name:[String,Number]}第三种方式(限制类型、显示必要性、指定默认值):type:String Number Boolean Array Object Date Function Symbolprops:{ name:{ tpye:String,
2021-11-22 15:01:03
372
原创 vue2x组件自定义事件
组件自定义事件一种组件通信方式，适用于:子组件===>父组件使用场景:A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件(事件的回调在A中)绑定自定义事件第一种方式，在父组件中:<Demo @hello = “test”>或者第二中方式，在父组件中:<Demoe ref = "demo">mounted(){ this.$refs.demo.$on("hello",this.test)}若想让自定义事件只触发一
2021-11-22 15:00:28
256
原创 vue2x 自定义指令
自定义指令Vue模板语法有两大类:1. 插值语法:功能:用于解析标签体内容。写法:{{xxx}},xxx是js表达式，且可以直接读取到data中所有的属性.2.指令语法:功能:用于解析标签(包括:标签属性、标签体内容、事件绑定…)举例:v-bind:href='xxx’或简写为 :href=“xxx”，xxx同样要写js表达式,且可以直接读取到data中所有的属性。备注:Vue中有很多的指令，且形式都是:v-???自定义指令你需要对普通dom元素进行底层操作，可以选择使用指令实现
2021-11-22 14:58:51
64
原创 vue2x 组合action的应用
组合 actionAction 中通常放的都是异步的请求，如何知道 action 什么时候结束？首先，你需要明白 store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise：举例子本页面有个 input 输入框，需要将 input 中的内容传给后台,并且更新 state 中的数据再清楚 input 框中的内容<input v-mode="text" />cosnt action
2021-11-18 18:48:25
497
原创 vue2x 过滤器
过滤器对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)语法:注册过滤器:Vue.filter(name,callback)(全局) 或者 new Vue({filters:{}})(局部)使用过滤器:{{xxxx|过滤器名字}} 或者 v-bind:属性=“xxx|过滤器名”3. 备注:过滤器可以接受额外的参数、多个过滤器可以串联并没有改变原本的数据,是产生新的对应的数据...
2021-11-18 18:47:54
54
原创 vue2x 收集表单数据
收集表单数据若input是text，password时 v-model收集的是value值,用户输入的就是value值若input是radio 则v-model收集的是value值，且要给标签 配置 value值若为 checkbox没有配置input的value值，收集的是 checked(true，false)配置了input的value值，且收集数据的类型是数组,收集的为value组成的数组成员收据数据的类型为数组,没有设置value值,收集的是 （true，false）v-mo
2021-11-16 08:52:51
51
原创 vue2x 数据实现响应式方法
数据监测vue 会监视 data 中的所有层次数据。二、如何监测对象中的数据?通过 setter 实现监视,且要在 new Vue 时就要传入要监测的数据.对象中后追加属性,Vue 默认不做响应式处理.如需给后添加的属性做响应式,使用如下 APIVue.set(target,propertyName/index,value)vm.$set(target,propertyName\index,value)三、如何监测数组中的数据?通过包裹数组更新元素的方法实现,
2021-11-16 08:52:18
482
原创 vue2x key的原理
key的原理虚拟DOM中key的原理key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下对比原则旧虚拟DOM中找到了与新虚拟DOM相同的key：.若虚拟DOM中内容没变, 直接使用之前的真实DOM！.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。旧虚拟DOM中未找到与新虚拟DOM相同的key 创建新的真实DOM，随后渲染到到页面。
2021-11-16 08:51:33
130
原创 vue2x v-if v-show区别
条件渲染一、v-if写法 v-if=‘表达式’ v-else-if=“表达式” v-else适用于:切换频率比较低的场景。特点:不展示DOM元素直接被移除注意:v-if可以和v-else-if、v-else 一起使用，但要求结构不能被打断二、v-show写法:v-show=“表达式”适用于:切换频率比较高的场景特点:不展示的DOM匀速未被移除仅仅使用样式被隐藏掉(display:none)备注:使用v-if的时候,元素可能无法获取到,而v-show一定可以获取到(v-if会将元素删
2021-11-16 08:51:03
51
原创 vue2x 添加class类
添加class类写法: :class=“xxx” xxx可以是字符串、对象、数组字符串写法用于:类名确定,要动态获取数组写法用于:要绑定多个样式,个数不确定，名字也不确定对象写法用于:要绑定多个样式，个数确定，名字确定，但是不确定用不用添加style样式:style="{fontSize:xxx}":style="[a,b]"其中ab是样式对象(css有的,并且将-连接的改为小驼峰方式)...
2021-11-16 08:50:29
447
原创 vue2x计算属性，监视属性的区别
计算属性、监测属性的区别computed(计算属性)能完成的功能,watch(监测属性都可以完成)watch能完成的功能,computed不一定能完成,例如watch进行异步操作两个中要原则所被Vue管理的函数，最好写成普通函数,这样this的指向才是vm 或 组件实例对象所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象...
2021-11-16 08:49:58
259
原创 vue2x 监视属性
vue监视属性 watch当被监视的属性变化时，回调函数自动调用(handler)，进行相关操作监视属性必须存在，才能进行监视！！监视属性的两种方法new Vlue时传入watch配置通过vm.$watch(‘要监视的属性，{}’)监视handler(新的属性的值,旧的属性的值)immediate:true 初始化时让handler调用一下深度监视Vue中的watch默认不检测对象内部值的改变(一层)配置deep:true可以检测对象内部值改变(多层),例如
2021-11-16 08:49:27
75
原创 vue2x计算属性
vue 计算属性 computed定义：要用的属性不存在，要通过已有属性计算得来。原理：底层借助了Objcet.defineproperty方法提供的getter和setter。get函数什么时候执行？(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。备注：计算属性最终会出现在vm上，直接读取使用即可。如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的
2021-11-16 08:48:58
187
原创 vue2x中的数据代理
数据代理1. Obj.definePropertyObj.defineProperty(对象,‘属性名’，{})value:属性的值enumerable: 控制属性是否可以枚举(遍历),默认falsewritable: 控制属性是否可以被修改,默认falseconfigurable: 控制属性是否可以被删除，默认falseget(){return} 当有人读取对象属性的时候，get函数就会被调用，且返回值就是属性的值set(value){} 当有人修改对象属性值的时候，set函数就会被调
2021-11-16 08:48:22
55
原创 vue中的mvvm模型
mvvm模型M：模型(Model):data中的数据V: 视图(View):模板代码VM:视图模型(ViewModel):Vue实例发现:data中的数据最终都出现在了vm身上vm身上所有的属性以及vue原型上所有的属性，在vue模板中都可以直接使用...
2021-11-16 08:47:52
361
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人