머리말
이전 장에서는 기본 구성을 통해 목록 페이지를 성공적으로 렌더링했습니다. 그러나 많은 문제가 있습니다. 이 장에서는 이러한 문제를 해결할 것입니다.
V- 바인드를 사용하여 데이터 바인딩하십시오.
이전 장에서는 페이지를 렌더링했습니다. 그러나 콘솔이 열리면 오류가 발생합니다. 아래 그림과 같이 :
페이지가 들어 오면 HTML 코드가 먼저 실행되며 현재 VUE가 작동하지 않았기 때문입니다. 우리의 코드는 다음과 같습니다.
<li v-for = "data in data"> <i> img src = "{{info.author.avatar_url}}"> <span> {{info.author.loginname}} </span> </i> <time> {info.create_at}} </time> }} "> {{info.title}} </a> </li>위에서 언급 한 바와 같이, 페이지가 src = "{{info.author.avatar_url}}"을 구문 분석 할 때,이 이미지 경로는 찾을 수 없습니다. 따라서 오류가 자연스럽게 발생합니다. 따라서이 코드를 처리해야합니다. 우리는 그것을 수정합니다
<img v-bind : src = "info.author.avatar_url"v-bind : alt = "info.author.loginname">
좋아, 페이지를 새로 고치자, 이번에는 오류가 없다.
Vue 지식 포인트
v-bind 바인딩 속성 http://vuejs.org.cn/api/#v-bind
다시 채우다:
실제로, 우리가 페이지를 열면, 우리는 여전히 이러한 {{...}} 내용을 즉시 볼 수 있습니다. 이것은 오류를보고하지 않지만 여전히 작은 사용자 경험에 영향을 미칩니다. 현재 V- 텍스트를 사용하여 이러한 내용을 출력 할 수 있습니다. 위와 같이 코드를 다음과 같이 수정합니다.
<li v-for = "data in data"> <i> <img v-bind : src = "info.author.avatar_url"v-bind : alt = "info.author.loginname"> <span v-text = "info.author.loginName"> </span> </i> </time time </time> href = "content.html? {{info.id}}"v-text = "info.title"> </a> </li>코드를 이것으로 수정하면 모든 문제가 해결됩니다.
Vue 지식 포인트
v- 텍스트 출력 텍스트 http://vuejs.org.cn/api/#v-text
시간을 아름답게합니다
인터페이스에서 얻은 시간 형식은이 2016-06-12T06 : 17 : 35.453Z와 같습니다. 분명히, 이것은 우리가 원하는 효과가 아닙니다. 우리가 원하는 효과는 2 시간 전에 출판 된대로 이와 같아야합니다. 어떻게해야합니까?
원시 문자열을 제공 한 다음 원하는 문자열을 반환하는 데 사용되는 함수가 필요합니다.
이 기능의 원리는 우리의 초점이 아닙니다. 여기서 설명하지 않겠습니다. 코드를 다음과 같이 봅니다.
function goodtime (str) {var now = new date (). _day = 차이/일, _hour = 차이/시간, _min = 차이/분; if (_year> = 1) {result = "" + ~~ (_year) + "1 년 전"} else if (_month> = 1) {result = "" + ~ ~~ (_month) + "Month"}에 게시 됨 "} else if (_week> = 1) {result =" " + ~ ~ ~ (_week) +"rement} recond " "" + ~ ~~ (_day) + "day alfo"} else if (_hour> = 1) {result = "게시 된" + ~ ~ (_hour) + "시간 전"} else if (_min> = 1) {result = "" + ~ ~~ (_min) + "minute inter in minute em" 반환 결과;}이 강령은 다른 사람들의 코드에서 차용의 일부가 있습니다.
자, 이제 Goodtime (STR) 메소드 함수를 사용하여 원하는 내용에 대한 인터페이스별로 우리에게 주어진 시간 형식을 수정할 수 있습니다. 문제는 이제이 기능을 어떻게 사용할 수 있습니까?
멍청한 방법, 원래 데이터를 직접 수정하십시오
먼저 Ajax를 통해 데이터를 얻은 다음 렌더링을 위해 데이터를 VUE에 넘겨줍니다. 그런 다음 중간에서 작업을 수행하고 모든 데이터를 처리 한 다음 처리 된 데이터를 렌더링을 위해 VUE에 넘겨 줄 수 있습니다. 이 문제를 해결할 수 있습니다.
그냥 해요, 코드를 살펴 보겠습니다.
함수 pushdom (data) {// 첫 번째 트래버스 및 데이터에서 항상 수정하고 (var i = 0; i <data.data.length; i ++) {data.data [i] .create_at = goodtime (data.data [i] .create_at); }; // 그런 다음 var vm = new vue ({el : '.list', data : data})를 렌더링하기 위해 vue에 맡기십시오.위의 처리를 통해 최종 페이지 효과를 살펴 보겠습니다. 다음과 같이 :
성공.
VUE 사용자 정의 필터 방법
우리는 위에서 성공했지만 Vue 직전에 직접 루프를 만드는 것은 우아하지 않습니다. 또한, 우리는 Vue를 배우고 싶습니다. 이것이 어디서 배우는 유일한 방법입니다 ...
좋아, Vue의 사용자 정의 필터 기능을 사용하여 처리합시다.
공식 튜토리얼, 사용자 정의 필터 http://vuejs.org.cn/guide/custom-filter.html
함수 pushdom (data) {// vue 사용자 정의 필터를 사용하여 인터페이스 vue.filter ( 'time', function (value) {return goodtime (value);}) var vm = new vue ({el : '.list', data});}에 전달 된 시간을 조각합니다.또한 HTML 부분을 다음과 같이 수정해야합니다.
<time v-text = "info.create_at | time"> </time>
자, 구현 효과는 정확히 동일합니다. 그러나 코드는 훨씬 더 우아 해 보입니다. 핵심은이 과정에서 사용자 정의 필터 사용을 배우고 마스터했다는 것입니다. 실제로, 많은 경우에, 인터페이스가 우리에게 제공 한 데이터는 종종 페이지에서 직접 렌더링하는 데 적합하지 않으므로이 기능은 매우 중요하고 일반적으로 사용됩니다.
요약
1.V- 결합 바인딩 요소 속성 방법
2.V 텍스트 출력 텍스트 메소드
3. VUE 사용자 정의 필터 사용
충수
VUE 공식 웹 사이트
cnodejs API 세부 사항
이 일련의 튜토리얼의 소스 코드를 다운로드하십시오
vuejs 실용 튜토리얼, 기본 사항 구축 및 목록 렌더링 제 1 장
vuejs 실용 튜토리얼 2 장, 오류 수정 및 시간을 아름답게합니다.
Vuejs 실용 튜토리얼 3 장, 레이아웃 플러그인을 사용하여 페이지 매김을 실현합니다.
이 기사는 원래 Fungleo가 작성했습니다
첫 번째 릴리스 주소 : http://blog.csdn.net/fungleo/article/details/51649074
이 기사는 "vue.js 프론트 엔드 구성 요소 학습 자습서"로 편집되었으며 모두가 배우고 읽을 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.