详解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 单文件组件内容请搜素我们以前的文章或下面相关文章，希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vuejs 单文件组件.vue 文件的使用

    vuejs 自定义了一种.vue文件,可以把html, css, js 写到一个文件中,从而实现了对一个组件的封装, 一个.vue 文件就是一个单独的组件.由于.vue文件是自定义的,浏览器不认识,所以需要对该文件进行解析. 在webpack构建中,需要安装vue-loader 对.vue文件进行解析.在 sumlime 编辑器中,我们 书写.vue 文件,可以安装vue syntax highlight 插件,增加对文件的支持. 用vue-cli 新建一个vue项目,看一下.vue文件长什么样

  • Vuejs实现带样式的单文件组件新方法

    Vuejs实现带样式的单文件组件新方法

    本文实例为大家分享了Vuejs实现单文件组件的方法,供大家参考,具体内容如下 代码如下: example.html <script src="vue.js"></script> <div id="example"> <h3>Vue component<h3> <counter></counter> <counter></counter> </div>

  • 解决vue 单文件组件中样式加载问题

    在写单文件组件时,一般都是把标签.脚本.样式写到一起,这样写个人感觉有点不够简洁,所以就想着把样式分离出去. 采用import加载样式 在局部作用域(scoped)采用@import加载进来的样式文件,想法是美好的.以为这样加载进来的样式文件也只对当前组件有效:可现实是残酷的,这样加载进来的样式无法限制其作用域. <style scoped> @import "样式文件"; </style> 解决方案 采用 src属性加载样式. <style src=&q

  • Vue单文件组件基础模板小结

    背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点,童鞋们可以在评论里帮我补充:因为有这么多优点,所以决定有必要将vue组件的常用配置项提炼出来,形成一个组件模板,方便日后项目开发复用 <template> <div> <h1>{{title}}</h1> <ChildComponents></

  • 基于Vue单文件组件详解

    基于Vue单文件组件详解

    本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图.但当在更复杂的项目中,或者前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显: 1.全局定义 (Global definitions) 强制要求每个 compon

  • 关于单文件组件.vue的使用

    vuejs 自定义了一种.vue文件,可以把html, css, js 写到一个文件中,从而实现了对一个组件的封装, 一个.vue 文件就是一个单独的组件.由于.vue文件是自定义的,浏览器不认识,所以需要对该文件进行解析. 在webpack构建中,需要安装vue-loader 对.vue文件进行解析.在 sumlime 编辑器中,我们 书写.vue 文件,可以安装vue syntax highlight 插件,增加对文件的支持. 环境搭建完毕,利用vue-router实现了页面跳转,那么现在要

  • Vuejs 单文件组件实例详解

    在之前的实例中,我们都是通过 Vue.component 或者 components 属性的方式来定义组件,这种方式在很多中小规模的项目中还好,但在复杂的项目中,下面这些缺点就非常明显了: 字符串模板:缺乏高亮,书写麻烦,特别是 HTML 多行的时候,虽然可以将模板写在 html 文件中,但是侵入性太强,不利于组件解耦分离. 不支持CSS:意味着当 HTML 和 JavaScript 组件化时,CSS明显被遗漏了 没有构建步骤:限制只能使用 HTML 和 ES5 JavaScript,而不能使用

  • vue.js单文件组件中非父子组件的传值实例

    最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官网中说明如下: 非父子组件通信: 有时候两个组件也需要通信 (非父子关系).在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线: var bus = new Vue(): // 触发组件 A 中的事件 bus.$emit('id-selected', 1) // 在组件 B 创建的钩子中

  • Vue单文件组件的如何使用方式介绍

    在很多 vue项目中,我们使用 vue.component 来定义全局组件,紧接着用 new vue(el: ")在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图. 但挡在更复杂的项目中,或者你的前端完全由 javascript 驱动的时候,下面这些缺点将变得非常明显: 全局定义 (global definitions)强制要求每个 component 中的命名不能重复 字符串模板 (string template

  • 详解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

  • 详解vue为什么要求组件模板只能有一个根元素

    我是在知乎上看到的这个问题,转念一想,用了大半年的vue,好像真的没有了解过: '为什么只能有且只有一个根元素' 于是我花了二十多分钟去找了一下答案......竟然没有找到答案.... 好的现在我来说说我的理解,如果有不对的地方欢迎指出. 我觉得这个问题需要从两个方面来说起: 1.new Vue({el:'#app'}) 2.单文件组件中,template下的元素div 一.当我们实例化Vue的时候,填写一个el选项,来指定我们的SPA入口: let vm = new Vue({ el:'#ap

  • 详解Vue.js3.0 组件是如何渲染为DOM的

    本文主要是讲述 Vue.js 3.0 中一个组件是如何转变为页面中真实 DOM 节点的.对于任何一个基于 Vue.js 的应用来说,一切的故事都要从应用初始化「根组件(通常会命名为 APP)挂载到 HTML 页面 DOM 节点(根组件容器)上」说起.所以,我们可以从应用的根组件为切入点. 主线思路:聚焦于一个组件是如何转变为 DOM 的. 辅助思路: 涉及到源代码的地方,需要明确标记源码所在文件,同时将 TS 简化为 JS 以便于直观理解 思路每前进一步要能够得出结论 尽量总结归纳出流程图 应用

  • vue单文件组件的实现

    vue单文件组件的实现

    最近翻阅了一下vue.发觉有一个单文件组件之前基本忽视掉了.vue.js中的单文件组件允许在一个文件中定义一个组件的所有内容.也就是说,一个页面或者是一个组件,我们想将他们捆绑在一起,那么vue的这个单文件组件可以做到.正如vue的官网说的,"在很多 Vue 项目中,我们使用 app.component 来定义全局组件,紧接着用 app.mount('#app') 在每个页面内指定一个容器元素."这里的组件,都是相对简单的,而面对一个比较复杂的项目,这种方式就行不通.原因如下: 全局定

  • vue单文件组件无法获取$refs的问题

    记录一下学习webpack+vue碰到的一个大坑,踩这个坑是我才疏学浅的表现,特此引以为戒.因为该坑实在是太坑了! 代码 header.html <body> <div id="popup-wrap"> <popup ref="popup"></popup> </div> </body> header.js import popup from '../../components/popup/po

  • 详解Redis集群搭建的三种方式

    一.单节点实例 单节点实例还是比较简单的,平时做个测试,写个小程序如果需要用到缓存的话,启动一个 Redis 还是很轻松的,做为一个 key/value 数据库也是可以胜任的 二.主从模式(master/slaver) redis 主从模式配置 主从模式: redis 的主从模式,使用异步复制,slave 节点异步从 master 节点复制数据,master 节点提供读写服务,slave 节点只提供读服务(这个是默认配置,可以通过修改配置文件 slave-read-only 控制).master

  • 详解Nginx 虚拟主机配置的三种方式(基于IP)

    Nginx配置虚拟主机支持3种方式:基于IP的虚拟主机配置,基于端口的虚拟主机配置,基于域名的虚拟主机配置. 详解Nginx 虚拟主机配置的三种方式(基于端口) https://www.jb51.net/article/14977.htm 详解Nginx 虚拟主机配置的三种方式(基于域名) https://www.jb51.net/article/14978.htm 1.基于IP的虚拟主机配置 如果同一台服务器有多个IP,可以使用基于IP的虚机主机配置,将不同的服务绑定在不同的IP上. 1.1

  • 详解Nginx 虚拟主机配置的三种方式(基于端口)

    Nginx配置虚拟主机支持3种方式:基于IP的虚拟主机配置,基于端口的虚拟主机配置,基于域名的虚拟主机配置. 详解Nginx 虚拟主机配置的三种方式(基于IP) https://www.jb51.net/article/14974.htm 详解Nginx 虚拟主机配置的三种方式(基于域名) https://www.jb51.net/article/14978.htm 2.Nginx基于端口的虚拟主机配置 如一台服务器只有一个IP或需要通过不同的端口访问不同的虚拟主机,可以使用基于端口的虚拟主机配

随机推荐