详解Vue 单文件组件的三种写法

 更新时间:2020年02月19日 15:58:36   作者:Oliver  
这篇文章主要介绍了详解Vue 单文件组件的三种写法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

JS构造选项写法

export defaul { data, methods, ...}

JS class写法

@Component
export default class Cpn extends Vue{
 counter = 0 //data
 add(){ //methods
  this.counter += 1
 }
}

TS class写法

@Component
export default class Cpn extends Vue{
 @Prop(Number) sum : number | undefined; 
 counter = 0; //data
 add(){ //methods
  this.counter += 1
 }
}

优先推荐第一种写法和第三种

  • 第一种更简洁
  • 第三种更严谨

到此这篇关于详解Vue 单文件组件的三种写法的文章就介绍到这了,更多相关Vue 单文件组件内容请搜素脚本之家以前的文章或下面相关文章,希望大家以后多多支持脚本之家!

相关文章

  • VUE渲染后端返回含有script标签的html字符串示例

    VUE渲染后端返回含有script标签的html字符串示例

    今天小编就为大家分享 一篇VUE渲染后端返回含有script标签的html字符串示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue POST请求头'Content-Type':'application/json;',data上传过程

    Vue POST请求头'Content-Type':'application/j

    这篇文章主要介绍了Vue POST请求头'Content-Type':'application/json;',data上传过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 详解swiper在vue中的应用(以3.0为例)

    详解swiper在vue中的应用(以3.0为例)

    这篇文章主要介绍了详解swiper在vue中的应用(以3.0为例),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue柱状进度条图像的完美实现方案

    vue柱状进度条图像的完美实现方案

    本文是对bar进度条实现的2种方案进行分享,第一种是很简单,纯css的实现,第二种是echart的实现。对vue柱状进度条图像的实现方案,感兴趣的朋友跟随小编一起看看吧
    2019-08-08
  • vue.js如何删除数组中指定索引的元素

    vue.js如何删除数组中指定索引的元素

    这篇文章主要介绍了vue.js如何删除数组中指定索引的元素问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 浅谈vue的几种绑定变量的值 防止其改变的方法

    浅谈vue的几种绑定变量的值 防止其改变的方法

    下面小编就为大家分享一篇浅谈vue的几种绑定变量的值 防止其改变的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 使用vue3-print-nb实现打印pdf分页代码示例

    使用vue3-print-nb实现打印pdf分页代码示例

    这篇文章主要介绍了使用vue3-print-nb实现打印pdf分页的相关资料,这种方法不仅适用于Vue3项目,也可以在其他前端框架中实现类似的打印分页功能,需要的朋友可以参考下
    2024-10-10
  • vue 中自定义指令改变data中的值

    vue 中自定义指令改变data中的值

    这篇文章主要介绍了vue 中自定义指令改变data中的值,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-06-06
  • Vue 使用v-model实现控制子组件显隐效果

    Vue 使用v-model实现控制子组件显隐效果

    v-model 可以实现双向绑定的效果,允许父组件控制子组件的显示/隐藏,同时允许子组件自己控制自身的显示/隐藏,本文给大介绍Vue 使用v-model实现控制子组件显隐,感兴趣的朋友一起看看吧
    2023-11-11
  • vue中实现打印功能的几种方法示例

    vue中实现打印功能的几种方法示例

    这篇文章主要给大家介绍了关于vue中实现打印功能的几种方法,打印功能在实际开发中非常常见,通常我们需要将网页中的某一部分或整个网页打印出来,需要的朋友可以参考下
    2023-09-09

最新评论