Vue.js -- 单文件组件

vue 单文件组件

    • 单文件组件
      • 1. 组成
      • 2. lang 属性
      • 3. src 属性
      • 4. 有作用域的 CSS
        • 混用本地和全局样式
      • 5. 资源路径处理
        • 绝对路径前缀
        • 相对路径前缀
        • 特殊前缀

单文件组件

vue 的单文件组件是官方提供的一种用来组织组件代码的形式,该文件以 .vue 为后缀,该文件会被 vue-cli 内置的 webpack 解析生成对应的 javascripthtmlcss 文件

https://vue-loader-v14.vuejs.org/zh-cn/start/spec.html

1. 组成






单文件组件把一个组件所包含的 结构样式行为 分别通过 templatestylescript 进行分离包含,然后统一组织在一个文件中

一个单文件组件最少必须包含 template,可以不需要 scriptstyle

2. lang 属性

无论是 templatescript 还是 style,都可以通过 lang 属性来指定它们所使用的语言






3. src 属性

我们还可以通过 src 属性把文件分离到单独的文件中




这里的 src 同样遵循模块化的导入规则,./ 开头的表示相对路径,/ 开头表示 NPM 包中的资源

4. 有作用域的 CSS

style 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装




解析后:




混用本地和全局样式




5. 资源路径处理

在项目开发中,我们经常会碰到要引入外部资源的需求,vue 单文件系统中,对资源引入路径有一定的特殊处理

  • 绝对路径前缀
  • 相对路径前缀
  • 特殊前缀

绝对路径前缀

就是以 /https://kaikeba.com/ 等这样的绝对路径开头的,不做任何处理,直到被浏览器解析

相对路径前缀

就是以 ./../ 这样的相对路径开头的,将会被看作相对的模块依赖,并按照你的本地文件系统上的目录结构进行解析,如: 解析后:,类似的还包括 background: url(...)@import

特殊前缀

  • 如果路径以 @ 开头,也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias,这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src

你可能感兴趣的:(Vue.js,vue,js,javascript,vue.js,前端)