Cara menggunakan v-html

Question

"Kompilasi Vue.js terjadi ketika Anda membuat instance/me-mount instance root. Itu tidak mendeteksi DOM baru yang disuntikkan kecuali itu adalah hasil dari arahan (misalnya v-repeat, v-partial akan secara dinamis membuat fragmen DOM baru)." https://github.com/vuejs/Discussion/issues/77

Table of Contents Show

Apa Itu Directive Vue JS?
Jenis Directive pada Vue JS
1. Directive V-once
2. V-binding
6. Menampilkan Kode Html dengan V-html
7. Mengubah Tampilan Teks Menggunakan V-text
8. Manipulasi Data Variabel dengan V-on
9. V-for Instruksi yang Tak Boleh Disatukan dengan V-if
Mengapa Penggunaan V-if dan V-for tak Disarankan?
Keunggulan Vue JS
Kekurangan Vue JS

Anda harus mengkompilasi elemen yang baru ditambahkan seperti ini:

html:

<div id="app">
    <button v-on="click: addNewElement()">Add Element</button> 
    <br />
</div>

JavaScript

new Vue({
    el: '#app',
    data: {
        sampleElement: '<button v-on="click: test()">Test</button>'
    },
    methods:{
        addNewElement: function(){

           var element = $('#app').append(this.sampleElement);
           /* compile the new content so that vue can read it */
           this.$compile(element.get(0));
        },
        test: function(){
           alert('Test');
        }
    }
});

Lihat ini berfungsi Fiddle di Firefox: http://jsfiddle.net/chrislandeza/syewmx4e/

Perbarui

$ compile telah dihapus pada Vue 2.x

Saya pernah melihat orang menyarankan Vue.compile atau

var tmp = Vue.extend({ 
    template: 'Content'
})
new tmp().$mount(' id or refs ')

Tapi 2 itu tidak berperilaku seperti kompilasi $ lama.

Javascript merupakan bahasa pemrograman tingkat tinggi yang populer di kalangan developer. Banyak framework yang tersedia saat mengerjakan project javascript. Salah satu paling populer, Vue JS. Namun, sudahkah Anda tahu apa itu directive pada Vue JS?

Vue JS adalah kerangka kerja alias framework yang berguna membantu developer, menulis dan menyusun data variabel. Selanjutnya, dirender agar interface situs atau aplikasi lebih menarik.

Di dalamnya terdapat atribut directive untuk memudahkan menjalankan perintah. Yuk, kenalan dengan apa itu directive pada Vue JS, agar makin cepat membangun situs maupun aplikasi.

Apa Itu Directive Vue JS?

Hal utama menggunakan kerangka kerja ini adalah pengenalan dasar Vue JS untuk pemula. Melalui situs resmi dikatakan, bahwa sebaiknya Anda mempelajari dasar javascript dan HTML. Demi memudahkan menggunakan tools ini.

Di antara banyaknya komponen Vue JS, directive jadi salah satu atribut yang banyak digunakan pengembang.

Secara harfiah, directive berarti arahan. Namun di Javascript, directive merupakan atribut khusus yang diawali dengan huruf v untuk menjalankan perintah suatu program.

Melansir dari Sekawanmedia, fungsi directive yaitu mengambil aksi pada interface front end situs. Misalnya, perintah dasar v-if, elsa, model, dan sebagainya.

Jenis Directive pada Vue JS

Semua jenis directive di framework Vue JS, sangat berguna untuk mengembangkan situs. Mulai dari menambahkan warna, mengubah tampilan judul, hingga menambahkan text html di interface.

Menurut CSS Trick, directive adalah perintah sederhana yang bisa Anda input ke DOM element. Tujuan atribut yang diawali v ini, memberikan informasi pada library bahwa Anda menerapkan markup khusus.

Sehingga, sintaks tak berpindah. Oleh karena itu, mari pahami dengan beberapa tipe atribut arahan di bawah ini.

1. Directive V-once

Atribut V-once merupakan perintah untuk menampilkan elemen hanya sekali. Ketika Anda memasukan atribut V-once, maka element yang akan muncul tak dapat berubah sesudah di render. Meskipun, terjadi perubahan di script tampilan di situs maupun aplikasi tetap sama.

Proses perubahan data akan diabaikan oleh v-once sekalipun terdapat interpolasi string di elemen. Misalnya, H1 mengandung v-once lalu Anda berniat untuk mengubah judul.

Maka, hal yang bisa dilakukan menghilangkan v-once lebih dulu. Barulah masukan judul yang telah dimasukan di data. Sehingga, tampilan baru bisa muncul di situs.

2. V-binding

Kegunaan v-binding adalah memperbaharui nilai atribut alias data binding. Tujuan menggunakan direktif ini yaitu menginformasikan pada Vue JS, bahwa Anda ingin menjalankan data binding satu arah.

Melansir contoh dari Petani Kode, apabila element terdiri dari <a v-bind:href=”url”>…</a>. Artinya, Anda memerintahkan direktif untuk melakukan binding data di atribut href dengan variabel url.

Pengertian v-binding sendiri merupakan cara untuk mengikat data source dari fasilitator yang kemudian disinkronkan saat pengambilan.

3. V-if

V-if digunakan untuk melakukan rendering dengan ketentuan tertentu alias conditional rendering. Apabila variabel render bernilai palsu maka judul variabel tidak akan tertampil di situs. Sebaliknya, jika judul bernilai asli atau true, maka variabel akan dirender dan muncul di halaman situs.

4. V-show

Pengaplikasian instruksi v-show tak jauh berbeda dengan v-if. Namun, di v-show tidak dapat menggunakan template sintaks dan alternative condition. Penggunaan v-show ialah alternatif menampilkan conditional element.

Perbedaan lain yang terdapat di instruksi yang hampir mirip ini, yaitu v-show dinilai lebih sederhana daripada v-if.

5. V-model

Direktif yang digunakan untuk melakukan binding dua nilai template dan properti yaitu v-model. Token template akan memberitahu Vue, bagaimana Anda menangani DOM. V-model umum digunakan ketika merancang formulir dan input.

Sama halnya dengan v-if dan v-show, v-model sering dianggap sama dengan v-bind karena keduanya bertujuan mengikat element. Namun, nyatanya ada perbedaan signifikan. V-bind hanya bisa melakukan binding satu arah sementara v-model melalui dua arah. Sehingga, hasil yang ditampilkan pun bisa berbeda. Perlu diketahui, pastikan Anda memilih direktif yang benar sesuai kebutuhan.

6. Menampilkan Kode Html dengan V-html

Apabila Anda ingin menampilkan kode html di situs, bisa gunakan v-html. Direktif ini dijalankan untuk memperbarui inner html yang ada di data Anda. Input v-html di judul atau H1. Ketika dirender, maka yang muncul adalah judul beserta elemen yang sudah diinput ke data.

7. Mengubah Tampilan Teks Menggunakan V-text

Tak sedikit yang masih keliru antara fungsi V-text dan V-html. V-text berguna untuk memperbarui elemen dengan data.

Berdasarkan situs geeksforgeeks, Anda akan membuat elemen div dengan id. Sambil menerapkan v-text ke elemen baru sebagai pesan. Sedangkan untuk sintaksisnya yaitu v-teks =”data”.

8. Manipulasi Data Variabel dengan V-on

Anda dapat memanipulasi variabel data dengan v-on. Namun, fungsi utama direktif itu, memantau aktivitas yang dijalankan elemen html. Perannya sebagai event listener.

9. V-for Instruksi yang Tak Boleh Disatukan dengan V-if

Berdasarkan panduan di website resmi Vue JS, instruksi v-for berguna untuk menampilkan elemen yang terdaftar di array. Selain itu, perintah v-for berguna untuk menjangkau bagian induk dan perulangan untuk properti objek.

Mengapa Penggunaan V-if dan V-for tak Disarankan?

Bagi sebagian pengembang, gabungan v-if dan v-for dipakai untuk menyaring data yang terkumpul di array. Namun, penggabungan ini ternyata tak terlalu efektif. Lantaran, Vue JS lebih mengutamakan render menggunakan v-for daripada v-if.

Keunggulan Vue JS

Bagi Anda yang sudah pernah menggunakan framework react dan angular, tentu merasakan ada perbedaan. Menurut situs Glints, berikut keunggulan Vue JS daripada jenis kerangka kerja lainnya:

Proses instalasi terbilang mudah
Tersedia guideline atau panduan untuk menggunakan fitur directive
Memiliki banyak jenis directive
Ukuran file kecil tetapi responsive
Terintegrasi
Mudah digunakan untuk berbagai project
Vue JS menyediakan eksistensi chrome sehingga mudah diperiksa saat render

Jadi, tak heran mengapa banyak developer yang tertarik menggunakan Vue JS untuk menyelesaikan interface yang menarik.

Kekurangan Vue JS

Framework Vue JS memang unggul dan memiliki kelebihan dibanding kompetitor. Akan tetapi, kerangka kerja ini kurang cocok bagi Anda yang cenderung lambat beradaptasi.

Sebab, Vue sangat cepat dalam hal perkembangan, sehingga pengguna atau web developer dituntut mampu mengikuti perkembangan. Di samping itu, percepatan perkembangan turut berimbas pada kode plugin jadi tak kompatibel. Akibatnya, sulit membuat proyek baru,

Selain, Vue JS developer website dapat menggunakan framework terdahulu seperti React dan Angular sesuai kebutuhan dan kenyamanan. Paling utama, pastikan sudah memahami dasar html, javascript, dan CSS ya demi memudahkan menjalankan program.

Kini, sudah tahu kan, apa itu Vue JS di Javascript. Semoga kehadiran fungsi arahan memudahkan kegiatan pemrograman. Anda dapat mengunduh via Chrome Extension untuk menggunakannya. Apabila sudah terunduh, biasanya muncul ikon Vue JS di bagian atas Chrome.

Post Views: 673

kode html