系列文章目录

   第一章 

论vue3.0和vue2.0区别之编程方式及例子详解

第二章

同一台电脑 实现 vue-cli2和vue-cli3同时并存 及 常见命令

第三章

vue3.0项目实战 - ElementUI框架版

第四章

【TypeScript】在vue3中遇到的问题及解决方案,未完待续

第五章

vue3.0项目实战系列文章 - 登录页面

第六章

vue3.0项目实战系列文章 - 使用周期函数

目录

系列文章目录

前言

一、关于setup?

1.Vue3 的一大特性函数 ---- setup

2.为什么使用setup?

二、登录页面两种写法

1.展示

2.普通的

3.使用单文件组件

总结

前言

坑千千万,踩好才有完美的框架~

一、关于setup?

1.Vue3 的一大特性函数 ---- setup

setup函数是处于 生命周期函数 beforeCreate 和 Created 之前的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的setup函数是 Composition API(组合API)的入口在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法在模板中使用

2.为什么使用setup?

data、computed、methods、watch 组织逻辑在大多数情况下都有效。然而,当我们的组件变得更大时,逻辑关注点的列表也会增长。这可能会导致组件难以阅读和理解,尤其是对于那些一开始就没有编写这些组件的人来说简直是噩梦。而通过setup可以将该部分抽离成函数,让其他开发者就不用关心该部分逻辑了。写一个大型组件时,逻辑关注点的列表很长,不利于维护和阅读;所以需要把一个逻辑关注点的代码收集在一起会更好,由此诞生组合式API,即vue中用到的setup。

二、登录页面两种写法

1.展示

一定要明确好使用哪套,两套并不是内容、特性通用! 

2.普通的

整体代码

3.使用单文件组件

动态组件:由于组件被引用为变量而不是作为字符串键来注册的,在 

 整体代码

总结

以上就是今天要讲的内容,本文仅仅简单介绍了登录页面的使用,未完待续。

推荐阅读

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: