{{ msg }} 
    
 {{ number }} 
    
    

    
    

    
    
    
 {{ content }} 
    
    
 {{ content }} 
  
  
    new Vue ({
      //    
      el: "#root",
      //    
      data: {
        msg: "hello world",
        number: 123,
        // content:"<h1>hello</h1>"
        content:"hello"
      },
      //        methods  ,  content  ， hello  Word
      methods:{
        handleClick: function(){
          this.content = "word"
        }
      }

    })
  

Vueインスタンス
Vueインスタンスを作成します.各VueアプリケーションはVue関数によって新しいVueインスタンスを作成します.var vm=new Vue({//オプション})ドキュメントでvmという変数名を使用してVueインスタンスを表します.
Vueインスタンスを作成すると、オプションオブジェクトを入力できます.1つのVueアプリケーションは、new Vueによって作成されたルートVueインスタンスと、オプションでネストされた多重化可能なコンポーネントツリーからなるすべてのVueコンポーネントがVueインスタンスであり、同じオプションオブジェクト(ルートインスタンス固有のオプションを除く)を受け入れます.
マウントポイント、テンプレート、インスタンス間の関係
マウントポイント:
最外層のラベルはマウントポイントです.多くはVueの中のel:「#root」Vueはマウントポイントの下の内容だけを処理し、マウントポイントの下になければ処理しません.
テンプレート:
マウントポイントの内部の内容は、テンプレート内容と呼ばれ、テンプレートはマウントポイントの内部に書くもよいし、new Vueのtemplate:「{{msg}}」属性に書くもよい.
例:
インスタンスでは、マウントポイントを指定してテンプレートを書き込むだけで、Vueは自動的にマウントポイントとテンプレートを結合し、最終的に表示するコンテンツを生成し、マウントポイントにコンテンツを配置します.
補間式:
{{number}}2つのカッコから2つのカッコで終わり、中間にデータ項目の下の属性を書きます.この構文を補間式と呼びます.
コマンド:
v-text:v-htmlと比較して、v-textはラベルを1回v-htmlに変換します:ラベルを直接認識し、v-onを変換しません:1つのラベルにイベントをバインドし、@と略すことができます
テンプレート上のラベルにイベントをバインドします.vueでラベルにイベントをバインドします.イベントがトリガーされると、インスタンス内のmethods:{}プロパティの下に定義される関数を実行します.
Vueはデータプログラミング向けで、DOMを修正する必要がある場合、対応するデータを変更するだけで、Vueは自動的にDOMを修正することができます