透過Vue實現限制數入字數

-
我們都知道，平常在社群網站上會限制使用者輸入的字數。最具代表性的網站就是Twitter，Twitter限制一般使用者每次發表文章的字數在140字以內。讓使用者用最簡短的文字來表達想法。對於優化使用者體驗比較好的方式是，當使用者在輸入的同時，提示使用者還有多少字可以輸入，當使用這輸入的字數達到限制時，及時地停止使用者繼續輸入。 像這樣子限制使用者輸入字數的機制要如何來實現呢？ 有兩的點需要注意： 如何計算使用者輸入了多少字？ 當使用這輸入的字數達到限制時，該如何停止繼續輸入？ 今天我們就要透過Vue.js來製作一個可以幫我們控制輸入字數的程式。首先，我們先準備好需要的HTML檔案。 <!DOCTYPE html> <html lang=“zh-TW”> <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” /> <link rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” integrity=“sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin=“anonymous” /> <title>Start</title> </head> <body> <div id=“app” class=“container”> <div class=“row”> <div class=“col”> <textarea cols=“30”
張貼留言

15個你應該知道的常用命令列指令

-

你是否看過電影中駭客對著一個全黑畫面只有滿滿文字的螢幕快速地敲打著鍵盤，有時候還會同時開啟兩三個一樣的畫面。看著螢幕上一行行綠色的文字飛快的向上掃過，映射在駭客的眼鏡上給人一副很帥的感覺？

你是否想過，如果有一天我也可以像電影中的駭客那樣，坐在星巴克咖啡店的沙發上快速敲打著鍵盤？

其實這個畫面就是我們電腦中的一個應用程式。終端機（terminal），他就在你電腦的其他項目裡面。如果你不是工程師的話，應該很少會用到這個應用程式吧。



然而，如果要成為會coding的工程師，熟悉使用終端機的操作和常用的 Linux 命令列指令碼操作則是必須的。 以Python為例，以下列出開發上常用的 Linux 命令如下： 

註：前面加上錢字號($)代表此行為 command line 開始，真正在打的時候不用加入$

ls

功能：列出所在目錄的檔案

我想這個ls指令可能是命令列指令中最常被執行的吧！在操作的過程中我們時常都需要知道檔案或者是目錄的相關資訊。

$ ls

加上 -al 可以顯示所在目錄檔案的顯示詳細資料以及隱藏檔。
$ ls -al

pwd

功能：列出目前完整路徑

$ pwd

clear

功能：清除終端機上面的內容

$ clear

mkdir

功能：創建新資料夾
如果你想要創建一個叫做test的資料夾，你可以這樣寫：
$ mkdir test

cd

功能：移動 root 位置

移動到myfolder
$ cd myfolder
移動到使用者根目錄
$ cd ~
往上一層移動
$ cd ..

touch

功能：建立新空白檔案
建立一個名稱為 test.py 的空白檔案 
$ touch test.py

cp

功能：拷貝複製檔案
複製example.txt檔案到 myfolder 資料夾內
$ example.txt myfolder/example.txt

mv

功能：移動檔案
移動example.txt檔案到 myfolder 資料夾內
$  example.txt myfolder/example.txt

rm

功能：刪除檔案
刪除example.txt檔案
$ rm example.txt
刪除myfolder資料夾中所有的檔案
$ rm -r myfolder

exit

功能：登出畫面
$ exit

man

功能：查詢指令說明
$ man

zip

功能：壓縮檔案
壓縮example.txt為example.zip 檔案
$ zip example.zip example.txt

unzip

功能：解壓縮檔案
解壓縮example.zip檔案
$ unzip example.zip

pip3 install

功能：安裝Python3套件
安裝tensorflow套件
$ pip3 install tensorflow

pip3 uninstall

功能：解除安裝Python3套件
解除安裝tensorflow套件
$ pip3 uninstall tensorflow

留言

張貼留言

這個網誌中的熱門文章

用Python的條件實現電影分級流程

-
圖片
電影分級流程 電影的分級制度大家應該都不算陌生吧。就目前 台灣的現行分級制度 來說可以分為五級。分為 普遍級：一般觀眾皆可觀賞 保護級：未滿6歲之兒童不宜觀賞，6歲以上未滿12歲之兒童需父母、師長或成年親友陪伴觀賞。 輔12級：未滿12歲之兒童不宜觀賞。 輔15級：未滿15歲之人不宜觀賞。 限制級：未滿18歲之人不宜觀賞。 五種。 我們現在透過 Python的控制流程 來逐步思考這個問題吧。 首先，先處理限制級的問題。限制級的條件是未滿18歲之人不得觀賞限制級電影。 如果把它轉換成邏輯陳述，就可以變成『假如年齡小於18歲，不得觀賞『限制級』電影 。但可以觀賞其他級數電影--『普遍級』、『保護級』、『輔12級』與『輔15級』電影』 程式可以寫成如下的式子： 假設我們輸入15歲（age = 15）的話，執行結果如下： 假設我們輸入30歲（age = 30）的話，執行結果如下： 什麼訊息都沒有。 接下來我們來優化一下程式碼，在條件不符合的時候給他一些提示訊息。運用ELSE就可以表達「條件不符合時的狀況」。 程式可以改寫成如下的式子： 我們再次輸入30歲（age = 30），執行結果如下： 出現「可以觀賞任何電影」的訊息了。 接下來，我們輸入15歲輔導級的條件。 接者繼續輸入12歲輔導級與保護級的條件。 輸入完畢後我們測試一下，先輸入5歲（age = 5），執行結果如下： 怎麼與我們期待的結果不同？我們希望它落入age < 6 區段的陳述子句，卻落到 age < 18區段了。 主要的原因前面有說過，ELIF陳述句的順序非常重要，由於該陳述句中，一旦找到符合條件的子句，其他剩下的子句都會跳過。目前的狀況就是它找到 age < 18符合條件之後，就跳過後面所有的陳述子句了。因此，我們必須調整上面程式的順序： 調整後再輸入5歲（age = 5）執行一次，結果： 這樣子就正確了。如此，整個分級制度的邏輯就完成了。
閱讀完整內容

Vue元件實作，將HTML網頁Vue元件化

-
圖片
將HTML網頁Vue元件化 前一篇簡單的介紹了 元件的基本常識 。這篇我們要來試試看，實際上如何做出元件化的網頁。 第一個例子，我們要透過bootstrap網站上面的html範例，逐步將它改成Vue元件的頁面。 今天我們要練習的畫面，大家可以在這裡取得，下載為html檔案。下載html的方法這裡就不贅述。 https://getbootstrap.com/docs/4.1/examples/ 分析頁面 首先，我們先分析一下這個bootstrap的html範例 有頁首、頁尾、且中間主畫面可以分成兩個區塊。 下面區塊可以再分成更細的區塊，總共有六個區塊構成。 我們可以把分析的結果畫成下面的圖表。 網頁可以分割成Header、Footer、主要內容三段。主要內容的部分可以分上下，上面是bigBoard下面是一個個Item組成，總共有六個Item。 再回來對應下載的html原始碼。我們發現： Header 區塊，從 <header> 開始到 </header> 結束。 Footer 區塊，從 <footer class="text-muted"> 開始到 </footer> 結束。 主要內容區塊，從 <main role="main"> 開始到 </main> 結束。 主要內容區塊，又可以分成兩段，上半段從 <section class="jumbotron text-center"> 開始，到 </section> 結束; 下半段從 <div class="album py-5 bg-light"> 開始，到 </div> 結束，裡面有六個Item，每個Item都從。 <div class="col-md-4"> 開始，到 </div> 結束。 建立Vue 依照上面的分割方式，我們可以將整個網站分成幾個Vue元件。在分割之前，我們先在頁面上安裝Vue.js。一樣，我們先插入下面兩個部分。 Vue.js的CDN檔案連結
閱讀完整內容

Python基礎篇--[條件]如果發生這種狀況時，我該怎麼辦？

-
圖片
日常生活中隨處可見的選擇邏輯 一個夏日的中午，行經便利商店，看到冰櫃裡一瓶瓶冰涼的飲料，感覺喝下去會很解渴，於是你走了進去，打開冰櫃拿出一罐售價25圓的可樂。正要掏出皮包裡的悠遊卡購買時，發現悠遊卡內儲值的額度只剩5元。於是你檢查皮包中看看有沒有現金。結果發現有一張ㄧ百元，於是你拿出那張一百元給店員。像這樣子的情形你應該不陌生吧？這是日常生活常見的場景，可以說在我們人生中就是會不斷的面臨各種大大小小的選擇。 我們常常會說，如果碰到狀況A，就做AA這件事；如果碰到狀況B，就做BB這件事；如果既不是A也不是B的話，就去做CC這件事。如果我們用這樣子的邏輯來敘述上面的場景的話，就會變成： 如果悠遊卡的儲值大於可樂的售價(25元)，就用悠遊卡付款。 如果悠遊卡的儲值小於可樂的售價(25元)，尋找皮包是否有現金。 如果皮包有現金，而且現金大於可樂的售價(25元)，就用現金付款。 如果皮包沒有現金或現金小於可樂的售價(25元)，就不買可樂 if/else流程控制 我們知道Python 執行是從最頂端第一行開始，然後循序向下逐條執行。 但是，並不是所有程式都是由上而下循序的執行，如果程式中有流程控制的陳述句子時，可能會依據條件跳過某些程式碼，也可能跳過整個區塊的子句不執行。 簡單說，流程控制就是「程式按照當時狀況、分別執行不同處理動作的功能」。在表示方式上面，我們會使用 if、else 、elif等方式表示他們之間的關係。 IF陳述句 IF 用中文解釋就是指「如果」的意思。在流程圖中使用菱形來表示，表示程式要做出的實際決定。 如果條件為True時會執行子句，條件為False時子句會跳過不執行。 例如：「如果悠遊卡的儲值大於可樂的售價(25元)，就用悠遊卡付款。」如果用Python表示就會像這樣： 程式碼 if 悠遊卡的儲值 >=25： 使用悠遊卡付款 所有流程控制陳述句都是以冒號結尾，並在後面跟著一個新的程式區塊，也就是陳述子句。以上述的例子來說，陳述句是：『悠遊卡的儲值 >=25』，陳述子句是『使用悠遊卡付款』 程式碼 if 陳述條件成立： 執行這行陳述子句程式 需要特別注意的是，上面的語法中，tab的地方可以採
閱讀完整內容