2.Vue例

Vueの例

Vueのインスタンスを作成します。

各VueのアプリケーションがでているVue新機能の作成Vueのインスタンスが開始されますが：

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

完全に従わないMVVMモデルを、しかしヴューのデザインも、そのインスピレーションを取りました。したがって、多くの場合、文書で使用されるvm（略称ビューモデル）この変数は、名前Vueのインスタンスを表します。

あなたはVueのインスタンスを作成するときは、渡すことができますオプションオブジェクトを。このチュートリアルでは、これらのオプションを使用するようにすると、あなたが望む動作を作成する方法を説明します。参考のために、あなたもでできるAPIドキュメントオプションの完全なリストを参照します。

ヴューのアプリケーションによってnew Vue作成されたルートVueの例、および任意にネストされ、ツリーの再利用可能な成分の組成物。例えば、ツリーTODOアプリケーションコンポーネントは、このようなことがあってもよいです。

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

データとメソッド

Vueのインスタンスが作成されると、それは次のようになりますdataオブジェクトのすべてのプロパティのVueに追加された応答システムの。これらのプロパティの値を変更すると、ビューが新しい値マッチングに更新され、「応答」を生成します。

// 我们的数据对象
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

これらのデータは変更すると、ビューが再描画されます。これは、インスタンスが作成された場合にのみ、既にに存在していることは注目に値するdata性質がある応答インチあなたは新しいプロパティを追加する場合、この手段

使用Object.freeze()既存のプロパティの変更を防止し、また、システムはもはや対応できることを意味し追跡するための変更を。

データ属性に加えて、Vueのも有用な方法およびインスタンス属性のいくつかの例を露出します。彼らは、ユーザー定義の属性領域を区別するための接頭辞 `` $を、持っています。例えば：

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` 改变后调用
})

後でできるAPIリファレンスは、インスタンスの属性とメソッドの完全なリストをチェックしてください。

ライフサイクルフックの例

初期化プロセスの一連行くために作成された各インスタンスVUE -例えば、テンプレートをコンパイルし、監視データの必要性は、例として、DOMとDOM更新の際にデータの変更にマウントされます。いくつかはまた、このプロセスで実行されますと呼ばれるフックのライフサイクルユーザーに様々な段階で独自のコードを追加する機会を与える関数、。

そのようなcreatedインスタンスが1つ作成された後、フックは、コードを実行するために使用されてもよいです。

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

そこにもいくつかの他のフックのようなインスタンスのライフサイクルの各段階、で呼び出されているmounted、updatedとdestroyed。ライフサイクルフックthisコンテキスト・ポイントは、そのVueのインスタンスを呼び出します。

プロパティまたはコールバックでオプションを使用しないでください矢印機能、

たとえば、 created: () => console.log(this.a) または vm.$watch('a', newValue => this.myMethod())

。何の矢印と機能がないのでthis、thisあなたが見つけるまで、常に多くの場合、結果として、上司にレキシカルスコープ変数を見つけるUncaught TypeError: Cannot read property of undefined、またはUncaught TypeError: this.myMethod is not a functionエラーのような。

ライフサイクルのアイコン

次の図は、ライフサイクルのインスタンスを示しています。

あなたはすぐにすべてを理解していないが、あなたが学習し、使用を続けると、その基準値が高くなります。

Vueの例

Vueのインスタンスを作成します。

データとメソッド

ライフサイクルフックの例

ライフサイクルのアイコン

おすすめ