这篇文章主要介绍“vue渲染函数使用的命令是什么”,在日常操作中,相信很多人在vue渲染函数使用的命令是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue渲染函数使用的命令是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧! vue渲染函数使用“render”命令。vue中是使用模板HTML语法组建页面的,使用render函数可以用js语言来构建DOM。因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render()函数构建DOM,vue就免去了转译的过程。在绝大多数情况下,Vue 推荐使用模板语法来创建应用。然而在某些使用场景下,我们真的需要用到 JavaScript 完全的编程能力。这时渲染函数–render就派上用场了。简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM。
因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程。当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具。官网上给它起了个名字叫createElement。还有约定的简写叫h。Vue 通过建立一个虚拟 DOM 来追踪自己要如何改变真实 DOM。请仔细看这行代码:
returncreateElement('h2',this.blogTitle)
createElement 到底会返回什么呢?其实不是一个实际的 DOM 元素。它更准确的名字可能是createNodeDescription,因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点,包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”,也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。
//@returns{VNode} createElement( //{String|Object|Function} //一个HTML标签名、组件选项对象,或者 //resolve了上述任何一种的一个async函数。必填项。 'div', //{Object} //一个与模板中属性对应的数据对象。可选。 { //(详情见1.3) }, //{String|Array} //子级虚拟节点(VNodes),由`createElement()`构建而成, //也可以使用字符串来生成“文本虚拟节点”。可选。 [ '先写一些文字', createElement('h2','一则头条'), createElement(MyComponent,{ props:{ someProp:'foobar' } }) ] )
render:(h)=>{ returnh('div',{ //给div绑定class属性 class:{ child:true, more:false }, //给div绑定样式 style:{ width:'200px', height:'200px', }, //给div绑定点击事件 on:{ click:()=>{ console.log('点击事件') } }, }) }
正如 v-bind:class 和 v-bind:style 在模板语法中会被特别对待一样,它们在 VNode 数据对象中也有对应的顶层字段。该对象也允许你绑定普通的 HTML attribute,也允许绑定如 innerHTML 这样的 DOM 属性 (这会覆盖 v-html 指令)
{ //与`v-bind:class`的API相同, //接受一个字符串、对象或字符串和对象组成的数组 'class':{ foo:true, bar:false }, //与`v-bind:style`的API相同, //接受一个字符串、对象,或对象组成的数组 style:{ color:'red', fontSize:'14px' }, //普通的HTMLattribute attrs:{ id:'foo' }, //组件prop props:{ myProp:'bar' }, //DOM属性 domProps:{ innerHTML:'baz' }, //事件监听器在`on`属性内, //但不再支持如`v-on:keyup.enter`这样的修饰器。 //需要在处理函数中手动检查keyCode。 on:{ click:this.clickHandler }, //仅用于组件,用于监听原生事件,而不是组件内部使用 //`vm.$emit`触发的事件。 nativeOn:{ click:this.nativeClickHandler }, //自定义指令。注意,你无法对`binding`中的`oldValue` //赋值,因为Vue已经自动为你进行了同步。 directives:[ { name:'my-custom-directive', value:'2', expression:'1+1', arg:'foo', modifiers:{ bar:true } } ], //作用域插槽的格式为 //{name:props=>VNode|Array} scopedSlots:{ default:props=>createElement('span',props.text) }, //如果组件是其它组件的子组件,需为插槽指定名称 slot:'name-of-slot', //其它特殊顶层属性 key:'myKey', ref:'myRef', //如果你在渲染函数中给多个元素都应用了相同的ref名, //那么`$refs.myRef`会变成一个数组。 refInFor:true }
组件树中的所有 VNode 必须是唯一的。这意味着,下面的渲染函数是不合法的:
render:function(createElement){ varmyParagraphVNode=createElement('p','hi') returncreateElement('div',[ //错误-重复的VNode myParagraphVNode,myParagraphVNode ]) }
如果你真的需要重复很多次的元素/组件,你可以使用工厂函数来实现。例如,下面这渲染函数用完全合法的方式渲染了 20 个相同的段落:
render:function(createElement){ returncreateElement('div', Array.apply(null,{length:20}).map(function(){ returncreateElement('p','hi') }) ) }
//app.vue(根组件)
//myRender.vue
只要在原生的 JavaScript 中可以轻松完成的操作,Vue 的渲染函数就不会提供专有的替代方法。1、v-if 和 v-for 模板语法中:
- {{item.name}}
Noitemsfound.
Noitemsfound.render函数实现:
2、v-model
this.$slots的用法1、父组件
头部脚部
2、子组件
this.$scopedSlots的用法1、父组件
{{childMsg.text}}
2、子组件
到此,关于“vue渲染函数使用的命令是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注云技术网站,小编会继续努力为大家带来更多实用的文章!
这篇文章主要介绍了css怎么给字体加粗的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css怎么给字体加粗文章都会有所收获,下面我们一起来看看吧。 免费云主机、域名 一、使用font-weight属性CSS的font-weight属…