Leo's Space

我寫故我在

0%

發表於 更新於 分類於 ， Disqus：
文章字數： 325 所需閱讀時間 ≈ 1 分鐘

雖然 Vue.js 有自己介紹它不是採用 ＭVVM 的框架，但 MVVM 的概念卻影響 Vue.js 的運作，因此讓我們先了解什麼是 ＭVVM 架構 。

架構示意圖

https://i.imgur.com/lDYVYfr.png

View

代表顯示在畫面的樣子，像是按鈕、文字輸入欄位等等

Model

主要取用資料的部分

閱讀全文 »

發表於 更新於 分類於 ， Disqus：
文章字數： 1.2k 所需閱讀時間 ≈ 1 分鐘

先來個 Hello Word

首先記得要先載入 Vue 檔案

1
2

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

宣告一個變數名稱 app 的 Vue 物件

1
var app = new Vue( { } );

在 html 檔案內增加一個 div 區塊，並且設定區塊的 id 為 app

1
2
3
4
<body>
    <div id="app">
    </div>
</body>

在變數 app Vue 物件中新增 el ，亦即 element(元素) 的縮寫，它的值即是要綁定的元素，接著透過 id 將 div 畫面和 Vue 物件做綁定 

1
2
3
var app = new Vue({
    el:'#app'
})
閱讀全文 »

發表於 更新於 分類於 ， Disqus：
文章字數： 1.3k 所需閱讀時間 ≈ 1 分鐘

1.安裝編譯器

  • VScode 安裝

  • VScode 插件安裝

    • Chinese (Traditional) Language Pack for Visual Studio Code
      • 幫你把 VScode 繁體化
    • Preview on Web Server
      • 安裝完之後，在編譯器建立的 index.html 檔上按shift+control+L，就可以開啟一個虛擬 Web Server 來開啟你的首頁程式，Server 網址是http://localhost:8080/index.html ，而不是一般在 index.html 點擊兩下，使用本地端 file://… 的方式打開首頁程式。使用這個插件好處是當你網頁程式有所更動時，網頁畫面也會隨著程式自動更新，不用再重新啟動瀏覽器，增加開發效率。
      • 如果之後有學到 Vue Cli ，在執行發佈指令 npm run build 後，會將構建完成的檔案放到dist 資料夾中，這個資料夾內的 index.html 就無使用本地端 file://… 的方式直接打開，而是必須透過 Web Server 開啟。
    • Vue
      • 會自動將 Vue.js 相關程式語法給 Hightlight 起來。
    • Vue 2 Snippets
      • VScode 會自動跳出 Vue.js 關鍵字的補字。

  • 個人推薦插件

    • Bracket Pair Colorizer
      • 自動幫你將成對的大括弧還有小括弧加上顏色，使人更容易對齊程式碼
    • indent-rainbow
      • 將程式碼縮排的部分增加顏色，使人更容易對齊程式碼
    • TabNine
      • 根據你的輸入習慣，透過機器學習推薦程式碼補字片段給你
    • vscode-icons

發表於 更新於 分類於 ， Disqus：
文章字數： 2.4k 所需閱讀時間 ≈ 2 分鐘

題目原文

Given an array of integers, return indices of the two numbers such that they add up to a specific target.

You may assume that each input would have exactly one solution, and you may not use the same element twice.

Example:

1
2
3
4
Given nums = [2, 7, 11, 15], target = 9,

Because nums[0] + nums[1] = 2 + 7 = 9,
return [0, 1].
閱讀全文 »