Quelle est la fonction la plus basique du noyau vue.js

La fonction la plus basique du noyau vue.js est un système qui permet le rendu déclaratif des données dans le DOM à l'aide d'une syntaxe de modèle concise. La fonction principale de vue.js nous permet de contrôler facilement si un élément est affiché ou non.

L'environnement d'exploitation de cet article : système windows10, vue 2.5.2, ordinateur thinkpad t480.

À la base, Vue.js est un système qui permet le rendu déclaratif des données dans le DOM à l'aide d'une syntaxe de modèle concise.

Regardons de plus près ci-dessous.

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

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

En plus de l'interpolation de texte, nous pouvons également lier les propriétés d'un élément comme ceci :

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

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

Il est également assez simple de contrôler si un élément est affiché ou non :

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

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

Il existe de nombreuses autres commandes, chacune avec des fonctions spéciales. Par exemple, la directive v-for peut lier les données d'un tableau pour afficher une liste d'éléments :

<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: '整个牛项目' }
    ]
  }
})

Pour permettre aux utilisateurs d'interagir avec votre application, nous pouvons utiliser la directive v-on pour ajouter un écouteur d'événement et l'appeler sur les méthodes de l'instance Vue définies dans :

<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 fournit également la directive v-model, qui peut facilement réaliser une liaison bidirectionnelle entre l'entrée du formulaire et l'état de l'application.

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

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

Le système de composants est un autre concept important de Vue, car c'est une abstraction qui nous permet de créer de grandes applications en utilisant de petits composants indépendants et souvent réutilisables. Si vous y réfléchissez bien, presque n'importe quel type d'interface d'application peut être résumé dans une arborescence de composants :

Dans Vue, un composant est essentiellement une instance de Vue avec des options prédéfinies. Enregistrer un composant dans Vue est simple :

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

Vous pouvez maintenant l'utiliser pour créer un autre modèle de composant :

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

Mais cela affiche le même texte pour chaque élément de tâche, ce qui n'a pas l'air cool. Nous devrions pouvoir transmettre les données de la portée parent au composant enfant. Modifions la définition du composant pour accepter un accessoire :

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

Maintenant, nous pouvons utiliser la directive v-bind pour transmettre les éléments de tâche à chaque composant de la sortie de la boucle :

<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; }
    ]
  }
})

Recommandations d'apprentissage : formation php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!