2.Vue exemples

Exemples Vue

Créer une instance de Vue

---

Chaque applications Vue sont à travers avec la Vuecréation d' une nouvelle fonction Vue exemple commence:

var vm = new Vue({
  // 选项
})

Bien suivre pas complètement le modèle MVVM , mais la conception de la Vue a également pris son inspiration. Par conséquent souvent utilisé dans le document vm(l'abréviation ViewModel) Cette variable représente le nom de l' instance Vue.

Lorsque vous créez une instance Vue, vous pouvez passer un objet d'options . Ce tutoriel explique comment utiliser ces options est de créer le comportement que vous voulez. Pour référence, vous pouvez également dans la documentation de l' API parcourir la liste complète des options.

Par application d'une Vue a new Vuecréé racine exemple Vue , et éventuellement imbriqués, la composition de composant réutilisable arbre. Par exemple, un composant d'application de todo arbre peut être tel que:

 

根实例
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

 

Données et méthodes

---

Lorsqu'une instance Vue est créé, il sera datatoutes les propriétés de l'objet a été ajouté à la Vue système réactif de. Lorsque les valeurs de ces propriétés changent, le point de vue produira une « réponse » qui est mis à jour à une nouvelle valeur correspondant.

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

Lorsque ces données changent, la vue sera réaffichée. Il est à noter que seulement lorsqu'une instance est créée existe déjà dans datala propriété est sensible à. Cela signifie que si vous ajoutez une nouvelle propriété

L' utilisation Object.freeze(), ce qui empêche la modification des propriétés existantes aussi des moyens que le système ne peut plus répondre à suivre les changements.

En plus des attributs de données, Vue également exposé quelques exemples de méthodes utiles et les attributs d'instance. Ils ont le préfixe `` $, pour distinguer la zone d'attribut défini par l'utilisateur. Par exemple:

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

Vous pouvez ensuite Référence de l' API Consultez la liste complète des attributs d'instance et méthodes.

 

Des exemples de crochet du cycle de vie

---

Vue chaque instance lors de sa création à passer par une série de processus d'initialisation - par exemple, le besoin de données de suivi, la compilation des modèles, des exemples seront montés sur les mises à jour et DOM DOM lorsque les données changent. Certains seront également fonctionner dans ce processus est appelé le cycle de vie du crochet fonction, ce qui donne à l'utilisateur la possibilité d'ajouter votre propre code à différentes étapes.

Ces createdcrochets peuvent être utilisés pour exécuter du code après une instance est créée:

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

Il y a aussi un autre crochet est invoqué à différentes étapes du cycle de vie des cas, comme mounted, updatedet destroyed. Cycle de vie crochet thispoints de contexte pour appeler son instance Vue.

Ne pas utiliser l'option dans la propriété ou rappel fonction de flèche ,

Par exemple, created: () => console.log(this.a) ou vm.$watch('a', newValue => this.myMethod())

. Parce qu'il n'y a pas de flèche et la fonction this, thistoujours trouver une variables de portée lexicale à leurs supérieurs, jusqu'à ce que vous trouverez, ce qui souvent Uncaught TypeError: Cannot read property of undefined, ou Uncaught TypeError: this.myMethod is not a functioncomme des erreurs.

 

icône du cycle de vie

---

La figure suivante montre l'exemple du cycle de vie.

Tu ne comprends pas tout de suite tout, mais que vous continuez à apprendre et à utiliser, sa valeur de référence sera plus élevé.