Vue.js知识点总结 (单文件组件)

模板 ——> 编译 ——> ast》数据 ——> render函数 ——> 虚拟dom ——> 真实html

运用单文件组件有注意事项，就是要提前搭建好脚手架，不然很容易踩坑的，我是踩了一晚上
搭建脚手架的博客在往期 >>>
Vue知识点总结(脚手架Vue CLI3)

开始写单文件组件，如下图所示：

上面这张图就是大概的引入形式解释

接下来，我们来改一下代码，看下代码改变后重新渲染的结果。

关于单文件导入的渲染，是层层导入后渲染到页面上，如下图蓝框红线之间的顺序所示

效果如图所示，我们渲染了中间那几个字

再加个img标签，添加图片

无需刷新页面，一旦数据改变并保存，页面就会实时渲染，
这种层层包装，将组建分离的方式就是单文件组件，做到了一件一件的拼装，使项目不臃肿在一个页面，而是分步渲染