Bermula dengan Vue.js

Pandangan cepat konsep teras Vue.js

vue.js adalah perpustakaan JavaScript berdasarkan seni bina MVVM, yang digunakan untuk membina antara muka pengguna. Ia lebih mudah, lebih mudah untuk belajar dan fleksibel daripada AngularJS. Fungsi terasnya termasuk:

• Pengikatan data: menyokong pengikatan data satu arah dan dua hala. Arahan dan penapis: v-model Arahan digunakan untuk mengendalikan DOM, dan penapis digunakan untuk memproses data.
• Componentisasi: Buat elemen HTML tersuai yang boleh diguna semula untuk meningkatkan kebolehbacaan dan penyelenggaraan kod, dan gunakan atribut
untuk lulus sifat komponen.
• props Nota: Tutorial ini didasarkan pada versi Vue.js 1.x. Sila rujuk sumber lain untuk tutorial VUE 2.x.

Tambah vue.js ke halaman

disyorkan untuk menggunakan CDN untuk memperkenalkan Vue.js:

Buat model paparan

<🎜>

Model paparan

vue.js dibuat menggunakan kelas . Lihat Model Menghubungkan Model Data dan Lihat.

Contoh:

Vue html view:

Model data:

Lihat Model:

<div id="my_view"></div>

Tunjukkan data dalam pandangan menggunakan

var myModel = {
  name: "Ashley",
  age: 24
};

sintaks:

var myViewModel = new Vue({
  el: '#my_view',
  data: myModel
});

Pengikatan data bidirectional {{ }}

<div id="my_view">
  {{ name }} is {{ age }} years old.
</div>

Gunakan arahan

untuk mencapai pengikatan data dua hala:

penapis v-model

<div id="my_view">
  <label for="name">Enter name:</label>
  <input type="text" v-model="name" id="name" name="name">
  <p>{{ name }} is {{ age }} years old.</p>
</div>

penapis digunakan untuk pemprosesan data, dan dipanggil menggunakan

simbol:

rendering array |

{{ name | uppercase }}

menjadikan array menggunakan arahan

:

menyusun dengan

penapis: v-for

<div id="my_view">
  <ul>
    <li v-for="friend in friends">{{ friend.name }}</li>
  </ul>
</div>

penapis dengan

penapis: orderBy

<li v-for="friend in friends | orderBy 'age'">{{ friend.name }}</li>

pengendalian acara filterBy

<li v-for="friend in friends | filterBy 'a' in 'name'">{{ friend.name }}</li>

Tentukan fungsi pengendali acara dalam sifat

model model paparan, dan mengikat peristiwa menggunakan arahan:

methods v-on Buat komponen

var myViewModel = new Vue({
  // ...
  methods: {
    myClickHandler: function(e) {
      alert("Hello " + this.name);
    }
  }
});

<button v-on:click="myClickHandler">Say Hello</button>

Buat komponen menggunakan kaedah

:

Gunakan atribut

untuk lulus sifat komponen: Vue.component

Vue.component('sitepoint', {
  template: '<a href="https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a">Sitepoint</a>'
});

Ringkasan props

Vue.component('sitepoint', {
  props: ['channel'],
  template: '<a href="https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a/{{ channel | lowercase }}">{{ channel }} @Sitepoint</a>',
});

Tutorial ini memperkenalkan konsep asas Vue.js, termasuk pengikatan data, arahan, penapis, pemprosesan acara, dan penciptaan komponen. Untuk ciri -ciri yang lebih canggih, sila rujuk dokumentasi rasmi.

(kandungan seterusnya, seperti Soalan Lazim, boleh ditambah seperti yang diperlukan untuk mengekalkan konsistensi dengan teks asal.)

Atas ialah kandungan terperinci Bermula dengan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!