Vue – Vue 组件基本说明

简介

Vue 组件由三部分组成,这三部分都由什么组成,本文讲述有那些细节需要注意的。

 

组成部分

Vue 组件

由三部分构成,分别如下

模板部分
<template></template>

交互部分
<script></script>

样式部分
<style></style>

 

 

template 模板

template 并不是一个真正意义上的元素标签,它在渲染时将会被忽略,但它有包裹元素内容的功能,在不能使用 div 元素包裹内容时,可以使用 template 模板包裹内容,而不出现样式问题。

script 交互

在 vue 文件中,script 交互区,必须固定写法:

export default { ... }

默认导出

在 vue 的成员属性中,data 属性不允许指定为对象类型,只能指定为方法类型

export default {
  data : {
     username: "zx"
   }
}

这样是错误做法,要使用 data 中的数据,需要使 data 属性指向 function 方法类型,在function 中返回对象型数据。

export default {
  data : function () {
        return {
            username : "zx"
        }
    }
}

简化为

export default {
  data () {
        return {
            username : "zx"
        }
    }
}

 

style 样式

vue 中的样式支持三种 loader 分别是

less

Sass( scss )

stylus

同样也支持基本的 css 样式

scoped 属性

因为Vue 作为一个SAP应用,在样式问题上,会出现一个问题,那就是每个组件的样式,在最后发布时会部分打包到一个样式中,这样每个组件中的样式是全局可用,这样非常容易出现不同的组件存在相同名字的样式,导致样式相互影响,而vue组件中的样式属性默认全局可用。

在<style scoped> 中,加入scoped属性,则表示该组件中的样式,只对该组件有效,不作为全局样式使用。

<style lang="less" scoped>
</style>

 

如果您喜欢本站,点击这儿不花一分钱捐赠本站

这些信息可能会帮助到你: 下载帮助 | 报毒说明 | 进站必看

修改版本安卓软件,加群提示为修改者自留,非本站信息,注意鉴别

THE END
分享
二维码
打赏
海报
Vue – Vue 组件基本说明
简介 Vue 组件由三部分组成,这三部分都由什么组成,本文讲述有那些细节需要注意的。   组成部分 Vue 组件 由三部分构成,分别如下 模板部分 <template></template> 交……
<<上一篇
下一篇>>