Question

嗨，我正在使用Vue JS渲染Django表单。在Django中，我有一个单独的应用程序来管理帐户和相关内容。我正在使用Vue渲染Django Signup and Login表单。

在<SectionList style={styles.container} renderSectionHeader={({section}) => { if (section.data.length === 0) { return section.ListEmptyComponent } return <SectionHeader title={section.title} /> } sections={[ { data: Object.values(this.props.teams), title: 'Teams', renderItem: this._renderTeamItem, keyExtractor: item => item.id, ListEmptyComponent: this._renderEmpty }, { data: Object.values(this.props.invites), title: 'Invites', renderItem: this._renderInviteItem, keyExtractor: item => item.id, ListEmptyComponent: this._renderEmpty } ]} />（我的自定义js文件。我正在使用Vue JS CDN）

App.js

我想知道这是否是使用Vue JS渲染事物的正确方法，因为我担心它会影响性能。我只在一个文件中编写组件表单登录和注册表单。那会是个问题吗？有什么更好的办法吗？请记住，所有这一切都按预期进行。

我要覆盖其登录和注册页面的My Base.html

$(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
  
});

我的注册页面：

{%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 %}

使用Vue JS渲染组件的性能问题>

0 个答案: