学习vue容易忽视的细节

Posted 2020-10-10 小目标

1、对于自定义标签名（组件名称），Vue.js 不强制要求遵循 W3C 规则 (小写，并且包含一个短杠)，尽管遵循这个规则比较好。html 特性是不区分大小写的。所以，当使用的不是字符串模板，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名：

Vue.component(‘child‘, {
  // camelCase in javascript
  props: [‘myMessage‘],
  template: ‘<span>{{ myMessage }}</span>‘
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

2、如果是webpack进行打包的话，template部分会预编译成render函数。vue-loader做的事只是把.vue文件中的template与style编译到.js（编译到render函数），并混合到你在.vue中export出来的符合component定义的Object中。

3、vue格式的文件使用类似HTML的语法描述vue组件。每个.vue文件包含三种最基本的语言块：

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

<script>
export default {
  data () {
    return {
      msg: ‘Hello world!‘
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

vue-loader会解析这个文件中的每个语言块，然后传输到其它的loaders，最终输出到module.exports是vue组件的配置对象的CommonJS模块。

vue-loader通过指定语言块的lang属性支持css预编译、html编译模板等语言格式。如在组件的style块中使用sass 

<style lang="sass">
  /* write SASS! */
</style>

当vue-loader在同一个项目中检测到babel-loader或者buble-loader的存在时，会用他们来处理*.vue文件中。例如：

<script>
import ComponentA from ‘./ComponentA.vue‘
import ComponentB from ‘./ComponentB.vue‘

export default {
  components: {
    ComponentA,
    ComponentB
  }
}
</script>

使用ES2015对象的简写来定义子组件，{ ComponentA }是{ ComponentA: ComponentA }的简写。vue将会自动把键转换为component-a。

当一个style标签带有scoped属性，它的css只应用于当前组件的元素。

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

转换为

<style>
.example[_v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" _v-f3f3eg9>hi</div>
</template>