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

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

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

前言

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

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

點(diǎn)擊查看

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



    {{ message }}

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

{{ message }}

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

導(dǎo)航切換

點(diǎn)擊查看

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

即時(shí)搜索

鏈接描述

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

布局轉(zhuǎn)換

鏈接描述

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

合計(jì)總價(jià)

鏈接描述

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

后記

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/90875.html

相關(guān)文章

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

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

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

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

leonardofed 2019-08-20 15:51 評(píng)論0 收藏0
Laravel Excel 的五個(gè)隱藏功能

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

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

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

jcc 2019-08-19 11:14 評(píng)論0 收藏0
信息時(shí)代：云計(jì)算的五個(gè)變化

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

arashicage 2019-04-29 15:46 評(píng)論0 收藏0