Vue.js单文件组件(SFC)通常包含模板、脚本和样式三个部分,方便在一个文件中管理组件的所有相关代码。
模板: 基于HTML,并增加了数据绑定和指令,例如v-if
、v-for
、v-bind
、v-
等,用于响应式地显示数据和处理事件。
脚本: 使用<script>
标签定义组件的数据、方法、生命周期钩子等。export default
语句用于导出组件实例,数据属性(data)通常是声明式的,变化会触发视图更新。方法(methods)定义组件行为,如处理用户操作。生命周期钩子(lifecycle hooks)允许在组件不同阶段执行特定操作,如created()
、mounted()
、updated()
等。
样式: 使用<style>
标签添加组件的CSS样式。Vue.js支持局部样式,组件内部的样式只会作用于该组件,避免了样式冲突。可以通过scoped
属性进一步限制样式的应用范围。
暂无评论