Kata pengantar
Pada bab sebelumnya, kami berhasil membuat halaman daftar melalui konstruksi dasar. Namun, ada banyak masalah. Dalam bab ini, kami akan menyelesaikan masalah ini.
Gunakan V-Bind untuk mengikat data.
Pada bab sebelumnya, kami memberikan halaman tersebut. Namun, jika konsol dibuka, Anda akan menemukan kesalahan. Seperti yang ditunjukkan pada gambar di bawah ini:
Ini karena ketika halaman masuk, kode HTML kami akan dieksekusi terlebih dahulu, dan pada saat ini, Vue kami belum mulai bekerja. Kode kami adalah sebagai berikut:
<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>Seperti disebutkan di atas, ketika halaman parse src = "{{info.author.avatar_url}}", tentu saja, jalur gambar ini tidak dapat ditemukan. Oleh karena itu, kesalahan akan terjadi secara alami. Karena itu, kita perlu memproses kode ini. Kami memodifikasinya menjadi
<img v-bind: src = "info.author.avatar_url" v-bind: alt = "info.author.loginname">
Oke, mari kita menyegarkan halaman, kali ini, tidak ada kesalahan.
Poin Pengetahuan Vue
Atribut pengikat v-bind http://vuej.org.cn/api/#v-bind
Mengisi kembali:
Bahkan, ketika kita membuka halaman, kita masih bisa melihat konten {{...}} ini dalam sekejap. Meskipun ini tidak akan melaporkan kesalahan, itu masih mempengaruhi sedikit pengalaman pengguna. Pada saat ini, kita dapat menggunakan v-text untuk menghasilkan konten ini. Seperti di atas, kami memodifikasi kode ke yang berikut:
<li v-for = "Info in Data"> <i> <img v-bind: src = "info.author.avatar_url" v-bind: alt = "info.author.loginname"> <span v-text = "info.author.loginname"> </span> </span> </i> <p-text = "info =" info. " href = "content.html? {{info.id}}" v-text = "info.title"> </a> </li>Ketika kami memodifikasi kode untuk ini, semua masalah diselesaikan.
Poin Pengetahuan Vue
V-Text Output Text http://vuejs.org.cn/api/#v-text
Mempercantik waktu
Format waktu yang kami dapatkan dari antarmuka seperti ini 2016-06-12T06: 17: 35.453z. Jelas, ini bukan efek yang kita inginkan. Efek yang kita inginkan harus seperti ini seperti yang diterbitkan 2 jam yang lalu. Bagaimana cara melakukannya?
Kami membutuhkan fungsi, yang digunakan untuk memberikan string primitif dan kemudian mengembalikan string yang kami inginkan.
Prinsip fungsi ini bukanlah fokus kami. Saya tidak akan menjelaskannya di sini. Saya hanya melihat kode sebagai berikut:
function goodtime (str) {var now = new date (). getTime (), oldtime = new date (str) .getTime (), perbedaan = sekarang - oldtime, hasil = '', menit = 1000 * 60, jam = menit * 60, hari = jam * 24, setengah hari = hari * 15, bulan = hari * 30, tahun = bulan * 12, _ sheyar = boneka/tahun, bulan _ _ _day = perbedaan/hari, _hour = perbedaan/jam, _min = perbedaan/menit; if (_year> = 1) {result = "diposting di" + ~~ (_year) + "tahun lalu"} lain jika (_month> = 1) {hasil = "diposting di" + ~~ (_month) + "bulan yang lalu"} lain jika (_week> = 1) {hasil = "diposting di" + ~ ~ {_week {_week> = 1) "Diposting di" + ~~ (_day) + "hari lalu"} lain jika (_hour> = 1) {result = "diposting di" + ~~ (_hour) + "jam yang lalu"} lain jika (_min> = 1) {result = "diposting" + ~ ~ ~ ~ _min) + "Minute yang lalu" Hasil pengembalian;}Kode ini memiliki bagian dari pinjaman dari kode orang lain.
Oke, sekarang, kita dapat menggunakan fungsi metode GoodTime (STR) untuk memodifikasi format waktu yang diberikan kepada kita oleh antarmuka untuk apa yang kita inginkan. Pertanyaannya sekarang adalah, bagaimana kita bisa menggunakan fungsi ini?
Metode bodoh, secara langsung memodifikasi data asli
Pertama, kami mendapatkan data melalui Ajax, dan kemudian menyerahkan data kepada Vue untuk rendering. Kemudian kita dapat melakukan operasi di tengah, memproses semua data, dan kemudian menyerahkan data yang diproses ke VUE untuk rendering. Masalah ini bisa diselesaikan.
Lakukan saja, mari kita lihat kodenya:
Fungsi pushdom (data) {// traversal pertama dan memodifikasi semua waktu dalam data untuk (var i = 0; i <data.data.length; i ++) {data.data [i] .create_at = goodtime (data.data [i] .create_at); }; // Kemudian tinggalkan ke vue untuk rendering var vm = vue baru ({el: '.list', data: data});}OK, melalui pemrosesan di atas, mari kita lihat efek halaman terakhir. Sebagai berikut:
Kesuksesan.
Vue Metode Filter Kustom
Meskipun kami berhasil di atas, itu benar -benar tidak elegan untuk membuat loop langsung sebelum Vue. Selain itu, kami ingin belajar Vue, di mana ini satu -satunya cara untuk belajar ...
Oke, mari kita gunakan fungsi filter khusus Vue untuk memprosesnya.
Tutorial resmi, filter khusus http://vuej.org.cn/guide/custom-filter.html
function pushdom (data) {// Gunakan vue filter khusus untuk memahat waktu yang berlalu di antarmuka vue.filter ('time', function (value) {return goodtime (value);}) var vm = vue baru ({el: '.list', data: data});}Dan, kita perlu memodifikasi bagian HTML kita sebagai berikut:
<time v-text = "info.create_at | time"> </take>
OK, efek implementasinya persis sama. Tapi kodenya terlihat jauh lebih elegan. Kuncinya adalah bahwa dalam proses ini, kami telah mempelajari dan menguasai penggunaan filter khusus. Bahkan, dalam banyak kasus, data yang diberikan kepada kami oleh antarmuka seringkali tidak cocok untuk rendering langsung pada halaman, sehingga fungsi ini sangat penting dan sangat umum digunakan.
ringkasan
Metode atribut elemen pengikat 1.V-Bind
Metode teks output output 2.V-TEXT
3. Penggunaan filter khusus Vue
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.
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.