咱們能夠像使用 jQuery 同樣，不須要進行編譯構建，經過 script 標籤將 vue.js 引入到項目之中。這裏咱們使用 Vue 和 jQuery 兩種技術棧 實現項目中一些常見的功能，以及闡述咱們爲何咱們要着麼作。javascript
只重構一些代碼，咱們能夠經過 script 標籤 像引入 jQuery 樣來引入 Vue.：html
vue
java
jquery
webpack
ios
web
ajax
npm
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue/jQuery</title></head><body><!-- 不需構建，經過script標籤直接引入vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><!-- <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script> --></html>
接下來咱們對開發中的一些常見功能，經過使用 Vue 和 jQuery 來對比兩個版本的實現差別。
監聽用戶輸入
在一些網頁上，一個很是常見的功能是用戶在輸入表單時，監聽用戶的輸入。
jQuery 版本：
<!DOCTYPE html><html lang="en">HTML <div id="app"> <label for="thing">用戶名:</label> <input id="thing" type="text" /> <p class="formname"></p></div>JS$(function() { $('#app').keyup(function(e) { var formname = $(this).find('.formname'); var n_input = $(this).find('#thing').val(); formname.empty(); formname.append(n_input); });});
vue 版本：
HTML<div id="app"> <label for="name">用戶名:</label> <input id="name" type="text" v-model="name" /> <p>{{ name }}</p></div>JS//建立一個Vue實例new Vue({ el: '#app', data: { name: '' }})
這個例子中體現了 Vue 的一些優勢，Vue 是響應式的，它可以響應內容的變化。您能夠看到，當咱們更新表單輸入的內容時，它會當即發生變化。
而在 jQuery 版本中，DOM 處於控制狀態，咱們從DOM中取出內容，添加到對應的 DOM 之中。若是要更改 HTML 元素的結構，咱們必須調整咱們的 JS 代碼以對應這些更改。
在Vue版本中，咱們經過 v-model 指令建立數據的雙向綁定，它會根據控件類型自動選取正確的方法來更新元素。 v-model 本質上是語法糖，它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。
切換類名
經過點擊 button 按鈕，來改變文本的字體顏色。
jQuery 版本：
HTML<div id="app"> <button aria-pressed="false">Toggle me</button> <p class="toggle">這是一段文本</p></div>JS$(function() { $('button').click(function(e) { $('.toggle').toggleClass('red'); $(this).attr('aria-pressed', ($(this).attr('aria-pressed') == "false" ? true : false)); });});
Vue 版本：
HTML<div id="app"> <button @click="active = !active" :aria-pressed="active ? 'true' : 'false'">Toggle me</button> <p :class="{ red: active }">這是一段文本</p></div>JSnew Vue({ el: '#app', data: { active: false }})
在 jQuery 版本中，咱們將狀態存儲在 DOM 中，jQuery 經過 DOM 操做 class 名來決定文本字體顏色的改變。
在Vue版本中，red 這個 class 存在與否將取決於數據屬性 active。咱們根據該屬性來設置 red 是否存在。咱們不要求 DOM 獲取這些信息，咱們只須要修改數據的狀態便可。
隱藏和顯示
這個例子中，咱們經過點擊 button 來控制按鈕的按壓狀態 aria-expanded 和內容的顯示與隱藏。
jQuery 版本：
HTML<div id="app"> <button type="button" id="toggle" aria-expanded="false"> 顯示/隱藏 </button> <p class="hello">hello</p></div>JS$(function() { $('#toggle').on('click', function() { $('.hello').toggle(); $(this).attr('aria-expanded', ($(this).attr('aria-expanded') == "false" ? true : false)); });});
Vue 版本：
HTML<div id="app"> <button @click="show = !show" :aria-expanded="show ? 'true' : 'false'"> 顯示/隱藏 </button> <p v-if="show">hello</p></div>
JSnew Vue({ el: '#app', data: { show: true }})
在這個例子的 Vue 版本中，咱們使用了 v-if 指令，v-if 指令用於條件性地渲染一塊內容。這塊內容只會在指令的表達式返回 true 時被渲染。
另外一個用於根據條件展現元素的選項是 v-show 指令。不一樣的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。通常來講， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。
提交表格
jQuery 經過 AJAX 來提交表單，而 Vue 實際上沒有像 AJAX 這樣的內置東西，在 Vue 應用程序中，一般使用相似 Axios（用於發出HTTP請求的JavaScript庫）來幫助完成此任務。
這個例子中，在咱們輸入表單以前，按鈕將顯示爲灰色，當有用戶名輸入時，按鈕將變爲藍色，當咱們提交表單時，咱們會阻止頁面加載。
jQuery 版本：
HTML<div id="app"> <form action="/"> <div> <label for="name">Name:</label><br> <input id="name" type="text" name="name" required/> </div> <div> <label for="email">Email:</label><br> <input id="email" type="email" name="email" required/> </div> <button class="submit" type="submit">Submit</button> </form></div>JS$(function() { var button = $("button"); var name = $("input[name=name]"); name.keyup(function() { if (name.val().length > 0) { button.addClass('active'); } else { button.removeClass('active'); } }); $("form").submit(function(event) { //阻止表單刷新 event.preventDefault(); //得到表單字段集 var formData = { name: $("input[name=name]").val(), email: $("input[name=email]").val(), caps: $("input[name=caps]").val() }; // ajax post 提交 $.ajax({ type: "POST", url: "提交表單的url", data: formData, dataType: "json", encode: true }).done(function(data) { do something... }); });});
Vue 版本：
HTML<div id="app"> <form @submit.prevent="submitForm"> <div> <label for="name">Name:</label><br> <input id="name" type="text" v-model="name" required/> </div> <div> <label for="email">Email:</label><br> <input id="email" type="email" v-model="email" required/> </div> <button :class="[name ? activeClass : '']" type="submit">Submit</button> </form> </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>JSnew Vue({ el: '#app', data() { return { name: '', email: '', activeClass: 'active' } }, methods: { submitForm() { axios.post('提交表單的url', { name: this.name, email: this.email, }).then(response => { //do something }) } }})
在 Vue 版本中，使用咱們以前使用的 v-model 指令進行數據雙向綁定，來獲取提交的表單字段。咱們經過用戶名是否存在來切換 button 按鈕的狀態。經過使用事件修飾符 .prevent 處理表單隻進行提交，而不進行頁面刷新操做。咱們引入 axios cdn，來代替 jQuery 的 Ajax。
結論
JQuery 封裝了大量經常使用的 DOM 操做，使開發者在編寫 DOM 操做相關程序的時候可以駕輕就熟，徹底使用 jQuery 進行開發，是徹底沒有問題的。
本文旨在 Vue 對於不須要大量開銷的小型 web 應用來講也是一個很是好的選擇。若是隨着時間的推移項目變得愈來愈複雜，您也能夠輕鬆地將此代碼經過 webpack 構建轉換爲組件程序。這意味着您可使用單文件組件，使用 template 語法同時寫 HTML CSS 和 JS，能夠將您的代碼構建成單個可重用的組件。
選擇將 Vue 合併到其餘框架的項目中不要求您當即改變原有的代碼和結構，您甚至能夠隨着時間的推移緩慢地進行推動和重構。因爲 Vue 主張最少，具備多變的靈活性，所以人們一般稱Vue爲漸進式框架。
本文分享自微信公衆號 - 像素搖擺（pxDance）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。