Apakah fungsi paling asas teras vue.js

Fungsi paling asas teras vue.js ialah sistem yang membenarkan pemaparan deklaratif data ke dalam DOM menggunakan sintaks templat ringkas. Fungsi teras vue.js membolehkan kami mengawal dengan mudah sama ada sesuatu elemen dipaparkan atau tidak.

Persekitaran pengendalian artikel ini: sistem windows10, vue 2.5.2, komputer thinkpad t480.

Pada terasnya, Vue.js ialah sistem yang membenarkan pemaparan deklaratif data ke dalam DOM menggunakan sintaks templat ringkas.

Mari kita lihat dengan lebih dekat.

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Selain interpolasi teks, kita juga boleh mengikat sifat elemen seperti ini:

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

Ia juga agak mudah untuk mengawal sama ada elemen itu dipaparkan atau tidak:

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

Terdapat banyak arahan lain, setiap satu dengan fungsi khas. Sebagai contoh, arahan v-for boleh mengikat data tatasusunan untuk memaparkan senarai item:

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

Untuk membolehkan pengguna berinteraksi dengan aplikasi anda, kami boleh menggunakan arahan v-on untuk menambah Pendengar peristiwa, yang melaluinya kaedah yang ditakrifkan dalam contoh Vue dipanggil:

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

Vue juga menyediakan arahan model v, yang boleh mencapai pengikatan dua hala dengan mudah antara input borang dan aplikasi negeri .

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

Sistem komponen ialah satu lagi konsep penting Vue, kerana ia adalah abstraksi yang membolehkan kami membina aplikasi besar menggunakan komponen yang kecil, bebas dan sering boleh digunakan semula. Jika anda memikirkannya dengan teliti, hampir semua jenis antara muka aplikasi boleh diabstraksikan ke dalam pepohon komponen:

Dalam Vue, komponen pada asasnya ialah Vue dengan contoh pilihan yang dipratentukan. Mendaftar komponen dalam Vue adalah mudah:

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: &#39;<li>这是个待办项</li>&#39;
})

Kini anda boleh menggunakannya untuk membina templat komponen lain:

<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

Tetapi ini akan menghasilkan teks yang sama untuk setiap item tugasan , yang tidak kelihatan keren. Kita seharusnya dapat menghantar data daripada skop induk kepada komponen anak. Mari ubah suai definisi komponen untuk menerima prop:

Vue.component('todo-item', {
 // todo-item 组件现在接受一个
 // "prop"，类似于一个自定义特性。
 // 这个 prop 名为 todo。
 props: ['todo'],
 template: &#39;<li>{{ todo.text }}</li>&#39;
})

Sekarang kita boleh menggunakan arahan v-bind untuk menghantar item tugasan kepada setiap output komponen melalui gelung:

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item v-for="item in groceryList" v-bind:todo="item" ></todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: &#39;<li>{{ todo.text }}</li>&#39;
})

var app7 = new Vue({
  el: &#39;#app-7&#39;,
  data: {
    groceryList: [
      { id: 0, text: &#39;蔬菜&#39; },
      { id: 1, text: &#39;奶酪&#39; },
      { id: 2, text: &#39;随便其它什么人吃的东西&#39; }
    ]
  }
})

Pembelajaran yang disyorkan: latihan php

Atas ialah kandungan terperinci Apakah fungsi paling asas teras vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!