Vue.js_數據綁定

一、文本

data

{{data}}

 <div id="div1">{{message}}</div>
    <script>
        var div1 = new Vue({
            el: "#div1",
            data: {
                message:"Hello Vue.js!"
            }
        })
    </script>

頁面：

 

二、屬性

data

v-bind:attr="data"

 <style>
        .title{ width:300px; height:45px; background:#ffd800; border:1px solid #b6ff00; }
    </style>
    <div id="div2" v-bind:class="addClass" v-bind:title="addTitle"></div>
    <script>
        var div2 = new Vue({
            el: "#div2",
            data: {
                addClass: "title",
                addTitle:"這是一個div"
            }
        })
    </script>

頁面：

 

三、Html

data

v-html="data"

    <div id="div3" v-html="addHtml"></div>
    <script>
        var div3 = new Vue({
            el: "#div3",
            data: {
                addHtml:"<input type='text' />"
            }
        })
    </script>

頁面：

 

四、用戶輸入數據

methods

v-model="data" +  {{data}}

<div id="input1">
        <input type="text" v-model="info" />
        <p>{{info}}</p>
    </div>
    <script>
        var input1 = new Vue({
            el: "#input1",
            data: {
                info:"請在此輸入數據測試"
            }
        })
    </script>

頁面：

                   

 

五、監聽事件

methods

v-on:Event="function"

<input id="input2" type="button" value="點擊試試" v-on:click="clickTest" />
    <script>
        var input2 = new Vue({
            el: "#input2",
            methods: {
                clickTest: function () {
                    alert("點擊成功！");
                }
            }
        })
    </script>

頁面：

【初始打開時】         【點擊后】

 

六、過濾器

filters

{{data|function}}

<div id="div4">
        {{message|Handle}}
    </div>
    <script>
        var div4 = new Vue({
            el: "#div4",
            data: {
                message:885
            },
            filters: {
                Handle: function (val) {
                    return val + "+ 500=" + (val + 500);
                }
            }
        })
    </script>

接收將表達式中的第一個值，作為方法的一個參數傳入，並返回值。用於過濾某個值得表現形式或對其進行格式化

頁面：

 

進價多參，多值傳遞過濾

<div id="div4">
        {{message|moreVal(10,20)}}<br /><!--885+10+20=915-->
        {{message|transmit(20)|moreVal(10,20)}}<!--905+10+20=935 , 解析：905=885+20-->
    </div>
    <script>
        var div4 = new Vue({
            el: "#div4",
            data: {
                message: 885
            },
            filters: {
                Handle: function (val) {
                    return val + "+ 500=" + (val + 500);
                },
                moreVal: function (a, b, c) {
                    return a + "+" + b + "+" + c + "=" + (a + b + c);
                },
                transmit: function (arg1, arg2) {
                    return  arg1 + arg2;
                }
            }
        })
    </script>

說明：過濾器會接收多次傳遞，默認將表達式的第一個值，參數傳遞給下一個的表達式，就這樣依次傳遞，直到最后一個

解析：{{message|Handle}} 

將message作為參數傳遞給Handle，Handle帶入過濾器方法然后返回結果：885+ 500=1385

 

解析：{{message|moreVal(10,20)}}

將message作為參數傳遞給moreVal，並默認傳遞第二參數為10，第三參數為20，moreVal帶入過濾器方法然后返回結果：885+10+20=915

 

解析：{{message|transmit(20)|moreVal(10,20)}}

將message作為參數傳遞給transmit，並默認傳遞第二參數為20，transmit帶入過濾器方法然后返回結果：905

將transmit返回結果905，繼續傳遞給moreVal，並默認傳遞第二參數為10,第三參數為20，moreVal帶入過濾器方法然后返回結果：905+10+20=935

 

 頁面：