發表文章

目前顯示的是有「vuecli」標籤的文章

透過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” ...
張貼留言
閱讀完整內容

Vue CLI安裝[ Vue CLI 2 與 Vue CLI 3的差別 ]

-
圖片
Vue CLI是個用來快速建置Vue專案的工具。目前已經推出第三版。如果你現在才開始學習使用Vue CLI的話，可以把腦容量省下來，直些參考官網說明使用Vue CLI 3來建置專案就好。萬一你是在去年開始接觸到Vue CLI的話，可能當時碰到的是Vue CLI 2的版本，這時可能感受到版本過渡的差異。到底Vue CLI 3跟以前的版本有什麼差別呢？ 有別於上一個版本，Vue CLI 3提供GUI介面，降低使用者門檻，在圖形介面下點一點按鈕就可以做到Vue CLI 2相同的事。如果不習慣command line介面的話，可以使用GUI介面操作。 Vue CLI 是以 WEBPACK搭配相關套件SASS、 ESLint 、BABEL 編譯成可運行的版本。可以用ES6寫.js .Vue。 Vue Cli 3提供插件方式安裝，例如Type Script、SASS、 ESLint 、BABEL ，再透過以 WEBPACK編譯成可運行的版本。 安裝Vue CLI 2 安裝之前先確認一下是否已經安裝過Vue。 可以使用下面指令確認： $ vue -V 注意：V要大寫。 npm的網站 上有vue cli2的安裝說明 ( https://www.npmjs.com/package/vue-cli ) 順道一提的是，在安裝vue cli之前，必須先安裝 Node.js 。至於如何安裝Node.js在這裡就不贅述了。 $ npm install -g vue-cli 你有六種Template可以安裝Vue CLI Current available templates include: webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. webpack-simple - A simple Webpack + vue-loader setup for quick prototyping. browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit ...
張貼留言
閱讀完整內容