iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 4
0

今天還是一樣不太想開始寫Code,不想面對接下來的26天,三十天是很漫長的一個月...

在網路上可以找到許多的文章在介紹Vue,Vue的發音跟View一樣,簡單的來說就是負責MVC裡面很重要的一環 ─ View。作者是一名中國人,所以在官方網站上面的文件中有中文,對我們這種英文學的不是很好的人來說是一大福音阿!
Vuejs在進幾年中的表現不輸給React與Angular,在Vue官方文件中也有與其它Framework的比較資料(Comparison with Other Frameworks),在Google搜尋幾個關鍵字就有許多的比較跟分析,還有統計資料,選擇Vue的開發人員,大多數的原因都會是「Easy To Pick Up」,容易上手、簡單等等的原因,對於開發中小型網站來說,它的確容易維護,當然您要用來架設大型網站也是可以的,它們也提供許多的應用套件,像是VueRouter、Nuxtjs...等等,來幫助您架設大型網站。
上網搜尋:react angular vue

因為網路上的教學以及範例實在太多了,我就挑了幾個我覺得很棒的特色來跟大家分享

Data Binding

用一個簡單的範例來做說明,我們在html中輸出一段文字,但這個文字希望可以不要寫死在html上面,當然你可以很值接透過DOM(Document Object Model 文件物件模型),去append資料或其他方式,但如果你直接透過Vue的話,它會將一個Instance(實例),透過html去綁定這個element,將我們的行為或是資料實現在上面。

<div id="hello">
  {{ saySomething }}
</div>
new Vue({
  el: '#hello',
  data: {
    saySomething: 'How are you?'
  }
})

輸出

How are you?

我們在做更進一步的練習

透過TextBox來輸入我們要的文字

<div id="hello">
  <input type="text" v-model="saySomething">
  {{ saySomething }}
</div>

js保持一樣的語法

new Vue({
  el: '#hello',
  data: {
    saySomething: 'How are you?'
  }
})

輸出
DataBind

我自己下了一個結論,Vue的data Binding 應該是最直覺的操作,與最容易懂的語法

VueComponent

Components are one of the most powerful features of Vue.

在官方文件上面的第一句介紹Vue Component(元件),Components 是Vue最強大的特色之一,能將HTML、JS、CSS打包成一個元件來使用,這可降低程式碼的重複性,舉一個例子,在我的網站下希望每個header 中都需要 Login跟Logout的按鈕,一般來說我們可能要在每一頁加上相同的程式碼,但這個動作會使我們的程式碼難以維護,假設未來需要一個search bar,那我們不就要在每一個頁面中加入呢?下面透過一個Vue Component來做示範。

HTML

<div id="page-head">
  <top-bar></top-bar>
</div>

Javascript

// 註冊一個Vue Component
Vue.component('top-bar', {
  template: '<div><input type="button" value="登入"><input type="button" value="登出"></div>'
})

// 建立一個實例
new Vue({
  el: '#page-head'
})

輸出
VueComponent

我們可以在頁面上看到登入跟登出的按鈕在上面,但實際打開source code(在頁面上點選右鍵->檢視原始碼或點選鍵盤F12),會發現Vue Component並不是一個Web Component,而是將註冊過的Vue Component編譯成一般的HTML,有興趣研究Web Component跟Vue Component的可以上網找找喔!

你可以了解更多Vue component:(https://vuejs.org/v2/guide/components.html)
你可以了解更多Web component:(https://developer.mozilla.org/en-US/docs/Web/Web_Components)


減肥專欄

昨天沒有喝飲料了,嘴巴很纏,喝了兩杯咖啡當做茶的替代品,聽說明天公司又有甜品的誘惑,下班後立馬健身房報到,分享一下減肥訓練的幾個項目

  • 滑步機 20分鐘
  • 20KG、25KG 槓鈴滑船
  • 12KG 深蹲
  • 滑輪下拉
  • 坐姿滑船
    下班後也累了,重量並沒有太大的成長,希望六日有時間多去補補

小知識

運動後了隔一天怎麼酸酸的?
有這種狀況我們稱之為「延遲性肌肉酸痛」,在運動時肌肉發生了一些擠壓或是損傷,造成肌肉受傷了,這時候身體會啟動修補機制來幫忙,來修復我們受傷的肌肉,讓你再下次做運動的時候有更好的表現喔!


每日一句

如果你買不起網襪
那就買奇異筆自己畫吧!
By 網襪工程師


上一篇
Day3 初次見面 Go
下一篇
Day5 全員耍廢中(上) Mobile設計
系列文
Go!從無到打造最佳行動網站30

尚未有邦友留言

立即登入留言