Vue——绑定值

学习重点

这一篇主要介绍一下vue中MVVM的特点。

也就是研究一下这个特点：改变数据的值，页面会跟着改变，页面上的值发生变化，数据也会联动。

我们要学的就是：

• Html标签与数据的绑定；
• Html标签与属性（CSS样式等）的绑定，；
• Html标签与事件（点击事件等）的绑定;
• 拦截器，给各种绑定设置一个拦截功能（数据需要满足什么情况，才需要绑定？）。

值绑定

使用占位符{{fieldName}}，数据会总动填充到页面上。

使用v-model可以与输入控件（input/select）进行绑定，输入框内的值发生变化，数据也会发生变化。

（v-model的设计就属于MVVM模式）

    
    
    



    
    
{{ message1 }} 
    
    

    
    

属性绑定

属性绑定指的是控件自身的属性，例如标签的href属性，使用v-bind进行属性绑定，简写 “:bind”、或者只保留一个 “:”。

    
    
    



    
    

    
    {{name}}
    
    
{{name}}

事件绑定

事件和属性的区别，就是事件是一个Function，而属性是一个Object。

语法上有所差别，vue需要在methods中定义事件函数，

使用v-on:click绑定点击事件，简写@click。

    
    
    



    
    Click
    
    Click

拦截器（filters）

数据绑定之前，对数据计算或者校验，比如说：数值是百分比，显示之前，你需要给它增加一个百分号。

    
    
    
    



    
    
Text
    
Text
    
    
     {{message2 | formatStr}}