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

系列文章目录

   第一章 

论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.使用单文件组件
    • 动态组件:由于组件被引用为变量而不是作为字符串键来注册的,在 

       整体代码

      
      
      
      
      

      总结

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