vue复习知识记录【1】 绑定字段、绑定事件、使用方法、使用计算

知识点：

　　1、绑定一个字段，备注：js代码一定要在vue.js之后

    <div id="app">
       <input v-model="message">
    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"welcome"
            }
        });
    </script>

　　2、把数据绑定到一个控件的属性上，但是不进行双向绑定，下面这段分别绑定到了这个input的value和name上

    <div id="app">
       <input v-bind:value="message" v-bind:name="message">
    </div>

　　3、绑定一个事件

    <div id="app">
       <input  v-on:input="message=$event.target.value">
    </div>

　　4、多级属性

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                loginForm:{
                    userName:"",
                    passWord:""
                }
            }
        });
    </script>

       <div>
           <input v-model="loginForm.userName">
           <input v-model="loginForm.passWord">
       </div>

　　5、绑定click事件，通过执行方法

       <div>
           <button v-on:click="submitForm">测试执行方法</button>
       </div>

        var app=new Vue({
            el:"#app",
            data:{
                message:"welcome",
            },
            methods:{
                submitForm(){
                    console.log("执行方法成功！");
                }
            }
        });

　　6、在方法体里获得data里的值，备注：要使用 this关键字

            methods:{
                submitForm(){
                    console.log(this.loginForm.userName);
                }
            }

　　7、this的作用域的范围之外，可以用下面这种方式获得data里的值

            methods:{
                submitForm(){
                    var self=this;
                    var callFunction=function()
                    {
                        console.log(self.loginForm.userName);
                    }
                    callFunction();
                }
            }

　　8、也可以用下面这种方式获取，就是在方面的后面加上bind(this)

            methods:{
                submitForm(){
                    var callFunction=function()
                    {
                        console.log(this.loginForm.userName);
                    }.bind(this);
                    callFunction();
                }
            }

　　9、还可以使用这种方式获取

            methods:{
                submitForm(){
                    var callFunction=()=>
                    {
                        console.log(this.loginForm.userName);
                    };
                    callFunction();
                }
            }

 　　10、使用computed，通过计算后返回需要的结果，备注：computed里的不是方法，而是字段，跟data下的字段的用法一样

            data:{
                message:"welcome",
                loginForm:{
                    userName:"",
                    passWord:""
                },
                list:[
                    "a 1",
                    "a 2",
                    "b 3"
                ]
            },

            methods:{
                submitForm(){
                    var callFunction=()=>
                    {
                        console.log(this.loginForm.userName);
                    };
                    callFunction();
                }
            },
            computed:{
                filterList:function()
                {
                    return this.list.filter(x=>{
                        return x.indexOf("a")===0
                    })
                }
            }

        <div>
            {{filterList}}
        </div>