![](https://img-blog.csdnimg.cn/20210225091509449.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue3 教程从零到一
文章平均质量分 83
从 Vue3 基础语法,到组件原理、动画、代码设计,再到新语法扩展,全面系统地梳理 Vue 知识点;
即使Vue的新手、前端新手,也能读懂快速上手;
震撼着
这个作者很懒,什么都没留下…
展开
-
第六章 ① Vue3 - Composition API 产生背景、Vue3 - setup 函数的使用
Composition API 产生背景:当我们的组件变得更大时,业务逻辑关注点的代码也会变长,假如想找到某个在多处代码中有频繁操作的属性进行新需求的具体操作,会在100甚至更多行代码中跳来跳去,找到属于该属性的逻辑,尤其是刚接手项目的新人来说,这会导致组件难以阅读和理解。CompositionAPI中能够配置与相同逻辑问题相关的代码,这正是我们需要的。setup函数的使用:Composition API 所有代码编写之前,一定建立在setup函数之上;setup(props, cont原创 2021-03-05 17:13:10 · 191 阅读 · 1 评论 -
第五章 Vue 中的高级语法(含Vue3 Teleport 传送门功能、vue底层render函数的理解并使用、Vue模板渲染过程……)
5-1 Mixin 混入的基础语法组件中 data、methods 优先级高于mixin中 data、methods 优先级;底层:数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先;底层:同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用;生命周期函数,先执行 mixin 里面的,再执行组件中的;局部 mixin 使用时,需在每一层组件中注册mixins: [myMixin],const myMixin = { data(原创 2021-03-05 13:56:15 · 262 阅读 · 1 评论 -
第四章 Vue中的动画
一、使用 Vue 实现基础的 CSS 过渡与动画效果数据控制css交互css中书写样式;data中书写样式;<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-03-02 08:48:45 · 99 阅读 · 0 评论 -
第三章 Vue的组件理念
组件理念一、组件的定义及复用性,局部组件和全局组件1、组件具备复用性,而组件中的数据是独立的;2、app.component()定义的全局组件随时随地可以使用,但会一直占用内存,性能较低,使用简单;建议名字为小写字母单词,中间横线间隔;<script> const app = Vue.createApp({ template: ` <div> <counter-parent/>原创 2021-02-25 09:08:17 · 121 阅读 · 0 评论 -
第二章 Vue的基础语法
一、vue中应用和组件的基础概念createApp 表示,创建一个Vue应用,存储到app变量中;传入的参数表示,这个应用最外层的组件应该如何展示;MVvM 设计模式:m -> model 数据;v -> view 视图;vm -> viewModel 视图数据连接层;const vm = app.mount("#root");:vm代表的就是Vue应用的根组件,也是视图数据连接层;console.log(vm.$data.message):在根组件上,调用$dat原创 2021-02-23 09:22:33 · 351 阅读 · 2 评论 -
第一章 Vue语法初探
1、hello word{{}}:插值表达式,在标签中使用数据的语法;{{ "a" + "b" }}:之间可以插入 js 表达式;{{ if(true){console.log} }}:之间不可以插入 js 语句;Vue.createApp({}):创建Vue实例;Vue.createApp({}).mount('#root'):在#root节点置入Vue实例;template: <div>hello word</div>:值为字符串,是在HTML中显示的内容,为原创 2021-02-22 13:55:19 · 158 阅读 · 1 评论