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

文章目录

  • render 渲染
      • 第一种用法
      • 第二种用法
  • 单文件组件运用

render 渲染

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

第一种用法

Vue.js知识点总结 (单文件组件)_第1张图片

第二种用法

Vue.js知识点总结 (单文件组件)_第2张图片

单文件组件运用

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

开始写单文件组件,如下图所示:
Vue.js知识点总结 (单文件组件)_第3张图片

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

接下来,我们来改一下代码,看下代码改变后重新渲染的结果。
Vue.js知识点总结 (单文件组件)_第4张图片

关于单文件导入的渲染,是层层导入后渲染到页面上,如下图蓝框红线之间的顺序所示
Vue.js知识点总结 (单文件组件)_第5张图片

效果如图所示,我们渲染了中间那几个字
Vue.js知识点总结 (单文件组件)_第6张图片

再加个img标签,添加图片
Vue.js知识点总结 (单文件组件)_第7张图片

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


你可能感兴趣的:(前端_Vue.js)