Landy Blog
0%

進階模板語法-02

發表於 更新於 分類於

接續著上一篇的進階模板語法-01的內容繼續記錄。

Computed與Watch

Computed過濾陣列內容

之前的章節是利用按下一個鈕，觸發methods裡面的一個function進而來過濾陣列，並將過濾完的結果
呈現在畫面上。
那這邊的話，我們希望使用者輸入完內容後，就會自動的將過濾完且符合搜尋內容的條件給呈現在畫面上。
那這樣的話，我們就需要用到computed來達成，不需要額外操作(像是:按下enter)才達成這種效果。

上面這個例子，當我們在input欄位裡面輸入搜尋值，此時，filterText會變動，
也就會連動到computed中的filterData，並在filterData裡面做判斷，若輸入的搜尋內容
有符合arrayData的內容的話，就回傳該元素值到filterData中，進而在畫面呈現filterData，
但以上這個例子，在資料量大的話會有效能上的議題。

使用 Computed 來呈現時間格式。

ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
---HTML---
<div id="app">
	<p>{{formatTime}}</p>
</div>

---JavaScript---
var app = new Vue({
	el:'#app',
	data:{
		newDate:0
	},
	computed:{
		formatTime: function(){
			this.newDate = new Date();
			var dates = this.newDate;
			var year = dates.getFullYear();
			var month = dates.getMonth() + 1;
			var date = dates.getDate();
			var hours = dates.getHours();
			var minutes = dates.getMinutes();
			var seconds = dates.getSeconds();
			return `${year}/${month}/${date} ${hours}:${minutes}:${seconds}`;
		}
	}
})

以上用computed的方式，就能即時的呈現當下的時間囉~

Watch

當特定的變數變化的時候，會去執行特定的function

以上這個範例，就是利用watch去監聽trigger是否有變動，若有，就去執行相對應的function。
也就是當1秒後，trigger的值會被切回去false，也就是把rotate的效果給拿掉。

表單細節操作

透過v-for來製作selected裡面的資料
ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---HTML---
<div id="app">
	<select name="" id="" class="form-control" v-model="selected2">
		<option disabled value="">請選擇</option>
		<option :value="item" v-for="item in selecData">{{item}}</option>
	</select>
	<p>小明喜歡的女生是 {{ selected2 }}。</p>
</div>
--JavaScript---
var app = new Vue({
	el:'#app',
	data:{
		selectData:['阿明', '力宏', '漂亮阿姨'],
		selected2:''
	}
})

以上的範例，就會動態的將selectData陣列裡面的元素渲染進option裡面。
但要特別記得，每個option的value屬性都是動態的被加入的，所以，前面要記得加v-bind。
另外，當點選某個option的時候，該option的value會被塞到selected2裡面，
所以，最終在p段落裡面就會成現selected2的值，也就是你選取的option的value囉~

多選

只要在select的HTML標籤中，加入multiple就可以有多選的功能囉
ex:

1
2
3
4
5
6
7
8
---HTML---
<div id="app">
	<select name="" id="" class="form-control" multiple v-model="selected2">  // 加入multiple
		<option disabled value="">請選擇</option>
		<option :value="item" v-for="item in selecData">{{item}}</option>
	</select>
	<p>小明喜歡的女生是 {{ selected2 }}。</p>
</div>

當你在select中加入multiple時，你在點選該欄位中的option時，記得按下Ctrl鍵來複選，
此時，selected2裡的內容，就是你複選完的結果囉。

複選框

在checkbox的標籤上加上
true-value="xxx" 另外 false-value="ooo"，
如此，就能在點選或不點選該checkbox時，得到相對應的值了。
ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---HTML---
<div id="app">
	<div class="form-check">
		<input type="checkbox" class="form-check-input" id="sex" v-model="sex" true-value="男生" false-value="女生">
		<label class="form-check-label" for="sex">{{ sex }}</label>
	</div>
</div>


---JavaScript---
var app = new Vue({
	el: '#app',
	data:{
		sex: '男生'
	}
});

以上這個範例，input欄位是利用v-model來綁定sex成員屬性值，當我們點選該input欄位值，sex會被塞入true-value也就是男生，若沒有點選該input欄位的話，sex會被塞入false-value也就是女生。

修飾符

v-model.lazy

當我們輸入內容時，必須要等到我們將focus移出該輸入欄位中，該內容才會被輸入到被v-model綁定的變數中。
ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---HTML---
<div id="app">
<p>
	{{ lazyMsg }}
</p>
<input type="text" class="form-control" v-model.lazy="lazyMsg">
</div>

---JavaScript---
var app = new Vue({
	el: '#app',
	data:{
		lazyMsg:''
	}
})

語法 v-model.number

將v-model綁定的內容轉成數字型別
ex:

1
2
3
4
5
6
7
8
9
10
11
---HTML---
<pre>{{ age }}</pre>
 <input type="number" class="form-control" v-model.number="age">
 
---JavaScript---
var app = new Vue({
	el: '#app',
	data:{
		age: ''
	}
})

可以看到在v-model的後面有個number的修飾符，用來將輸入進去的age內容，轉成數字型別。

語法 v-model.trim

將字串中的前後方多餘的空白刪除掉
像是: var str=” 這是 字串 “;
被trim過後，就會變成
var str=”這是 字串”;

ex:

1
2
{{ trimMsg }}緊黏的文字
  <input type="text" class="form-control" v-model.trim="trimMsg">

v-on事件綁定

將v-on觸發的事件，帶入參數
ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
---HTML---
<div id="app">
   <ul>
    <li v-for="item in arrayData" class="my-2">
      {{ item.name }} 有 {{ item.cash }} 元 
      <button class="btn btn-sm btn-outline-primary" @click="storeMoney(item)">儲值</button>
    </li>
  </ul>
</div>

---JavaScript---
var app = new Vue({
	el: '#app',
	data:{
		arrayData:[
		  {
			name: '小明',
			cash: 500
		  },
		  {
			name: '漂亮阿姨',
			cash: 1000
		  },
		  {
			name: '力宏',
			cash: 6000
		  }
		
		]
	},
	methods:{
		storeMoney: function(item){
			item.cash += 500;
		}
	
	}
})

當我們點擊儲值按鈕就會觸發storeMoney函式，並為對應到的元素的cash加上500。

DOM元素的事件修飾符

語法 @click.stop=””

在事件監聽中，此語法是用來阻止事件冒泡
ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---HTML---
<div id="app">
	<div class="p-3 bg-primary" @click="trigger('div')">
		<span class="box" @click.stop="trigger('box')"></span>
	</div>
</div>

---JavaScript---
var app = new Vue({
	el: '#app',
	data:{
	
	},
	methods:{
		trigger: function(name) {
			console.log(name, '此事件被觸發了')
		}
	}
})

以上這個範例，我們在內層元素.box的click後面加上修飾符stop，就可以防止.box的冒泡事件被觸發囉。

語法 @click.capture=””

在事件監聽中，此語法是用來觸發捕獲事件
注意，這個語法是用來”觸發”捕獲事件的喔，不是阻止喔!!
ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
---HTML---
<div id="app">
<div class="p-3 bg-primary" @click.capture="trigger('div')">
    <span class="box d-flex align-items-center justify-content-center" @click.capture="trigger('box')">
      <button class="btn btn-outline-secondary" @click.capture="trigger('button')">按我</button>
    </span>
</div>
</div>


---JavaScript---
var app = new Vue({
	el: '#app',
	data:{
	
	},
	methods:{
		trigger: function(name) {
			console.log(name, '此事件被觸發了')
		}
	}
})

我們在click的後面加上了capture的修飾符，當我們點擊畫面中的按鈕的時候，可以看到被觸發的順序是從
最外層的div -> box -> button 依序被觸發。

語法 @click.self=””

在事件監聽中，只會觸發被點擊的那個元件的事件，沒有冒泡跟捕獲的問題
ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
---HTML---
<div id="app">
<div class="p-3 bg-primary" @click.self="trigger('div')">
    <span class="box d-flex align-items-center justify-content-center" @click.self="trigger('box')">
      <button class="btn btn-outline-secondary" @click.self="trigger('button')">按我</button>
    </span>
</div>
</div>


---JavaScript---
var app = new Vue({
	el: '#app',
	data:{
	
	},
	methods:{
		trigger: function(name) {
			console.log(name, '此事件被觸發了')
		}
	}
})

以上範例，當我們點擊什麼元件，就只會出現該元件相對應的log。

語法 @click.once=””

在事件監聽中，代表該監聽事件只會被觸發一次
ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
---HTML---
<div id="app">
<div class="p-3 bg-primary" @click.once="trigger('div')">
    <span class="box d-flex align-items-center justify-content-center" @click.once="trigger('box')">
      <button class="btn btn-outline-secondary" @click.once="trigger('button')">按我</button>
    </span>
</div>
</div>


---JavaScript---
var app = new Vue({
	el: '#app',
	data:{
	
	},
	methods:{
		trigger: function(name) {
			console.log(name, '此事件被觸發了')
		}
	}
})

以上例子，在你點擊任意元件第二次，都不會在觸發v-on綁定的是trigger事件囉。

按鍵修飾符

即我們按下某個按鍵時，會觸發特定事件。

  1. {keyCode | keyAlias} - 當事件是從特定鍵觸發時才觸發回調。
  2. 別名修飾 - .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right
  3. 修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器 - .ctrl, .alt, .shift, .meta

ex: keyCode

1
<input type="text" class="form-control" v-model="text" @keyup.13="trigger(13)">  // 當按下keyCode為13的鍵(就是enter鍵)，會觸發trigger

ex: 別名修飾

1
<input type="text" class="form-control" v-model="text" @keyup.space="trigger('space')"> // 當按下空白鍵會觸發trigger

ex: 相應按鍵

1
<input type="text" class="form-control" v-model="text" @keyup.shift.enter="trigger('shift + Enter')"> // 當你按下shift鍵加上enter鍵，才會觸發trigger事件

滑鼠修飾符

上面這個範例，就是你對該方框用滑鼠左鍵去點擊，就會觸發trigger的函式內容。