`
* 並在JS程式碼中輸入在computed內部
* compClasses 會返回class所需要的內容，需要修改的話也在這邊執行
* 不需要寫死在html內的templat搂!
```htmlembedded=
Dynamic CSS
Example 2
Ryu
```
```javascript=
new Vue({
el: '#vue-app',
data: {
avaliable: false,
nearby: false,
},
computed: {
compClasses: function () {
return {
avaliable: this.avaliable,
nearby: this.nearby
}
}
}
});
```
簡易CSS
```css=
span {
background: red;
display: inline-block;
padding: 10px;
color: #fff;
margin: 10px 0;
}
.avaliable span {
background: green;
}
.nearby span:after {
content: "nearby";
margin-left: 10px;
}
```
印出結果
# Conditionals
## v-if
當`v-if="內容"`，內容處布林值為true時會顯示內容，false則否
使用`v-on:click="error = !error"`達到開關的效果
```htmlembedded=
Conditionals
There has been an error
```
```javascript=
new Vue({
el: '#vue-app',
data: {
error: false,
sucess: false
}
});
```
印出結果，當點擊按鈕時下方p tag內文字會出現
## v-else-if
```htmlembedded=
There has been an error
There has been an sucess
```
當出現v-if以及v-else-if時，只要v-if的狀態是true，那麼就不會顯示else-if的部分跟JS的判斷式一樣
## v-show
做的事情跟v-if幾乎一樣但是差別在於:
當內容布林值顯示為false時
* v-if
會把元素完全移除掉
* v-show
只會呈現display:none
# Looping with v-for
## 陣列
逐一印出data內容，範例以ul表單為例:
`v-for="chracter in characters"`
* 這個部分的chracter可以名稱自訂
* characters這個部分就需要對照data內部
```htmlembedded=
```
```javascript=
new Vue({
el: '#vue-app',
data: {
characters: ['Mario', 'Luigi', 'Yoshi', 'Bowser']
```
印出結果
## 物件
可以使用 (.)的方式去取得物件的屬性
```htmlembedded=
-
{{ninja.name}} - {{ninja.age}}
```
```javascript=
new Vue({
el: '#vue-app',
data: {
ninjas: [{
name: 'Ryu',
age: 25
},
{
name: 'Yoshi',
age: 35
},
{
name: 'Ken',
age: 55
}
]
}
});
```
印出結果
## 輸出index
把index嵌入template中即可
使用在陣列或是物件的`v-for`都是可行的
```
(chracter, index) in characters
(ninja, index) in ninjas
```
```htmlembedded=
-
{{index}} . {{ninja.name}} - {{ninja.age}}
```
印出結果
## 使用li以外的容器包裹住v-for的內容
### 用div包裹住h3,p
使用div一樣可以做出li一樣的效果
```htmlembedded=
{{index}}. {{ninja.name}}
{{ninja.age}}
```
印出結果
### 如果只想要內容物的h3,p tag
可以改用template tag就不會輸出到DOM上面，而只有包在裡面的內容會被輸出
```htmlembedded=
{{index}}. {{ninja.name}}
{{ninja.age}}
```
印出結果
## 直接印出key,value而不用透過(.)
1. 第一次的v-for就正常發揮
1. 第二次的v-for則是印出每一個ninja的key,value
1. 把第二次的結果呈現在DOM上
```htmlembedded=
```
印出結果所有的 key-value pair
# Simple Punchbag Game
## 成品:
[成品網址](https://chiehliu.github.io/git-projects/Vue.js-Ninja/index.html)
## 成品功能:
1. 點擊Punch會讓沙包的血條扣寫扣到底時沙包會破掉
1. 點擊Restart會隨時把沙包的狀態更新回100%血量
## HTML
* bag image
使用v-bind綁定class當ended為true時，會給div加class=burst，就會更換成破掉的沙袋
* bag health
使用v-bind綁定`style"{ width: health + '%'}"`讓血量可以隨health的數量移動
* game controls
1. 使用v-on:click綁定兩個按並分別觸發punch, restart
1. Punch的部分特別使用v-show當內容為true時會秀出(沙袋還沒破)，破的時候按鈕消失(內容變成false)
### html程式碼:
```htmlembedded=
```
## CSS:
### CSS完整程式碼
```css=
#bag {
width: 200px;
height: 500px;
margin: 0 auto;
background: url(/bag.png) center no-repeat;
background-size: 80%;
}
#bag.burst {
background: url(/bag-burst.png) center no-repeat;
background-size: 80%;
}
#bag-health {
width: 200px;
border: 2px solid #000;
margin: 0 auto 20px auto;
}
#bag-health div {
height: 20px;
background: crimson;
}
#controls {
width: 120px;
margin: 0 auto;
}
```
## JS:
### vue-app
* el: 抓取整個外框
* data:
設置
1. health: 100
1. ended: false 預設式false，因為要血條歸零才會顯示true
* methods:
punch:
1. 使用this抓取#vue-app實體後讓其health -= 10也就是每執行一次扣10點
1. 設置if判斷如果health等於或小於零則讓ended為true
restart:
1. 使用this抓取#vue-app實體後讓其health重新賦值100
1. 並且把ended回復成false
### JS完整程式碼:
```javascript=
new Vue({
el: '#vue-app',
data: {
health: 100,
ended: false,
},
methods: {
punch: function () {
this.health -= 10;
if (this.health <= 0) {
this.ended = true;
}
},
restart: function () {
this.health = 100;
this.ended = false;
}
}
});
```
# Multiple Vue Instances
## 範例 創造多個Vue實體
* 創造兩個vue實體 app-one, app-two
* 並在兩個實體中
* 都使用`
{{ title }}
` `
{{ greet }}
`
* 印出結果沒有重複，分別印出各自的 title以及 greet
```htmlembedded=
Mutiple Vue Instances
{{ title }}
{{ title }}
```
```javascript=
var one = new Vue({
el: '#vue-app-one',
data: {
title: 'Vue App One'
,
computed: {
greet: function () {
return 'Hello from app one'
}
}
})
var two = new Vue({
el: '#vue-app-two',
data: {
title: 'Vue App Two'
},
computed: {
greet: function () {
return 'Hello yo all from app two'
}
}
})
```
印出結果
## 範例二 - 多個Vue實體交互作用
1. 創建一個按鈕在APP TWO，讓點擊時卻可以修改到APP ONE的title
1. 綁定v-on:click在按鈕上並觸函式changeTitle
1. 函式內容使用 APP ONE的變數名稱one並且使用其屬性title做修改內容然後返回其值
```htmlembedded=
Mutiple Vue Instances
{{ title }}
{{ greet }}
```
```javascript=
var one = new Vue({
el: '#vue-app-one',
data: {
title: 'Vue App One'
},
computed: {
greet: function () {
return 'Hello from app one'
}
}
})
var two = new Vue({
el: '#vue-app-two',
data: {
title: 'Vue App Two'
},
methods: {
changeTitle: function () {
one.title = 'Title changed'
}
},
computed: {
greet: function () {
return 'Hello yo all from app two'
}
}
})
```
印出結果
APP ONE的title順利被更改
### 範例三 - 使用變數修改Vue實體
因為Vue實體有綁定變數因此可以直接呼叫並使用其屬性做修改
```javascript=
two.title = 'change from outside';
```
印出結果
APP TWO的title也確實被修改
# Intro to Components
> Components是指一段程式碼或是template可以被重複使用在不同的Vue實體中
使用component的方式:
在component內部''輸入名稱，後方物件可以添加屬姓使用
```javascript=
Vue.component('輸入名稱',{
template:'
Hey there, I am a re-usable component
'
})
```
## 範例 - 使用component在不同的Vue實體中
* 使用在html內部時要呼叫component名稱
* 內容被印出時則不會顯示componet名稱只顯示其內容
```htmlembedded=
Intro to Components
Vue app one
Vue app two
```
```javascript=
Vue.component('greeting', {
template: '
Hey there, I am a re-usable component
'
})
new Vue({
el: '#vue-app-one',
})
new Vue({
el: '#vue-app-two',
})
```
印出結果
在兩個Vue實體中都印出component內容
## 範例 使用data以及methods在component內
* data 必須連接函式，當呼叫時才會修改內容，避免修改component內容時所有的Vue實體都同時更改了(因為每次使用data這邊會回傳一個新的物件 by reference的內容就會不同就不會同步修改彼此內容)
(Vue實體因為只有自己使用所以不需要這樣操作)
* methods 的用法跟一般的Vue實體一樣用物件的方式撰寫
```htmlembedded=
Intro to Components
Vue app one
Vue app two
```
```javascript=
Vue.component('greeting', {
template: `
Hey there, I am {{name}}
`,
data: function () {
return {
name: 'Yoshi'
}
},
methods: {
changeName: function () {
this.name = 'Mario';
}
}
})
new Vue({
el: '#vue-app-one',
})
new Vue({
el: '#vue-app-two',
})
```
印出結果:
當點擊按鈕Yoshi就變成了Mario並且只影響呼叫的Vue實體不會影響其他實體
## 特殊範例(示範使用) 使用data進行全部修改
這邊作者為了解釋component的data沒有使用物件，使用function的原因:
出在物件是傳址，所以這個範例讓物件導出去，地址就會是固定的，也因此兩個實體的內容會一起更改
1. 外部設置好 `data ={name:'Yoshi'}`(就不回傳新物件都回傳同一個變數)
1. 並在data的部分直接return data(用這樣的方式取代原本的function)
1. 印出結果會同步兩個實體
```htmlembedded=
Intro to Components
Vue app one
Vue app two
```
```javascript=
var data = {
name: 'Yoshi',
};
Vue.component('greeting', {
template: `
Hey there, I am {{name}}
`,
data: function () {
return data
},
methods: {
changeName: function () {
this.name = 'Mario';
}
}
})
new Vue({
el: '#vue-app-one',
})
new Vue({
el: '#vue-app-two',
})
```
印出結果
雖然是在Vue app one呼叫卻會直接修改兩個實體的內容
# Referencing with $refs
## $refs
* 可以取得其屬性並使用
```htmlembedded=
```
```javascript=
new Vue({
el: '#vue-app',
data: {
output: 'empty now'
},
methods: {
readRefs: function () {
console.log(this.$refs);
this.output = this.$refs.input.value
}
}
})
```
印出結果:
取的input裡面的value屬性並且指派給output
## 當Vue實體中有兩個以上的$refs處理方式
* 兩個以上屬性出現時必須先加上名字
當我們印出this.$refs會得到實體內部的$refs並且兩個的屬性都可以使用
```htmlembedded=
```
```javascript=
new Vue({
el: '#vue-app',
data: {
output: 'empty now'
},
methods: {
readRefs: function () {
console.log(this.$refs.test.innerText);
this.output = this.$refs.input.value
}
}
})
```
但是使用方式必須先把名稱加在前面，才會指定要印出哪一個
`console.log(this.$refs.test.innerText);`
