實用又驚艷的Vue

這里的驚艷，不是像武俠小說里面的主人公一樣，掉進一個洞里，撿到一本秘籍，打通任督二脈，然后就笑傲江湖

而是像普通人一樣的，比如像庖丁解牛，或者是像賣油翁，是在司空見慣的平凡中做出不平凡

Vue就是這樣，它面向前端開發天天要做的事情，但它卻可以做到讓人驚艷的簡潔而實用

這里來展示一下

首先是引用vue.js

然后新建一個Vue實例，名稱叫作app

它的內容相當簡單，現在只有二點：1需要作用到網頁的哪個部分，2要展示的數據。

app中的el屬性（代表element），關聯到vue要作用的文檔元素上，可以看到，這里使用的是id定位方式。

而data，不用說，就是我們的數據了

使用雙大括號表達式來展現，這里的表達式是最簡單的：僅僅引用變量

然后我們看到了。這雖然很簡單，但說明機制運行是正常的。

Vue是響應式的，就是說，你變我也變，數據變了，網頁里所有用到數據的地方都會同步改變。在console里修改一下試試

看，網頁上馬上就自動改變了

現在我們在data對象里使用復雜一點的數據類型

放置一個對象的列表，每個對象里存儲了id，數量，名稱等數據，

我們在頁面中展示對象的數量和名稱，然后當數量為0時，在旁邊加上“賣完了”的提示

這個在python中，我們用過這樣的表達式生成器，帶判斷條件的，比如獲取1-10之間的偶數

[x for x in range(1,10) if x % 2 == 0]

可以得到[2, 4, 6, 8]

這里也可以用類似的寫法來做條件判斷，使用v-if指令，非常方便

然后來做一下總庫存的計算，也就是將每個對象里的數量相加。

用devtool可以隨時檢查vue對象（這里是App變量）的內部細節，devtool在華為classroom的WEB全棧課程資料里面可以下載

效果如下：

下面添加一些互動的效果，添加按鈕，當點擊時將該商品的數量加1

再將原來顯示數量的地方，變為數量的輸入框

這時我們可以看到，所有的相關顯示點，都可以正確及時響應

當數量大于1時，“賣完了”的提示會消失；當為0時，又會出現

總庫存隨著每個對象的數量的變化而同步變化

在輸入框輸入會讓總庫存產生變化，“添加”按鈕的點擊同時更新了輸入框的值

這些行為，很好的表現了Vue的響應式

最終效果如下

到此結束。

本文素材來自 cn.vuejs.org，代碼請參考附件。

附件： vueDemo.zip 74.80KB 下載次數：2次

Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。