Vueの例を作成します

Vueのは、VueのVueの機能の新しいインスタンスを作成することである各アプリケーションは、で始まります。

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

ヴューのデザインはMVVMに触発された
あなたはVueのインスタンスを作成するときは、オプションはオブジェクトを渡すことができ
、新規のVueで作成したもの、およびオプションのネストされた、再利用可能なコンポーネントツリーで、ルートアプリケーションのVueのVueのインスタンスをコンポーネント。
TODOアプリケーションは、コンポーネントツリーであってもよいです

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

データとメソッド

VUEインスタンスが作成されるときに、データオブジェクトは、対応するシステムVUE、これらのプロパティの値が変化するの属性のすべてに追加され、ビューが変更されます

//数据对象
var data={a:1}
//将数据对象加入vue实例
var vm=new Vue({
    data:data
})

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

ときは、これらのデータが変更されると、ビューは再レンダリングされます。インスタンスがデータのみの存在下で作成されたとき、属性に応答することに留意されたいです。つまり、あなたは新しいプロパティを作成した場合

vm.b='hi'

Bの変更はすべての更新プログラムが表示トリガされません場合は、我々はそれにいくつかの初期値を設定する必要があり、もし財産の後に知っておく必要があるだろうが、プロパティの始まりは存在しません。

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

唯一の例外はObject.freezeの使用を（）これは、既存のプロパティを変更防止するだけでなく、対応するシステムは、変更を追跡することができないことを意味しています

var obj={
    foo:'bar'
}

Object.freeze(obj)

new Vue({
    el:'#app',
    data:obj
})

<div>
    <p>{{ foo }}</p>
    <!--这里的 'foo' 不会更新!-->
    <button v-on:click="foo='baz'">Change it</button>
</div>

データ属性に加えて、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'改变后的调用
})

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

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

作成されたフックが後に作成されるインスタンス内のコードを実行するために使用することができます

new Vue({
    data:{
        a:1
    },
    created:function(){
        console.log('a is:'+this.a);
    }
})

そこにもいくつか他のフックは、取り付けられて更新され、破壊されたようなインスタンスのライフサイクルのさまざまな段階で呼び出されます。このフックポイントのライフサイクルは、そのコンテキストVueのインスタンスを呼び出します。

このように作成:.（）=>はconsole.log（this.a）またはVM $腕時計などのオプション機能やコールバックの特性、上矢印を使用しないでください（ ''、newValueに=> this.myMethod（））。矢印機能は、これはしないので、あなたが見つけるまで、これは常に頻繁にキャッチされない例外TypeErrorが得られ、上司へのレキシカルスコープ変数のようになります：未定義またはキャッチされない例外TypeErrorのプロパティを読み取ることができません：クラスのthis.myMethodエラーではない関数です。

公式文書の研究ノート（C）Vue.js

Vueの例を作成します

データとメソッド

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

ライフサイクル図

おすすめ