zoukankan      html  css  js  c++  java
  • 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层数据进行修改,以此也实现了视图与模型层的相互解耦;

  • 相关阅读:
    java.lang.ClassCastException: java.util.HashMap$Values cannot be cast to java.util.List 转换异常
    React Swiper轮播图(二)
    超详细带你入门开发一个超实用的浏览器插件
    手臂太细如何增加纬度?这5个手臂锻炼动作,让你的手臂变粗壮
    2021百度世界大会精华总结(AI应用向)
    1、saltstack 安装部署
    MySQL的varchar(10)能存多少个汉字
    学习资料总结
    基于Spark的数据工厂(Data Factory):从设计到实现
    IntelliJ IDEA创建maven web项目(IDEA新手适用)
  • 原文地址:https://www.cnblogs.com/goforxiaobo/p/12409177.html
Copyright © 2011-2022 走看看