JSよりも強力なVUE

// jsがメッセージボードを書きます

    せて入力= document.querySelector（「入力」）。    聞かせてボタン= document.querySelector（ "ボタン"）;     UL = document.querySelectorをしましょう（ "UL"）;


























    =関数button.onclick（）{ 
        //新しい要素を作成
        せリー=のdocument.createElement（ 'のLiを'）; 

        //要素を追加
        li.innerHTML = input.value; 

        //ページに新しい要素を追加
        // UL。 appendChild（リチウム）; 
        //は非空の前面に、直接添加空、現在のリストが空であるか否かを判断する
        場合には（ul.children.length === 0）{ 
            ul.appendChildリチウム（Li）; 
        } {他
            LETファーストul.firstElementChild =; 
            ul.insertBefore（リー、ファースト）; 
        } 

        //クリア入力内容
        input.value = ''; 

    } 
</ SCRIPT> 
</ BODY> 
</ HTML> 

//書き込みメッセージヴュー

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <METAのcharset = "UTF-8"> 
    <タイトル>すぐにメッセージボードを作成します。</タイトル>ヴューと
    <スタイルタイプ= "テキスト/ CSS"> 
        {divの
            背景色：＃1 dae3ff; 
        } 
    </スタイル> 
</ HEAD> 
<BODY> 
**知識<BR> ** 
1.取得要素<BR> 
2. <BR>要素を作成します
。3. [追加要素<BR > 
<H4>メッセージ</ H4> 
<DIV ID = "アプリケーション"> 
    の<input type = "text" V-モデル= "入力"プレースホルダ= "入力"> 
    をクリックして= "塗りつぶし" @ <ボタン>提出</ボタン> 
    <UL> 
        <-V李用= "李の項目"> {{アイテム}} </ LI> 
    </ UL> 
</ div> 
<スクリプトSRC =" ../ vue.js "> </ SCRIPT> 
<SCRIPT> 
    せVM =新しいヴュー（{
       EL： '＃アプリ'、
       データ：{ 
           INPUT： ''、
           李：[] 
       }、
        方法：{ 
           塗りつぶし：関数（）{ 
               //this.li.push(this.input);//push添加

               //ヘッド加え部
               this.li.unshift（this.input）; 

               //クリアメッセージ領域
               this.input = ''; 

           } 
        } 
    }）; 
</ SCRIPT> 
</ BODY> 
</ HTML>

おすすめ