代码编织梦想

vue 3 组件通信全解:从基础到高级技巧-爱代码爱编程

引言 Vue 3 引入了 Composition API,这为组件通信带来了新的灵活性和强大的功能。 组件通信基础 组件的定义和作用 在前端开发中,组件可以被看作是构建用户界面的独立单元。它封装了特定的功能和样式,可以被重复使用,并且可以独立于其他部分进行开发和测试。组件的主要作用是提高代码的复用性、可维护性和可扩展性。通过将界面拆分成多个组件,开

掌握vue 3生命周期:从组合式api到高效代码实践-爱代码爱编程

引言 在 Vue 3 中,生命周期的概念得到了进一步的优化和简化。Vue 3 引入了组合式 API(Composition API),这为开发者提供了更灵活的方式来组织和重用代码逻辑。与传统的选项式 API(Options API)相比,组合式 API 使得生命周期钩子的使用更加直观和方便。 Vue 3 生命周期概述 Vue 3 引入了新的生命周期钩

vuex 核心揭秘:打造高效前端状态库-爱代码爱编程

引言 Vue.js 是一个流行的 JavaScript 框架,以其简洁的设计和易用的特性赢得了开发者的青睐。它允许开发者通过声明式的方式编写前端代码,从而提高开发效率。 Vuex 是 Vue.js 的官方状态管理库,它为 Vue 应用提供了一个中心化存储,使得所有组件都能够访问和更新共享状态。这对于大型应用来说尤为重要,因为它可以避免状态混乱和难以维护

vue-axios用法总结-爱代码爱编程

axios 1.axios axios 是基于promise对ajax的一种封装 ajax mvc axios MVVM 2.axios的基本使用 <script src="axios.js"></script> <script> import axios from 'axios'

Vue封装table组件-爱代码爱编程

Vue封装table组件,业务需求不同,封装的table也不一样↓↓↓ <!--公用table组件--> <template> <div class="commonTableOut"> <el-table class="commonTable" :height="heigh

关于Vue2.x中数组的劫持,我提了下面几个问题-爱代码爱编程

你好,我是终身学习的阿飞。 我做了个青柠檬读书会的公众号,每天分享我的学习、读书的内容,同时也会分享我的一些学习方式和一些软件推荐。 我最近在读《深度工作》,有点相见很晚的感觉。预计在下周会写一个读后感,发表在青柠檬读书会的公众号。欢迎你前来阅读 如果您有任何问题,可以在博客下方留言,我们一起探讨。 有兴趣可以关注,我们一起进步! 序 在昨天的

探讨Vue2.x的数据劫持是怎么实现的-爱代码爱编程

你好,我是终身学习的阿飞。 我做了个青柠檬读书会的公众号,每天分享我的学习、读书的内容,同时也会分享我的一些学习方式和一些软件推荐。 如果您有任何问题,可以在博客下方留言,我们一起探讨。 有兴趣可以关注我的博客,我们一起进步! 引言 Vue3.0已经到来,使用vue两年余的我,vue2.x原理学习才姗姗来迟。所幸,虽晚,却仍未晚。 当

Vue中的join()、reverse()、 split()三个函数用法解析-爱代码爱编程

先看代码,vue官方文档 var message = 'Hello Vue.js!' message.split('').reverse().join('')//"!sj.euV olleH split(' ')是分裂的意思,也就是把一个数据拆分 var vm = new Vue({ date:{ message=" Not split "

箭头函数的基本使用-爱代码爱编程

<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>Title</title> </head> <body> <script> // 箭头函数

编译的作用域-爱代码爱编程

<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>Title</title> </head> <body> <div id="app"> <

vue中solt插槽的基本使用-爱代码爱编程

<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>Title</title> </head> <body> <div id="app"> <

vue中v-model修饰符的使用-爱代码爱编程

<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>Title</title> </head> <body> <div id="app"> <

vue中v-model结合chexbox类型-爱代码爱编程

<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>Title</title> </head> <body> <div id="app"> <

vue中v-model结合radio类型-爱代码爱编程

<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>Title</title> </head> <body> <div id="app"> <

vue中v-model的本质-爱代码爱编程

<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>Title</title> </head> <body> <!--v-model的原理:相当于两个指

vue数组的响应式-爱代码爱编程

<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>Title</title> </head> <body> <div id="app"> 并

v-for使用时添加key-爱代码爱编程

<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>Title</title> </head> <body> <div id="app"> <

vue中计算属性的getter和setter-爱代码爱编程

<div id="app"> <h2>{{fullName}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', d

vue中计算属性computed和methods函数的对比-爱代码爱编程

<div id="app"> <!-- 1、通过字符串直接拼接,一般不适用,语法过于繁琐--> <h2>{{firstName+' '+lastName}}</h2> <h2>{{firstName}} {{lastName}}</h2> <!-- 2、直接定

vue中的插值操作-爱代码爱编程

1、mustache双大括号语法 mustache语法中,不仅仅可以直接写变量,也可以直接写简单的表达式 2、v-once指令 在某些情况下可能不希望界面随意的跟随改变,这时就可以使用Vue指令 1)此指令后面不需要跟任何表达式(比如之前的v-for后面是跟随一些表达式的) 2)该指令表示元素和组件,只渲染一次,不会跟着数据的改变而改变。 3、v-ht