VUE-Day02指令和数据绑定

什么是双向绑定:

即可以将内存中的数据绑定到界面上,同时又能将界面的修改反向更新回模型变量中(M-V,V-M)

何时使用双向绑定:

当需要绑定表单元素的值时,就使用双向绑定。

如何使用双向绑定:

<表单元素 v-model:value="模型变量">,其中:value可省略

双向绑定的原理:

Vue用一个死循环,反复扫描虚拟DOM树中的每个节点一一监视比对,如果希望只要界面发生变化,就立刻自动执行操作时:利用watch监视模型变量。(watch和methods同级)

只要绑定表单元素的值都用v-model,v-model相对于:不但可以把内存中的值绑到页面,当页面发生修改还会自动更新到内存中。(v-model双向绑定,:value单向)

键盘事件@keyup.13,限制只有按键盘回车键(13)时才执行操作。 

各种表单元素的双向绑定:

①文本框:<input type="text">和文本域:<textarea> 都是绑定value

           <ANY v-model="模型变量"> v-model自动绑定value属性

②单选按钮:<input type="radio" name="分组名" value="值" v-model="模型变量">

           分组使用:M-V  如果模型变量的值等于value,则当前radio标签选中,否则不选中。

(lable标签可以扩大选中区域,name属性来锁定radio标签的单选范围)          

                          V-M 将当前选中的radio元素的value值自动更新回模型变量。

③多选框:

          <input type="checkbox" v-model="模型变量">

          单用:自动绑定的是checked属性

④select:

          <select v-model="模型变量">

                <option value="值">

                <option value="值">

                ... ...

          M-V: 用模型变量的值和每个option的value做比较,如果某个option的value等于模型变量的值,则该option被选中。

          V_M:当选中项发生改变的时候,自动将选中项的value,更新到模型变量中。

绑定class和style:

有两种方法绑定style

①将style当做普通字符串绑定

冒号绑定省去双花括号,里面表达式等均可,最终给出正确字符串即可。 

<any class="不变的class列表" :class="模型变量"></any>

new Vue({

    ...,

   data:{

      模型变量:"可能变化的css列表"

   }

})

把style属性当做字符串绑定,拼接,虽然实现了效果但是繁琐且不够直观。

②用对象方式绑定style

用style修改多个css属性会很繁琐,

<span :style="CSSchange"></span>

<script>

    var vm=new Vue({

         el:"#app'',

         data:{

              CSSchange:{ background:" ",color:" " }    

         }

    })

</script>

v-model是双向绑定,只要想获取页面上用户的输入,就要使用v-model

计算属性

什么是:计算属性是数据库中没有保存的,但需要动态计算出来的值。

何时使用:如果一个值没有保存,需要每次动态计算获得。比如:购物车总价

如何使用:

new Vue({

   ...,

  computed:{

      属性名(){

          ...

          return 属性值

      }

  }

})

界面中:界面中任意元素都可以用属性名来绑定。

<any>{{属性名}}</any>

普通方法:

  methods:{

      方法(){return 计算结果}

  }

界面中:<any>{{函数名}}</any> 可同样达到效果

computed vs methods :

相同:依赖的变量发生变化,都能自动更新

不同:①methods中要使用函数名()的调用语法

              computed使用不加()的属性名即可

           ②如果需要显示多次时,

               methods会重复计算多次

               computed会缓存第一次计算的值,避免重复计算

computed比普通算法好的地方,可以缓存第一次计算的值,除非依赖的模型变量发生变化,才自动更新。

过滤器

什么是:过滤器就是接收原始值,经过再加工再显示。

何时使用:只要模型变量的原始值,不能直接使用。比如:性别(0/1)、实践(数据库中存储的是毫秒数)、存数字显示对应状态名。

Vue.filter("过滤器名字",function(){ });

过滤器就是一个单独的函数,可以多个串联,在图形中用 | 连接。

MVVM分为三个部分:分别是M(Model,模型层 ),V(View,视图层),VM(ViewModel,V与M连接的桥梁,也可以看作为控制器)
1、 M:模型层,主要负责业务数据相关;
2、 V:视图层,顾名思义,负责视图相关,细分下来就是html+css层;
3、 VM:V与M沟通的桥梁,负责监听M或者V的修改,是实现MVVM双向绑定的要点;

MVVM支持双向绑定,意思就是当M层数据进行修改时,VM层会监测到变化,并且通知V层进行相应的修改,反之修改V层则会通知M层数据进行修改,以此也实现了视图与模型层的相互解耦;

猜你喜欢

转载自www.cnblogs.com/goforxiaobo/p/12409177.html
今日推荐