公式VUEの例 - 例 - 1-13分

ヘッド
<ヘッド> 
    <メタ文字コード= "UTF-8"> 
    <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
    <META HTTP-当量= "X-UA-の互換性"コンテンツ= "IE =エッジ"> 
    <タイトル>ドキュメント</ TITLE> 
    <スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </ SCRIPT> 

    <スクリプトSRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"> </ SCRIPT> 
    <スクリプトSRC = "https://cdn.jsdelivr.net/npm/lodash @ 4.13.1 / lodash.min.js "> </ SCRIPT> 
    <スタイル> 
        .active { 
            色：スカイブルー。
        } 

        。
            テキスト危険{ 色：赤。
        } 

        DIV { 
            フォントサイズ：14px;
            font-weight: normal;
            色：グレー; 
        } 

        .TITLE { 
            フォントサイズ：22px; 
            フォント重量：大胆; 
            色：スカイブルー; 
        } 
    </スタイル> 
</ HEAD> 


例1：
  <DIV ID = "App1の"> 
        <DIV CLASS =「タイトル">（1）APP1補間発現</ div> 
        {}} {メッセージ
    </ div> 


  VARアプリ=新しい新しいヴュー（{ 
            EL：" App1の位」
            データ：{ 
                メッセージ： 'こんにちはVUE' 
            } 
  }）


実施例2 ： 
 <DIV ID = "App2の"> 
   VAR = APP2新しいビュー（{
        <div class="title">(2) app2 v-bind</div>
        <スパンV-バインド：タイトル= "メッセージ"> ホバー秒の結果を参照してください。</ span>を
</ div>の 
            <LI V-ため= "TODOでドス"> {{todo.text}} </ LI>


            EL： "＃App2の"、
            データ：{ 
                メッセージ：。+新しい新しいDate（）のtoLocaleString（ 'ロードされたページ'）
            } 
   }） 


。例3：
<DIV ID = "App3起動"> 
        <DIV CLASS = "タイトル">（3。 ）APP3 V-IFを</ div> 
        <P-V-IF = "見">今、あなたは私を参照してください。</ p型> 
</ div>の


  VAR = APP3新しい新しいヴュー（{ 
            EL： "＃1 APP3"、
            データ：{ 
                見：trueに
            } 
 }）


例4：
<DIV ID = "APP4"> 
        <DIV CLASS = "タイトル">（4）APP4-V </ div>用
        。<OL> 
        </ OL> 
</ div>


  VaRのAPP4 =新しいヴュー（{ 
            エル： "＃1 APP4"、
            データ：{
                todos: [
                    { id: 1, text: '学习js' },
                    { id: 2, text: '学习vue' },
                    { id: 3, text: '学习node' },
                ]
            }
  })


实例5：
 <div id="app5">
        <div class="title">(5) app5 v-on:click</div>
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">逆转消息</button>
</div>


   var app5 = new Vue({
            el: '#app5',
            data: {
                message: 'hello vue'
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })


实例6：
 <div id="app6">
        <div class="title">(6) app6-双向数据绑定</div>
        <p>{{message}}</p>
        <input v-model="message">
 </div>


       var app6 = new Vue({
            el: '#app6',
            data: {
                message: 'klll dss'
            }
        })

实例7：
    <div id="app7">
        <div class="title">(7) app7-v-html-组件-绑定class对象</div>
        <div v-bind:class="{active:isActive}">1样式测试-绑定的数据对象定义在模板里</div>
        <div v-bind:class="classObj">2样式测试-绑定的数据对象定义在data中</div>
        <div v-bind:class="classObj1">3样式测试-绑定的数据对象是一个返回对象的计算属性</div>
        <div v-bind:class="[activeClass,errorClass]">4样式测试-把数组传给v-bind:class以应用一个class列表</div>
        <div v-bind:class="[isActive?activeClass:'',errorClass]">5样式测试-根据条件切换列表中的class</div>
        <div v-bind:class="[{active:isActive},errorClass]">6样式测试-根据条件切换列表中的class-数组语法中可以使用对象语法简单</div>
        <div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">7样式测试-绑定内联样式-对象语法</div>
        <div v-bind:style="styleObject">8样式测试-绑定内联样式对象</div>
        <ol>
            <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
        </ol>
        <P>使用口ひげ：rawHtml {{}} </ P> 
        < -は属性がrawHtml値とそのV-HTML HTML構文解析として、スパンコンテンツが解析されたデータは、属性値を無視して、直接HTMLとして、置換されます！結合- > 
        <p型> V-使用してHTMLディレクティブ：<V-スパンHTML = "rawHtml"> </ span>を</ p型> 
    </ div> 


  //グローバル登録コンポーネント、app7で場所を参照することができ
        ヴュー.component（ 'TODO品目'、{ 
            小道具：[ 'TODO']、
            テンプレート： `<LIバインド-V：ID = "todo.id"> todo.text {{}} </ LI>` 
        }）


    VAR =新しい新しいヴューのapp7（{ 
            EL： '＃1 app7'、
            データ：{ 
                groceryList：[ 
                    {ID：2、テキスト： '野菜'}、
                    {ID :. 3、テキスト： 'チーズ'}、
                    {ID：4、テキスト'開始時刻が、カジュアル'} 
                ]、} 
                rawHtml： "<スパンのスタイル= '色：赤'>これは赤でなければなりません。</ span>の"、 
                のisActive：真、
                classObj：{ 
                    アクティブ：偽、
                    'テキスト-危険'：真
                }、
                のisActive：真、
                エラー：ヌル、
                activeClass： 'アクティブ'、
                errorClass： 'テキスト危険'、
                activeColor： '赤'、
                のfontSize：30、
                styleObject：{ 
                    色： '赤'、
                    のfontSize： '21px' 
                } 
            }、
            計算：{
                classObj1：関数（）{ 
                    return {
                        活性：this.isActive && this.error、！
                        'テキスト危険'：this.error && this.error.type === '致命的な' 
                    } 
                } 
            } 
        }）


实例8：
   <！ -计算属性- > 
    <DIV ID = "app8"> 
        <DIV CLASS = "タイトル">（8）app8-计算属性</ div> 
        <P>オリジナルメッセージ： "{{メッセージ}}" </ P> 
        < P>計算結果は、メッセージ逆： "{{reverseMessageを}}" </ P> 
    </ div> 


 VAR app8 =新しいヴュー（{ 
            EL： '＃1 app8'、
            データ。{ 
                メッセージ： 'DDDのFFF' 
            }、
            計算：{ 
                //計算ゲッター特性
                reverseMessage: function () {
                    return this.message.split('').reverse().join('')
                }
            }
        })


实例9：
 <div id="app9">
        <div class="title">(9) app9-watch</div>
        {{fullName}}
</div>


 var app9 = new Vue({
            el: '#app9',
            data: {
                fName: 'ff',
                lName: 'll',
                // fullName:'ff ll'
            },
            // 可以选择watch监听可以选择computed计算属性，推荐计算属性
            computed: {
                fullName: function () {
                    return this.fName + ' ' + this.lName
                }
            },
            watch: {
                fName: function (val) {
                    this.fullName = val + ' ' + this.lastName
                },
                lName: function (val) {
                    this.fullName = this.fName + ' ' + val
                }
            }
        })


实例10：
  <div id="app10">
        <div class="title">(10) app10-setter</div>
        {{fullNames}}
  </div>


  var app10 = new Vue({
            el: '#app10',
            data: {
                fNames: 'ff',
                LNAMES 'LL'、
                // fullNames:'ff ll'
            },
            //リスニング時計属性を選択することができるが計算プロパティを計算することが推奨算出選択することができる
            {：計算を
                fullNames：{ 
                    GET：関数（）{ 
                        戻りthis.fNames + '' + this.lNames 
                    }、
                    SET：機能（ newValueに）{ 
                        VAR = newValue.split名（ ''）; 
                        this.fNames =名[0]; 
                        this.lNames [names.lengthの- 1] =名; 
                    } 
                } 
            } 
        }）


例11：
  <DIV ID =「app11 "> 
        <DIV CLASS ="タイトル「>（11）app11ウォッチ</ div>
        <P>
            Ask a yes/no question:
            <入力V-モデル= "質問"> 
        </ P> 
        <P> {{答え}} </ P> 
   </ div>の


     VAR app11 =新しいヴュー（{ 
            エル： '＃のapp11'、
            データ：{ 
                質問： " 」、
                答え： 『あなたが質問をするまで、私はあなたに答えを与えることはできません』
            }、
            見て：{ 
                質問：機能（newQuestion、oldQuestion）{ 
                    this.answer = 『あなたが入力して停止するのを待っている...』
                    this.debouncedGetAnser（ ）
                } 
            }、
            作成（）{ 
                この。debouncedGetAnser = _.debounce（this.getAnswer、500）
            }、
            メソッド：{ 
                getAnswer：関数（）{ 
                    IF（ '？'（this.question.indexOf）=== -1）{ 
                        this.answer =「質問は、通常、疑問符を含みます。;-) ' 
                        リターン
                    } 
                    this.answer = 'thisingk ...' 
                    VAR VM =この
                    axios.get（ 'https://yesno.wtf/api'） 
                        .then（関数（応答）{ 
                            vm.answer = _。大文字（response.data.answer）
                        }）
                        .catch（関数（誤差）{ 
                            vm.answer ='エラー'+エラー
                        }）
                } 
            } 
        }）



实例12：
  < 
        <DIV CLASS = "タイトル">（12）APP12-V-用</ div> 
        <UL> 
            <LIのV-ため= "項目の項目"> {{item.msg}} </ LI> 
        </ UL> 
        <UL> 
            <！ -唯一キー- > 
            <LIのV- - {{索引}} - {{item.msg}} </ LI>キー= "インデックス"> {{parentMsg}}：V-バインド"itemssで（項目、インデックス）" =用
        </ UL> 
        <DIV >計算結果computed-アレイフィルタまたはソート属性</ div> 
        <UL> 
            <-Vリチウムため= "evenNumbers N-で"> N - {{}} </ LI>
        </ UL> 
        フィルタの<div>の結果または配列をソートmethods- </ div> 
        <UL> 
            <LIため-V = "N-でさえ（数字）"> N - {{}} </ LI> 
        </ UL > 
        の<div>のみレンダリングされますTODO未完成</ div> 
        <UL> 
            <-V李のためには"！todo.isComplete" V-IF = "でトドスTODOを" => 
                {{TODO}}  
            </ LI> 
        </ UL>
    </ div>の


     VAR =新しい新しいヴューAPPL2（{ 
            EL： '＃APPL2' 
            データ：{ 
                商品：[ 
                    {MSG： 'FJ'}、
                    {MSG： 'FDSS'} 
                ]、
                parentMsg： '親'、
                itemss：[ 
                    {MSG： 'DSSD'}、
                    {MSG： 'dsdsde'} 
                ]、
                番号[1、2、3、4、5]、
                ドス：[ 
                    {isComplete：真、値'12'}、
                    {isComplete：偽、値'22'}、
                    {isComplete：偽、値'33'} 
                さえ：関数（数字）{
                ]
            },
            計算：{ 
                evenNumbers：関数（）{ 
                    //フィルタ过滤出能被2整除的元素
                    this.numbers.filter返す（）関数（数{ 
                        リターン番号％2 === 0 
                    }）
                } 
            }、
            メソッド：{ 
                    戻り番号.filter（関数（数）{ 
                        リターン番号％2 === 0 
                    }）
                } 
            } 
        }）


实例13：
    <DIV ID = "app13"> 
        <DIV CLASS = "タイトル">（13）APP12-V-FOR- TODO </ div> 
        <フォームのV-上：submit.prevent =」addNewTodo ">
            <ラベル> </ label>はTODOを追加します
            。<入力V-モデル= "newTodoText" ID = "新しいTODO"プレースホルダ= "EGは猫をフィード"> 
            <button>の追加</ボタン> 
        </ FORM> 
        <UL> 
            <LIは、V-バインド"ドスに（TODO、指数）" = "TODO項目" V-ため=である：キー= "todo.id" V-バインド：タイトル= "todo.title" 
                Vオン：削除します= "todos.splice（インデックス、1）"> </ LI> 
        </ UL> 
    </ div>の


   Vue.component('todo-item', {
            テンプレート： ` 
                <LI> \ 
                    {{タイトル}} \ 
                    <ボタンVオン：「\（" $発する=クリック削除\ '） "> </削除ボタン>\ 
                </ LI> \ 
            '、
            小道具：[ 'タイトル'] 
        }）


 var app13 = new Vue({
            el: '#app13',
            data: {
                newTodoText: '',
                todos: [
                    {
                        id: 1,
                        title: 'Do the dishes',
                    },
                    {
                        id: 2,
                        title: 'Take out the trash',
                    }、
                    { 
                        ID：3、
                        タイトル： '芝生を刈る' 
                    } 
                ]、
                nextTodoId：4 
            }、
            methods:{
                addNewTodo:function(){
                    this.todos.push（{ 
                        ID：this.nextTodoId ++、
                        タイトル：this.newTodoText 
                    }）
                    this.newTodoText = '' 
                } 
            } 
        }）