template裏面javascript

<input v-focus type="text">

全局註冊我放在main.js裏面html

import Vue from 'vue'
// 註冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
  // 當被綁定的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

組件註冊，與created、mounted同級的vue

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

JS 相似contains方法，用indexOf實現

咱們不少時候會不自覺的在js代碼裏對一個字符串進行以下操做：

str.contains("substr");

可是js裏面沒有這個方法去判斷字符串str是否是包含substr，而js提供了另外一個方法indexOf：

str.indexOf("substr") != -1;

若是上面這個表達式爲true，則包含，反之則不包含

設計稿是750px時的,rem設置

<script>
        function() {
            remLayout();
 
            function remLayout() {
                var w = document.documentElement.clientWidth;
                w = w > 768 ? 768 : w;
                w = w <= 320 ? 320 : w;
                document.documentElement.style.fontSize = w / 7.5 + 'px';
            }
            window.addEventListener('resize', function() {
                remLayout();
            }, false);
        }();
  </script>
body {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
 
.layout {
  width: 100%;
  max-width: 750px !important;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 auto;
  text-align: center;
}
.a1 img {
  height: 4.55rem;
}

以750px的設計稿爲準。圖片高455px. 換算成rem即4.55rem.java

加了這段以後，設計稿上
好比是100px。即1rem;
450px.即4.5rem;
@REM:100;
width:100px / @REM;web

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="applicable-device" content="mobile" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="msapplication-tap-highlight" content="no" />
    <title></title>
    <style>
      * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
 
        body {
            background:rgba(0,0,0,0.8);
            max-width:750px;
            overflow-x:hidden;
            font-size:0.16rem;
            font-family: "Microsoft YaHei", "微軟雅黑", SimSun, "宋體", "Hiragino Sans GB", Helvetica, Arial, "Lucida Grande", sans-serif !important;
        }
        .leftright {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            text-align: justify;
            position: relative;
        }
 
        a {
            text-decoration: none;
        }
        .form{
            width:80%;
            margin:2rem auto;
        }
        .form-item{
            padding:0.1rem 0;
            margin-bottom:0.2rem;
            position:relative;
            background:rgba(255,255,255,.2);
           color: #eee;
           border-bottom:rgba(255,255,255,.2);
        }
        .label{
            width:22%;
            text-align:center;
            display:inline-block;
        }
        .input{
            border:none;
            outline:none;
            display:inline-block;
            width:75%;
            height:0.6rem;
            line-height:0.6rem;
            padding:0 0.08rem;
             background:none;
             color: #eee;
        }
        .code .input{
            width:48%;
        }
        .code-btn{
            position: absolute;
            text-decoration: underline;
            color: #eee;
            right: 0.3rem;
            top: 0.2rem;
            letter-spacing: 0.01rem;
        }
        .form-extra,.login-btn,.mark-text{
            color: #eee;
        }
        .form-btn{
            margin:0.6rem auto 0.2rem;
             color: #fff;
            background:mediumaquamarine;
             height:.8rem;
            line-height:.8rem;
             text-align:center;
              letter-spacing: 0.02rem;
             border-radius:0.08rem;
        }
        .form-checkbox ,.mark-text{
             display:inline-block;
            vertical-align: middle;
        }
        .form-bot .mark-text{
         color:mediumaquamarine;
        }
    </style>
 
    <script>
        + function() {
            remLayout();
 
            function remLayout() {
                var w = document.documentElement.clientWidth;
                w = w > 768 ? 768 : w;
                w = w <= 320 ? 320 : w;
                document.documentElement.style.fontSize = w / 7.5 + 'px';
            }
            window.addEventListener('resize', function() {
                remLayout();
            }, false);
        }();
    </script>
</head>
 
 
<body>
    <form class="form">
        <div class="form-item">
            <label for="" class="label">手機號：</label>
            <input   class="input" type="text" >
        </div>
         <div class="form-item code">
            <label for="" class="label">驗證碼：</label>
            <input  class="input"  type="text" >
            <a   class="code-btn"  href="javascript:;">獲取驗證碼</a>
        </div>
         <div class="form-item">
            <label for="" class="label">設置密碼：</label>
            <input class="input"  type="text">
        </div>
        <div class="form-extra leftright">
            <label for="" class="extra-item">
                <input  class="form-checkbox"  type="checkbox">
                <span class="mark-text">記住密碼</span>
            </label>
            <div class="extra-item">
                <a href="/login" class="login-btn">已有賬號登陸</a>
            </div>
        </div>
        <div class="form-btn">
        註冊
        </div>
        <label for="" class="form-bot">
          <input class="form-checkbox" type="checkbox">
          <span class="mark-text">閱讀並贊成sport相關協議條款</span>
        </label>
    </form>
</body>
</html>

vue進入頁面自動獲取input框焦點

JS 相似contains方法，用indexOf實現

設計稿是750px時的,rem設置