Vue.js 的 component 是什麼?
當做完一個專案時,每當想要修改某樣東西時,都要再重新審視程式碼,這時候就會非常痛苦。而 Vue.js 中有一個 component 的概念,就不用再害怕維護專案啦。
元件概念
而什麼是 component 呢?
圖片來源:Vue.js 官網
它的概念是一個網頁中,一些比較常用的組件,例如:nav bar 或是 side bar 等等區塊。這時候使用 component 來控制一個區塊,這樣就會非常好整理以及修改。
下面有一個點擊的範例,是從 Components Basics 稍微做個修改的範例,讓我們試著改成使用 Component 來看看:
1234567<div id="app"> <button-counter> <button @click="plus"> 我被按了 {{ count }} 下 </button> </button-counter></div>
1234567891011l ...
JS 基礎回顧 - DOM
想像一下在夾娃娃機中,我們操作著爪子,在機台中抓取我們想要的東西。而這樣的概念,有點像是我們要怎麼樣來藉由 JavaScript 操作網頁畫面的 HTML 元素,文件物件模型(Document Object Model, DOM)就可以幫助我們來做這件事。
那麼我們有哪些爪子可以使用呢?一般常使用的有:
getElementById()
getElmentsByClassName()
querySelector()
querySelectorAll()
下方有兩塊 div,如果想改變它們的文字內容的話,就可以透過 DOM 來操作。
12<div class = "doll" id = "doll-1">娃娃1</div><div class = "doll" id = "doll-2">娃娃2</div>
來看看個別使用的方法:
getElementById()
1234document.getElementById('doll-1 ...
執行環境:程式執行
JavaScript 在產生執行環境時,會有兩個階段。
第一階段是創造,會設定變數和函數到記憶體中。
第二階段則是執行。
而這篇文章則會提到執行的部份。
當在創造階段時,都已經設定好所有東西,到執行這個階段就很單純,只是逐行執行自己寫好的程式碼而已。進行編譯跟轉換後,讓電腦看得懂,這樣就結束了。
不免俗的來看一下程式碼,當執行以下的程式碼後,會如何運作呢?
123456789101112function b() { console.log('Test');}b(); console.log(a);var a = 'Hello';console.log(a)
首先呼叫 b(),沒有什麼問題,會執行 function 內的程式碼,印出 ‘Test’。
第一個 console.log(a),由於在創造階段時,先給 a 一個 undefined,然後執行,所以就印出 undefined。
第二個 console.log(a),因為有給 a 一個值,所以執行後,就印出 ‘Hello’。
再看其他例子,下 ...
如何使用 Vue CLI 建置專案
Vue CLI 介紹與環境建置,以及建置專案。
Vue CLI 是什麼?
之前所用到的 Vue.js 都是使用 CDN 載入的模式來開發,而 Vue CLI 有什麼不同呢?它有以下幾點特色:
基於 Webpack 所建置的開發工具。
便於使用各種第三方套件 (Bootstrap, Vue Router…)。
可運行 Sass、Bebal 等編譯工具。
便於開發 SPA 的網頁工具。
簡單設定,就能搭建開發常用環境。
缺點:
不便開發非 SPA 的網頁(改用 CDN 模式開發)。
了解以上 Vue CLI 的優缺點後,就可以來試著安裝了,但是首先首要條件要先安裝 Node.js。
安裝 nvm (Node Version Manager)由於 JavaScript 只能在瀏覽器中運行,所以為了要讓 Vue CLI 能夠在電腦本地端運行,就需要 Node.js,所以先來安裝 Node.js。而安裝 Node.js 最推薦的是採用 nvm 的方法,這樣之後可以方便切換不同版本。
在終端機執行指令安裝:
1curl -o- https://raw.githubuserconte ...
JS 基礎回顧 - 迴圈
迴圈 (Loop) 在 JavaScript 中,當遇到需要重複做某件事時,是個非常好用的方法。而迴圈又分為幾種不同的方式,本篇將會介紹如何使用比較常見的作法。
迴圈
如果一件重要的事,想要說三次的話,可能會這樣表達:
123console.log('很重要'); // "很重要"console.log('很重要'); // "很重要"console.log('很重要') // "很重要"
但是在 JavaScript 中,可以使用迴圈來幫助我們更省時省力地來處理這件事:
for 迴圈
for 迴圈的用法:
123var i;for () {}
{ }中,要重複一直做的事情,例如:{console.log('很重要')}
( )中,要從哪裏開始,到那裏結束,還有每回合會做什麼事情,例如:for (i = 0; i < 3; i++)上面那段的意思是:i 從 0 開始計算;到 3 的時候結束;i + ...
JS notice: JavaScript 與 undefined
本篇文章會稍微講解 undefined 與 not defined 的差異。
undefined
先來看一個例子:
12var a = "Hello World";console.log(a) // "Hello World"
當宣告一個變數 a,並指定一個值給它時,再用 console.log 印出 a,不意外的得到賦予它的值。
但如果把值去掉,再次看 a 會得到什麼?
12var a;console.log(a) // undefined
結果得到 undefined。
not defined
那麼如果把 var 跟值去掉的話,只留下 a 會發生什麼事?
12a;console.log(a);
會發生錯誤,錯誤訊息為 a is not defined。這邊則會有一個疑問,not defined 跟 undefined 是不同的嗎?
這個部份有在 執行環境:創造與提升 提過,所有 JavaScript 的變數,在一開始都會被設定為 undefined,而 undefined 是 JavaScript 內建的一個特殊的值,表示這個值尚 ...
用 Vue.js 做一個 TodoList
很多教學都會試著做出 TodoList 來驗收自己學習的成果,這篇文章也不免俗的將會運用目前學到的 Vue 技術,做出一個簡易的 TodoList。
使用 Vue 來做 TodoList 真的蠻方便的,以前我覺得做這個好麻煩,用了 Vue 來做快上不少。話不多說,先看成果:
建立 Vue 環境
首先在 HTML 頁面上建置一個 Vue 的環境,讓資料可以透過 Vue 渲染到 HTML。
123<div id="app"> <h1>{{ title }}</h1></div>
資料部份:
123456let vm = new Vue ({ el: '#app', data: { title: 'Simple TodoList', }})
輸入欄位雙向綁定
新增一個 input 欄位,讓輸入的文字可以用 v-model 雙向綁定在 inputNewTodo 中,在 Vue 的資料 ...
挑戰 Codewar - 1
這是在胡立的程式導師實驗計畫第四期中的 Codewar 練習題,裡面的題目都是出自 Codewars,之後會試著去由淺入深解開裡面的題目,並在這個系列寫出我解題的過程與心得。
Opposite number
第一題先從難度零顆星的開始。目的是要將數值正反顛倒,正數變負數,負數變正數。一進去就給你一個 function,讓你去思考怎麼解。
123function opposite(number) { //your code here}
一開始有點想太多,想說如果是負數的話,就給它一個負號,讓它變正數;如果是正數,就給負號。
所以一開始的作法我是用 if...else:
1234567function opposite(number) { if(number < 0) { return -number } else { return -number }}
後來想想不對,應該是不用這麼複雜,不管什麼數,給負數就對了,所以就變成:
123456function opposite(nu ...
JS 基礎回顧 - 物件與陣列
在 JavaScript 中,物件與陣列這兩個還滿常搭配使用的,所以這篇就混在一起講吧。絕對不是為了要省事。
陣列 Array
陣列的概念有點像放藥的盒子,一個蘿蔔一個坑。可以是零到多數元素的集合,可以放入資料,例如數字、文字,或是陣列、物件、函式,沒有規定只能放什麼進去。
如何建立陣列可以是空陣列:
1var a = []
如果要建立資料:
1var a = [1, 2, 3, 'aaa', 'bbb']
或是:
12345var a = [];a[0] = 123;a[1] = 456;a[2] = 'abc'
要注意的是,陣列是有順序的集合,第一筆資料是從 0 開始。
取得陣列的長度length,陣列的長度,等於陣列元素的個數,例如:
123var list = [1, 2, 3, 'aa', 'bb', 123];console.log(list.length); // 會得到6
如果想取用特定某一個元素,假設取第一個:
12345678var list = [1 ...
執行環境:創造與提升
在 JavaScript 中,提升(Hoisting)可能是最奇怪的部份了,這個部份還滿容易搞混的,不過希望我整理出來的筆記能夠幫助釐清觀念,如果有錯的部分麻煩請告知我。
首先看一段程式碼,然後看會發生什麼事:
12345678var a = 'Hello World';function b() { console.log('Test');}console.log(a);b()
上面的程式碼沒有意外的出現 Hello World 及 Test。如果把第 8 跟第 9 行移到最上面的話,會發生什麼事呢?
12345678console.log(a); // undefinedb(); // "Test"var a = 'Hello World';function b() { console.log('Test');}
結果沒有出現錯誤,而是得到一個值 undefined,另一個函式則是成功執行。這在其他大部分程式語言 ...