學(xué)習(xí)Vue.js的五個小例子

array_huang 發(fā)布于2019-08-22 10:35 / 1808人閱讀

摘要：前言最近在學(xué)習(xí)，學(xué)著寫了幾個小例子，自己記錄一下，例子都比較簡單，希望給初學(xué)的小伙伴一些參考。后記文章可能比較簡單，只是分享了幾個小例子，沒有對的用法進(jìn)行詳細(xì)說明，大家可以看官方文檔。參考資料中文文檔五個小案例帶你學(xué)習(xí)火熱的

前言

最近在學(xué)習(xí)vue.js，學(xué)著寫了幾個小例子，自己記錄一下，例子都比較簡單，希望給初學(xué)vue.js的小伙伴一些參考。

雙向數(shù)據(jù)綁定

點擊查看

數(shù)據(jù)綁定是vue.js的基礎(chǔ)。本例中就是利用了vue.js的v-model指令在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定。



    {{ message }}

將message綁定到文本框，當(dāng)更改文本框的值時，

{{ message }}

中的內(nèi)容也會被更新。

導(dǎo)航切換

點擊查看

這里主要應(yīng)用了vue.js的v-for指令來渲染一個列表、v-bind指令來綁定class以及v-on指令來處理事件

即時搜索

鏈接描述

這個例子主要應(yīng)用了vue.js的自定義過濾器，可以通過Vue.filter()注冊一個全局過濾器，具體用法可以參考這里，vue.js也提供了一些內(nèi)置過濾器。

布局轉(zhuǎn)換

鏈接描述

本例應(yīng)用了vue.js的v-if指令進(jìn)行了條件渲染，以及v-bind綁定class和v-on處理事件

合計總價

鏈接描述

這個例子類似購物車那種選中合計總價的功能，也是對各種指令以及數(shù)據(jù)綁定的綜合應(yīng)用吧。

后記

文章可能比較簡單，只是分享了幾個小例子，沒有對vue.js的用法進(jìn)行詳細(xì)說明，大家可以看官方文檔。有時間后面我也會分享更多vue.js的學(xué)習(xí)筆記。
參考資料
vue.js中文文檔
五個小案例帶你學(xué)習(xí)火熱的Vue.js

GPU云服務(wù)器云服務(wù)器深度學(xué)習(xí)的五個深度入門的五個步驟機器學(xué)習(xí)例子機器學(xué)習(xí)的例子

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90875.html

相關(guān)文章

前端每周清單第 48 期：Slack Webpack 構(gòu)建優(yōu)化，CSS 命名規(guī)范與用戶追蹤，Vue.

摘要：發(fā)布是由團(tuán)隊開源的，操作接口庫，已成為事實上的瀏覽器操作標(biāo)準(zhǔn)。本周正式發(fā)布，為我們帶來了，，支持自定義頭部與腳部，支持增強，兼容原生協(xié)議等特性變化。新特性介紹日前發(fā)布了大版本更新，引入了一系列的新特性與提升，本文即是對這些變化進(jìn)行深入解讀。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清單專注前端...

sean 2019-08-22 13:57 評論0 收藏0
[使用 Weex 和 Vue 開發(fā)原生應(yīng)用] 6 使用 vue-router

摘要：使用值來作路由。原生應(yīng)用本身就是多頁的場景，頁面間狀態(tài)的隔離比共享更重要一些。使用開發(fā)的是原生應(yīng)用，頁面棧的管理使用的也是原生的特性，沒有但是有模塊可以實現(xiàn)頁面的前進(jìn)和后退等操作。系列文章的目錄在 ? 這里（由于我比較懶最近一段時間在忙其他事，系列文章拖了好久終于又更新了。。。）什么是 vue-router ？ vue-router 官方文檔 vue-router 是針對 V...

leonardofed 2019-08-20 15:51 評論0 收藏0
Laravel Excel 的五個隱藏功能

摘要：文檔示例注意你必須通過安裝指定的包，比如導(dǎo)出的如下所示按需格式化單元格有一個強有力的爸爸。因此它就擁有其各種底層功能，包括各種方式的單元格格式化。 showImg(https://segmentfault.com/img/remote/1460000018375787?w=1680&h=859); Laravel Excel package 最近發(fā)布了 3.0 版本，它所具有的新功能，...

tinna 2019-07-01 12:32 評論0 收藏0
《Java8實戰(zhàn)》-第六章讀書筆記（用流收集數(shù)據(jù)-02）

摘要：使用流收集數(shù)據(jù)分區(qū)分區(qū)是分組的特殊情況由一個謂詞返回一個布爾值的函數(shù)作為分類函數(shù)，它稱分區(qū)函數(shù)。這種情況下，累加器對象將會直接用作歸約過程的最終結(jié)果。這也意味著，將累加器不加檢查地轉(zhuǎn)換為結(jié)果是安全的。使用流收集數(shù)據(jù) 分區(qū) 分區(qū)是分組的特殊情況：由一個謂詞（返回一個布爾值的函數(shù)）作為分類函數(shù)，它稱分區(qū)函數(shù)。分區(qū)函數(shù)返回一個布爾值，這意味著得到的分組 Map 的鍵類型是 Boolean ...

jcc 2019-08-19 11:14 評論0 收藏0
信息時代：云計算的五個變化

摘要：云計算的出現(xiàn)是信息技術(shù)時代最重大的轉(zhuǎn)變之一，特別是對于企業(yè)而言。首先，多樣化合作伙伴關(guān)系是防止數(shù)據(jù)丟失或云計算故障時停機的一種方法。有效使用云計算需要制定多云計劃，以獲得最佳業(yè)務(wù)成果。對于當(dāng)今云計算行業(yè)發(fā)生的重大變化，并沒有一種通用的方法。云計算的出現(xiàn)是信息技術(shù)時代最重大的轉(zhuǎn)變之一，特別是對于企業(yè)而言。但就像天空上變幻不定的云朵一樣，云計算技術(shù)也在不斷變化。企業(yè)CEO都應(yīng)做好充分準(zhǔn)備，以最大...

arashicage 2019-04-29 15:46 評論0 收藏0