Indonesian Subtitles for Vue.js 2 Quickstart Tutorial 2017



Subtitles / Closed Captions - Indonesian

hi nama saya <font color="#E5E5E5">Dustin dari pengkodean </font>

cara yang tenang cerdas dan hari ini di <font color="#CCCCCC">video ini </font> Saya ingin <font color="#E5E5E5">memberi </font><font color="#CCCCCC">Anda singkat </font> pengantar ke tampilan js2 <font color="#E5E5E5">front-end </font> Kerangka dan melihat adalah sangat baru Kerangka yang keuntungan banyak traksi saat ini dan dalam pengantar ini

Saya akan memandu Anda melalui langkah-langkah pertama Anda <font color="#CCCCCC">perlu tahu untuk memulai dengan </font> kerangka kerja dan memulai proyek virus sehingga menantikan <font color="#CCCCCC">apa yang pertama itu selalu </font> ide yang baik untuk <font color="#E5E5E5">melihat pada proyek </font> situs dan pandangan <font color="#CCCCCC">jas website dapat </font>

ditemukan di UJS gelap dan <font color="#CCCCCC">Anda dapat melihatnya </font> di sini jadi apa sebenarnya vu lengan pandangan sebagai progresif Anda memiliki kerangka naskah yang berfokus pada membangun user interface sehingga hanya bekerja <font color="#E5E5E5">dalam tampilan lapisan </font> aplikasi Anda dan itu tidak membuat

asumsi middleware dan <font color="#CCCCCC">kembali dan </font> teknologi yang Anda gunakan sehingga sebenarnya Anda dapat bekerja sama dengan semua <font color="#E5E5E5">kembali umum dan teknologi yang </font> tersedia <font color="#CCCCCC">untuk pengembangan web di </font> saat dan dapat dengan mudah diintegrasikan ke

<font color="#E5E5E5">proyek yang ada tentu saja dan </font> yang <font color="#E5E5E5">membuatnya sangat mudah untuk mengintegrasikan </font> tampilan dalam proyek-proyek yang ada lain Keuntungan utama dari pandangan Jas adalah bahwa hal itu <font color="#E5E5E5">sangat performant sehingga Anda dapat </font><font color="#CCCCCC">membacanya </font> di sini itu hanya 17 kilobyte dan ukuran dan

itu berarti perpustakaan inti dan yang membuat aplikasi Anda super cepat sehingga overhead Anda menambahkan dengan memasukkan lihat <font color="#CCCCCC">kursi </font><font color="#E5E5E5">dalam proyek Anda sangat </font> kecil dan yang memastikan <font color="#CCCCCC">bahwa Anda </font> aplikasi yang performant <font color="#CCCCCC">apa-apa jika </font><font color="#E5E5E5">Anda </font>

<font color="#CCCCCC">ingin mengintegrasikan pandangan draya ke dalam Anda </font> Proyek ada <font color="#E5E5E5">cara yang berbeda </font> perbuatan jadi mari kita klik di sini pada panduan untuk mendapatkan gambaran <font color="#E5E5E5">dari pilihan yang berbeda dan </font> <font color="#E5E5E5">Anda bisa klik pada instalasi di sini </font>

menu sisi kiri dan di sini Anda dapat <font color="#CCCCCC">melihat </font> <font color="#CCCCCC">ada pilihan yang berbeda </font><font color="#E5E5E5">sehingga untuk </font> <font color="#E5E5E5">Misalnya Anda dapat memasukkannya langsung oleh </font> menggunakan tag script di <font color="#CCCCCC">halaman HTML Anda </font> yang <font color="#E5E5E5">pada dasarnya semua apa </font><font color="#CCCCCC">yang dibutuhkan </font><font color="#E5E5E5">untuk </font> <font color="#CCCCCC">pergi </font><font color="#E5E5E5">dengan pandangan dan Anda dapat </font>

mengintegrasikan <font color="#E5E5E5">secara langsung dengan menggunakan script </font> tag dan menggunakan sumber daya dari konten sebuah jaringan pengiriman misalnya dia menjalankan Paket salah satu pengiriman konten jaringan yang membuat pemirsa <font color="#CCCCCC">j / s weibull </font> dan itu <font color="#CCCCCC">pilihan termudah lain </font>

pilihan adalah <font color="#CCCCCC">dengan menggunakan </font><font color="#E5E5E5">manajer paket NPM </font> untuk menginstal <font color="#CCCCCC">tampilan oleh atau hanya mengetik di </font> <font color="#E5E5E5">NPM menginstal tampilan yang itu-download </font> perpustakaan dan <font color="#E5E5E5">menambahkannya ke catatan </font> modul folder proyek Anda dan ada adalah <font color="#CCCCCC">versi lain dan itu </font><font color="#E5E5E5">adalah lain </font>

Versi yang akan yang kita akan menggunakan dalam video ini <font color="#CCCCCC">dan itu pandangan </font> <font color="#CCCCCC">Jas CLI adalah antarmuka baris perintah dan </font> dengan antarmuka baris perintah Anda mendapatkan komandan lain itulah tampilan perintah dan dengan menggunakan perintah yang

Anda dapat memulai proyek baru yang berdasarkan template dan sudah termasuk tampilan perpustakaan sehingga Anda tidak <font color="#CCCCCC">perlu </font><font color="#E5E5E5">men-download dalam langkah terpisah </font> <font color="#E5E5E5">Oke jadi mari kita beralih ke </font><font color="#CCCCCC">baris perintah </font> dan mulai menginstal pandangan perintah

antarmuka baris sehingga kita dapat <font color="#CCCCCC">menggunakannya untuk </font> <font color="#E5E5E5">memulai proyek pertama kami dan untuk melakukannya </font> kita <font color="#E5E5E5">perlu mengatakan NPM menginstal dan saya melakukannya </font> sebagai G user root dikurangi karena kita ingin <font color="#CCCCCC">untuk menginstal tampilan perintah-baris </font> antarmuka sebagai perintah global sehingga kita perlu

untuk memberikan pilihan itu g untuk global dan <font color="#CCCCCC">nama paket </font> dash melihat di CL Saya begitu mengeksekusi bahwa perintah dan instalasi <font color="#E5E5E5">adalah mengambil </font> ok kedua di sini kita dapat melihat instalasi telah selesai

berhasil dan sekarang <font color="#CCCCCC">tampilan baru </font> Perintah tersedia Anda bisa melihatnya di sini memiliki pilihan yang berbeda dan untuk menghasilkan sebuah proyek baru kita <font color="#E5E5E5">menggunakan </font> Opsi pertama di sini dalam adopsi dan kami melakukannya <font color="#E5E5E5">dengan cara berikut mari kita simpan </font>

Anda di dalamnya paket web karena <font color="#E5E5E5">kami </font><font color="#CCCCCC">ingin </font> mendapatkan template proyek yang menggunakan paket web loader modul dan bundler dan kemudian pada <font color="#E5E5E5">parameter terakhir </font> memberi nama proyek dan kami hanya <font color="#E5E5E5">menyebutnya melihat aplikasi 01 dan sekarang </font>

memulai proyek Anda dapat <font color="#E5E5E5">melihat itu </font> download template dan kemudian itu mengajukan beberapa pertanyaan pertama yang perlu <font color="#CCCCCC">kita </font> memberikan <font color="#E5E5E5">nama proyek di sini dan kita bisa </font> <font color="#E5E5E5">meninggalkannya di default sini melihat aplikasi </font><font color="#CCCCCC">01 </font> deskripsi proyek meskipun jika

bawaan disini penulis dan sekarang menanyakan bagaimana pandangan dibangun harus dilakukan kami <font color="#E5E5E5">memilih runtime dan kompilasi </font> itu adalah cara yang direkomendasikan bertahun-tahun Linda fitur untuk <font color="#CCCCCC">saat ini saya katakan </font><font color="#E5E5E5">tidak dan </font> sini mengenai setup tes adalah karma

dan penodong meskipun tidak ada dan end-to-end tes tidak menonton lagi tidak jadi itu semua apa yang dibutuhkan sekarang proyek baru folder diciptakan tampilan aplikasi <font color="#E5E5E5">satu dan </font> Anda <font color="#CCCCCC">bisa melihatnya di sini langkah berikutnya adalah untuk </font> berubah menjadi folder tersebut dan kemudian

menyelesaikan instalasi dengan menginstal semua akhirnya <font color="#CCCCCC">em paket apa yang dibutuhkan untuk </font><font color="#E5E5E5">proyek </font><font color="#CCCCCC">kami </font><font color="#E5E5E5">dengan </font> menggunakan <font color="#E5E5E5">NPM menginstal perintah oke jadi </font> mari kita jangan jadi beralih ke dalam proyek baru direktori dan kemudian mengeksekusi <font color="#E5E5E5">NPM install </font>

dalam direktori itu dan sekarang itu mengambil download semua paket yang didefinisikan dalam file JSON paket dot yang <font color="#E5E5E5">ditambahkan ke </font><font color="#CCCCCC">proyek yang file </font> berisi semua dependensi dan itu men-download <font color="#CCCCCC">semua dependensi dan </font>

menginstal modul simpul ke modul simpul folder <font color="#CCCCCC">proyek </font><font color="#E5E5E5">dan </font> ini lagi <font color="#E5E5E5">membutuhkan waktu satu detik </font><font color="#CCCCCC">untuk menyelesaikan </font> <font color="#E5E5E5">oke di sini </font><font color="#CCCCCC">kita sudah selesai dan sekarang </font> kita bisa melakukan tes pertama dan kami bisa memulai di web server web pengembangan

server untuk menjalankan proyek dan <font color="#CCCCCC">yang </font> lagi dilakukan dengan menggunakan <font color="#E5E5E5">perintah</font><font color="#CCCCCC"> NPM dan </font> katakanlah NPM run def di sini <font color="#E5E5E5">baik-baik saja Anda bisa </font> melihat browser dibuka secara otomatis dan itu loading pada <font color="#CCCCCC">proyek di sini di </font> port host lokal 8080 dan Anda dapat melihat

<font color="#CCCCCC">Aplikasi yang diinisialisasi dengan maksud </font> perintah sudah berjalan dan menunjukkan output ini di sini <font color="#E5E5E5">di browser dan jika </font><font color="#CCCCCC">saya </font> beralih kembali ke terminal Anda dapat <font color="#CCCCCC">melihat </font> itu mengatakan apa-apa itu dikompilasi berhasil dan sekarang apa server

mendengarkan di localhost 8080 dan itu adalah ulang server hidup sehingga jika kita menerapkan sekarang perubahan <font color="#CCCCCC">website </font> <font color="#E5E5E5">loading otomatis tanpa </font> langkah-langkah manual melihat mengapa tidak <font color="#E5E5E5">apa-apa jadi mari kita </font> menjaga proyek kami berjalan di sini <font color="#E5E5E5">dan saya memiliki </font>

<font color="#E5E5E5">membuka tab lain di sini di perintah </font> line dan aku di proyek yang sama direktori di sini dan sekarang mari kita mulai saya code editor dan <font color="#E5E5E5">itulah Adam </font> sehingga kita dapat <font color="#E5E5E5">melihat pada </font> Struktur proyek awal <font color="#CCCCCC">baik-baik saja di sini adalah </font>

jadi mari kita tutup dan melihat apa yang ada <font color="#E5E5E5">di dalamnya </font> dari folder proyek kami dan di sini Anda <font color="#E5E5E5">bisa </font><font color="#CCCCCC">melihat kami telah berbagai file termasuk </font> di sini Anda dapat melihat file package.json yang <font color="#CCCCCC">api juga ada ketergantungan </font> yang terdaftar dan <font color="#E5E5E5">sebelum kita telah memastikan </font>

bahwa dependensi telah download <font color="#E5E5E5">dan diinstal ke </font><font color="#CCCCCC">node </font> modul folder dengan mengeksekusi <font color="#CCCCCC">NPM di </font> perintah gaya dalam folder proyek dan maka <font color="#E5E5E5">file berikutnya yang </font><font color="#CCCCCC">penting adalah </font> file index.html karena dalam <font color="#E5E5E5">file tersebut </font>

<font color="#E5E5E5">Anda menemukan titik awal dari </font> aplikasi dan <font color="#E5E5E5">Anda dapat melihat itu polos </font> file sederhana ha HTML dan dalam tubuh <font color="#CCCCCC">bagian dari HTML yang mengajukan bagian diff </font> disertakan dan <font color="#E5E5E5">bahwa lengan defleksi </font> memiliki satu atribut disini ID atribut

dan ID ID atribut akan ditugaskan string dalam kasus kami <font color="#E5E5E5">itu aplikasi tali </font> dan <font color="#CCCCCC">z penyakit lengan placeholder sehingga </font> pandangan kerangka tahu di mana untuk menyisipkan konten <font color="#CCCCCC">yang dihasilkan oleh </font> tampilan aplikasi ok leher terbuka let depan

sumber folder karena sehingga merupakan menempatkan dalam struktur proyek kami di mana pandangan <font color="#CCCCCC">jes aplikasi diimplementasikan dan </font> mari kita buka dalam bahwa folder file utama dot <font color="#CCCCCC">jas dan itulah tempat di mana </font> <font color="#CCCCCC">aplikasi penampil diinisialisasi </font>

<font color="#E5E5E5">dan Anda dapat lihat di sini kita mengimpor </font> dua hal di sini pertama kita perlu <font color="#E5E5E5">mengimpor </font> pandangan dari pandangan dan <font color="#CCCCCC">bahwa </font><font color="#E5E5E5">ini </font><font color="#CCCCCC">adalah </font> kelas aplikasi utama dan Anda dapat melihat di sini itu digunakan <font color="#E5E5E5">untuk membuat baru </font> contoh

kerangka dan bersama-sama dengan pandangan kami mengimpor hal kedua dan yang aplikasi dari <font color="#CCCCCC">file aplikasi dan itu adalah </font> komponen kami menerapkan sini di proyek kami yang tersedia <font color="#E5E5E5">di sini </font><font color="#CCCCCC">di </font> <font color="#E5E5E5">Pandangan Epcot kita akan melihat di sisi </font>

<font color="#CCCCCC">implementasi bahwa dalam kedua tetapi </font> pertama mari kita fokus pada bagian sini dan contoh tampilan kerangka baru dibuat dengan memanggil mereka <font color="#CCCCCC">konstruktor </font> dengan menggunakan kata kunci baru dan konstruktor mendapat satu parameter dan

<font color="#E5E5E5">itu objek di sini dengan ini </font> sifat konfigurasi ulang dan yang pertama <font color="#E5E5E5">properti di sini Anda dapat melihat itu disebut </font><font color="#CCCCCC">al </font> <font color="#E5E5E5">untuk elemen dan yang </font><font color="#CCCCCC">akan ditugaskan </font> tali di sini dan yang terutama katakan atau sebuah mendefinisikan bahwa output <font color="#CCCCCC">dari pandangan </font>

<font color="#CCCCCC">Aplikasi harus dimasukkan ke dalam </font> Unsur yang <font color="#CCCCCC">merupakan ID aplikasi dan kami melihat </font> sebelum di file index.html kita ditugaskan aplikasi string untuk <font color="#CCCCCC">properti rd z </font> dan sekarang kita menghubungkan pandangan kami aplikasi dengan elemen div sehingga

Output <font color="#CCCCCC">yang dihasilkan HTML </font> Output yang <font color="#E5E5E5">dihasilkan </font><font color="#CCCCCC">oleh pandangan kami </font> aplikasi menggantikan div bahwa elemen dalam file indeks HTML kita sehingga inilah template dari aplikasi kita dan bahwa template <font color="#CCCCCC">E sangat sederhana </font>

karena itu hanya <font color="#E5E5E5">mengandung satu unsur </font> dan <font color="#CCCCCC">itu adalah elemen Z AB yang </font> mengacu <font color="#E5E5E5">pada komponen aplikasi dan oleh </font> menggunakan elemen bahwa di sini di template kita kita mendefinisikan bahwa pada output HTML <font color="#CCCCCC">yang dihasilkan oleh komponen aplikasi </font>

harus ditempatkan di sini <font color="#E5E5E5">dalam pandangan kami </font> Template jadi bagian dari output pandangan mana aplikasi kita menghasilkan dan untuk dapat digunakan pada <font color="#E5E5E5">elemen aplikasi </font> di sini dan termasuk output dari <font color="#CCCCCC">aplikasi </font> komponen

kita tidak <font color="#CCCCCC">hanya perlu mengimpor sini kita </font> juga <font color="#E5E5E5">perlu untuk menyatakan di sini dalam </font> objek kita menugaskan ke komponen properti dalam tampilan konfigurasi objek sehingga Melihat Aplikasi tahu bahwa kita <font color="#E5E5E5">ingin membuat </font>

penggunaan komponen aplikasi dalam template kami <font color="#CCCCCC">Oke jadi mari kita beralih ke </font> <font color="#CCCCCC">pelaksanaan komponen aplikasi dan </font> pelaksanaannya tersedia di aplikasi pandangan kodok jadi di sini Anda <font color="#CCCCCC">dapat melihat set kami </font> pelaksanaan <font color="#CCCCCC">akhir yang lengkap seperti di </font>

setiap pandangan <font color="#E5E5E5">J sebagai komponen file tunggal </font> implementasi sebagai file dibagi menjadi tiga bagian di atas bisa anda <font color="#CCCCCC">lihat disini </font> adalah <font color="#E5E5E5">bagian template aplikasi </font> Komponen maka kita memiliki bagian naskah di sini dan <font color="#E5E5E5">akhirnya kami memiliki di sini </font>

<font color="#CCCCCC">Bagian gaya yang berisi tentang CSS styling </font> kode <font color="#CCCCCC">untuk template komponen dan </font> Anda dapat melihat yang <font color="#E5E5E5">membuatnya sangat mudah untuk </font> menjaga gambaran karena semuanya milik salah satu komponen sini dalam satu file dan jadi mari kita pertama

<font color="#E5E5E5">lihatlah bagian naskah Anda </font> bisa lihat di sini bagian script membuat seorang ahli default dan komponen konfigurasi objek untuk tampilan dan objek konfigurasi mengandung <font color="#E5E5E5">dua sifat </font><font color="#CCCCCC">nama yang menugaskan </font>

nama untuk komponen dalam kasus kami <font color="#CCCCCC">itu </font> aplikasi dan lagi properti komponen mengambil objek yang berisi semua komponen berikutnya yang digunakan di sini dalam komponen aplikasi dan kami memiliki satu komponen <font color="#CCCCCC">yang tercakup disini adalah </font>

halo komponen itu tercantum di sini karena jika kita <font color="#CCCCCC">melihat </font><font color="#E5E5E5">pada template Anda </font> dapat melihat komponen halo disertakan <font color="#E5E5E5">dalam template dengan menggunakan LM halo </font> dan di sini dan sekarang Anda bisa <font color="#CCCCCC">melihat </font> template tidak begitu lama dengan hanya satu

<font color="#E5E5E5">bagian diff di sini dan bagian diff </font> terdiri dari dua <font color="#CCCCCC">elemen </font><font color="#E5E5E5">satu gambar </font> Elemen elemen gambar ini termasuk file logo PNG dan output dan <font color="#E5E5E5">itu termasuk output yang </font> dihasilkan <font color="#E5E5E5">oleh sub komponen halo dan </font>

jika <font color="#CCCCCC">kita sekarang membandingkan template yang ke </font> Output yang <font color="#CCCCCC">weibull di sini di </font> Browser Anda dapat melihat <font color="#CCCCCC">label</font><font color="#E5E5E5"> disini </font> itu <font color="#E5E5E5">file logo dan semua lainnya </font> Output <font color="#CCCCCC">yang dihasilkan di sini </font> <font color="#CCCCCC">Selamat pesan sayap penting yang </font>

link ekosistem dan sebagainya datang dari <font color="#E5E5E5">konten atau output </font><font color="#CCCCCC">yang </font> diproduksi oleh <font color="#E5E5E5">Z komponen halo dan </font> disertakan <font color="#CCCCCC">di sini dalam template jadi mari kita </font> <font color="#E5E5E5">lihatlah bagian terakhir dari pada </font> struktur proyek awal dan itulah

pelaksanaan komponen halo implementasi <font color="#CCCCCC">sebagai weibull di sini di </font> komponen subfolder dan file yang halo dot pandangan dan / atau membuka file itu dan di sini Anda dapat <font color="#CCCCCC">melihat lagi kita memiliki template </font> Bagian tersedia maka kita memiliki kru

<font color="#CCCCCC">/ </font><font color="#E5E5E5">Bagian </font><font color="#CCCCCC">naskah </font><font color="#E5E5E5">dan akhirnya </font><font color="#CCCCCC">menggunakan </font> bagian gaya dan seperti yang Anda lihat jika kita mulai dengan mengambil melihat script bagian lagi ekspor default dibuat mendefinisikan konfigurasi komponen keberatan nama dalam hal ini adalah halo

karena kita mendefinisikan sih komponen dan kemudian <font color="#CCCCCC">ada sesuatu </font> <font color="#E5E5E5">baru itu fungsi data yang mengembalikan sebuah </font> objek dengan satu properti termasuk dan itu adalah Z msg <font color="#E5E5E5">singkatan pesan </font> properti dan msg akan ditugaskan

Selamat Datang tali dan Anda dapat melihat itu selamat datang <font color="#E5E5E5">untuk tampilan Anda </font> rel aplikasi itulah <font color="#CCCCCC">string </font> yang dikeluarkan di sini <font color="#CCCCCC">sebagai judul </font> bawah file logo dan jika Anda mengambil <font color="#E5E5E5">lihat kode template </font><font color="#CCCCCC">yang </font>

didefinisikan di sini Anda dapat melihat di properti msg seperti yang digunakan disini template di elemen h1 dengan menggunakan interpolasi sintaks yang mengharuskan untuk menggunakan terbuka dan menutup kurung kurawal ganda dan dengan menggunakan sintaks zetas kami <font color="#E5E5E5">dapat menyertakan </font>

properti dari <font color="#E5E5E5">obyek yang </font> kembali dari fungsi data yang komponen dalam template kita dan itulah Alasan <font color="#CCCCCC">mengapa teks </font><font color="#E5E5E5">dari </font><font color="#CCCCCC">msg </font> properti dicetak di sini dan yang sisa template Anda dapat melihat itu

tentang mencetak link tersebut di sini kita telah bagian link yang penting termasuk dalam sebuah elemen h2 dan <font color="#E5E5E5">kemudian sebagai daftar semua </font> link <font color="#E5E5E5">yang dicetak dan kami memiliki </font> ekosistem di sini itu bagian dengan fallings menunjuk untuk melihat <font color="#CCCCCC">yucks router </font>

pandangan loader dan pemandangan menakjubkan seterusnya <font color="#CCCCCC">Langkah berikutnya </font><font color="#E5E5E5">saya </font><font color="#CCCCCC">ingin membuat beberapa </font><font color="#E5E5E5">perubahan </font> untuk pelaksanaan awal dan hanya untuk <font color="#CCCCCC">memberikan </font><font color="#E5E5E5">kesan betapa mudahnya </font> adalah dengan <font color="#CCCCCC">menggunakan pandangan kerangka kerja dan untuk memberikan </font> <font color="#E5E5E5">Anda sedikit pengantar untuk beberapa </font>

tampilan standar <font color="#CCCCCC">jrs arahan dan </font><font color="#E5E5E5">saya mulai </font> dengan <font color="#CCCCCC">dengan perubahan dengan menghapus beberapa </font> konten di sini di template komponen halo dan <font color="#E5E5E5">aku </font><font color="#CCCCCC">akan </font> menghapus segala sesuatu yang <font color="#E5E5E5">berkaitan dengan </font> dua <font color="#CCCCCC">bagian link di sini jadi mari kita </font>

menghapus ini sehingga kita <font color="#E5E5E5">hanya mencetak </font> keluar <font color="#CCCCCC">pesan selamat datang dan Anda dapat melihat </font> Saya menyimpan file dan langsung <font color="#E5E5E5">mendapat reloaded di </font> Browser tanpa perlu aku <font color="#E5E5E5">lakukan </font> apapun secara manual di sini dan sekarang kita bisa pergi

pada dengan menerapkan misalnya <font color="#E5E5E5">daftar </font> mencetak dan <font color="#E5E5E5">aku mendefinisikan data yang lain </font> properti <font color="#E5E5E5">di sini di objek </font><font color="#CCCCCC">yang </font> dikembalikan oleh <font color="#CCCCCC">data</font><font color="#E5E5E5"> diukur dan aku </font> penamaan array <font color="#E5E5E5">saya ingin memiliki </font> pengguna dan kemudian mendefinisikannya sebagai array dan

dalam array yang katakanlah kita memiliki benda termasuk dalam <font color="#E5E5E5">array yang </font> terdiri dari dua sifat mari kita gunakan properti nama pertama dan menetapkan pertama string name dan nama terakhir <font color="#CCCCCC">oke itu </font> begitu mari kita mungkin menambahkan dua elemen lebih

di sini <font color="#E5E5E5">baik-baik saja menetapkan nama pertama yang berbeda </font> dan nama terakhir <font color="#E5E5E5">untuk objek pengguna kedua </font> dan untuk objek cert pengguna mari kita gunakan John sebagai nama pertama <font color="#E5E5E5">dan mungkin Porter sebagai </font> nama terakhir sehingga sekarang kami <font color="#E5E5E5">memiliki tiga pengguna </font> didefinisikan di sini di pengguna array dan sekarang

kami <font color="#CCCCCC">dapat menggunakan atau memanfaatkan </font> yang <font color="#E5E5E5">pengguna array dengan konten </font> termasuk dalam template kami dan saya <font color="#CCCCCC">ingin </font> mencetak para pengguna sebagai daftar jadi di bawah elemen h1 mari kita termasuk lain bagian diff di sini dan ini harus menjadi

daftar unordered dan saya mengatakan item daftar dan sekarang aku menggunakan <font color="#E5E5E5">tampilan </font><font color="#CCCCCC">Jas </font> direktif standar yang disebut <font color="#E5E5E5">V </font> minus <font color="#E5E5E5">4 dan saya katakan itu sama dengan beberapa </font> pengguna musim semi di pengguna dan dengan menerapkan <font color="#E5E5E5">bahwa sintaks disini pandangan </font><font color="#CCCCCC">Jas kerangka </font>

adalah <font color="#E5E5E5">iterasi array dan </font> termasuk elemen satu item daftar <font color="#CCCCCC">per </font> obyek <font color="#E5E5E5">didefinisikan dalam array kita di </font> <font color="#E5E5E5">dihasilkan output dan sekarang kita dapat menggunakan </font> sintaks interpolasi sekali lagi untuk <font color="#CCCCCC">cetak </font> nilai-nilai yang pertama mencetak pengguna

<font color="#E5E5E5">Nama pertama dan kemudian mencetak pengguna </font> lastname <font color="#CCCCCC">oke mari kita simpan dan Anda dapat </font> melihat pada output <font color="#CCCCCC">yang dihasilkan dan </font><font color="#E5E5E5">saya dan </font> mendapatkan kembali nama-nama pengguna <font color="#CCCCCC">oke </font> jadi hal berikutnya yang saya <font color="#CCCCCC">ingin memasukkan adalah </font> elemen input dan menggunakan data dua arah

mengikat untuk sync nilai input elemen yang properti <font color="#CCCCCC">yang </font> didefinisikan dalam model data kami <font color="#E5E5E5">baik-baik saja mari </font> pertama mendefinisikan properti baru <font color="#CCCCCC">di sini di </font> objek kembalinya fungsi data dan mari nama yang masukan properti baik dan

hanya menetapkan string kosong di sini <font color="#E5E5E5">baik-baik saja </font> dan dalam template kita di sini di bawah Bagian diff dari daftar pengguna <font color="#E5E5E5">saya </font> mendefinisikan bagian diff lain dan dalam bahwa diff bagian saya termasuk elemen input dan mari kita gunakan

<font color="#E5E5E5">waktu teks dan kita tidak perlu nama dan </font> menghargai di sini bukannya saya menggunakan lain <font color="#E5E5E5">pandangan j sebagai direktif standar yang </font> disebut <font color="#CCCCCC">V Model View Model dasbor dan </font><font color="#E5E5E5">aku </font> menugaskan <font color="#CCCCCC">bar string input yang </font> sesuai <font color="#CCCCCC">dengan nama properti kami </font>

kami telah didefinisikan di sini dan <font color="#E5E5E5">mari kita output pada </font> properti yang di sini di bawah input elemen dan katakanlah atau katakanlah kami bertelur dan saya menggunakan <font color="#E5E5E5">teks v dasbor </font> direktif dan lagi <font color="#CCCCCC">aku menugaskan masukan </font> Val <font color="#CCCCCC">oke jadi mari kita lihat di sini adalah masukan kami </font>

elemen dan sekarang saya bisa mulai <font color="#E5E5E5">mengetik </font> sesuatu ke dalam <font color="#E5E5E5">pengembangan dan Anda </font> bisa lihat di sini itu output dari kami span elemen yang <font color="#CCCCCC">terikat untuk input </font> elemen baik dengan menggunakan <font color="#CCCCCC">teks v dikurangi </font> direktif <font color="#E5E5E5">output dari z masukan di sini </font>

langsung tercermin di sini sebagai output pada <font color="#CCCCCC">halaman yang sama </font><font color="#E5E5E5">baik-baik saja hal terakhir saya akan </font> <font color="#E5E5E5">ingin </font><font color="#CCCCCC">menunjukkan adalah bagaimana Anda dapat menggunakan </font> pada acara dengan uji coba lihat obat dan akan menyertakan bagian diff lain di sini sehingga kasus penggunaan <font color="#E5E5E5">saya ingin </font>

mengimplementasikan adalah <font color="#CCCCCC">salah satu yang sangat mudah hanya beritahu kami </font> <font color="#E5E5E5">menerapkan tombol yang </font> akan kenaikan counter dengan satu setiap kali pengguna <font color="#E5E5E5">mengklik tombol </font> jadi mari kita pertama mendefinisikan data kontra properti di sini, di data kami keberatan <font color="#E5E5E5">saya </font>

akan menelepon counter dan mengaturnya awalnya untuk 20 dan dalam yang baru Deteksi Aku menerapkan sebuah tombol <font color="#CCCCCC">dan </font> tombol ini harus mencakup dan cantik event handler dan saya menggunakan <font color="#E5E5E5">dasbor v direktif pada diikuti </font><font color="#CCCCCC">oleh </font>

Acara <font color="#CCCCCC">saya </font><font color="#E5E5E5">ingin menanggapi dan </font> yang merupakan acara klik dan setiap <font color="#CCCCCC">kali </font> pengguna <font color="#E5E5E5">mengklik tombol counter </font> properti harus bertambah jadi aku menggunakan <font color="#E5E5E5">plus plus di sini dan isi </font> tombol pastikan untuk mencerminkan <font color="#CCCCCC">nilai </font>

counter jadi <font color="#CCCCCC">aku termasuk sedikit </font> sedikit informasi teks di sini Anda memiliki diklik tombol ini dan sekarang aku <font color="#E5E5E5">akan </font> <font color="#CCCCCC">menggunakan sintaks interpolasi lagi untuk </font> termasuk nilai dari counter <font color="#E5E5E5">x </font><font color="#CCCCCC">ok </font> mari kita simpan dan melihat bagaimana <font color="#CCCCCC">output </font>

Sepertinya jadi sekarang di sini adalah tombol <font color="#E5E5E5">dan saya </font> dapat <font color="#E5E5E5">klik pada tombol dan setiap kali saya </font> klik Anda <font color="#CCCCCC">dapat lihat adalah nilai counter </font> yang dicetak pada tombol di sini bertambah satu ini adalah sama <font color="#E5E5E5">dari coding cara pintar </font><font color="#CCCCCC">tenang jika Anda melakukannya </font>

seperti video saya jangan <font color="#CCCCCC">lupa untuk </font> berlangganan <font color="#E5E5E5">ke saluran saya melihat Anda di </font> Video bye berikutnya kamu



Video Description

#1 Online Course: Vue JS 2 - The Complete Guide (http://codingthesmartway.com/courses/vuejs2-complete-guide/)

Vue.js 2 Quickstart Tutorial 2017

Vue is a progressive JavaScript framework that focuses on building user interfaces. As it only works in the “view layer” it makes no assumption of middleware and backend and therefore can be integrated easily into other projects and libraries. Vue.js offers a lot of functionality for the view layer and can be used for building powerful single-page webapps. In this video tutorial you'll learn how to get started with Vue.js!

This is a CodingTheSmartWay.com tutorial

---------------------
Check out our ebooks on Leanpub.com:

* Angular 2 - A Practical Introduction to the new Web Development Platform
https://leanpub.com/angular2-book

* Ionic 2 - A Practical Introduction To Hybrid Mobile Apps Development
https://leanpub.com/ionic2-book
---------------------

Musik:
Night Owl by Broke For Free is licensed under a Creative Commons Attribution License.
(http://freemusicarchive.org/music/Broke_For_Free/Directionless_EP/Broke_For_Free_-_Directionless_EP_-_01_Night_Owl)