Bagaimana untuk menambah dom pada vuejs

Cara menambah dom pada vuejs: 1. Mula-mula buat contoh dengan baharu; 2. Lekapkannya secara manual pada nod dom 3. Gunakan "$appendTo/$before/$after" dan kaedah lain untuk interpolasi .

Persekitaran pengendalian artikel ini: sistem Windows 7, versi Vue 2.9.6, komputer DELL G3

Cara menambah dom ke vuejs?

Cara memasukkan nod dom menggunakan vue.js

Artikel ini terutamanya memperkenalkan kaedah memasukkan nod dom menggunakan vue.js Not banyak yang ingin diperkatakan di bawah, mari kita lihat Mari perkenalkan secara terperinci.

kod html:

<div id="app"></div>

kod js:

var MyComponent = Vue.extend({
 template: &#39;<p>Hello World</p>&#39;
})
var myAppendTo = Vue.extend({
template:&#39;<p>appendTo</p>&#39;
})
var myBefore = Vue.extend({
 template:&#39;<p>before</p>&#39;
})
var myAfter = Vue.extend({
 template:&#39;<p>after</p>&#39;
})
// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount(&#39;#app&#39;);

// 手动挂载
new myAppendTo().$mount().$appendTo(&#39;#app&#39;);//appendTo
new myBefore().$mount().$before(&#39;#app&#39;);//before
new myAfter().$mount().$after(&#39;#app&#39;);//after

Penerangan:

1. Membandingkan kaedah penyisipan nod dom jquery, interpolasi vue.js memerlukan mula-mula mencipta tika dengan baharu dan kemudian menghantar $mount().

2. Lekapkannya secara manual pada nod dom, dan kemudian gunakan $appendTo/$before/$after dan kaedah lain untuk interpolasi.

3. Idea mengendalikan dom ini sebenarnya bukan cara vue menyokong, tetapi cara vue menyokong adalah untuk mencapai hasil yang anda inginkan dengan memanipulasi data.

4. Idea vue ialah dom sudah wujud, dan anda boleh mengawal paparan dan menyembunyikannya melalui penghakiman.

5. Jadi apabila menggunakan vue, cuba ubah cara anda berfikir semasa menggunakan jquery, seperti kaedah (v-if) yang disediakan oleh api.

<ul>
 <li v-if="ok">显示</li>
 <li v-else>隐藏</li>
</ul>

Anda juga boleh mengawal paparan dan bersembunyi melalui (v-show):

<ul>
 <li v-show="ok">显示</li>
</ul>

Kemudian perbezaan antara v-if dan v-show:

Vue.js mempunyai proses penyusunan/pemunggahan separa apabila menukar blok v-if, kerana templat dalam v-if mungkin juga termasuk pengikatan data atau subkomponen.

v-jika ialah pemaparan bersyarat yang benar, kerana ia akan memastikan bahawa blok bersyarat memusnahkan dan membina semula pendengar acara dan subkomponen dengan betul dalam blok bersyarat semasa suis.

v-jika juga malas: jika syarat palsu pada pemaparan awal, tiada apa yang dilakukan - kompilasi separa bermula hanya apabila syarat menjadi benar buat kali pertama (kompilasi dicache berdiri) .

Sebagai perbandingan, rancangan v adalah lebih mudah - elemen sentiasa disusun dan dikekalkan, hanya ditogol berdasarkan CSS.

Secara umumnya, v-if mempunyai kos penukaran yang lebih tinggi dan v-show mempunyai kos pemaparan awal yang lebih tinggi. Oleh itu, v-show adalah lebih baik jika anda perlu menukar dengan kerap,
v-if adalah lebih baik jika keadaan tidak mungkin berubah pada masa tayangan.

Disyorkan: "5 pilihan tutorial video vue.js terkini"

Atas ialah kandungan terperinci Bagaimana untuk menambah dom pada vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!