vue レンダリング関数は「render」コマンドを使用します。 vue では、テンプレート HTML 構文を使用してページを構築し、レンダリング関数を使用して js 言語で DOM を構築できます。 vue は仮想 DOM であるため、テンプレートを取得するときに VNode 関数に変換する必要がありますが、render() 関数を使用して DOM を構築することで、vue は変換プロセスを省略します。
1. render 関数の概要
簡単に言えば、vue ではテンプレート HTML 構文を使用してページを構築します。render 関数を使用すると、js 言語を使用して構築できますそれ、DOM。 vue は仮想 DOM であるため、テンプレートを取得するときに VNode 関数に変換する必要がありますが、render 関数を使用して DOM を構築することで、vue の変換プロセスが不要になります。render 関数を使用して仮想 DOM を記述する場合、vue は仮想 DOM を構築するために必要なツールである関数を提供します。公式サイトではcreateElementという名前になっています。 h と呼ばれる合意された略語もあります。
1.1 仮想 DOM
Vue は、仮想 DOM を作成することで、実際の DOM をどのように変更するかを追跡します。このコード行を注意深く見てください:return createElement('h1', this.blogTitle)createElement 正確には何を返しますか?実際には実際の DOM 要素ではありません。より正確な名前は、createNodeDescription である可能性があります。これに含まれる情報は、子ノードの説明情報を含め、ページ上にどの種類のノードをレンダリングする必要があるかを Vue に伝えるためです。
このようなノードを「仮想ノード」と呼び、多くの場合「VNode」と省略されます。 「仮想 DOM」とは、Vue コンポーネント ツリーから構築された VNode ツリー全体を指します。
1.2 createElement で受け入れられるパラメータ// @returns {VNode}
createElement(
// {String | Object | Function}
// 一个 HTML 标签名、组件选项对象，或者
// resolve 了上述任何一种的一个 async 函数。必填项。
'div',
// {Object}
// 一个与模板中属性对应的数据对象。可选。
{
// (详情见1.3)
},
// {String | Array}
// 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
// 也可以使用字符串来生成“文本虚拟节点”。可选。
[
'先写一些文字',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
1.3 render 関数の使用 render:(h) => {
return h('div',{
// 给div绑定class属性
class: {
child: true,
more: false
},
// 给div绑定样式
style:{
width:'200px',
height:'200px',
},
// 给div绑定点击事件
on: {
click: () => {
console.log('点击事件')
}
},
})
}
1.4 詳細なレンダリング関数データ オブジェクト
v-bind:class と v-bind:style と同様に、テンプレート構文 同様に扱われ、VNode データ オブジェクト内にも対応する最上位フィールドがあります。このオブジェクトを使用すると、通常の HTML 属性だけでなく、innerHTML などの DOM 属性もバインドできます (これにより v-html ディレクティブがオーバーライドされます){
// 与 `v-bind:class` 的 API 相同，
// 接受一个字符串、对象或字符串和对象组成的数组
'class': {
foo: true,
bar: false
},
// 与 `v-bind:style` 的 API 相同，
// 接受一个字符串、对象，或对象组成的数组
style: {
color: 'red',
fontSize: '14px'
},
// 普通的 HTML attribute
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<VNode> }
scopedSlots: {
default: props => createElement('span', props.text)
},
// 如果组件是其它组件的子组件，需为插槽指定名称
slot: 'name-of-slot',
// 其它特殊顶层属性
key: 'myKey',
ref: 'myRef',
// 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
// 那么 `$refs.myRef` 会变成一个数组。
refInFor: true
}
1.5 制約
#コンポーネント ツリー内のすべての VNode は一意である必要があります。これは、次のレンダリング関数が不正であることを意味します:
render: function (createElement) {
var myParagraphVNode = createElement('p', 'hi')
return createElement('div', [
// 错误 - 重复的 VNode
myParagraphVNode, myParagraphVNode
])
}本当に要素/コンポーネントを何度も繰り返す必要がある場合は、ファクトリ関数を使用してそれを実現できます。
たとえば、次のレンダリング関数は、完全に合法的な方法で 20 の同一の段落をレンダリングします:
render: function (createElement) {
return createElement('div',
Array.apply(null, { length: 20 }).map(function () {
return createElement('p', 'hi')
})
)
}2. レンダリング関数のアプリケーション2.1 単純な要素をレンダリングする// 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>
##2.2 サブタグを追加する <script>
export default {
render:(h) => {
return h('div',
{
class: 'wrapper',
attrs: {
id: 'wrapper',
},
style: {
width:'100%',
height:'250px'
},
},[
h('h2','标题'),
h('div',{
class: 'content',
attrs: {
id: 'content',
},
style:{
width:'800px',
height:'100px'
},
domProps:{
innerHTML:'我是内容'
}
})
]
)
}
}
</script>
<style scoped>
.wrapper
background: pink
letter-spacing 2px
.content
margin 0 auto
background: red
color #ffffff
font-size 24px
</style>
2.3 JavaScript を使用してテンプレート関数を置き換えるネイティブ JavaScript 操作、Vue のレンダリングで簡単に実行できます。関数は独自の代替手段を提供しません。
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>レンダリング関数の実装:
<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>
2.4 静的スロット
これの使用法$slots1. 親コンポーネント
<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>
# #これの使用法.$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>
# #[関連する推奨事項:
vuejs ビデオ チュートリアル、
以上がvue レンダリング関数はどのコマンドを使用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
CSS IDS対クラス：アクセシビリティに適しているのはどれですか？May 10, 2025 am 12:02 AMclassesarebetterforaccesibility inwebdevelopment.1）ClassscanbeappliedTomultipleements、sunsistentStylesandbehaviorsを保証します
CSS：クラスセレクターとIDセレクターの違いを理解するMay 09, 2025 pm 06:13 PMclassSeLectorEreusableformultipleElements、whiledselectorectorsareuniqueandusedonceperpage.1）クラスは、byperiod（。）、areideal forstylingmultipleementslikebuttons.2）、ids（＃）、aerpectforuniqueelementslikeanivigationmenu.3）idshsheaveavehe.3）を示します
CSSスタイリング：クラスセレクターとIDセレクターの選択May 09, 2025 pm 06:09 PMCSSスタイルでは、プロジェクトの要件に従ってクラスセレクターまたはIDセレクターを選択する必要があります。1）クラスセレクターは再利用に適しており、同じスタイルの複数の要素に適しています。 2）IDセレクターは一意の要素に適しており、優先度が高いが、メンテナンスの困難を避けるためには注意して使用する必要があります。
HTML5：制限May 09, 2025 pm 05:57 PMhtml5hasseverallimitationsincludingluding foradvancedgraphics、basicformvalidation、cross-browsercompatibilityissues、performurympacts、andsecurityconcerns.1）forcomplexgraphics、html5'scanvasisisuffish、resiclirarielikelikelikeweblorthree.2）i
CSS：あるスタイルは別のスタイルよりも優先されますか？May 09, 2025 pm 05:33 PMはい、ounestylecanhavemorepiritythananincssduetsificity andthecascade.1）dipitiesalityactsasascoringsystemwheremorepifictoreshavehigherpriolity.2）thecascadedededereminesstytyleapplication order、
HTML5仕様の重要な目標は何ですか？May 09, 2025 pm 05:25 PMtheSignificAntgoalsofhtml5aretoenhancemultimediasupport、Humanreadability、維持、Andensurebackwardcompativecivity.1）html5improvesmultimediawithnativeelementslikeand.2）ituseSseSseSseSseSseSseSseSseSseSmanticeForementionforementionforementionforementionforementionforemention foremantemention
Reactの限界は何ですか？May 02, 2025 am 12:26 AMraceslimitationsinclude：1）asteeplearningcurveduetoitsvastecosystem、2）seochallengeswithsclient-siderEndering、3）潜在的なパフォーマンスのinlargeapplications、4）complenstatemanagementasappsgrow、and5）suneedtokeepupwithovolution
Reactの学習曲線：新しい開発者にとっての課題May 02, 2025 am 12:24 AMReactisChallengingを使用して、SteepLearNdParadigMshiftOconpontenAchitecture.1）startisofficialdocumentation forasolidfoundation.2）relondingjsxandjavascriptwithinit.3）LearntousefunctionalcompotontiTateを理解してください
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
Dreamweaver Mac版
ビジュアル Web 開発ツール
