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>