javascript框架的宣传是不可能的，但它们可能不适合您的项目。也许你不想为一些你可能没有的小抽象建立一个完整的构建系统。也许将一个项目转移到构建系统上，因此，不同的部署方法将意味着您可能无法向客户开具帐单需要花费大量额外时间和精力。也许你不想用javascript写所有的html。名单继续。
有些人可能不知道的是，您可以将vue并入您的项目中，就像您将包含jquery一样，不需要构建步骤。vue是灵活的，我们可以直接在html中使用它。
所以，如果你当前的页面结构如下所示：
<main>
<div class=thing>
<p>some content here</p>
</div>
</main>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js></script>
<script>
//some jquery code here
</script>
复制
您可以从字面上更改脚本标记，并仍然像以前一样使用html和js，只重构几个小小的代码。您不必使用javascript重写html，您不必使用webpack，也无需建立一个巨大的系统：
<main>
<div class=thing>
<p>some content here</p>
</div>
</main>
<script src=https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js></script>
<script>
//some vue code here
</script>
复制
您可以替换标签并保留标记。最好的部分是，你可能认为代码会变得更加复杂，但是你可能会在阅读本文并看到这些例子时发现，vue非常简单，易读，易于维护和适应。就规模而言，它们具有相当的可比性 – 可以像使用cdn那样使用它们，vue 2.5.3的版本是86kb。jquery 3.2.1是87kb。
让我们介绍jquery中的一些常见用例，以及我们如何将它们切换到vue，以及为什么我们甚至想要这样做。
捕获用户输入在网站上需要javascript的一个非常常见的用例是从表单捕获用户输入，因此我们从这里开始。为了简单明了，我们实际上并没有包含完整的表单，但最终我们会继续努力。
要以用户类型捕获信息，以下是我们如何在jquery和vue中完成此操作 – 并排：
在codepen上查看来自sarah drasner（@sdras）输入表单的pen?jquery捕获信息。
<div id=app>
<label for=thing>name:</label>
<input id=thing type=text />
<p class=formname></p>
</div>
复制
// this is an alias to $(document).ready(function() {
$(function() {
//keypress wouldn't include delete key, keyup does. we also query the div id app and find the other elements so that we can reduce lookups
$('#app').keyup(function(e) {
var formname = $(this).find('.formname');
//store in a variable to reduce repetition
var n_input = $(this).find('#thing').val();
formname.empty();
formname.append(n_input);
});
});
复制
在codepen上查看来自sarah drasner（@sdras）输入表单的pen?vue捕获信息。
<div id=app>
<label for=name>name:</label>
<input id=name type=text v-model=name /> <!--v-model is doing the magic here-->
<p>{{ name }}</p>
</div>
复制
//this is a vue instance
new vue({
//this targets the div id app
el: '#app',
data: {
name: '' //this stores data values for ‘name’
}
})
复制
我使用这个例子是因为它揭示了vue的一些优势。vue是被动的，这使得它特别能够对变化做出反应。你可以看到，当我们更新我们正在输入的内容时，它会立即改变 – 不会有任何延迟。
您还可以看到，在jquery版本中，dom处于控制之中 – 我们正在从dom中获取东西，听取它并响应它。这将我们与dom目前建立的方式联系起来，迫使我们思考如何遍历它。如果html元素的结构发生变化，我们不得不调整我们的代码以适应这些变化。
在vue版本中，我们正在存储状态 – 我们跟踪要更新和更改的一个属性，并通过称为指令的事物跟踪我们想要更改的元素。这意味着它直接连接到我们需要定位的html元素。dom的结构可以改变，html可以四处移动，而这些都不会影响我们的表现或捕捉这些事件。在我们的例子中，我们使用输入的v-model属性来连接我们存储在javascript中的数据。
但！这不像存储某些东西那样常见用例，所以让我们看看下一步。
在单个事件中存储用户输入关于vue工作方式的有趣之处在于它在存储和检索数据时不必考虑特定的dom事件。实质上，我们已经了解了我们想要捕捉的内容;?我们通过选择一个事件来改变它。相比之下，jquery与dom所做的事情紧密相关，并且依赖于那些dom事件来构建它所存储的变量，这些变量可以放在任何地方，而不是一个一致的组（数据中）用于检索。我们可以在最后一个示例的更新版本中看到这一点，其中的信息是在一个输入按键上收集的：
查看来自表单输入的pen?jquery捕获信息 –由sarah drasner（@sdras）在codepen上输入。
<div id=app>
<label for=thing>name:</label>
<input id=thing type=text />
<p class=formname></p>
</div>
复制
// this is an alias to $(document).ready(function() {
$(function() {
//we query the div id app and find the other elements so that we can reduce lookups
$('#app').change(function(e) {
var n_input = $(this).find('#thing').val();
$(this).find('.formname').append(n_input);
});
});
复制
见笔vue公司从表单输入捕捉信息，回车键萨拉drasner（@sdras）上codepen。
<div id=app>
<label for=name>name:</label>
<input id=name type=text v-model.lazy=name />
<p>{{ name }}</p>
</div>
复制
new vue({
el: '#app',
data: {
name: ''
}
});
复制
在这个版本中，jquery被简化了一些，因为我们不需要在每次击键时捕获所有东西，但我们仍然从dom中捕获所有东西并逐步响应这些更改。我们在jquery中的代码总会有点像这样：
“去获得这个元素，看看它在做什么，坚持这些改变，对这些改变做些什么。”
相比之下：在vue中，我们控制着正在发生的变化，并且dom根据我们的命令响应这些变化。我们将其直接附加到我们想要更新的内容上。在我们的例子中，我们有一个叫做修饰符的小抽象：v-model