分享更有价值
被信任是一种快乐

vue渲染函数使用的命令是什么

文章页正文上

这篇文章主要介绍“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、父组件

2、子组件

到此,关于“vue渲染函数使用的命令是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注云技术网站,小编会继续努力为大家带来更多实用的文章!

相关推荐: css怎么给字体加粗

这篇文章主要介绍了css怎么给字体加粗的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css怎么给字体加粗文章都会有所收获,下面我们一起来看看吧。 免费云主机、域名 一、使用font-weight属性CSS的font-weight属…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册