머리말
내 JavaScript 레벨은 평균입니다. 글쎄, 그것은 꽤 평균입니다. 따라서 최신 프론트 엔드 프레임 워크 기술에는 약간 어렵지만 현실은 나를 직면하게 만듭니다. 따라서 학습은 유일한 방법입니다.
나는 N 프론트 엔드 프레임을 수직으로 비교하고 마침내 VUE를 선택했습니다. 왜? 이유는 다음과 같습니다.
1. 미래는 알려지지 않았고, 1.x는 학습 곡선이 높고 포기 된 것으로 보이지만 2는 공식적으로 출시되지 않았습니다.
2. React는 매우 강력하지만 접촉은 없습니다.
3. Vue는 간단하고 시작하면 내 생각과 수준에 더 적합합니다.
4. Vue는 중국어 문서를 가지고 있으며 더 편안해 보입니다.
Vue를 배우기로 결정했기 때문에 배우는 가장 좋은 방법은 연습하는 것입니다. 실수로 cnodejs.org 포럼에 대한 공개 API가 있다는 것을 알았습니다. 그래서 나는이 공개 API를 사용하여 데모를 작성하기로 결정했습니다.
인터페이스 소개
이것은 cnodejs.org가 공개적으로 제공하는 인터페이스입니다. 물론, 그것은 우리가 프론트 엔드에 사용하는 것이 아닙니다. 다양한 프로그램에 사용할 수 있습니다. 인터페이스 주소는 http://cnodejs.org/api입니다. 이 페이지를 통해 관련 컨텐츠가 자세히 소개됩니다.
그들이 제공하는 인터페이스가 완성되므로 이러한 인터페이스를 통해 포럼을 만들 수 있습니다.
프로젝트 계획
1. CNODEJS의 목록 내용을 읽을 수있는 목록 페이지를 만듭니다.
2. 세부 정보 페이지를 작성하고 목록 페이지의 링크를 클릭하고 세부 정보 페이지를 입력하십시오.
3. SSI 기술을 사용하여 HTML 코드의 재사용을 실현하십시오. 관련 콘텐츠에 대해 알아 보려면 SSI+SHTML을 검색하십시오.
4. CSS 코드는 SASS를 사용하여 사전 컴파일됩니다.
파일 디렉토리
├ 착용 렌더링 목록 페이지
content.shtml 렌더링 세부 정보 페이지
├ ─ inc 단편화 된 파일
│ │ ─ bar.html 사이드 바 코드
Code의 저작권 부분
HEAD HEAD AREA는 JS 및 기타 코드를 호출합니다
page html 페이지 헤더 로고 및 내비게이션 코드
Resource 파일
├ ─ 이미지
├ ─ js
common 내 코드 디렉토리
Common.js Public Execution JS
method.js 사용자 정의 메소드 js
│ │ ─ jQuery jQuery 소스 코드 디렉토리
doplugins 기타 플러그인 디렉토리
laypage 레이아웃 페이지 페이징 플러그인
Vue vue 소스 코드 디렉토리
└ ─ 스타일
sassss Sass 소스 파일
css 컴파일 된 CSS 파일입니다
├ ─베이스
sscss
내 소스 파일 https://github.com/fengcms/vue-cnodejsorgtest를 다운로드하십시오
코드 작성을 시작하십시오
먼저 위의 파일 디렉토리 디자인을 따르고 파일 작성을 시작하십시오. RES는 리소스 디렉토리입니다. 당신은 그것을 보거나 그것이 무엇인지 알 수 있습니다.
실제로 핵심 사항은 index.shtml 및 content.shtml 파일입니다.
홈페이지 목록 HTML 파일을 준비하십시오
<! doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"> <title> title </title> <link rel = "stylesheet"href = "res/style/style.css"> </head> <body> <header> <H1> a home.html "> Cnodejs.html"> html. FUNGLEO </a> </h1> <av> <ul> <li> 내비게이션 목록 </li> </ul> </nav> </nav> </header> <섹션> <섹션> <ul> <li> <i> <IMG SRC = "#avatar url"> <span> username </span> </i> <time> 5 일 전 </time> <a href = "a href ="a.html? 제목 </a> </li> </ul> <div> </div> </section> <hively> <h3>이 페이지의 지침 </h3> ... </down> </section> <footer> Copyright 문 </풋러> <div> </div> </html>
위에서 언급했듯이, 내가 먼저 쓴 정적 페이지입니다. 내 CSS와 함께 효과는 아래 그림에 나와 있습니다.
Github에서 전체 코드를 받으십시오
Vue & JQuery와 같은 JS 파일을 소개합니다
<script src = "res/js/jquery/jquery-2.2.2.3.3.3.js"> </script> <script src = "res/js/vue/vue.min.js"> </script> <scrc = "res/js/common.js"> </script>
인터페이스에서 데이터를 가져옵니다
우선, 우리는 계속해서 인터페이스에서 데이터를 가져와야합니다. 우리는 jQuery를 사용하여 AJAX 메소드를 사용하여 데이터를 가져갑니다.
다음 코드 :
$ (function () {$ .ajax ({type : 'get', url : "http://cnodejs.org/api/v1/topics", datatype : 'json', success : function (data) {if (data.success) {console.log (data)} else (json.string}), regring}) Alert (json.stringify (data));});코드는 위와 같습니다. 브라우저 콘솔을 살펴 보겠습니다. 스크린 샷은 다음과 같습니다.
위 그림과 같이 데이터를 성공적으로 얻었습니다.
데이터 분석
위 그림에서 볼 수 있듯이 데이터에는 다음 내용이 포함되어 있습니다.
1. 저자
1. 저자의 아바타 URL
2. 저자 사용자 이름
2. 저자 ID
3. 게시물 컨텐츠
4. 출시 시간
5. 그것은 본질입니다
6. Post ID
7. 마지막 응답 시간
8. 답변 수
9. attribution 태그
10. 게시물 제목
11. 그것을 위에 올릴지
12. 통계 검색
데이터 인터페이스는 위와 같습니다. 물론 전체 기능 포럼 인 경우이 데이터가 유용합니다. 내 프로젝트에서는 많은 것이 사용되지 않습니다. 내가 필요한 것을 살펴 보겠습니다.
<li> <i> <img src = "#avatar url"> <span> username </span> </i> <time> 게시 5 일 전에 게시 </time> <a href = "content.html? 링크 ID"> 게시 제목 </a> </li>
위의 코드에서 볼 수 있듯이 루프에 필요한 것은
1. 저자의 아바타 URL
2. 저자 사용자 이름
3. 출시 시간
4. Post ID
5. 게시물 제목
문제 없습니다. 필요한 모든 컨텐츠 및 인터페이스를 사용할 수 있습니다.
Ajax 코드를 캡슐화합니다
Ajax 코드는 길지 않지만 여전히 불편 함을 느낍니다. 따라서 다음 코드를 사용하여 캡슐화합니다
// ajax get json method function getjson (url, func) {$ .ajax ({type : 'get', url : url, datatype : 'json', success : function (data) {func (data.success);} else {alert ( "인터페이스 호출 실패");}} Alert (json.stringify (data));}위에서 언급했듯이 필요한 경우 GetJson (URL, func) 함수 만 사용하면됩니다.
참조 캡슐화 된 코드
$ (function () {var url = "http://cnodejs.org/api/v1/topics"; getjson (url, function (data) {console.log (data);});이렇게 수정 한 후, 필요한 데이터를 인쇄 할 수 있는지 살펴 보겠습니다. 아래 그림과 같이 :
아무런 문제 없이도 여전히 데이터를 얻었습니다. 우리는 콜백 함수를 캡슐화하고 다음 코드로 변경하고 있습니다.
$ (function () {var url = "http://cnodejs.org/api/v1/topics"; getjson (url, pushdom);}); function pushdom (data) {console.log (data);}오류가 없으면 인터페이스 데이터를 확실히 인쇄 할 수 있습니다. 이 작업 후에, 우리의 코드는 매우 간결하고 가독성이 크게 향상 될 것입니다. 다음에해야 할 일은 푸시 (데이터) 함수에서 수행하는 것입니다.
vue 렌더링 코드
먼저 VUE 메소드를 사용하여 페이지에 삽입하려는 데이터를 작성해야합니다.
HTML 코드 부분
<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> 1Vue 지식 포인트
루핑 데이터 http://vuejs.org.cn/api/#v-for
JS 코드 부분
함수 pushdom (data) {var vm = new vue ({el : '.list', data : data});}효과를 살펴 보겠습니다.
좋아요, 매우 흥분합니다. 단지 몇 줄의 코드로 VUE로 목록을 성공적으로 렌더링했습니다.
요약
1. Ajax는 데이터를 얻는 핵심입니다
2. 약간의 vue 컨텐츠를 이해하면 시작할 수 있습니다.
3. 프로젝트를 구축 할 때는 코드와 파일이 명확하고 명확해야합니다.
충수
VUE 공식 웹 사이트
cnodejs API 세부 사항
이 일련의 튜토리얼의 소스 코드를 다운로드하십시오
vuejs 실용 튜토리얼, 기본 사항 구축 및 목록 렌더링 제 1 장
vuejs 실용 튜토리얼 2 장, 오류 수정 및 시간을 아름답게합니다.
Vuejs 실용 튜토리얼 3 장, 레이아웃 플러그인을 사용하여 페이지 매김을 실현합니다.
이 기사는 원래 Fungleo가 작성했습니다
첫 번째 릴리스 주소 : http://blog.csdn.net/fungleo/article/details/51649074
이 기사는 "vue.js 프론트 엔드 구성 요소 학습 자습서"로 편집되었으며 모두가 배우고 읽을 수 있습니다.
vue.js 구성 요소에 대한 튜토리얼은 특수 주제 vue.js 구성 요소 학습 자습서를 클릭하여 학습하십시오.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.