vueクイックスタート(3)

1.3.vue入門事例
1.3.1.HTMLテンプレート
hello-vueディレクトリにHTMLを新規作成
ハローhtmlでは、簡単なコードを作成します.
xxがかっこいい
h 2の中で1つの言叶を出力します:xxはとてもかっこいいです.前のxxはレンダリングするデータです.
1.3.2.vueレンダリング
次に、Vueでレンダリングします.

    
{
   {name}}    



    //     Vue  
    var app = new Vue({
        el:"#app", // el, element。         
        data:{ //   
            name:"xiaohong"
        }
    })

まずnew Vue()によりVueインスタンス

を作成する.

次に、コンストラクション関数は、いくつかの属性を持つオブジェクトを受信します.

el:elementの略で、idでレンダリングするページ要素を選択します.この例ではdiv

です.

data:データ、データは1つのオブジェクトで、中には多くの属性があって、すべてビューにレンダリングすることができます

name:ここではnameプロパティ

を指定します.

ページのh2要素では、定義したばかりのnameプロパティを{{name}}でレンダリングします.

ページを開いて効果を表示するには、次の手順に従います.
さらに不思議なことに、nameプロパティを変更するとページが変わります
1.3.3.双方向バインド
先ほどのケースを簡単に修正しました.

    
    

        {
   {name}}    ,
         {
   {num}}     。
    



    //     Vue  
    var app = new Vue({
        el:"#app", // el, element。         
        data:{ //   
            name:"xiaohong",
            num:1
        }
    })

dataに新しいプロパティを追加しました:num

ページにはinput要素があり、v-modelを介してnumにバインドされている.

同時に{ {num}}を介してページ出力

.
入力ボックスの変化がdata中のnumの変化を引き起こし,ページ出力も変化することを観測できた.

inputはnumにバインドされ、inputのvalue値は変化し、dataのnum値

に影響する.

ページ{ {num}}は、データnumにバインドされるため、num値が変化し、ページ効果の変化を引き起こす.

dom操作は一切ありませんが、これが双方向バインドの魅力です.
1.3.4.イベント処理
ページにボタンを追加します.

ここではv-on命令でクリックイベントをバインドし、通常のonclickではなくnum

を直接操作する.

通常clickではnumを直接操作することはできません.