Проблема с производительностью для компонентов отрисовки с использованием Vue JS> - PullRequest
Новая
       2

Проблема с производительностью для компонентов отрисовки с использованием Vue JS>

0 голосов
/ 13 июля 2020

Привет, я использую Vue JS для рендеринга форм Django. В Django у меня есть отдельное приложение для управления учетными записями и связанными с ними вещами. Я визуализирую Django форму регистрации и входа, используя Vue что-то вроде этого.

В App.js (мой собственный файл js. Я использую Vue JS CDN) 

$(document).ready(function () {
  
  Vue.component("signupform", {
    data() {
      return {
        signUpPassword: null,
        signUpUsername: null,
        signUpEmail: null,
        signUpEmailErrors: [],
        signUpUsernameErrors: [],
      };
    },
    template: `
    <div>
        
        <div class="fieldWrapper">
        <span class="errorlist" v-for="error in signUpUsernameErrors">{{error}}</span>
            <input v-on:keyup="checkNullSignUpForm" type="text" name="username" placeholder="Username" maxlength="150"
            class="signUpUsername"
            autocomplete="username"
             required id="id_username">
        </div>
    
        <div class="fieldWrapper">
            <span class="errorlist" v-for="error in signUpEmailErrors">{{error}}</span>
            <input v-on:keyup="checkNullSignUpForm" class="signUpEmail" type="email" name="email" placeholder="Email" maxlength="150" required id="id_email">
        </div>
    
        <div class="fieldWrapper">
            <input v-on:keyup="checkNullSignUpForm" class="signUpPassword1" type="password" name="password1" placeholder="Password" maxlength="150" required id="id_password1">
        </div>
        <button v-on:click="checkSignUpForm" type="button" id="test" class="primaryBtn">sign up</button>
        <div class="directors">
        <div>Already with us? <a :href="'/accounts/login'">Log In</a></div>
       </div>
        </div>
    
        `,
    methods: {
      
      checkSignUpForm: function () {
        var checkSignUpEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        var checkSignUpUsername = /^[a-zA-Z0-9+-.@]*$/igm;
        if(!checkSignUpEmail.test(document.querySelector('.signUpEmail').value)){this.signUpEmailErrors.push('Please enter a valid email');}
        if(!checkSignUpUsername.test(document.querySelector('.signUpUsername').value)){
          this.signUpUsernameErrors.push('Username may contain only letters, numbers, and @/./+/-/_ characters.');
        }
      },
      checkNullSignUpForm: function () {
        if(
          (document.querySelector('.signUpPassword1').value === "")
          ||(document.querySelector('.signUpEmail').value === "")
          ||(document.querySelector('.signUpUsername').value === "")
        ){
          document.querySelector('.primaryBtn').disabled=true;
        }else{document.querySelector('.primaryBtn').disabled=false;}
      }
    },
  });
  Vue.component("loginform", {
    methods: {
      loginCheckNull: function () {},
    },
    template: `
    <div>
    <div class="fieldWrapper">
            <input type="text" name="username" placeholder="Username" maxlength="150" required id="id_username">
        </div>
        <div class="fieldWrapper">
            <input type="password" name="password" placeholder="Password" required id="id_password">
        </div>
        <button type="submit" class="primaryBtn">log in</button> 
        <div style="display: flex;" class="directors ">
        <a :href="'/accounts/signup'">Create account</a>
        <div style="margin-right: auto; margin-left: auto;">&nbsp; &bullet;</div>
        <a :href="'/accounts/reset_password'">Forgot password?</a>
        </div>
    </div>
    `,
  });
  var app = new Vue({
    el: "#VueRoot",
    delimiters: ["[[", "]]"],
    data: {},
    
  });
  document.querySelector('.primaryBtn').disabled = true
  
});

Я хотел знать, правильный ли это способ визуализации вещей с использованием Vue JS, потому что я беспокоюсь, что это снизит производительность. Я пишу компоненты формы входа и регистрации в один файл. Будет ли это проблемой? Есть ли способ лучше? Имейте в виду, что все это работает должным образом.

Моя база. html, на которую я заменяю страницу входа и регистрации 

{%load static%}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{%static 'Accounts/AccountsStyle.css'%}">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="{%static 'Accounts/JS/AccountsComponents.js'%}"></script>
    <title>{% block title %}{% endblock title %}</title>
</head>
<body>
    <noscript>
        Turn on js
    </noscript>
<div id="VueRoot" class="mainContainer">
{% block content %}{% endblock content %}
</div>
</body>
</html>

Моя страница регистрации: 

{% extends 'Accounts/AccountsBase.html' %}
{% block title %}

{% endblock title %}
{% block content %}

    <div class="formHeader">Create an account</div>
    <form autocomplete="off" novalidate action="" method="post">{%csrf_token%}<signupform/></form>   
    {% endblock content %}

Моя страница входа: 

{% extends 'Accounts/AccountsBase.html' %}
{% block title %}

{% endblock title %}
{% block content %}
    
<div class="formHeader">Log in</div>
{{form.non_field_errors}}
<form novalidate autocomplete="off" action="" method="post">{%csrf_token%}<loginform/></form>
    {% endblock content %}
...