Vue3教程 2.使用setup定义参数和方法

2022-11-30 0 265

Vue3教程 2.使用setup定义参数和方法

在vue3是透过setup的形式来表述统计数据和模块,setup表达式是Vue3核心理念的句法,它将标识符都放在了setup中。

Vue3的setup和Vue2对照

template中的标识符跟vue2没啥变动,而已在采用v-for须要强制性明确要求存取key

{{ title }}

{{ num }}

{{ category }}hello

统计数据和形式标准化放在了setup中了

exportdefault {name:App,setup(){return {title:货品进行分类,num:30,categorys:[男装,男装,家用电器],hello (){alert(hello vue3);} }}}

上面是Vue2的读法

exportdefault {name:App,data (){return {title:货品进行分类,num:30,categorys:[男装,男装,家用电器],} },methods:{hello (){alert(hello vue3);} }}

整体而言标识符比以后短了,这种写模块和形式两把梭都放在了setup中了。

Vue3采用旧句法特别注意的点

在Vue3中依然能采用data和methods形式,或者说不所推荐。

完全相同中文名称

须要特别注意的是在setup和data与此同时表述完全相同的cp,优先选择采用的是setup

data (){return {title:进行分类}},setup(){return {title:货品进行分类}},

页面打印的“货品进行分类”

data (){return {title:进行分类} },setup(){letnum=30;return {num: num,hello (){console.log(num:${num})//报错title is not defined// console.log(title:${title})console.log(this.title:${this.title})} }}

打印输出:

num:30

this.title: undefined

总结

在Vue3中尽量采用setup表述模块和形式,虽然Vue2的data和methods依然能用,但是不太规范和会出现问题

Vue3教程 2.使用setup定义参数和方法
下一篇: vue是什么软件

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务