VueJS-数据绑定

一、文本

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

 

 页面：