文、意如老師
續上一篇 最熱門的網頁前端框架，工程師一定要了解Vue.js 資料綁定篇 認識資料綁定後接續著我們來認識屬性綁定及事件處理，最後我們要實作一個計數器。
任務一：屬性綁定-v-bind 使用方式
任務二：綁定css-style屬性
2-1.綁定多個css-Style屬性
2-2.綁定：style物件object 寫法（集合）
2-3.綁定：style array 寫法
任務三：事件處理
任務四：實作計數器
任務一：屬性綁定-v-bind使用方式
上一篇我們有介紹到可以利用 {{ }} 將資料輸出至網頁模版上，那如果屬性也想要{{}}是不是也能這樣？
例如我們預想的寫法
const vm = Vue.createApp({
data () {
return {
memberId: ‘abc123’
}
}
}).mount(‘#app’);
<div id=”app”>
<p id=”{{ memberId }}”>…</p>
</div>
但可惜無法直接這麼使用，必須使用屬性綁定v-bind的方式，
▶ 傳統寫法
<p id=”member”></p>
▶ 綁定綁定v-bind寫法
const vm = Vue.createApp({
data () {
return {
memberId: ‘abc123’
}
}
}).mount(‘#app’);
<div id=”app”>
<p v-bind: memberId>
</div>
完整範例：
index.html
<!–以超連結為例–三種寫法都行的通–>
<div id=”myapp”>
超連結<br>
Note：第一種寫法（傳統寫法）
<a href=”http://www.google.com/” title=”連到YiruAtStudio”>link0</a><br>
Note：第二種寫法（綁v-bind）
<a v-bind:href=”url” v-bind:title=”hint”>link1</a><br>
Note：第三種寫法
<a :href=”url” :title=”hint”>link2</a>
</div>
main.js
var myapp = new Vue({
el: ‘#myapp’,
data: {
url: ‘https://dotblogs.com.tw/YiruAtStudio’,
hint: ‘連到YiruAtStudio’
}
})
參考以下網址查看完整程式碼以及試試效果：
https://jsfiddle.net/YiruAtStudio/y5d4o0jp/7/
任務二：綁定css-style屬性
2-1. 綁定多個css-Style屬性-使用大括弧{}包起來
▶ 傳統寫法：
<h2 style=”color:blue;font-size:50px;”>文字</h2>
▶ 屬性綁定寫法：
<h2 :style=”{color:mycolor,fontSize:myfsize}”>文字</h2>
完整範例：
index.html
<div id=”myapp”>
<h2 :style=”{color:mycolor,fontSize:myfsize}”>文字</h2>
</div>
main.js
var myapp = new Vue({
el: ‘#myapp’,
data: {
mycolor: ‘blue’,
myfsize: ’50px’
}
})
參考以下網址查看完整程式碼以及試試效果：
https://jsfiddle.net/YiruAtStudio/d3ye75ma/1/
2-2.綁定：style物件，使用object 寫法（集合）
▶ 傳統寫法：
<h3 style=”color:blue;font-size:50px;”>文字</h3>
▶ 使用object 綁定寫法：
<h3 :style=”mystyleObj”>HI,文字</h3>
完整範例：
index.html
<div id=”myapp”>
<h3 :style=”mystyleObj”>HI,文字</h3>
</div>
main.js
var myapp = new Vue({
el: ‘#myapp’,
data: {
mystyleObj: {
color: ‘blue’,
FontSize: ’50px’
}
}
})
參考以下網址查看完整程式碼以及試試效果：
https://jsfiddle.net/YiruAtStudio/h16a5omp/3/
2-3.綁定:style array 寫法
▶ 傳統寫法：
<h3 style=”color:blue;font-size:50px;”>文字</h3>
▶ 綁定:style array 寫法
<h3 :style=”[mycolor,myfontSize]”>HI,文字</h3>
完整範例：
index.html
<div id=”myapp”>
<h3 :style=”[mycolor,myfontSize]”>HI,文字</h3>
</div>
main.js
var myapp = new Vue({
el: ‘#myapp’,
data: {
mycolor: {‘color’: ‘blue’},
myfontSize: {‘fontSize’: ’50px’}
}
})
參考以下網址查看完整程式碼以及試試效果：
https://jsfiddle.net/YiruAtStudio/c6yLfesq/3/
任務三：事件處理
如果需要功能事件處理function()的時候，可以寫在methods裡
▶ 傳統寫法：
<button onclick=”fn()”>文字</button>
▶ 綁定事件寫法1：
<button v-on:click=”fn()”>呼叫fn</button><br>
▶ 綁定事件寫法2：
<button @click=”fn()”>呼叫fn</button><br>
範例題目：
原文字為 “hihi”，
function方法功能為 :
如文字是 “hihi” 文字將改成 “hello” , 如果是 “hello” 文字將改成 “hihi”
完整範例
index.html
<div id=”app”>
<!–兩個按鈕效果都一樣–>
<button v-on:click=”fn()”>呼叫fn</button><br>
<!–@為縮寫方式–>
<button @click=”fn()”>呼叫fn</button><br>
{{msg}}
</div>
main.js
var myapp = new Vue({
el: ‘#myapp’,
data: {
msg: ‘hihi’
},
methods: {
fn: function () {
if (this.msg === ‘hihi’) {
this.msg = ‘hello’
} else {
this.msg = ‘hihi’
}
}
}
})
console.log(myapp.mycolor)
參考以下網址查看完整程式碼以及試試效果：
https://jsfiddle.net/YiruAtStudio/djbemyo9/21/
任務四：實作計數器
完整範例：
index.html
<div id=”myapp”>
<button v-on:click=”fn()”>+1</button><br>
<button @click=”fn2()”>-1</button><br>
計數:{{num}}
</div>
main.js
var myapp = new Vue({
el: ‘#myapp’,
data: {
num: 0
},
methods: {
fn: function () {
this.num += 1
},
fn2: function () {
this.num -= 1
}
}
})
console.log(myapp.num)
參考以下網址查看完整程式碼以及試試效果：
https://jsfiddle.net/YiruAtStudio/08rubh6w/