Vue.JS 입문 튜토리얼 목록 렌더링
- 高洛峰원래의
- 2016-12-03 10:30:151355검색
v-repeat 지시문을 사용하여 ViewModel의 객체 배열을 기반으로 목록을 렌더링할 수 있습니다. 배열의 각 객체에 대해 이 지시문은 해당 객체를 $data 객체로 사용하여 하위 Vue 인스턴스를 생성합니다. 이러한 하위 인스턴스는 상위 인스턴스의 데이터 범위를 상속하므로 반복되는 템플릿 요소 내에서 상위 인스턴스의 속성뿐만 아니라 하위 인스턴스의 속성에도 액세스할 수 있습니다. 또한 $index 속성을 통해 현재 인스턴스에 해당하는 배열 인덱스를 가져올 수도 있습니다.
<ul id="demo">
<li v-repeat="items" class="item-{{$index}}">
{{$index}} - {{parentMsg}} {{childMsg}}
</li>
</ul>var demo = new Vue({
el: '#demo',
data: {
parentMsg: 'Hello',
items: [
{ childMsg: 'Foo' },
{ childMsg: 'Bar' }
]
}
})
효과를 확인하세요. 결과를 얻기 쉬워야 합니다
블록 레벨 반복
때때로 여러 노드가 포함된 블록을 반복해야 할 수도 있습니다. 이 경우 d477f9ce7bf77f53fbcf36bec1b69b7a 태그로 블록을 래핑할 수 있습니다. 여기서 d477f9ce7bf77f53fbcf36bec1b69b7a 태그는 의미론적 래핑 역할만 수행하며 자체적으로 렌더링되지 않습니다. 예:
<ul>
<template v-repeat="list">
<li>{{msg}}</li>
<li class="divider"></li>
</template>
</ul>
단순 값 배열
단순 값(원시 값), 즉 문자열, 숫자, 부울 등은 객체의 값이 아닙니다. 간단한 값을 포함하는 배열의 경우 $value를 사용하여 값에 직접 액세스할 수 있습니다.
<ul id="tags">
<li v-repeat="tags">
{{$value}}
</li>
</ul>
new Vue({
el: '#tags',
data: {
tags: ['JavaScript', 'MVVM', 'Vue.js']
}
})때로는 암시적으로 상위 범위로 되돌아갑니다. v-repeat 지시문에 인수를 제공하고 이를 반복할 항목의 별칭으로 사용하면 됩니다.
<ul id="users">
<li v-repeat="user : users">
{{user.name}} - {{user.email}}
</li>
</ul> > 변형 방법
관찰된 배열에 대한 Vue.js 내부 변경 방법(push(), pop(), Shift(), unshift(), splice(), sort() 및 reverse()를 포함한 변경 방법)) 가로채기 때문에 이러한 메서드를 호출하면 뷰 업데이트도 자동으로 트리거됩니다.
var users = new Vue({
el: '#users',
data: {
users: [
{ name: 'Foo Bar', email: 'foo@bar.com' },
{ name: 'John Doh', email: 'john@doh.com' }
]
}
});
다음은 버튼을 클릭하면 해당 데이터 항목이 삭제되는 예시입니다.
// 以下操作会触发 DOM 更新
demo.items.unshift({ childMsg: 'Baz' })
demo.items.pop() 확장 방법
Vue.js는 관찰된 배열에 두 가지 편리한 방법인 $set() 및 $remove()를 추가합니다.
demo.items[0] = {}와 같이 데이터 바인딩된 배열의 요소를 인덱스로 직접 설정하는 것은 피해야 합니다. Vue.js에서는 이러한 변경 사항을 감지할 수 없기 때문입니다. 확장된 $set() 메소드를 사용해야 합니다:<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
<ul id="tags">
<li v-repeat="tags">
{{$value}}
</li>
</ul>
<input type="button" value="测试" onclick="myClick();">
<script>
var tag = new Vue({
el: '#tags',
data: {
tags: ['标签一', '标签二', '标签三']
}
});
function myClick(){
tag.tags.pop();
}
</script>
</body>
</html>
$remove()는 splice() 메소드의 간단한 구문일 뿐입니다. 주어진 인덱스의 요소를 제거합니다. 인수가 숫자 값이 아닌 경우 $remove()는 배열에서 값을 검색하고 발견된 첫 번째 해당 요소를 제거합니다.
// 不要用 `demo.items[0] = ...`
demo.items.$set(0, { childMsg: 'Changed!'})
// 删除索引为 0 的元素。 demo.items.$remove(0)
배열 교체
filter( ), concat() 또는 Slice()인 경우 반환된 배열은 다른 인스턴스가 됩니다. 이 경우 이전 배열을 새 배열로 교체할 수 있습니다. 다시 렌더링합니다. 하지만 걱정하지 마세요. Vue.js는 배열 요소에 연결된 Vue 인스턴스가 있는지 여부를 인식하고 이를 최대한 효율적으로 재사용할 수 있습니다.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
<ul id="tags">
<li v-repeat="tags">
{{$value}}
</li>
</ul>
<input type="button" value="测试" onclick="myClick();">
<script>
var tag = new Vue({
el: '#tags',
data: {
tags: ['标签一', '标签二', '标签三']
}
});
function myClick(){
//tag.tags.pop();
//tag.tags[0] = '修改后的内容不生效';
tag.tags.$set(0, '修改后的内容生效');
tag.tags.$remove(1);
}
</script>
</body>
</html>track-by(vue의 track-by 속성) 사용 어떤 경우에는 배열을 완전히 새로운 개체(예: API 호출에서 반환된 개체)로 바꿔야 할 수도 있습니다. 각 데이터 객체에 고유한 ID 속성이 있는 경우 추적 기준 속성 매개변수를 사용하여 Vue.js에 힌트를 제공하여 동일한 ID를 가진 기존 Vue 인스턴스 및 DOM 노드를 재사용할 수 있습니다.
예: 데이터는 다음과 같습니다.
demo.items = demo.items.filter(function (item) {
return item.childMsg.match(/Hello/)
})그런 다음 다음과 같은 프롬프트를 표시할 수 있습니다.
항목 배열을 교체할 때 Vue.js가 _uid: '88f869d'가 있는 새 개체를 발견하면 동일한 _uid를 직접 재사용할 수 있다는 것을 알게 됩니다. 이미 인스턴스가 있습니다. 새로운 데이터로 대규모 v-repeat 목록을 다시 렌더링할 때 트랙바이를 적절하게 사용하면 성능이 크게 향상될 수 있습니다.
{
items: [
{ _uid: '88f869d', ... },
{ _uid: '7496c10', ... }
]
}v-repeat를 사용하여 객체의 모든 속성을 반복할 수도 있습니다. 각 중복 인스턴스에는 특수 속성 $key가 있습니다. 간단한 값의 경우 배열의 간단한 값에 액세스하는 것처럼 $value 속성을 사용할 수도 있습니다.
<div v-repeat="items" track-by="_uid"> <!-- content --> </div>
ECMAScript 5에서 객체에 새 속성을 추가하거나 객체 속성에서 속성을 제거합니다. , 두 상황을 모두 감지할 수 있는 메커니즘이 없습니다. 이 문제를 해결하기 위해 Vue.js의 관찰된 개체에 $add(key, value), $set(key, value) 및 $delete(key)의 세 가지 확장 메서드가 추가됩니다. 관찰된 개체의 속성이 추가/제거될 때 해당 뷰 업데이트를 트리거하는 데 이러한 메서드를 사용할 수 있습니다. $add 메소드와 $set 메소드의 차이점은 지정된 키가 객체에 이미 존재할 때 $add가 일찍 반환되므로 obj.$add(key)를 호출하면 기존 값을 정의되지 않은 값으로 덮어쓰지 않는다는 것입니다.
반복 범위
v-repeat는 정수도 허용할 수 있습니다. 이 경우 템플릿이 여러 번 표시됩니다. 아래 예에서는 3번 반복됩니다.<ul id="repeat-object">
<li v-repeat="primitiveValues">{{$key}} : {{$value}}</li>
<li>===</li>
<li v-repeat="objectValues">{{$key}} : {{msg}}</li>
</ul> new Vue({
el: '#repeat-object',
data: {
primitiveValues: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
},
objectValues: {
one: {
msg: 'Hello'
},
two: {
msg: 'Bye'
}
}
}
});
배열 필터
때때로 실제로 필터링되거나 정렬된 버전 배열만 표시하면 되는 경우도 있습니다. 원본 데이터를 변경하거나 재설정합니다. Vue는 이러한 요구 사항을 단순화하기 위해 filterBy 및 orderBy라는 두 가지 내장 필터를 제공합니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다