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

<code class="language-html"></code>

Model paparan

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

Contoh:

Vue html view:

Model data:

Lihat Model:

<code class="language-html"><div id="my_view"></div></code>

Tunjukkan data dalam pandangan menggunakan

<code class="language-javascript">var myModel = {
  name: "Ashley",
  age: 24
};</code>

sintaks:

<code class="language-javascript">var myViewModel = new Vue({
  el: '#my_view',
  data: myModel
});</code>

Pengikatan data bidirectional {{ }}

<code class="language-html"><div id="my_view">
  {{ name }} is {{ age }} years old.
</div></code>

Gunakan arahan

untuk mencapai pengikatan data dua hala:

penapis v-model

<code class="language-html"><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></code>

penapis digunakan untuk pemprosesan data, dan dipanggil menggunakan

simbol:

rendering array |

<code class="language-html">{{ name | uppercase }}</code>

menjadikan array menggunakan arahan

:

menyusun dengan

penapis: v-for

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

penapis dengan

penapis: orderBy

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

pengendalian acara filterBy

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

Tentukan fungsi pengendali acara dalam sifat

model model paparan, dan mengikat peristiwa menggunakan arahan:

methods v-on Buat komponen

<code class="language-javascript">var myViewModel = new Vue({
  // ...
  methods: {
    myClickHandler: function(e) {
      alert("Hello " + this.name);
    }
  }
});</code>

<code class="language-html"><button v-on:click="myClickHandler">Say Hello</button></code>

Buat komponen menggunakan kaedah

:

Gunakan atribut

untuk lulus sifat komponen: Vue.component

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

Ringkasan props

<code class="language-javascript">Vue.component('sitepoint', {
  props: ['channel'],
  template: '<a href="https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a/%7B%7B%20channel%20%7C%20lowercase%20%7D%7D">{{ channel }} @Sitepoint</a>',
});</code>

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!