我可以使用HTML / CSS和javascript创建一个登录页面，然后再添加VUE吗？

Question

对于学校项目，我必须为图书馆系统创建一个基于Web的应用程序，图书管理员可以登录该应用程序，将其带到可以添加/删除/编辑书籍的页面。我负责前端，我使用的是Javascript，必须使用Vue（强制性）。我想知道我是否可以先使用HTML / CSS和javascript进行此操作，然后再添加VUE组件。还是真的不确定什么样的javascript框架如vue。但我现在还在学习javascript。所以想要在完成学习javascript基础知识后添加VUE。或者这会重新开始，所以我现在应该使用vue？

谢谢

Answer 1

关于这个问题，意见会有所不同。毫无疑问，从长远来看，它将使你成为一个更好的网络程序员，以准确理解vue.js或任何其他库正在做什么在幕后。因为所有这些库最终都是用vanilla JavaScript编写的，并且只是将您所做的内容翻译成vanilla JavaScript。

不过话说回来，因为你刚刚开始，你的课程需要vue.js，我倾向于认为从vue开始可能会更好。这两种方法的不同之处在于，首先学习vanilla JavaScript方法并不一定有助于vue.js更有意义。

最终是的，这将有助于一切更有意义，并将使你成为一个比没有普通JavaScript知识的更好的网络程序员。但恕我直言，短期内可能无济于事。事实上，你可能会因信息过载而淹没。

由于图片......呃...代码片段胜过千言万语，我创建了一个非常简单的示例，说明vanilla JS如何处理表单提交而不是vue.js如何处理。我试图在vanilla JS中添加注释来显示vue.js在做同样的事情。

香草：

<form id='login-form'>
    <input id="uname" />
    <input type="password" id="pwd" />
    <input type="submit" value="Login" id="login" />
</form>

<script>
    var form = document.getElementById('login-form');  // handled below by el: '#login-vue'
    form.addEventListener('submit', function (e) { //handled below by @submit.prevent='submit'
        var uname = document.getElementById('uname').value; //handled below by v-model='uname'
        var pwd = document.getElementById('pwd').value; //handled below by v-model='pwd'
        console.log("submit form", { uname, pwd });
        e.preventDefault(); // handled below by .prevent on the @submit
    });
</script>

vue.js：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<form id='login-vue' @submit.prevent='submit'>
    <input v-model='uname' />
    <input type="password" v-model='pwd' />
    <input type="submit" value="Login" />
</form>
<script>
    var app = new Vue({
        el: '#login-vue',
        data: { uname: '', pwd: '' },
        methods: {
            submit: function (e) {
                console.log("submit form", { uname: this.uname, pwd: this.pwd });
            }
        }
    })
</script>

如果在查看这些示例时，您认为vanilla真的可以帮助您理解vue.js，那么也许您可以从那里开始。如果没有，那么你可能想要从vue.js开始。