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

Question

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

谢谢你

标签： javascripthtmlcssvue.jsjavascript-framework

Answer 1

对这个问题的看法会有所不同。毫无疑问，从长远来看，它会让你成为更好的 web 程序员，准确地理解 vue.js 或任何其他库在幕后所做的事情。因为所有这些库最终都是用原生 JavaScript 编写的，只是将你所做的事情翻译成原生 JavaScript。

不过话虽如此，因为您刚刚开始并且您的课程需要 vue.js，所以我倾向于认为从 vue 开始可能会更好。这两种方法有很大的不同，所以首先学习普通的 JavaScript 方法不一定有助于 vue.js 更有意义。

最终是的，它会让一切变得更有意义，并且会让你成为一个比没有原生 JavaScript 知识时更好的 web 程序员。但恕我直言，短期内它可能无济于事。事实上，您可能会淹没在信息过载中。

因为一张图片……呃……代码片段值一千字，我创建了一个非常简单的例子来说明 vanilla JS 如何处理表单提交与 vue.js 如何处理它。我尝试在原版 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 开始。