vue工作笔记

vue学习笔记

路由跳转新的页面

let routeData = this.$router.resolve({name: 'serviceDetail',query: {
                evidenceId: this.message.evidenceId,
              } })
window.open(routeData.href, '_blank')

v-html解析过滤器

$options.filters.date1(rightData.time)

input框搜索历史背景蓝色改变

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    }

​ -webkit-box-shadow: 0 0 0px 1000px white inset;

​ }

sass

嵌套规则

ss#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}
//编译后为
#main p {
  color: #00ff00;
  width: 97%;
}
 #main p .redbox {
    background-color: #ff0000;
    color: #000000;
}

1. 父选择器(&)

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

2. 属性嵌套

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
//编译为

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}
//编译为

.funky {
  font: 20px/24px;
    font-family: fantasy;
    font-weight: bold; }

3. 占位符选择器%

支持属性

1. 变量$

   $width: 5em;
   //可以直接使用
   #main {
     width: $width;
   }
   // 嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global
   #main {
     $width: 5em !global;
     width: $width;
   }
   
   #sidebar {
     width: $width;
   }
   

2. 数据类型

   • 数字，1, 2, 13, 10px
   • 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
   • 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
   • 布尔型，true, false
   • 空值，null
   • 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
   • maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

   1. 字符串(Strings)

      @mixin firefox-message($selector) {
        body.firefox #{$selector}:before {
          content: "Hi, Firefox users!";
        }
      }
      @include firefox-message(".header");
      //编译为
      
      body.firefox .header:before {
        content: "Hi, Firefox users!"; }
      

   2. 运算

      1. 数字运算

      SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

      p {
        width: 1in + 8pt;
      }
      //编译为
      
      p {
        width: 1.111in; }
      

      除法

      p {
        font: 10px/8px;             // Plain CSS, no division
        $width: 1000px;
        width: $width/2;            // Uses a variable, does division
        width: round(1.5)/2;        // Uses a function, does division
        height: (500px/2);          // Uses parentheses, does division
        margin-left: 5px + 8px/2px; // Uses +, does division
      }
      //编译为
      
      p {
        font: 10px/8px;
        width: 500px;
        height: 250px;
        margin-left: 9px; }
      //如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。
      
      p {
        $font-size: 12px;
        $line-height: 30px;
        font: #{$font-size}/#{$line-height};
      }
      //编译为
      
      p {
        font: 12px/30px; }
      

      3. 颜色值运算

         数字与颜色值之间也可以进行算数运算，同样也是分段计算的

         p {
           color: #010203 * 2;
         }
         //计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为
         
         p {
           color: #020406; }
         //需要注意的是，如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。
         
         p {
           color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
         }
         //编译为
         
         p {
           color: rgba(255, 255, 0, 0.75); }
         //颜色值的 alpha channel 可以通过 opacify 或 transparentize 两个函数进行调整。
         
         $translucent-red: rgba(255, 0, 0, 0.5);
         p {
           color: opacify($translucent-red, 0.3);
           background-color: transparentize($translucent-red, 0.25);
         }
         //编译为
         
         p {
           color: rgba(255, 0, 0, 0.8);
           background-color: rgba(255, 0, 0, 0.25); }
         //IE 滤镜要求所有的颜色值包含 alpha 层，而且格式必须固定 #AABBCCDD，使用 ie_hex_str 函数可以很容易地将颜色转化为 IE 滤镜要求的格式。
         
         $translucent-red: rgba(255, 0, 0, 0.5);
         $green: #00ff00;
         div {
           filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
         }
         //编译为
         
         div {
           filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);
         }
         

         4. 字符串运算

            p:before {
              content: "Foo " + Bar;
              font-family: sans- + "serif";
            }
            

            编译为

            p:before {
              content: "Foo Bar";
              font-family: sans-serif; }
            

            运算表达式与其他值连用时，用空格做连接符：

            p {
              margin: 3px + 4px auto;
            }
            

            编译为

            p {
              margin: 7px auto; }
            

            p:before {
              content: "I ate #{5 + 10} pies!";
            }
            

            编译为

            p:before {
              content: "I ate 15 pies!"; }
            

caniuse(浏览器兼容性查询)

npm install -g caniuse-cmd

caniuse websocket

循环找到数组中指定的对象

function parseJson(jsonObj, key, value) {
      // 循环所有键
      let array = []
      for (let v in jsonObj) {
        let element = jsonObj[v]
        // 1.判断是对象或者数组
        if (typeof (element) == 'object') {
          let result =  parseJson(element, key, value)
          if(result.length) {
            array = array.concat(result)
          }
        } else {
          if (v == key) {
            if (element == value){
              array.push(jsonObj)
            } 
          }
        }
      }
      return array
    }

    var array = [
      {
        code: 1,
        value: 'b'
      },
      {
        code: 2,
        value: 'a'
      },
      {
        code: 3,
        value: 'c'
      },
      {
        code: 4,
        value: 'd'
      },
      {
        code: 5,
        value: 'e'
      },
      {
        code: 5,
        value: 'f'
      }
    ]

    console.log(parseJson(array, 'code', 5)) //

阻止浏览器后退

<script language="javascript">
        //防止页面后退
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', function () {
            history.pushState(null, null, document.URL);
        });
    </script>