.vue文件用于表示一个单一组件,其内使用类html语法,顶级标签有template,script,style和自定义的标签,一个完整简单的vue单文件如下

<template>
    <div class="example">{{msg}}</div>
</template>

<script>
export default {
    data(){
        return{
            msg:"hello world"
        }
    }
}
</script>

<style>
.example{
    
}
</style>

<custom-label>自定义标签</custom-label>

模板<template>


  • template里面包含该组件的html结构,可以在该组件内使用其他组件,需要在script中导入并写在components里面
  • 每个.vue文件只能有一个template标签
  • <template>标签下的根标签只能有一个,多于一个时在编译时会报错
  • <template>标签内的内容将被提取并传递给 vue-template-compiler 为字符串,预处理为 JavaScript 渲染函数,并最终注入到从<script> 导出的组件中

脚本<script>


  • 每个.vue文件只会包含一个<script>
  • 该脚本会作为一个ES Module来执行,通过export显示指定输出,再通过import输入,在这里其他组件就是通过使用import导入,再在export default中的components中输出
  • 在webpack中对.js配置的规则都会用于该标签上
  • 脚本默认导出一个Vue.js的组件选项对象,也可以由Vue.extend()创建的扩展对象

样式<style>


  • 一个.vue文件可以有多个<style>标签,由此我们就可以通过使用不同的lang属性,在同一个vue组件中同时使用less和sass(虽然一般不会这么做)
  • 可以在同一个组件中混用scoped和module属性
  • webpack中配置css文件的配置会应用在该标签上,如果设置了lang属性,为less时配置less标签的配置会应用在该标签上,sass也一样

自定义块


  • 自定义块可以通过在webpack中配置,用一个loader来编译对应的自定义块,在rules中使用resourceQuery来配置对应的自定义块
    配置<custom>标签
{
  module: {
    rules: [
      {
        resourceQuery: /blockType=custom/,
        loader: 'loader-to-use'
      }
    ]
  }
}
  • 如果找到自定义块的匹配规则,则会被对应的loader处理,否则会被忽略

参考文档:Vue单文件组件规范
vue-loader文档

Logo

前往低代码交流专区

更多推荐