Vue02 - ライフサイクル

<！DOCTYPE HTML > 
< HTML > 
< ヘッド> 
    < タイトル>のVue ---生命周期</ タイトル> 

</ ヘッド> 

< 身体> 
    < div要素のid = "アプリ" > 
        < 入力タイプ= "テキスト" 名前= "" V-モデル= "" プレースホルダ= "你的名字" > 
        < H1 >你好！{{A}} </ H1 > 
    </ DIV >

    > 
        {{DATE}} 
    </ divの> 

    < DIV ID = "HPP" > 
        < スパンV-HTML = 'リンク' > </ スパン> 
    </ divの> 
    
    <！ - <スパン前V>ここで、{{コンテンツは}} </ span>に表示されていない> - 
    
    < スクリプトタイプ= "テキスト/ JavaScriptを" SRC = "https://unpkg.com/vue/dist/vue.min.js" > </ スクリプト> 
    < スクリプトタイプの=「テキスト/ JavaScriptを」>

        したアプリ=  新しいヴュー（{ 
            エルは：" #app' 、
            データは：{ 
                A：2 
            }、
            作成：関数（）{
                 // Vueのインスタンスが作成された呼び出しの後、観察されたデータは完了したが、ELに掛けられていません。使用する場合、初期化データ
                はconsole.log（このII.A）を
            }、
            マウント：関数（）{
                 // マウントELインスタンスを呼び出し、典型的には最初の論理書込み
                はconsole.log（この$ EL。）
            } 
            // beforeDestroyインスタンスが破棄される前に呼び出されます。いくつかのアンバンドリングaddEventListenterリスニングイベントの主な用途。
        }）

        VarのOPP =  新しい新しいヴュー（{ 
            EL：' #opp ' 、
            データ：{ 
                日付：新しい日付（）
            }、
            搭載：関数（）{
                 VARの_this =  この
                本.timer = たsetInterval（関数（）{ 
                    _this.date =  新しい日付（）; // 修改日付数据
                    console.log（_this.date）
                }、1000年）。
            }、
            beforeDestroy：関数（）{
                 もし（この.timer）{
                     // 破壊Vueのインスタンスの前にクリアタイマ
                    てclearInterval（この.timer）; 
                } 
            } 
        }）

        VAR HPP =  新しい新しいヴュー（{ 
            EL：' #hpp ' 、
            データ：{ 
                リンク：' <HREF = A "https://unpkg.com"> </a>の出力HTML " 
            } 
        }）


    </ スクリプト> 
</ ボディ> 
</ HTML >