Explorez l'implémentation du contenu des composants Vue.js

Apprenons maintenant systématiquement Vue (reportez-vous à la documentation officielle de vue.js) :

Vue.js est une bibliothèque permettant de créer des interfaces Web basées sur les données. Son objectif est de réaliser une liaison de données de réponse et un composant de vue combiné. .

Vue.js adopte le concept de vues basées sur les données, ce qui signifie que nous pouvons utiliser une utilisation spéciale dans les modèles HTML ordinaires pour « lier » le DOM aux données sous-jacentes. Une fois la liaison créée, le DOM maintiendra les données synchronisées.

Le code de référence suivant correspond au modèle ci-dessus

<!-- 这是我们的 View -->
<div id="example-1">
   Hello {{ name }}!
</div>
// 这是我们的 Model
var exampleData = {
   name: &#39;Vue.js&#39;
}
  
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
var exampleVM = new Vue({
   el: &#39;#example-1&#39;,  // 在一个id为&#39;example-1&#39;的实体上挂载
   data: exampleData  // 数据流
})

Habituellement, nous écrirons le modèle dans l'instance Vue. même effet que la méthode d'écriture ci-dessus Idem :

<!-- 这是我们的 View -->
<div id="example-1">
   Hello {{ name }}!  <!--- Vue的数据模型用{{datamodel}}包裹起来 --->
</div>
  
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model<br><script>
var exampleVM = new Vue({
   el: &#39;#example-1&#39;,  // 在一个id为&#39;example-1&#39;的实体上挂载
   data: {
       name: &#39;Vue.js&#39;
      } // 数据流
})<br></script>

Après l'exécution d'un tel programme, 'Bonjour Vue.js !' sera affiché dans le contrôle #example-1.

Jetons un coup d'œil aux directives :
Les directives sont des fonctionnalités spéciales avec le préfixe v-. La valeur de la directive est limitée à une expression contraignante, telle qu'une directive if :

bonjour!

Il existe également des instructions de liaison, qui lient certaines valeurs d'attribut​​à certaines valeurs, telles que :

Le "v-bind" est omis ici, ce qui rend l'attribut de l'entrée L'affectation de la valeur a l'effet d'un "calcul".

Attributs calculés

Voici une introduction à l'utilisation de $watch, qui est utilisé lorsqu'une donnée doit changer en fonction d'autres données :

<script><br>var vm = new Vue({
 el: &#39;#demo&#39;,
 data: {
  firstName: &#39;Foo&#39;,
  lastName: &#39;Bar&#39;,
  fullName: &#39;Foo Bar&#39;
 }
})<br></script>
  
vm.$watch(&#39;firstName&#39;, function (val) { // 当firstname改变时，立马更新vm.fullname
 this.fullName = val + &#39; &#39; + this.lastName
})
  
vm.$watch(&#39;lastName&#39;, function (val) {  // 当lastname改变时，立马更新vm.fullname
 this.fullName = this.firstName + &#39; &#39; + val
})

Ici, tous les objets de données sont accessibles via vm.firstname, etc.

v-model　

Comme son nom l'indique, c'est le modèle de données dans Vue. Il est utilisé pour lier les données dans les instances Vue :

<!--- bi-direction bound --->
<div id="app">
  <p>{{message}}</p>
  <input v-model="message"> <!--Model，input输入的数据会立即反馈到Vue实例中--> 
</div>
<script>
  new Vue({
    el: &#39;#app&#39;,  // View
    data: {
      message: &#39;Hello Vue.js&#39;
    }
  })
</script>

. Par exemple, utilisez Pour lier un contrôle de formulaire, c'est afficher la valeur sélectionnée :

<!---    表单控件绑定-单选 --->
<div id="myselect">  // 外面这一层我一开始没有加，然后就出错了，el好像一般是挂载在<div>构件上
<select v-model="selected"> // data的数据类型是selected，值是选取的值
  <option seleceted>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
  
<script>
  new Vue({
    el: &#39;#myselect&#39;,
    data:{
      selected:[]
    }
  })
</script>

v-if, v-else　

This La commande peut être utilisée. Elle est très flexible. Par exemple, si je génère de nouvelles questions dans le formulaire, il y a trois types : "question à choix unique", "question à choix multiple" et "question texte". pour différentes questions sont différentes. Dans ce cas, vous pouvez utiliser la syntaxe suivante :

<div v-if="questItem.type === &#39;textarea&#39;"> // 注意是三个等号
    <textarea></textarea>
</div>
<div v=else>
    <div></div>
</div>

v-for

Ceci est utilisé pour parcourir les éléments du tableau, par exemple :

<ul id="demo">
  <li
    v-for="item in items"
    class="item-{{$index}}">  <!--- $index指的是当前数组元素在数组中的位置 --->
    {{parentMessage}} - {{$index}} - {{item.message}} <!--一个view结构-->
  </li>
</ul>
<button id="btn1">点击我</button>
<script>
  var demo= new Vue({
    el: &#39;#demo&#39;,
    data:{
      parentMessage: &#39;Parent&#39;,
      items:[
        {message: &#39;Foo&#39;},
        {message: &#39;Bar&#39;}
      ]
    }
  })
</script>

La signification du code ci-dessus est de parcourir le tableau d'éléments dans l'instance de démonstration et d'afficher chaque élément du tableau (« Foo », « Bar ») dans le fichier

tag

Afin d'éviter toute confusion Pour restituer la liste complète, track-by = "$index" est souvent utilisé, ce qui signifie que seul l'élément actuel du tableau est exploité.

À ce stade, les éléments les plus élémentaires de Vue ont été introduits. Si vous avez besoin de plus d'informations sur l'API, vous pouvez vous référer à : http://cn.vuejs.org/api/

. La structure des fichiers Vue et le contrôle du flux de données

Dans les fichiers vue, on peut souvent voir ce format :

<template>
    <div> </div>
</template>
  
<script>
    export default{
       data(){ ...
       },
       methods:{ // 自定义方法，可对data进行处理
          method1(){ ... }
          ...    
       },
       components: { ... }
       vuex: {
          getters:{ // 获取store的数据
            questionnaire: state => state.currentQuestionnaire
          }
          actions: { //用来分发数据容器store中mutations方法
            action1(){ dispatch("SET_QUEST", item) } // dispatch用来调用父组件store的"SET_QUEST"方法
            action2(){ ... }
       }
       directives: {
          &#39;my-directive&#39;: {
            bind: function(){ //钩子函数，只调用一次，在指令第一次绑定到元素上时调用 }
            update: function(newValue, oldValue) { //钩子函数，在bind之后以初始值为参数第一次调用，之后每当绑定至变化时调用 }
            unbind: function(){ //钩子函数，只调用一次，在指令从元素上解绑时调用 }
          }
       } 
　　　　　　　　　　// 自定义指令，在<template>中以<div v-my-directives = ""> 方式调用   
     }
</script>
  
<style>  </style>