En's Blog
0%

【Web】Vue小筆記

Posted on

一、 資料與介面綁定

  • el ⇒
    哪個範圍需要有vue的功能
  • data ⇒
    資料綁定、內容（也可以做運算） 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//HTML
<div id="app">
	{{message}}
	{{score*0.8}}
</div>

//JS
var app = new Vue({
	el:'#app',
	data:{
		message: 'hello!'
		score: 100
	}
});

//output
hello!
80

二、 指令

  • v-if ⇒ 判斷是否要出現，且會直接從html裡消失
  • v-show ⇒ 一樣不會呈現在頁面上，但html還在
1
2
3
4
5
6
7
8
9
10
11
//HTML
<div v-if="score>=60">及格！</div>
<div v-if="score<60">不及格！</div>

//JS
data: {
	score: 55
}

//output
不及格！
  • v-model ⇒ 雙向資料綁定
1
2
3
4
5
6
7
8
9
10
11
//HTML
<input type="text" v-model="msg">
<div>{{msg}}</div>

//JS
data: {
	msg: 'hi'
}

//output
如果再輸入匡輸入新的字，會動態更改
  • v-for ⇒ 陣列資料呈現
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div v-for="color in colors">{{color}}</div>
<div v-for="person in home">{{person.father}}</div>

//JS
data:{
	colors: ['black', 'red']
	home: [{father:'tom'}, {father:'bob'}]
}

//output
black
red
tom
bob
  • v-on ⇒ 搭配methods
1
2
3
4
5
6
7
8
v-on:click~~~~~~~

//JS
methods:{
	abc: function(asd){
		alert('哈哈')
	}
}