6 Vue渲染页面 html模版、template模版、render渲染函数

Vue渲染页面可使用html模版、template模版、render渲染函数;渲染过程的底层原理:模版[string形式] -> 编译 -> ast语法树 ->数据绑定 -> render函数 -> VNode/虚拟dom -> 真实的html;直接使用render渲染函数,跑起来速度是最快的,所以Vue项目开发过程中推荐使用render函数;

1、html模版:<div id="app">{{name}}</div>;//页面中可进行数据绑定的html代码,这些模版也是合法的HTML,经过Vue系统最终转换为真实的html,其就可被浏览器和HTML解析器解析;

2、template模版:其直接使用有很大的局限性,往往配合组件使用;

(1).其会直接覆盖掉html模版;(2).其只能有一个根节点,不能出现兄弟节点;(3).当有多个同类名的HTML元素,template只能覆盖掉第一个元素[本质:选择器使用的querySelector();只能选择首个元素,(3)有些牵强];

区别于template标签:其的使用不会占用“代码结构”,减少代码冗余,注意区分于template模版,两者的聚焦点不同;

3、render渲染函数:

(1).render函数的第一种使用方法:

(2).render函数的第二种使用方法:

(3).render函数的第三种使用方法:

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,454评论 0 29
  • 前几天想学学Vue中怎么编写可复用的组件,提到要对Vue的render函数有所了解。可仔细一想,对于Vue的ren...
    kangaroo_v阅读 116,268评论 13 171
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 12,006评论 0 25
  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 8,654评论 0 25
  • 以下内容是我在学习和研究Vue时,对Vue的特性、重点和注意事项的提取、精练和总结,可以做为Vue特性的字典; 1...
    科研者阅读 14,770评论 3 24