Vue 렌더 개발 예시에 대한 자세한 설명
- php中世界最好的语言원래의
- 2018-04-28 13:51:351909검색
이번에는 Vue 렌더 개발 사례에 대해 자세히 설명드리겠습니다. Vue 렌더 개발 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.
소개
Vue를 개발에 사용할 때 대부분 템플릿을 사용하여 개발하는 것은 간단하고 편리하며 빠르지만 때로는 특별한 시나리오에는 템플릿이 적합하지 않은 경우도 있습니다. 그래서 렌더 기능을 잘 활용하기 위해 좀 더 자세히 살펴보기로 했습니다. 아래에 쓴 내용이 잘못되었다고 생각하시면 지적해 주시기 바랍니다. 저와의 교류가 글을 쓰게 된 가장 큰 동기가 됩니다.
Scenario
공식 웹사이트에 설명된 시나리오 레벨 소품을 통해 제목 태그를 동적으로 생성하는 구성 요소를 작성하기 시작하면 다음과 같이 구현하는 것을 빨리 생각할 수 있습니다.
<script type="text/x-template" id="anchored-heading-template"> <h1 v-if="level === 1"> <slot></slot> </h1> <h2 v-else-if="level === 2"> <slot></slot> </h2> <h3 v-else-if="level === 3"> <slot></slot> </h3> <h4 v-else-if="level === 4"> <slot></slot> </h4> <h5 v-else-if="level === 5"> <slot></slot> </h5> <h6 v-else-if="level === 6"> <slot></slot> </h6> </script>
Vue.component('anchored-heading', {
template: '#anchored-heading-template',
props: {
level: {
type: Number,
required: true
}
}
})
이 시나리오에서 템플릿을 사용하는 것은 그렇지 않습니다. 최선의 선택: 우선 코드가 장황합니다. 다양한 수준의 제목에 anchor 요소를 삽입하려면
템플릿은 대부분의 구성 요소에서 훌륭하게 작동하지만 여기서는 그다지 깨끗하지 않습니다. 이제 렌더링 함수를 사용하여 위의 예를 다시 작성해 보겠습니다.
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // tag name 标签名称
this.$slots.default // 子组件中的阵列
)
},
props: {
level: {
type: Number,
required: true
}
}
})
훨씬 더 간단하고 명확해졌습니다! 간단히 말해서 이 코드는 훨씬 간단하지만 Vue의 인스턴스 속성에 매우 익숙해야 합니다. 이 예에서는 고정 제목의 Hello world!와 같은 슬롯 속성을 사용하지 않고 구성 요소에 콘텐츠를 전달할 때 해당 하위 요소가 구성 요소 인스턴스의 $slots.default에 저장된다는 점을 알아야 합니다.
createElement 매개변수 소개
다음으로 숙지해야 할 것은 createElement 함수에서 템플릿을 생성하는 방법입니다. createElement에서 허용하는 매개변수는 다음과 같습니다.
createElement(
// {String | Object | Function}
// 一个 HTML 标签字符串，组件选项对象，或者
// 解析上述任何一种的一个 async 异步函数，必要参数。
'p',
// {Object}
// 一个包含模板相关属性的数据对象
// 这样，您可以在 template 中使用这些属性。可选参数。
{
// (详情见下一节)
},
// {String | Array}
// 子节点 (VNodes)，由 `createElement()` 构建而成，
// 或使用字符串来生成“文本节点”。可选参数。
[
'先写一些文字',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
데이터 객체에 대한 심층 분석
한 가지 주의할 점: 템플릿 구문과 마찬가지로 v-bind:class 및 v-bind:style은 다음에서 특별히 처리됩니다. VNode 데이터 개체에서 다음 속성 이름은 최고 수준 필드입니다. 또한 이 객체를 사용하면 innerHTML과 같은 DOM 속성과 같은 일반 HTML 속성을 바인딩할 수 있습니다(이것은 v-html 지시어를 대체합니다).
{
// 和`v-bind:class`一样的 API
'class': {
foo: true,
bar: false
},
// 和`v-bind:style`一样的 API
style: {
color: 'red',
fontSize: '14px'
},
// 正常的 HTML 特性
attrs: {
id: 'foo'
},
// 组件 props
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
}
}
],
// Scoped slots in the form of
// { name: props => VNode | Array<VNode> }
scopedSlots: {
default: props => createElement('span', props.text)
},
// 如果组件是其他组件的子组件，需为插槽指定名称
slot: 'name-of-slot',
// 其他特殊顶层属性
key: 'myKey',
ref: 'myRef'
}
조건부 렌더링
이제 위 API에 익숙해졌으니 실용적인 전투를 해보겠습니다.
이전에는 이렇게 썼는데
//HTML
<p id="app">
<p v-if="isShow">我被你发现啦！！！</p>
</p>
<vv-isshow :show="isShow"></vv-isshow>
//js
//组件形式
Vue.component('vv-isshow', {
props:['show'],
template:'<p v-if="show">我被你发现啦2！！！</p>',
});
var vm = new Vue({
el: "#app",
data: {
isShow:true
}
});
render는 이렇게 썼어요
//HTML
<p id="app">
<vv-isshow :show="isShow"><slot>我被你发现啦3！！！</slot></vv-isshow>
</p>
//js
//组件形式
Vue.component('vv-isshow', {
props:{
show:{
type: Boolean,
default: true
}
},
render:function(h){
if(this.show ) return h('p',this.$slots.default);
},
});
var vm = new Vue({
el: "#app",
data: {
isShow:true
}
});
List 랜더링
이전에도 이렇게 썼는데, v-for할 때는 템플릿을 라벨로 묶어야 해요
//HTML
<p id="app">
<vv-aside v-bind:list="list"></vv-aside>
</p>
//js
//组件形式
Vue.component('vv-aside', {
props:['list'],
methods:{
handelClick(item){
console.log(item);
}
},
template:'<p>\
<p v-for="item in list" @click="handelClick(item)" :class="{odd:item.odd}">{{item.txt}}</p>\
</p>',
//template:'<p v-for="item in list" @click="handelClick(item)" :class="{odd:item.odd}">{{item.txt}}</p>',错误
});
var vm = new Vue({
el: "#app",
data: {
list: [{
id: 1,
txt: 'javaScript',
odd: true
}, {
id: 2,
txt: 'Vue',
odd: false
}, {
id: 3,
txt: 'React',
odd: true
}]
}
});
render는 이렇게 작성했습니다
//HTML
<p id="app">
<vv-aside v-bind:list="list"></vv-aside>
</p>
//js
//侧边栏
Vue.component('vv-aside', {
render: function(h) {
var _this = this,
ayy = this.list.map((v) => {
return h('p', {
'class': {
odd: v.odd
},
attrs: {
title: v.txt
},
on: {
click: function() {
return _this.handelClick(v);
}
}
}, v.txt);
});
return h('p', ayy);
},
props: {
list: {
type: Array,
default: () => {
return this.list || [];
}
}
},
methods: {
handelClick: function(item) {
console.log(item, "item");
}
}
});
var vm = new Vue({
el: "#app",
data: {
list: [{
id: 1,
txt: 'javaScript',
odd: true
}, {
id: 2,
txt: 'Vue',
odd: false
}, {
id: 3,
txt: 'React',
odd: true
}]
}
});
v-model
이전 작성 방법
//HTML
<p id="app">
<vv-models v-model="txt" :txt="txt"></vv-models>
</p>
//js
//input
Vue.component('vv-models', {
props: ['txt'],
template: '<p>\
<p>看官你输入的是:{{txtcout}}</p>\
<input v-model="txtcout" type="text" />\
</p>',
computed: {
txtcout:{
get(){
return this.txt;
},
set(val){
this.$emit('input', val);
}
}
}
});
var vm = new Vue({
el: "#app",
data: {
txt: '',
}
});
render는 이렇게 작성했습니다
//HTML
<p id="app">
<vv-models v-model="txt" :txt="txt"></vv-models>
</p>
//js
//input
Vue.component('vv-models', {
props: {
txt: {
type: String,
default: ''
}
},
render: function(h) {
var self=this;
return h('p',[h('p','你猜我输入的是啥：'+this.txt),h('input',{
on:{
input(event){
self.$emit('input', event.target.value);
}
}
})] );
},
});
var vm = new Vue({
el: "#app",
data: {
txt: '',
}
});
이 사례를 읽어보시고 마스터하신 것 같아요 기사. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
Angular에서 페이지의 부분 인쇄를 구현하는 단계에 대한 자세한 설명
위 내용은 Vue 렌더 개발 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!