zoukankan      html  css  js  c++  java
  • vue知识点散记

    1、iphone5微信浏览器里的methods里貌似不兼容  test(){} 写法,只支持test:function(){}

    2、v-cloak 防止双括号的闪烁

        <div id="app" v-cloak>{{test}} </div>

       在style里

      []v-cloak]{display:none;//display:none!important;}  

    3、computed和watch都有缓存机制  ,{{}}==>差值表达式

    4、计算属性的set和get方法

       computed:{

         fullName:{

            get:function(){return this.a+this.b;},

            set:function(value){var test=value.split('/');this.a=test[0];this.b=test[1]; }

         }

      }

    vm.fullName='gello/world'

    5、vue中的样式

        (1)class

        <div v-bind:class="{ active: isActive }"></div>

         <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>

         <div v-bind:class="classObject"></div>

          computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal', } } }

        <div v-bind:class="[activeClass, errorClass]"></div>

         <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>

      (2)style

         <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>

          <div v-bind:style="styleObject">菜鸟教程</div>

          data: {styleObject: {color: 'green',fontSize: '30px'}}

         <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>

         data: {baseStyles: {color: 'green',fontSize: '30px'},overridingStyles: {'font-weight': 'bold'}}

       注意:当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。

    6、数组的一些方法

         vm.list[2]=3   ==>数据虽然变了,但是页面没有动态显示

        //下面是有效的

       (1)对象操作

       Vue.set(vm.userInfo,"address","beijing")

        vm.$set(vm.userInfo,"address","beijing")

      (2)数组操作 

          1)变异方法 pop shift unshift。

           2)Vue.set(vm.list,1,5)  数组下标为1的把值改成5

           3)vm.$set(vm.userInfo,2,10)

      4)数组的引用

    7、:is的用法

         通常情况下table->tr->td   ,如果把tr用子组件代替的话,有的浏览器就可能不是这个顺序

  • 相关阅读:
    性能测试——监控前端性能
    centos7 查看防火墙状态
    Flutter项目实战之女装商城------火爆专区实现、商品分类数据准备
    鸿蒙系统,我要拥抱你~~
    【python3】python中 r'', b'', u'', f'' 的含义
    【python3】excel输入输出
    【python3】return和yield的区别
    【python3】spyder中清除变量命令
    【文章知识点】深度解析长末端重复反转录转座子(LTR-RTs)
    【python3】给List添加元素
  • 原文地址:https://www.cnblogs.com/lmxxlm-123/p/9013424.html
Copyright © 2011-2022 走看看