render在javascript中的意思

JavaScript010

render在javascript中的意思,第1张

render是渲染的意思。

res.render(file,option)是express中专门渲染视图用的,首先你要在你的app.js或者index.js中设置一下渲染引擎,比如html,jade,handlebars(我自己使用的),mustache等。然后将视图模板的文件位置放入file,将传入的模板数据放入option对象中,模板引擎就能自己渲染出视图。给你推荐一个npm模块,express-handlebars,能很快搭建一个项目,你实践过,就能明白res.render.

而渲染,就是这样一个过程,浏览器根据页面的html代码、css定义、javascript脚本的操作,在浏览器上按照一定的规范(传说中的 DOCTYPE )显示出相应的内容。

举个最简单的例子:

<b>这个是粗体显示</b>

浏览器根据上面的代码在浏览器上面显示出粗体的文字,这个过程就叫渲染

简单的说,在vue中我们使用模板HTML语法来组建页面的,使用render函数我们可以用js语言来构建DOM。因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程。

当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定它的简写叫h

示例: 分别使用html语法和render函数来实现根据传入的 level (h1-h6)页面渲染不同的标题格式

【1】使用组件的形式

【2】使用render函数的形式(修改child1子组件)

render 函数即渲染函数,它是个函数,render 函数的返回值是VNode(即:虚拟节点,也就是我们要渲染的节点)

createElement 是 render 函数的参数,它本身也是个函数,并且有三个参数。接来下我们重点介绍这三个参数

【1】createElement 第一个参数是必填的,可以是String | Object | Function

示例:

【2】createElement 第二个参数是选填的,一个与模板中属性对应的数据对象 ****常用的有class | style | attrs | domProps | on

【3】createElement 第三个参数是选填的,代表子级虚拟节点 (VNodes),由 createElement() 构建而成,正常来讲接收的是一个字符串或者一个数组,一般数组用的是比较多的

在render函数中,没有提供v-model的实现,所以你必须自己实现相应的逻辑。这就是深入底层的代价,但与v-model相比,这可以让你更好地控制交互细节。

结果如下:

对于.passive,.capture, .once 这些事件修饰符, Vue 提供了相应的前缀可以用于 on

JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析。

复杂的render函数书写异常痛苦,这就是为什么会有一个Babel插件,用于在 Vue 中使用 JSX 语法,它可以让我们回到更接近于模板的语法上。

JSX语法学习文档: vuejs/JSX JSX语法简介