Kata pengantar
Level JavaScript saya rata -rata. Nah, ini cukup rata -rata. Oleh karena itu, ini benar-benar agak sulit untuk teknologi kerangka kerja front-end terbaru, tetapi kenyataan membuat saya menghadapinya. Karena itu, belajar adalah satu -satunya jalan keluar.
Saya membandingkan N frame frame front-end secara vertikal dan akhirnya memilih Vue. Mengapa? Alasannya adalah sebagai berikut:
1. Berputar masa depan tidak diketahui, 1.x memiliki kurva belajar tinggi dan tampaknya telah ditinggalkan, sementara 2 belum diluncurkan secara resmi.
2. Bereaksi cukup kuat, tetapi tidak memiliki kontak.
3. Vue sederhana, dan dengan memulai, lebih cocok untuk pemikiran dan level saya.
4. Vue memiliki dokumentasi Cina, dan saya terlihat lebih nyaman.
Karena saya memutuskan untuk belajar Vue, cara terbaik untuk belajar adalah berlatih. Saya tidak sengaja melihat bahwa ada API publik untuk forum cnodeJs.org, yang sangat nyaman. Jadi saya memutuskan untuk menggunakan API publik ini untuk menulis demo.
Pendahuluan Antarmuka
Ini adalah antarmuka yang disediakan secara publik oleh cnodeJs.org. Tentu saja, bukan hanya untuk kita gunakan untuk front-end. Ini dapat digunakan pada berbagai program. Alamat antarmuka adalah http://cnodejs.org/api. Melalui halaman ini, konten yang relevan diperkenalkan secara rinci.
Antarmuka yang mereka berikan lengkap, yang berarti kita dapat membuat forum seperti mereka melalui antarmuka ini.
Rencana Proyek
1. Buat halaman daftar yang dapat membaca konten daftar CNodeJs.
2. Buat halaman Detail, klik tautan di halaman Daftar, dan masukkan halaman Detail.
3. Gunakan teknologi SSI untuk mewujudkan penggunaan kembali kode HTML. Cari SSI+SHTML untuk mempelajari tentang konten terkait.
4. Kode CSS dikompilasi menggunakan Sass.
Direktori File
├─Index.shtml halaman daftar rendering
├─Content.shtml halaman rincian rendering
├ ur file terfragmentasi
│ ├─Bar.html Kode Sidebar
│ ├─Footer.html Bagian Hak Cipta dari Kode
│ ├─Head.html Area Kepala Panggilan JS dan Kode Lainnya
│ └ Mis
└─ file sumber daya
├─Image
├─Js
│ ├─Kommon direktori kode saya
│ │ ├─Common.js Eksekusi publik JS
│ └─ Method.js Metode Kustom JS
│ ├ "Direktori Kode Sumber JQuery JQuery
│ ├─Plugin Direktori Plugin Lainnya
│ └─LayPage Layout Page Plugin Paging
│ └ "Direktori Kode Sumber Vue Vue
└─Style
├─STYLE.SCSS file sumber sass
├─Style.css file CSS yang dikompilasi
├─Base
└─Scss
Unduh file sumber saya https://github.com/fengcms/vue-cnodejsorgtest
Mulailah menulis kode
Pertama, ikuti desain direktori file di atas dan mulailah menulis file ke dalamnya. Res adalah direktori sumber daya. Anda dapat melihatnya atau tahu apa itu.
Bahkan, poin kunci adalah file index.shtml dan content.shtml.
Siapkan Daftar Beranda File HTML
<! Doctype html> <html lang = "zh"> <head> <meta charset = "UTF-8"> <Title> title </ title> <link rel = "stylesheet" href = "res/style/style.css"> </heading> <body> <header> <h1> <h1> <href. Fungleo </a> </h1> <av> <ul> <li> Daftar navigasi </li> </ul> </bav> </header> <section> <ultion> <ul> <li> <i> <img Src = "#IDS AVATAR"> <pan> </span> </Img </ID </ID </ID </ID </ID </I ID = A HIT = "Time> </span> </i> <lalam> POSIS 5 hari yang lalu </span =" Judul </a> </li> </ul> <viv> </div> </section> <side> <h3> Instruksi pada halaman ini </h3> ... </sender> </section> <footer> Pernyataan hak cipta </tfooter> <verv> </div> </pection> </hhtml>
Seperti disebutkan di atas, ini adalah halaman statis yang saya tulis terlebih dahulu. Sehubungan dengan CSS saya, efeknya ditunjukkan pada gambar di bawah ini:
Harap dapatkan kode lengkap dari github
Memperkenalkan file JS seperti Vue & JQuery
<skrip src = "res/js/jQuery/jQuery-2.2.3.min.js"> </script> <script src = "res/js/vue/vue.min.js"> </script> <script src = "res/js/common/common.js"> </script>
Dapatkan data dari antarmuka
Pertama -tama, apa pun yang terjadi, kita harus mendapatkan data dari antarmuka sebelum kita dapat terus melakukannya. Kami menggunakan jQuery untuk menggunakan metode AJAX untuk mengambil data.
Kode berikut:
$ (function () {$ .Ajax ({type: 'get', url: "http://cnodejs.org/api/v1/topics", dataType: 'json', Success: function (data) {if (data.success) {console.log (data)} {data) (data) {ever) {console.log (data)} {data) (data) {ever) {console.log (data)} {data) (data) {ever) {console) (data) {data) (data) {date) {console) alert (json.stringify (data));}});})Kode seperti di atas. Mari kita lihat konsol browser dan tangkapan layar adalah sebagai berikut:
Seperti yang ditunjukkan pada gambar di atas, kami berhasil memperoleh data.
Menganalisis data
Seperti yang ditunjukkan pada gambar di atas, data berisi konten berikut
1. Penulis
1. URL Avatar Penulis
2. Nama Pengguna Penulis
2. ID Penulis
3. Posting konten
4. Waktu rilis
5. Apakah intinya
6. Post ID
7. Waktu balasan terakhir
8. Jumlah balasan
9.Attribution Tag
10. Judul Posting
11. Apakah akan melengkapi itu
12. Jelajahi statistik
Antarmuka data seperti di atas. Tentu saja, jika Anda adalah forum fungsi penuh, data ini berguna. Dalam proyek saya, banyak dari mereka tidak digunakan. Mari kita lihat apa yang saya butuhkan.
<li> <i> <img src = "#Avatar URL"> <span> nama pengguna </span> </i> <lime> Diposting 5 hari yang lalu </tasi> <a href = "content.html? ID tautan"> Judul yang diposting </a> </li>
Seperti yang ditunjukkan dalam kode di atas, apa yang perlu kita lilitkan
1. URL Avatar Penulis
2. Nama Pengguna Penulis
3. Waktu rilis
4. ID POST
5. Judul Posting
Tidak masalah, semua konten dan antarmuka yang kami butuhkan tersedia.
Merangkum kode AJAX
Meskipun kode AJAX tidak lama, saya masih merasa tidak nyaman. Oleh karena itu, saya menggunakan kode berikut untuk merangkumnya
// Ajax dapatkan fungsi metode JSON getjson (url, func) {$ .Ajax ({type: 'get', url: url, dataType: 'json', Success: function (data) {if (data.success) (funce) (data);} else {waspada ("panggilan antarmuka gagal");}) (funce);} else {alert ("call antarmace gagal");}) (funce); {{warner ("call interface gagal");}) (funce) {{alert ("call interface gagal");}) (funce); }});}Seperti disebutkan di atas, jika diperlukan, kita hanya perlu menggunakan fungsi Getjson (URL, Func).
Kode yang dienkapsulasi referensi
$ (function () {var url = "http://cnodejs.org/api/v1/topics"; getjson (url, function (data) {console.log (data);});});Setelah memodifikasi seperti ini, mari kita lihat dan lihat apakah kita dapat mencetak data yang kita butuhkan? Seperti yang ditunjukkan pada gambar di bawah ini:
Tanpa masalah, kami masih memperoleh data. Kami merangkum fungsi panggilan balik dan mengubahnya ke kode berikut
$ (function () {var url = "http://cnodejs.org/api/v1/topics"; getjson (url, pushdom);}); function pushdom (data) {console.log (data);}Oke, jika tidak ada kesalahan, data antarmuka pasti dapat dicetak. Setelah operasi ini, kode kami akan sangat ringkas dan sangat meningkatkan keterbacaan. Apa yang perlu kita lakukan selanjutnya adalah melakukannya dalam fungsi pushdom (data).
kode rendering vue
Pertama, kita perlu menggunakan metode VUE untuk menulis data yang ingin kita masukkan ke dalam halaman.
Bagian Kode HTML
<li v-for = "Info in Data"> <i> <img src = "{{info.author.avatar_url}}"> <span> {{info.author.loginname}} </span> </i> <eime> {{info.create_at} {time> </i> <lime> {{info.create_at} {waktu/waktu </rentang> </iRef }} "> {{info.title}} </a> </li> 1Poin Pengetahuan Vue
Looping Data http://vuejs.org.cn/api/#v-for
Bagian Kode JS
fungsi pushdom (data) {var vm = vue baru ({el: '.list', data: data});}Mari kita lihat efeknya:
Oke, sangat bersemangat. Hanya dalam beberapa baris kode, kami berhasil membuat daftar dengan Vue.
ringkasan
1. AJAX adalah kunci untuk mendapatkan data
2. Setelah Anda memahami sedikit konten Vue, Anda dapat memulai.
3. Saat membangun proyek, kode dan file harus jelas dan jelas.
lampiran
Situs web resmi vue
Detail API CNodeJS
Unduh kode sumber seri tutorial ini
Bab 1 Tutorial Praktis Vuej, Membangun Dasar -dasar dan Menerjemahkan Daftar
Tutorial Praktis Vuejs Bab 2, perbaiki kesalahan dan mempercantik waktu
Tutorial Praktis Vuejs Bab 3, menggunakan plug-in tata letak untuk mewujudkan pagination
Artikel ini awalnya ditulis oleh Fungleo
Alamat rilis pertama: http://blog.csdn.net/fungleo/article/details/51649074
Artikel ini telah dikompilasi ke dalam tutorial pembelajaran komponen front-end vue.js ", dan semua orang dipersilakan untuk belajar dan membaca.
Untuk tutorial tentang komponen vue.js, silakan klik topik khusus tutorial pembelajaran komponen vue.js untuk dipelajari.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.