您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue渲染函數(shù)使用的命令是什么”,在日常操作中,相信很多人在vue渲染函數(shù)使用的命令是什么問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對(duì)大家解答”vue渲染函數(shù)使用的命令是什么”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
vue渲染函數(shù)使用“render”命令。vue中是使用模板HTML語法組建頁面的,使用render函數(shù)可以用js語言來構(gòu)建DOM。因?yàn)関ue是虛擬DOM,所以在拿到template模板時(shí)也要轉(zhuǎn)譯成VNode的函數(shù),而用render()函數(shù)構(gòu)建DOM,vue就免去了轉(zhuǎn)譯的過程。
在絕大多數(shù)情況下,Vue 推薦使用模板語法來創(chuàng)建應(yīng)用。然而在某些使用場(chǎng)景下,我們真的需要用到 JavaScript 完全的編程能力。這時(shí)渲染函數(shù)--render就派上用場(chǎng)了。
簡單的說,在vue中我們使用模板HTML語法組建頁面的,使用render函數(shù)我們可以用js語言來構(gòu)建DOM。 因?yàn)関ue是虛擬DOM,所以在拿到template模板時(shí)也要轉(zhuǎn)譯成VNode的函數(shù),而用render函數(shù)構(gòu)建DOM,vue就免去了轉(zhuǎn)譯的過程。
當(dāng)使用render函數(shù)描述虛擬DOM時(shí),vue提供一個(gè)函數(shù),這個(gè)函數(shù)是就構(gòu)建虛擬DOM所需要的工具。官網(wǎng)上給它起了個(gè)名字叫createElement。還有約定的簡寫叫h。
Vue 通過建立一個(gè)虛擬 DOM 來追蹤自己要如何改變真實(shí) DOM。請(qǐng)仔細(xì)看這行代碼:
return createElement('h2', this.blogTitle)
createElement 到底會(huì)返回什么呢?其實(shí)不是一個(gè)實(shí)際的 DOM 元素。它更準(zhǔn)確的名字可能是createNodeDescription,因?yàn)樗男畔?huì)告訴 Vue 頁面上需要渲染什么樣的節(jié)點(diǎn),包括及其子節(jié)點(diǎn)的描述信息。我們把這樣的節(jié)點(diǎn)描述為“虛擬節(jié)點(diǎn) (virtual node)”,也常簡寫它為“VNode”?!疤摂M DOM”是我們對(duì)由 Vue 組件樹建立起來的整個(gè) VNode 樹的稱呼。
// @returns {VNode}
createElement(
// {String | Object | Function}
// 一個(gè) HTML 標(biāo)簽名、組件選項(xiàng)對(duì)象,或者
// resolve 了上述任何一種的一個(gè) async 函數(shù)。必填項(xiàng)。
'div',
// {Object}
// 一個(gè)與模板中屬性對(duì)應(yīng)的數(shù)據(jù)對(duì)象??蛇x。
{
// (詳情見1.3)
},
// {String | Array}
// 子級(jí)虛擬節(jié)點(diǎn) (VNodes),由 `createElement()` 構(gòu)建而成,
// 也可以使用字符串來生成“文本虛擬節(jié)點(diǎn)”??蛇x。
[
'先寫一些文字',
createElement('h2', '一則頭條'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
render:(h) => {
return h('div',{
// 給div綁定class屬性
class: {
child: true,
more: false
},
// 給div綁定樣式
style:{
width:'200px',
height:'200px',
},
// 給div綁定點(diǎn)擊事件
on: {
click: () => {
console.log('點(diǎn)擊事件')
}
},
})
}
正如 v-bind:class 和 v-bind:style 在模板語法中會(huì)被特別對(duì)待一樣,它們?cè)?VNode 數(shù)據(jù)對(duì)象中也有對(duì)應(yīng)的頂層字段。該對(duì)象也允許你綁定普通的 HTML attribute,也允許綁定如 innerHTML 這樣的 DOM 屬性 (這會(huì)覆蓋 v-html 指令)
{
// 與 `v-bind:class` 的 API 相同,
// 接受一個(gè)字符串、對(duì)象或字符串和對(duì)象組成的數(shù)組
'class': {
foo: true,
bar: false
},
// 與 `v-bind:style` 的 API 相同,
// 接受一個(gè)字符串、對(duì)象,或?qū)ο蠼M成的數(shù)組
style: {
color: 'red',
fontSize: '14px'
},
// 普通的 HTML attribute
attrs: {
id: 'foo'
},
// 組件 prop
props: {
myProp: 'bar'
},
// DOM 屬性
domProps: {
innerHTML: 'baz'
},
// 事件監(jiān)聽器在 `on` 屬性內(nèi),
// 但不再支持如 `v-on:keyup.enter` 這樣的修飾器。
// 需要在處理函數(shù)中手動(dòng)檢查 keyCode。
on: {
click: this.clickHandler
},
// 僅用于組件,用于監(jiān)聽原生事件,而不是組件內(nèi)部使用
// `vm.$emit` 觸發(fā)的事件。
nativeOn: {
click: this.nativeClickHandler
},
// 自定義指令。注意,你無法對(duì) `binding` 中的 `oldValue`
// 賦值,因?yàn)?nbsp;Vue 已經(jīng)自動(dòng)為你進(jìn)行了同步。
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// 作用域插槽的格式為
// { name: props => VNode | Array<VNode> }
scopedSlots: {
default: props => createElement('span', props.text)
},
// 如果組件是其它組件的子組件,需為插槽指定名稱
slot: 'name-of-slot',
// 其它特殊頂層屬性
key: 'myKey',
ref: 'myRef',
// 如果你在渲染函數(shù)中給多個(gè)元素都應(yīng)用了相同的 ref 名,
// 那么 `$refs.myRef` 會(huì)變成一個(gè)數(shù)組。
refInFor: true
}
組件樹中的所有 VNode 必須是唯一的。
這意味著,下面的渲染函數(shù)是不合法的:
render: function (createElement) {
var myParagraphVNode = createElement('p', 'hi')
return createElement('div', [
// 錯(cuò)誤 - 重復(fù)的 VNode
myParagraphVNode, myParagraphVNode
])
}
如果你真的需要重復(fù)很多次的元素/組件,你可以使用工廠函數(shù)來實(shí)現(xiàn)。
例如,下面這渲染函數(shù)用完全合法的方式渲染了 20 個(gè)相同的段落:
render: function (createElement) {
return createElement('div',
Array.apply(null, { length: 20 }).map(function () {
return createElement('p', 'hi')
})
)
}
// app.vue (根組件)
<template>
<div id="app">
<myRender></myRender>
</div>
</template>
<script>
import myRender from './components/myRender'
export default {
components:{
myRender
}
}
</script>
// myRender.vue
<script>
export default {
render:(h) => {
return h('div',{
class: {
child: true,
more: false
},
attrs: {
id: 'foo',
name: 'child'
},
style: {
width:'100%',
height:'200px',
},
domProps: {
innerHTML: '我是render渲染的子組件'
}
})
}
}
</script>
<style scoped>
.child {
background: pink
font-size 24px
letter-spacing 2px
}
.more {
background: red
}
</style>
<script>
export default {
render:(h) => {
return h('div',
{
class: 'wrapper',
attrs: {
id: 'wrapper',
},
style: {
width:'100%',
height:'250px'
},
},[
h('h3','標(biāo)題'),
h('div',{
class: 'content',
attrs: {
id: 'content',
},
style:{
width:'800px',
height:'100px'
},
domProps:{
innerHTML:'我是內(nèi)容'
}
})
]
)
}
}
</script>
<style scoped>
.wrapper
background: pink
letter-spacing 2px
.content
margin 0 auto
background: red
color #ffffff
font-size 24px
</style>
只要在原生的 JavaScript 中可以輕松完成的操作,Vue 的渲染函數(shù)就不會(huì)提供專有的替代方法。
1、v-if 和 v-for 模板語法中:
<ul v-if="items.length">
<li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>
<script>
export default {
data(){
return{
items:[1,2,3]
}
}
}
</script>
render函數(shù)實(shí)現(xiàn):
<script>
export default {
render: function (createElement) {
if (this.items.length) {
return createElement('ul', this.items.map(function (item) {
return createElement('li', item.name)
}))
} else {
return createElement('p', 'No items found.')
}
},
data(){
return{
items:[1,2,3]
}
}
}
</script>
2、v-model
<script>
export default {
render:function(createElement) {
var self = this
return createElement('div',[
createElement('div',{class: 'showContent'},self.inputValue),
createElement('input',{
class: 'content',
domProps:{
value:self.inputValue
},
on:{
input:function(event){
self.inputValue = event.target.value
}
}
})
]
)
},
data(){
return{
inputValue:''
}
},
watch:{
inputValue:function(){
console.log(this.inputValue)
}
},
}
</script>
<style scoped>
.showContent
font-size 32px
letter-spacing 2px
.content
margin 10px auto
color blue
font-size 24px
</style>
this.$slots的用法
1、父組件
<template>
<div id="app">
<myRender>
<template v-slot:header>
<div >
頭部
</div>
</template>
<template #footer>
<div >
腳部
</div>
</template>
</myRender>
</div>
</template>
<script>
import myRender from './components/myRender'
export default {
components:{
myRender
}
}
</script>
2、子組件
<script>
export default {
render:function(createElement) {
let childHeader = this.$slots.header
let childFooter = this.$slots.footer
return createElement(
'div',
{
class: 'showContent',
style:{
width:'100%'
}
},
[
createElement('div',{class:'childHeader'},childHeader),
createElement('div',childFooter),
]
)
},
}
</script>
<style scoped>
.showContent
letter-spacing 2px
background-color red
.childHeader
color blue
font-size 24px
</style>
this.$scopedSlots的用法
1、父組件
<template>
<div id="app">
<myRender :myLayout="layout">
<template slot-scope="childMsg">
<div >
{{childMsg.text}}
</div>
</template>
</myRender>
</div>
</template>
<script>
import myRender from './components/myRender'
export default {
data(){
return{
layout:{
header:'頭部',
footer:'腳部'
}
}
},
components:{
myRender
}
}
</script>
2、子組件
<script>
export default {
render:function(createElement) {
let self = this
return createElement(
'div',
{
style:{
width:'100%'
},
},[
self.$scopedSlots.default({
text: this.myLayout.header
})
]
)
},
props:{
myLayout:Object
}
}
</script>
到此,關(guān)于“vue渲染函數(shù)使用的命令是什么”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。