Vue全家桶
文章平均质量分 92
Vue 2.0 + Vue 3.0。
子非鱼921
这个作者很懒,什么都没留下…
展开
-
【Vue】Vue3(1)
2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王)。耗时2年多、2600+次提交30+个RFC600+次PR99位贡献者。。什么是hook?—— 本质是一个函数,把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势:复用代码, 让setup中的逻辑更清楚易懂。原创 2024-10-20 11:44:59 · 556 阅读 · 0 评论 -
【Vue】Vue2(13)
作用:让不展示的路由组件保持挂载,不被销毁。分类:全局守卫、独享守卫、组件内守卫。实现路由跳转,让路由跳转更加灵活。作用:对路由进行权限控制。原创 2024-10-18 12:08:09 · 592 阅读 · 0 评论 -
【Vue】Vue2(12)
路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置。实现切换(active-class可配置高亮样式)vue的一个插件库,专门用来实现SPA应用。配置路由,声明接收params参数。作用:让路由组件更方便的收到参数。作用:可以简化路由的跳转。原创 2024-10-17 21:56:53 · 1142 阅读 · 0 评论 -
【Vue】Vue2(11)
【代码】【Vue】Vue2(11)原创 2024-10-16 23:19:38 · 658 阅读 · 0 评论 -
【Vue】Vue2(10)
我是默认的一些内容data() {return {games:['红色警戒','穿越火线','劲舞团','超级玛丽'],},原创 2024-10-15 18:14:37 · 1155 阅读 · 0 评论 -
【Vue】Vue2(9)
子组件 ===> 父组件。使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。绑定自定义事件:或......mounted(){若想让自定义事件只能触发一次,可以使用once修饰符,或$once方法。this.$emit('atguigu',数据)解绑自定义事件组件上也可以绑定原生DOM事件,需要使用native修饰符。注意:通过this.$refs.xxx.$on('atguigu',回调)原创 2024-10-15 15:25:53 · 766 阅读 · 0 评论 -
【Vue】Vue2(8)
组件化编码流程: (1) 拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。 (2) 实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用: 1) 一个组件在用:放在组件自身即可。 2) 一些组件在用:放在他们共同的父组件上(状态提升)。 (3) 实现交互:从绑定事件开始。props适用于: (1) 父组件 ==> 子组件 通信 (2) 子组件 ==> 父组件 通信(要求父先给子一个函数)原创 2024-10-14 11:32:48 · 459 阅读 · 0 评论 -
【Vue】Vue2(7)
备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。其中不能修改的文件名:public、favicon.ico、index.html、src、main.js。功能:让组件接收外部传过来的数据。功能:用于增强Vue。原创 2024-10-10 11:22:34 · 1460 阅读 · 0 评论 -
【Vue】Vue2(6)
文章目录1 生命周期1.1 引出生命周期1.2 分析生命周期1.3 总结生命周期2 非单文件组件2.1 基本使用2.2 几个注意点2.3 组件的嵌套2.4 VueComponent2.5 一个重要的内置关系3 单文件组件3.1 School.vue3.2 Student.vue3.3 App.vue3.4 main.jsindex.html1 生命周期1.1 引出生命周期<!DOCTYPE html><html> <head> <meta charse原创 2024-10-10 09:58:58 · 1095 阅读 · 0 评论 -
【Vue】Vue2(5)
文章目录1 收集表单数据2 过滤器3 内置指令3.1 v-text指令3.2 v-html指令3.3 v-cloak指令3.4 v-once指令3.5 v-pre指令4 自定义指令4.1 自定义指令4.2 回顾一个DOM操作1 收集表单数据<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>收集表单数据</title> <script typ原创 2024-10-09 21:05:37 · 1057 阅读 · 0 评论 -
【Vue】Vue2(4)
文章目录1 绑定样式2 条件渲染3 列表渲染3.1 基本列表3.2 key的原理3.3 列表过滤3.4 列表排序3.5 更新时的一个问题3.6 Vue监测数据改变的原理_对象3.7 模拟一个数据监测3.8 Vue.set的使用3.9 Vue监测数据改变的原理_数组3.10 总结Vue数据监视1 绑定样式<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>绑定样式&原创 2024-10-09 10:11:55 · 519 阅读 · 0 评论 -
【Vue】Vue2(3)
文章目录1 计算属性1.1 姓名案例_插值语法实现1.2 姓名案例_methods实现1.3 姓名案例_计算属性实现1.4 姓名案例_计算属性简写2 监视属性2.1 天气案例2.2 天气案例_监视属性2.3 天气案例_深度监视2.4 天气案例_监视属性_简写2.5 姓名案例_watch实现1 计算属性1.1 姓名案例_插值语法实现<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <原创 2024-10-08 19:43:09 · 1201 阅读 · 0 评论 -
【Vue】Vue2(2)
/ console.log(e.key, e.keyCode) //按键的名字(Enter),按键的编码(13)// writable:true, //控制属性是否可以被修改,默认值是false。// configurable:true //控制属性是否可以被删除,默认值是false。// console.log(this) //此处的this是vm。// console.log(this) //此处的this是vm。//age: number,number变化age不变。//不可枚举就不能遍历。原创 2024-10-08 19:02:57 · 806 阅读 · 0 评论 -
【Vue】Vue2(1)
v.$mount('#root') //第二种写法 mount挂载(解析之后,将内容放到页面上指定位置)//data的第二种写法:函数式 data: function(){},方法省略function。//el:'#root', //第一种写法。//阻止 vue 在启动时生成生产提示。//阻止 vue 在启动时生成生产提示。//阻止 vue 在启动时生成生产提示。//阻止 vue 在启动时生成生产提示。//阻止 vue 在启动时生成生产提示。name:'尚硅谷'//data的两种写法。原创 2024-09-28 20:28:28 · 977 阅读 · 0 评论