VUE基础之VUE关键字

ps:这些关键字都是作为HTML标签中的属性

1、MVVM双向数据绑定：v-model：（缩写：model）是将标签中的value与vue实例中的data属性值进行绑定，例如：

v-model="username"/>

new Vue({

　　el:'#app',

　　data{

　　　　username:'vue'

});

2、事件绑定v-on：(缩写：@)：通过配合具体的事件名，来绑定vue中具体的函数，例如：

v-on绑定的事件名的参数列表的括号若没有传参则可以不加

v-on:input="changeUsername"/>

new Vue({

　　el:'#app',

　　data{

　　　　username:'vue'

},

　　methods:{

　　　　changeUsername:()=>{

　　　　　　console.log("调用了changeUsername输入监听事件");

　　　　}

});

补充知识：

（1）在响应函数里，可以指明使用event的内置的参对象，该对象则表示当前事件，可以通过event.target.value来获取当前事件对象的value值：例如：

new Vue({

　　el:'#app',

　　data{

　　　　username:'vue'

},

　　methods:{

　　　　changeUsername:(event)=>{

　　　　　　console.log(event.target.value);//结果就是每次输入都会调用一次changeUsername方法并且将输入的值打印出来

});

ps:此时不能添加事件名的参数列表

（2）this的用法：

this表示当前vue对象，“new vue()”,可以通过this来调用当前vue对象的属性和方法：例如：

new Vue({

    el:'#app',

    data:{

        username:'vue'

    },

    methods:{

        changeUsername:(event)=>{

            this.username =event.target.value;//结果就是每次输入后可以替换原有的data中的username里面的数据，使用了另一种方式实现了双向数据绑定

        }

    }

});

});

 3、属性绑定v-bind：缩写：

由于插值表达式无法进行属性绑定，所以当需要绑定html内部的属性时，那就要用到v-bind进行绑定。例如：

:href="link">百度

new Vue({

    el:'#app',

    data:{

        link:'www.baidu.com'

    }

   

});
4、v-once：
 当元素拥有该属性时，此元素内的差值表达式只获取一次数据，之后的数据不影响差值表达式的值。：例如：

  
v-once>
    {{username}}