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>


共有 0 条评论