ホームページ > 記事 > ウェブフロントエンド > vue レンダリング関数はどのコマンドを使用しますか?
vue レンダリング関数はどのコマンドを使用しますか?
- 青灯夜游オリジナル
- 2022-12-20 20:24:281865ブラウズ
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。