标签：打包 特性 turn def rip 文件中 ret com 相对
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>
标签：打包 特性 turn def rip 文件中 ret com 相对
原文地址：http://www.cnblogs.com/happypayne/p/7643466.html
