VUEコンポーネントイベント（オタクVueの時間のビデオノート）

VUEコアコンポーネント：イベント

 

< 本体> 
    < DIV クラス= "アプリケーション" > 
        < TODOリスト> </ TODOリスト> 
        {{メッセージ}} - {{メッセージ+ ' '+メッセージ}} 
        < DIV ：ID ='メッセージ' V-IF = "showMessage" > {{タイトル}} </ divの> 
        < divのV-他のスタイル= "テキスト装飾：ライン・スルー;" > {{タイトル}} - {{タイトル}} </ DIV > 
        < DIV ：ID = 'メッセージ' V-ショー= "showMessage" >> 
    </ DIV > 

    < スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > </ スクリプト> 
    < スクリプト> 
        Vue.component（' TODO項目' 、{ 
            小道具：{ 
                タイトル：文字列、
                賞：{ 
                    タイプ：Number、
                    デフォルト：40 
                } 
            }、
            テンプレート： ` < リチウム> 
            < ボタン@click = " handleClick " >[削除]< / button>の
                コース名：{{タイトル}} 
                価格：{{}}賞
            < / LI> `、
            データ：機能（）{
                 リターン{} 
            }、
            メソッド：{ 
                // ボタンのクリックイベント
                handleClick（）{ 
                    コンソール。ログ（「handleClick 」）;
                     // @Deleteイベントパラメータthis.title親コンポーネントに送信、削除（VAR）は{}親コンポーネント内のこのパラメータを受信する
                    。この（$ EMIT。「削除」、この.TITLEを）; 
                } 
            }
        }）
        Vue.component（' TODOリスト' 、{ 
            テンプレート： ` 
            < UL > 
            < TODO - アイテム@ デリート= " handleDelete " V - のために= " CLASSLISTの項目" ：タイトル= " item.title " ：賞= " アイテム。賞" > < / TODO項目> 
        < / UL> 
            `、
            方法：{ 
                // @Delete对应的事件
                handleDelete（ヴァル）{ 
                    にconsole.log（" handleDelete " 、ヴァル）。
                } 
            }、
            データ：関数（）{
                 リターン{ 
                    CLASSLIST：[ 
                        { 
                            タイトル：' 课程1 ' 、
                            賞：50 

                        }、
                        { 
                            タイトル：' 课程2 ' 、
                            賞：80
                        } 
                    ] 
                } 
            } 
        }）
        VAR VM =  新しいヴュー（{ 
            エル：' .appを' 、
            データ：{ 
                メッセージ：' こんにちは世界' 、
                showMessage：偽、
                タイトル：" 是否删除" 、

            } 
        }）
    </ スクリプト> 
</ ボディ>

 

 

• 提出メソッドを呼び出すkeyup.enter =モニタ、キーボード、入力し「送信」キー：いくつかのイベント修飾子は、例えば、V-のために、あります。
• 停止クリックイベントが広がり、V-上に続く：click.stop =「」