2019年8月26日 星期一

[Vue] 模板語法 2/2

計算屬性(computed)

index.html

<div>Reverse Title: {{reverseTitle}}</div>

index.js

Vue({
  data: {
      title: 'Test'
  },
  computed: {
    // 自定義屬性
        reverseTitle: function () {
            return this.title.split('').reverse().join('')
        }
  }
})

計算屬性 v.s. 方法

  methods: {
        reverseTitle: function () {
            return this.title.split('').reverse().join('')
        }
  }

和

  computed: {
    // 自定義屬性
        reverseTitle: function () {
            return this.title.split('').reverse().join('')
        }
  }
  • methods 每次渲染都會更新，保持最新的值，但使用較多資源
  • computed 會緩存，不一定是最新的值，使用較少資源

計算屬性結合 getter / setter

data: {
    firstName: 'Shawn',
    lastName: 'Tseng'
},
computed: {
        fullName: {
            get: function () {
                return this.firstName + ' ' + this.lastName
            },
            set: function (newValue) {
                var name = newValue.split(' ');
                this.firstName = name[0];
                this.lastName = name[name.length - 1];
            }
        }
}
  • 在 fullName 更新時，也會觸發 set ，更新 firstName 和 lastName

監聽器(watch)

  data: {
    age: '',
    reply: '',
  },
  watch: {
      age: function (oldValue) {
        this.reply = '你的年紀:' + oldValue;
      }
  }
  • 在age變動時，會執行watch的邏輯，非常消耗資源
  • 在需要串接後端的情境常使用
張貼者： 於 沒有留言:
標籤：

2019年8月20日 星期二

[Vue] 模板語法 1/2

常見的模板語法

  • Mustache(雙大括號)
只要變數更新，模板就會更新

{{ var }}

  • 一次性綁定
只有第一次會更新模板

<div v-once>{{showHint}}</div>

  • HTML 解析

<div v-html="rawHtml"></div>

*. 使用v-html正確解析 HTML內容

  • 屬性綁定
<input type="text" v-bind:disabled="!canTypeIn">

*. 使用v-bind綁定 HTML 元素屬性

常見的指令

  • v-if
<div v-if="showHint">看情況顯示文字</div>

  • v-bind:屬性名稱="要綁定的變數"
<span v-bind:title="loadTime">
    滑鼠移置文字上，顯示'網頁啟動時間'
</span>

*. 縮寫 :bind:屬性名稱="要綁定的變數"

  • v-on:事件名稱="要綁定的方法"
<button v-on:click="switchShowHint">開關</button>

*. 縮寫 @click="要綁定的方法"



張貼者： 於 沒有留言:
標籤：

2019年8月18日 星期日

[Vue] new Vue 的實體

new Vue()

var vm = new Vue({ // 參數 })

  • vm: viewModel的意思，概念源自於MVVM架構。

參數

  • data
var data = {
    title: 'Hello World'
}

var vm = new Vue({
    data: data
})

Vue 會把變數 data和變數 vm雙向綁定
data.title === vue.title // true
data.title = '改值時vm.title也會改';
vm.title = '改值時data.title也會改';

結論: data 和 vm 共用記憶體空間

DOM渲染注意事項

1.
透過
var vm = new Vue({
    data: data    
})
新增的屬性，都會被監聽，變更時會渲染到畫面上

2.
new Vue() 之後才新增的屬性，都不會被監聽
e.g.

vm.newProperty = 'test'; // newProperty 不會被監聽

3.
根據1.2.的特性，未來才會用到的屬性，就需要在一開始設置初始值
e.g.
var data = {
    futureProperty:''
}

4.
Object.freeze() 可以使物件變成唯讀，不被監聽
e.g.
Object.freeze(data); // 意即data不會被監聽，不會更新到畫面上

Vue提供的屬性、方法

vue提供的屬性方法前面會有前綴符號 $
e.g.
  • vm.$data
vm的data
  • vm.$el
vm的DOM
  • vm.$watch('property',function(newValue, oldValue){ // callback })
可監聽某個property

Vue提供的hook

在 Vue 的生命週期過程中，提供的不同的 hook 給使用者，全景未來說明

e.g.
new Vue({
    created: function(){
        console.log(this.property);
    }
})


張貼者： 於 沒有留言:
標籤：

2019年8月15日 星期四

[Vue] 元件化 / 屬性傳入

元件

元件最大的好處就是能重複使用
  • index.html
<div id="app">
<ul>
    <li v-for="data in dataList">
        {{data.text}}
    </li>
    <list-item></list-item>
    <list-item></list-item>
    <list-item></list-item>
</ul>
</div>
  • index.js
Vue.component('list-item', {
    template: '<li>第N個項目</li>'
})
var app = new Vue({
    el: '#app'
})

屬性傳入(父元件=>子元件)

  • index.html
<ul>
    <list-item v-for="data in dataList" v-bind:item="data">
    </list-item>
</ul>
  • index.js
Vue.component('list-item', {
    props:['item'],
    template: '<li>{{item.text}}</li>'
})

var app = new Vue({
    el: '#app',
    data: {
        dataList: [
            { text: 'A項目' },
            { text: 'B項目' },
            { text: 'C項目' }
        ]
    }
})

張貼者： 於 沒有留言:
標籤：

2019年8月14日 星期三

[Vue] If / For / Event / Model(two-way binding)

條件

  • index.html
<div v-if="showHint">看情況顯示文字</div>
  • index.js
data: {
    showHint:true
}

迴圈

  • index.html
<ul>
    <li v-for="data in dataList">
        {{data.text}}
    </li>
</ul>
  • index.js
data: {
    dataList: [
        { text: '第一個項目' },
        { text: '第二個項目' },
        { text: '第三個項目' }
    ]
}

事件綁定

  • index.html
<button v-on:click="switchShowHint">開關</button>

*.v-on:事件名稱
  • index.js
methods: {
    switchShowHint: function () {
        this.showHint = !this.showHint
    }
}

雙向綁定

事件綁定

  • index.html
<input type="text" v-model="title">

*.v-on:事件名稱
  • index.js
data: {
    title: 'Hello World'
}


張貼者： 於 沒有留言:
標籤：

2019年8月13日 星期二

[Vue] 建立專案 / 變數顯示綁定 / 屬性綁定

關於 Vue 框架的使用方式

Step1. 加入 Vue 的核心函式庫

  • 開發版
<!-- 包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • 正式版
<!-- 優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Step2. 加入樣板語法

  • index.html
<div id="app">
    {{title}}
</div>
  • index.js
var app = new Vue({
    el: '#app',
    data: {
        title: 'Hello World'
    }
})

Step3. 元素屬性綁定

  • index.html
<span v-bind:title="loadTime">
    滑鼠移置文字上，顯示'網頁啟動時間'
</span>

*.v-bind: 一種指令，可將變數綁定至元素屬性上
  • index.js
data: {
    loadTime: '網頁啟動於:' + new Date().toLocaleString()
}

張貼者： 於 沒有留言:
標籤：

2019年8月11日 星期日

[Back To Basic] CSS Grid Layout

Grid Layout

不需要 float 和 positioning 也可排版。

Grid Elements

包含一個父元素(parent element)和多個子元素(child elements)。

Step1. 設定Grid顯示

display: grid;
或
display: inline-grid;

Step2. 設定屬性

  • 設定Gap
    • grid-column-gap: 20px;
    • grid-row-gap: 20px;
    • grid-gap: 20px;
  • 設定lines(跨欄)
    •   grid-column-start: 1;
    •   grid-column-end: 3;
    •   grid-row-start: 2;
    •   grid-row-end: 4;
張貼者： 於 沒有留言:
標籤：

2019年8月7日 星期三

[Back To Basic] CSS Media Queries

Media Type

css2曾推出@media規則，可根據不同裝置，套用不同的css樣式，但沒有太多裝置支援此規則

Media Queries

css3延伸 Media Type 的想法，依據下列規則，達成目的。
  • 視窗寬高
  • 設備寬高
  • 設備方向
  • 解析度

CSS3 Media Type

  • all
所有設備
  • print
印表機
  • screen
螢幕
  • speech
螢幕閱讀機

語法

@media not|only MediaType and (expressions) { /* 套用條件 */
/* 要套用的CSS樣式 */
}
e.g.
@media screen and (min-width: 960px) { /* 螢幕寬度在960以上皆套用 */
  .block1 {
    background-color: blueviolet;
  }
}
張貼者： 於 沒有留言:
標籤：

2019年8月6日 星期二

[Back To Basic] CSS Flexbox 2/2

align-content: 垂直空間對齊方式

完全置中

排版常常會遇到完全置中的情境，flex 的處理方式

張貼者： 於 沒有留言:
標籤：

2019年8月5日 星期一

[Back To Basic] CSS Flexbox 1/2

Flexbox 出來之前的4種排版模式

  • Block: 區塊
  • Inline: 段落文字
  • Table: 二維表格資料
  • Positioned: 明確定位的元素

Flexbox

不使用 float 和 positioning，也能更容易設計出更有彈性的版面

使用方法

Step1 容器設定
.container {
  display: flex;
}

Step2 屬性設定

flex-direction: 排列方向
flex-wrap: 擠壓時是否換行
flex-flow: flex-direction flex-wrap

justify-content: 水平對齊
align-items: 垂直對齊

張貼者： 於 沒有留言:
標籤：

2019年8月4日 星期日

[Back To Basic] CSS Box Sizing

在計算元素的寬高時，應該用哪種計算方式

  • 預設

width + padding + border = 實際寬度
height + padding + border = 實際高度

這種作法在指定寬和高時，實際的寬高會比預期的還要大，這樣的現象會讓排版變得困難。

解決方式

box-sizing: border-box;
  • box-sizing
width - padding - border = 實際寬度
height - padding - border = 實際高度

可加上以下語法通解

* {
  box-sizing: border-box;
}

張貼者： 於 沒有留言:
標籤：
訂閱： 文章 (Atom)