VUEは、フロントエンドのフレームワークを学びます

Vue.js説明：

Vue.jsは、プログレッシブフレームデータドライバウェブインタフェース構築物です。Vue.jsの目標は、シンプルなAPI応答成分をデータバインディング、およびビューの組み合わせによって、可能な限り達成することです。それだけでなく、使いやすいだけでなく、既存のサードパーティ製のライブラリやプロジェクトとの統合が容易です。

MVVMパターン

　　MVVMはモデル - ビュー - ViewModelに短縮形です。それは本質的に改良したMVCです。MVVMは別々の抽象化の観点や行動の、みましょうビューUIとビジネスロジックを述べることです

　　MVVM MVCモードとパターンが、主な目的は、ビューとモデルを分離することです

　　vue.jsはJavaScriptライブラリは、ビュー層に焦点を当て、MVVMのスタイルを結合双方向のデータを提供しています。その心臓部には、VMでMVVMです。それはviewmodelのです。接続とビューモデルの責任のViewModel、およびデータの一貫したビューを確実に、この軽量のアーキテクチャは、より効率的で便利なフロントエンドの開発を可能にします。

補間式

データは、最も一般的な形式をバインドする「口ひげ」構文（中括弧）テキスト補間を使用することです：

< スパン> メッセージ：{{ MSG }} </ スパン>

口ひげタグは、対応するデータオブジェクトに置き換えられますmsg属性。データ・オブジェクトをバインドするたびにmsgプロパティが変更され、コンテンツが補間で更新されます。

V-一度命令を使用することにより、データの変更は、コンテンツが補間で更新されていない1回限りの補間を行うことができます。しかし、これは、このノード上のすべてのデータバインディングに影響を及ぼします注意を払ってください。

< スパンV - 一度> これは決して変わらない：{{ MSG }} </ スパン>

これらの式は、アクションのVueのjavascriptののデータ例で解決することができます。制限は、それぞれが1つの式だけを含めることができる結合ので、次の例では有効になりません、があります。

　　<！ - これは文ではない表現であります - >

　　= {{1}}があります

　　<！---フロー制御は、三元式を有効になりません - >

　　 {{IF（OK）{返信メッセージ}}}

V-上

ドムがv-上の命令でイベントを監視し、トリガされたときに、いくつかのJavaScriptコードを実行することができます

V-上：クリック

                関数（）{ アラート（ "ハロー"）。            }         }     }）。</ SCRIPT>




























</ HTML>

V-上でのマウス移動イベントと停止イベントのVUE

<！DOCTYPE HTML> 
<HTML LANG = " EN "のxmlns：V-上= " http://www.w3.org/1999/xhtml " > 
<HEAD> 
    <メタ文字コード= " UTF-8 " > 
    <タイトル>タイトル</ TITLE> 
    <スタイル> 
        #div { 
            背景 - 色：赤; 
            幅：200pxの。
            高さ：200pxの。
        }
     </スタイル> 
    <スクリプトSRC = " JS / vue.min.js " > </ SCRIPT> 

</ HEAD> 
<BODY> 
    <// イベントの略記：@イベントの名前は、V-です。
        <DIV @マウスオーバーで写真= " FUN1 " DIV = " DIV " > 
             <のTextArea V-ON：マウスオーバー= " fun2（$イベント）" >これは、テキストフィールド</のTextArea>で
        </ div> 
        <div要素のonmouseover = " divmouseover（ ）" ID = " DIV " > 
            <TextAreaのonmouseover属性= " textareamouseoverは（）" >これはファイルのフィールドです。</のTextArea> 
        </ div> 
    </ div> 
</ body> 
    <スクリプト>
          
          
              EL：" #app " 、
              方法：{ 
                  FUN1：関数（）{ 
                      アラート（" DIVにカーソルを合わせ" ）; 
                  }、
                  fun2：関数（イベント）{ 
                      アラート（" TextAreaの上にホバー" ）
                       イベント.stopPropagation（）; 
                  } 
              } 
          }）
        // 常法JS 
        関数divmouseover（）{ 
            アラート（" DIVに移動するマウス"）。
        } 

        関数textareamouseover（）{ 
             アラート（" texteraに移動するマウス" ）;
              イベント.stopPropagation（）; 
        }
     </ SCRIPT> 
</ HTML>

コードの表示

イベント修飾子でVUE

<！DOCTYPE HTML> 
<HTML LANG = " EN " > 
<HEAD> 
    <メタ文字コード= " UTF-8 " > 
    <タイトル> V-上：事件修饰符</ TITLE> 
    <スタイル> 
        #div { 
            背景 - 色：赤; 
            高さ：300ピクセル; 
            幅：300ピクセル; 
        }
     </スタイル> 
    <スクリプトSRC = " JS / vue.min.js " > </ SCRIPT> 
</ HEAD> 
<BODY> 
        の<divのid = " アプリ" > 
            <"メソッド= " ポスト" > 
                の<input type = " 提出"値= " 提交" > 
            </フォーム> 
            <時間> 
            <フォームアクション= " http://www.itheima.com "メソッド= " ポスト"をonSubmit = " checkForm（）" > 
                の<input type = " 提出"値= " 提交" > 
            </ FORM>
            <のdiv @マウスオーバー= " FUN1"上記のid =述べた" DIV " > 
                <@のTextAreaをmouseover.stop = " fun2（$イベント）」これは、テキストフィールド</のTextArea>です> 
            </ div> 
        </ div> 
</ BODY> 
    <SCRIPT> // Vueの新しい新VUE（{ 
            EL：" #app " 、
            方法：{ 
                FUN1：関数（）{ 
                    アラート（" DIVオーバーホバー" ）; 
                }、
                fun2。機能（ イベント）{ 
                    警告（"
        
        TextAreaにカーソルを合わせ" ）; 
                } 
            } 

        }）; 
        // 伝統的なパラダイムJS 
          関数checkForm（）{ 
              アラート（1 ）;
               // フォームの検証が明らか戻りブール値有していなければならない
               // アプリケーション検証方法でのメソッド名を返すために追加しなければならない
              リターン falseにする; 
          }
     </ SCRIPT> 
</ HTML>

コードの表示

注：フォームの送信を防ぎます

V-テキストおよびV-HTML

<！DOCTYPE HTML> 
<HTML LANG = " EN " > 
<HEAD> 
    <メタ文字コード= " UTF-8 " > 
    <スクリプトSRC = " JS / vue.min.js " > </ SCRIPT> 
    <タイトル> V-テキスト和V-HTMLの</タイトル> 
</ head> 
<body> 
<DIV ID = " アプリケーション" > 
        の<div V-テキスト= " メッセージ" > </ div> 
        <div V-HTML = " メッセージ" > </ DIV > 
    の<divのid = "DIV1 " > </ div> 
    <divのID = " DIV2" > </ div> 
</ div> 

</ body> 
<SCRIPT> // ビューモデル新しいヴュー（{ 
        EL：" #app " 
        データ：{ 
            メッセージ：" <H1>こんにちは</ H1> " 
        } 
    }）// 传统JS的InnerTextプロパティ和innerHTMLの 
    window.onload = 関数（）{ 
        のdocument.getElementById（" ＃1 DIV1 "）.innerHTML = " <H1>こんにちは</ H1> " ; 
        のdocument.getElementById（" ＃1 DIV2 "）.innerText = "
    
    
    <H1>こんにちは</ H1> " ; 

    }
 </ SCRIPT> 

</ HTML>

コードの表示