003、单文件组件化

是什么

单文件组件化就是将html、css、js存在于同一个文件内。

实现原理

Webpack + vue-loader和Browerify + vueify这样的打包工具可以将 .vue类型的文件解读为浏览器可以识别的文件。

好处

1、template标签、style标签的lang属性，可以定义标签内的文本类型。可以加载预处理器，如style的css、less、sass；template的htm、jade。
2、style的scope属性，规定了作用域，防止污染其他作用域。

编程实现

1、编写单文件组件（.vue结尾的文件），由3部分组成；

<template></template>
<style></style>
<script></script>

2、使用：把组件用import引入、用conmponent注册、将组件标签嵌入到要显示的页面。

// js
import Hello from './component/Hello';// 引入组件
export default {
    component: {
        Hello
    }
}// 注册
// html
<hello></hello>

温馨提示：扫码可以提问、交流。本人有各个行业的小程序前端代码，如有需要也可以扫码留言哦。