Landy Blog
0%

發表於 更新於 分類於

這邊接續著上一篇”Vuejs元件02-emit事件”的文章，繼續做筆記。

元件插槽

有時候我們需要替換某些元件的部分內容，而Vue.js就是利用元件插槽的概念來做到這件事情。
這邊會介紹三種狀況

  1. 沒有插槽的元件
  2. 單一插槽的元件
  3. 具名插槽

沒有插槽的元件

以上範例，你會看到我在no-slot-component中間插入了一個p段落，但是，畫面上並沒有呈現這個插入的p段落，
而這個就是若你在沒有插槽的元件中，插入其他內容，而這些插入的內容是不會被呈現在畫面上的。

單一插槽的元件

以上這個範例你會看到在單一插槽元件定義它元件內容的地方，我們有放一個<slot></slot>標籤，
那此時，夾在single-slot-component標籤中間的p段落的內容，在網頁上就會呈現在<slot></slot>標籤的位置囉。

閱讀全文 »

發表於 更新於 分類於

這邊接續著上一篇”Vuejs元件01”的文章，繼續做筆記。

emit 向外層傳遞事件

我們前面是利用props將資料由外層串入內層，但是，我們還是有時候需要將資料由內層傳到外層，
此時，我們要用到的技術就是emit。

以上這個修改完的範例你可以看到，我們在button-counter元件的methods中的incrementCounter事件的emit，多新增了將button-counter元件自己的counter成員屬性值傳遞出去，此時因為increment觸發了外部的incrementTotal事件，所以，incrementTotal也就接收到了button-counter元件的counter成員屬性值，
所以，我們就可以在incrementTotal中，新增參數newNumber，而這參數就是button-counter元件counter成員屬性值，
並將這個newNumber參數與app物件自身的cash成員互相做加總，最後，再把加總的結果呈現在畫面中。

注意emit傳出去的資料型別是否正確

你要特別注意一下，我們在emit傳出的counter的值，有特別用Number轉型成數字型別，如果你沒這麼做它會直接傳字串型別的值出去，這樣加總的結果就不會是我們想要的囉。

發表於 更新於 分類於

接續上一篇，Vue-js元件沒有記錄完的內容。

props使用上的注意事項

本單元要講解主要有以下三部分

  1. 單向數據流
  2. 物件傳參考特性 及 尚未宣告的變數
  3. 如何維持元件的生命週期

單向數據流

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
---HTML---
<div id="app">
  <h2>單向數據流</h2>
  <photo :img-url="url"></photo>
  <p>修正單向數據流所造成的錯誤</p>
</div>

---JavaScript---
<script type="text/x-template" id="photo">
	<div>
	  <img :src="imgUrl" class="img-fluid" alt="" />
	  <input type="text" class="form-control" v-model="imgUrl">
	</div>
</script>

<script>
Vue.component('photo', {
  props: ['imgUrl'],
  template: '#photo',

})
var app = new Vue({
	el: '#app',
	data:{
		url: 'https://images.unsplash.com/photo-1522204538344-922f76ecc041?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=50e38600a12d623a878983fc5524423f&auto=format&fit=crop&w=1351&q=80',
	}
})
</script>

像上面的範例，你在畫面上可以看到一張圖片和下面的一個input欄位，input裡面有這張圖片的網址，
當我們直接修改input欄位裡面的內容時，瀏覽器會報錯，報錯內容為”不要直接對props傳入的資料做修改”，那此時，我們要怎麼修正這個錯誤呢?

將以上的範例，修改成下面這個樣子

修改了兩個地方，
第一，一個是我們在photo的元件定義中，新增一個變數newUrl，讓它吃到photo元件的媒介屬性imgUrl的值，
最後，再回傳newUrl。
第二，我們把x-template中定義photo元件的input欄位的v-model改成跟newUrl綁定。
這樣一來，我們在input修改的其實是變數newUrl，就不在是直接對props傳入的資料做修改囉。
可以看出來props是單向資料流的概念，只能由外部傳入內部，不能再由內部去修改外部傳入的資訊。

閱讀全文 »

發表於 更新於 分類於

bootstrap有提供兩種驗證方法

  1. 伺服器端驗證
  2. 瀏覽器端驗證

透過:invalid和:valid來驗證是否該欄位是否通過驗證，
若沒通過該欄位外框呈現紅色，若有通過該欄位外框呈現綠色。

如果，是伺服器端驗證的話，需要自己手動在相對應元件的class中加入.is-invalid和.is-valid，
來替換掉:invalid和:valid。

伺服器端驗證

首先，來介紹伺服器端驗證的範例

首先，你要記得在那些要被驗證input的html標籤中加入required屬性。
接著，以上的範例，你可以看到，我們故意在firstname的input欄位和lastname的input欄位的class中加入is-valid，
此時，在畫面中，可以看到它們的input外框呈現綠色的，代表驗證正確。
那我們在下面的City, State, Road的input欄位的class中，都加入了is-invalid，
在畫面中，可以看到他們的input外框呈現紅色的，代表驗證錯誤。
那在驗證錯誤的欄位附近會呈現一段回饋的提示訊息，
這段回饋的提示訊息，你需要在相對應區塊中加入div區塊，並為這div區塊加入class名稱invalid-feedback，
接著，你在這個invalid-feedback的區塊裡面加入你想要呈現的錯誤回饋內容即可。

伺服器端驗證的範例中的is-valid和is-invalid，其實，實際的運作是當使用者輸入的內容，會由後端判斷其內容是否符合規範，此時，後端會回傳
是否使用者內容符合規範的提示給前端，接著前端再為這些input欄位的className中，動態地加入is-valid或is-invalid這兩個className。

瀏覽器端驗證

它是透過bootstrap提供的JavaScript內容去觸發某個還沒有被驗證的相對應表單，等到瀏覽器驗證完成後，再由瀏覽器回饋給我們。
所以，
我們必須在想要被驗證的form命名一個id名稱，並將該id名稱提供給script。
並且，也要在該form的html標籤加上novalidate，代表該表單還沒有被驗證。
那些需要錯誤回饋部分，一樣要加入class名稱為invalid-feedback的區塊，就像伺服器驗證那樣加到相對應的區塊中。

接著，你要加入bootstrap官網提供的script驗證的程式碼，而這段驗證的程式碼，在bootstrap的官網上就有提供了～～

閱讀全文 »

發表於 更新於 分類於

接續著上一篇記錄有關Bootstrap的form元件有關的內容。

input-group

首先將你想要合併的內容，用input-group把它們包起來。

你可以看到上面的範例，最外層用.input-group包起來，
然後，內層的input欄位保持不變，其class名稱還是保持form-control，
接著，要跟這個input欄位接在一起的span就會再被一個input-group-append區塊包起來，
然後，最終這個span自己的class名稱命名為input-group-text。
至於，
為什麼有input-group-append 和 input-group-prepend的˙差別，
這就要看你希望這個input-group-text要接在鄰近的input欄位的前面或後面來決定囉。

另外，當你要將某個內容接在input欄位的後面，除了它的外層區塊className要為input-group-append，
在html文件中，這個input-group-append區塊撰寫的順序也要在鄰近input欄位的後面喔。

閱讀全文 »

發表於 更新於 分類於

接續上一篇還沒紀錄完的bootstrap form元件的內容。

form-check

當裡面是要使用checkbox和radiobox元件的時候，它們的外層，是要用form-check包裹起來喔。

  1. checkbox

在以上這個範例可以看到在checkbox中的其中一個input標籤上有寫了disabled，
代表該input無法被點取囉。
如果你希望整個checkbox都無法被選取的話，你要在這些checkbox的外層用一個<fieldset></fieldset>標籤把他們整個包起來，並在這個fieldset的html標籤上加入disabled屬性就可以達成囉。

  1. radiobox

那這個radiobox的範例，你可以看到有三個form-check構成這個radiobox。
那你可以看到每一個form-check裡面的input欄位的name屬性值都是一樣的，代表它們是屬於同一個radiobox。
那它的type要寫入radio，它會變成radiobox的選項模式。
那在每個form-check的input的class名稱一樣是要寫入form-check-input，而label標籤的class名稱是form-check-label。
在最後一個input欄位中，加入了disabled屬性，所以，該選項就無法被選取囉~

form-check-inline 使選項水平排列

如果我們不希望heckbox和radiobox它們的選項不要垂直排列的話，
我們只需要在外層的form-check的class中，再加上form-check-inline，就可以囉。
ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="demo">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
    <label class="form-check-label" for="inlineCheckbox1">1</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
    <label class="form-check-label" for="inlineCheckbox2">2</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
    <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
  </div>
</div>
閱讀全文 »

發表於 更新於 分類於

這邊的筆記主要紀錄Bootstrap的form表單元件的兩個部分

  1. 跟form表單相關的className套在哪一個標籤上
  2. HTML5表單觀念

form-group

當某個className叫form-group的HTML標籤，通常其內部都會包住以下三種元素
label標籤、input標籤 和 small標籤，那small標籤不一定會存在。
以下的例題中有六種狀況，會在下面分別對這六種狀況做介紹

範例中第一個form-group

那你可以看到在<form>標籤裡面的第一層div，他的class就是form-group。
那在這個form-group裡面的input欄位的class名稱是form-control，
那在這個form-group裡面的label是不用特地為它的className做設定的，
那在這個form-group裡面的samll標籤的class名稱是form-text
此時，input欄位和small標籤的樣式，都會變成Bootstrap的制定樣式了。

範例中第二個form-group

它的input標籤的className一樣要被命名為form-control。
那跟第一個form-group的input欄位不同的地方是type，
因為，一個是要輸入email，另一個是要輸入password，所以，功能不一樣，type的內容也會不一樣。

閱讀全文 »

發表於 更新於 分類於

語法標籤

沒有keep-alive標籤的元件，資料不保留

如果該Vue元件沒有加上<keep-alive></keep-alive>標籤，
當該元件不被顯示的時候，就會執行beforeDestroy 和 destroyed 這兩個解構式
連帶的會將此次的在該元件上的資料全部消滅掉。
等到你下次又要調用該元件的時候，資料會是全新的，不會保留上一次的輸入內容。

有keep-alive標籤的元件，資料會保留

如果在這個Vue元件的外圍，加上<keep-alive></keep-alive>標籤，
此時，你的元件的hook事件會多兩個分別是activated和deactivated。
在你不顯示該元件的時候，該元件不會觸發beforeDestroy 和 destroyed 這兩個解構式
而是改為觸發deactived，且該元件的資料會被保留下來。
當你下次再使用該元件的時候，
不會再次觸發beforeCreate, created, beforeMount, mounted這些hook，
而是直接觸發actived這個hook，並直接呈現上一次的資料內容。

可以運用在頁籤上

這種技巧常會用在頁籤中，你只是想要切換頁面的內容，但並不想要把上一頁的內容
刪除掉，就可以為頁籤元件加上<keep-alive></keep-alive>標籤。

閱讀全文 »

發表於 更新於 分類於

Vue.js元件概念介紹

外層要傳遞資料到內層的時候，會用一個叫props的方法，
內層要往外層送的話，會用一個叫emit Event的方法，
而emit Event是一個事件，所以，每當內層要往外層送資料的時候，
都會觸發這個emit事件。
所以，相對於外層往內層送資料是即時的，
內層往外層送資料，得透過觸發emit Event才能將資料往外層送。

SPA的概念是由元件的概念所構成的，所以，元件在Vue.js中是一個很重要的部分。

使用 x-template 建立元件

首先，我們先使用x-template的寫法來使用自訂義的元件
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
---HTML---
<div id="app">
  <table class="table">
    <thead>
    </thead>
    <tbody>
      <row-component v-for="(item,key) in data" :key="key></row-component>
      
    </tbody>
  </table>
</div>

---JavaScript---
<script type="text/x-template" id="rowComponenttemplate">
  <tr>
    <td>{{ item.name }}</td>
    <td>{{ item.cash }}</td>
    <td>{{ item.icash }}</td>
  </tr>
</script>

<script>
	Vue.component('row-component',{
		template:'#rowComponenttemplate'
	});
	var app = new Vue({
		el: '#app',
		data:{
			data:[
			  {
				name: '小明',
				cash: 100,
				icash: 500,
			  },
			  {
				name: '杰倫',
				cash: 10000,
				icash: 5000,
			  },
			  {
				name: '漂亮阿姨',
				cash: 500,
				icash: 500,
			  },
			  {
				name: '老媽',
				cash: 10000,
				icash: 100,
			  },
			]
		}
	})
</script>

以上的內容，可以看到我們額外寫了一個特別給x-template來撰寫，
並利用id來跟Vue的row-component自訂義元件來做綁定。
接著，我們在x-template的區域中，放入了tr td的內容，也就是我們想要製作的部分。
但是，當你的程式碼只有寫到上面這個範例的內容的話，瀏覽器會跳”item is not defined”。
因為，Vue的元件環境跟外部是區隔開的，所以，裡面的環境會不知道傳入的item是誰，
這個時候，我們就要用到props的技巧，將外部的資料送進去裡面囉。

第一步，props 引入媒介屬性

將以上的範例修改成以下這樣子
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
---HTML---
<div id="app">
    <table class="table>
        <thead></thead>
        <tbody>
            <row-component v-for="(item, key) in data" :person="item" :key="key"</row-component> // 加入:person綁定
        </tbody>
    </table>
</div>

---JavaScript---
<script type="text/x-template" id="rowComponenttemplate">
    <tr>
        <td>{{person.name}}</td>  // 將原本的item改成你綁定的屬性名稱person
        <td>{{person.age}}</td>   // 將原本的item改成你綁定的屬性名稱person
        <td>{{person.cash}}</td>  // 將原本的item改成你綁定的屬性名稱person
    </tr>
</script>
<script>
    Vue.component('row-component',{
        props:['person'],         // 加入props，且用陣列的寫法
        template: '#rowComponenttemplate'
    })
    var app= new Vue({
        el: '#app',
        data:{
            data:[
                {
				name: '小明',
				cash: 100,
				icash: 500,
			  },
			  {
				name: '杰倫',
				cash: 10000,
				icash: 5000,
			  },
			  {
				name: '漂亮阿姨',
				cash: 500,
				icash: 500,
			  },
			  {
				name: '老媽',
				cash: 10000,
				icash: 100,
			  },
            ]
        }
    })
</script>

以上修改的地方，特別是在元件的定義內容中，新增props，且props是要用陣列的方式將你想要綁定的屬性名稱加進去。
接著，在你自訂義的元件上，寫入你新增的媒介屬性，
並為這個新增的媒介屬性person，用v-bind來綁定你想由外往內傳的資料，像這邊就是綁定外層的data陣列的元素item。
如此，就可以在畫面上呈現陣列的資料內容了。

第二步，利用is 引入Vue自訂義元件-使元件呈現正確的HTML布局

但是，你發現上面的資料呈現方式並沒有按照表格的布局方式，正確的呈現內容。
而原因是因為，在<tbody>裡面就是要放<tr>，而在<tr>裡面就是要放<td>，
結果，我們破壞HTML既有的規則，直接在<tbody>加入我們自訂義的元件，當然，就無法呈現正確的布局。
所以，我們這時候要用is來引入我們的元件，進而讓整體布局是正確的。
我們只需要修改html的部分就ok了。
ex:

1
2
3
4
5
6
7
8
9
10
---HTML---
<div id="app">
  <table class="table">
    <thead>
    </thead>
    <tbody>
      <tr is="row-component" v-for="(item, key) in data" :person="item" :key="key"></tr>  
    </tbody>
  </table>
</div>

可以看到，我們直接在tr標籤中加入is去綁定我們自訂義的元件，接著，後面的v-for和:person寫法都和之前的一樣。
如此，就可以將資料呈現在正確的HTML布局下了。

將Vue的自訂義元件改成局部註冊

上面的範例是用全域的範圍中，註冊我們自訂義的Vue元件。
那這邊我們把上面的’row-component’改成局部註冊，讓特定Vue物件才能調用這個元件，
而其他的Vue物件是無法調用到它的，只需要修改script的部分
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
38
39
40
41
42
43
44
<script>
/*  把原本全域註冊的部分註解掉
	Vue.component('row-component',{
		props:['person'],   // 加入props，且用陣列的寫法
		template:'#rowComponenttemplate'
	});
*/

	var child = {  // 新增一個物件，裡面放的就是自訂義元件中的物件內容
		props:['person'],   
		template:'#rowComponenttemplate'
	}
	var app = new Vue({
		el: '#app',
		data:{
			data:[
			  {
				name: '小明',
				cash: 100,
				icash: 500,
			  },
			  {
				name: '杰倫',
				cash: 10000,
				icash: 5000,
			  },
			  {
				name: '漂亮阿姨',
				cash: 500,
				icash: 500,
			  },
			  {
				name: '老媽',
				cash: 10000,
				icash: 100,
			  },
			]
		},
		components:{  // 將我們定義的物件丟進components中
			'row-component': child
		}
	})

</script>

以上例子，先將原本的自訂義元件中的物件引數的內容，改為由另為一個變數child存起來。
接著，在你指定的Vue物件的components成員屬性底下，
新增該元件的名稱，像此例就是’row-component’，接著，在這個屬性值後面接上你剛剛存放物件引數內容的變數。
如此，就可以只讓app這個Vue物件，去調用’row-component’這個自訂義元件囉。

使用 function return 建構資料格式

當你自訂義元件的時候，要調用它自身的屬性值的時候，必須要用function return的方式，來取得該屬性值，
不然，會報錯喔。
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
---HTML---
<div id="app">
  <counter-component></counter-component>
  <counter-component></counter-component>
  <counter-component></counter-component>
</div>

---JavaScript---
<script type="text/x-template" id="counter-component">
	<div>
	  你已經點擊 <button class="btn btn-outline-secondary btn-sm" @click="counter += 1">{{ counter }}</button> 下。
	</div>
</script>

<script>
	Vue.component('counter-component', {
	  data: function(){
		return {
		  counter:0
		}
	  }
	  ,
	  template: '#counter-component'
	})

	var app = new Vue({
	  el: '#app',
	});
</script>

以上可以看到元件’counter-component’的成員屬性counter，是用function return的方式來取得它的值的。
要記得是自訂義的元件才需要這樣做喔，不要連用new Vue的物件的data都這樣做。

props 基本觀念

在這部分展示透過props將外界的資料傳入元件中，並呈現靜態傳遞與動態傳遞寫法上的差異

動態傳遞的概念像這張圖片一樣。

這個例子，我們自己製作了一個元件’photo’。
並利用props為這個元件創了一個媒介屬性叫imgUrl。
另外，我們用x-template中定義photo元件的內部內容，
在x-template裡面的img標籤，它的src屬性利用v-bind跟photo元件的媒介屬性imgUrl綁定在一起。
而在photo元件上，我們在透過img-url來綁定在app物件中的url屬性，用這用的方式達成動態傳遞的效果。
在靜態傳遞的部分，
在靜態傳遞的photo區塊，利用媒介屬性img-url直接將該圖片的網址指定到這個媒介屬性上，以此達成靜態傳遞的效果。

小駝峰寫法

在上面這個範例要注意的地方，在JavaScript文件中，photo元件的props新增媒介屬性是用駝峰式的寫法imgUrl，
而在HTML文件中，若我們還是用駝峰式寫法imgUrl，這樣子的格式式不符合規範的，所以，
要改成img-url，中間要加個-，且大寫的U要改成小寫的u。

:src=”圖片網址” 而不是 src=”圖片網址”

上面這個範例在x-template裡面是用:src來跟媒介屬性來做綁定(透過v-bind)，不要跟一般的src的屬性使用搞混囉，一般的src屬性後面就直接接網址了，沒有在綁定變數的。

發表於 更新於 分類於

在VSCode的編譯器中安裝live sass


我是在我的vscode的編譯器裡面安裝這個live sass的擴充軟體。
接著，你新增一個檔案，其檔名叫做all.scss。
再來你對這個all.scss檔案按下編譯器右下角的一個按鈕”Watch Sass”，

按下去之後，你應該會看到跟all.scss檔案相同目錄下，會自動產出一個all.css檔案。

之後，你只要在all.scss檔案裡面新增或修改任何css樣式，只要你按下存檔，
live sass就會將你修改的css樣式內容，同步更新到all.css檔案裡面。

注意~~~~但是，你的專案檔要引入的css檔案是all.css喔，不是all.scss檔案喔!!

修改live sass軟體產出all.css檔案的路徑

live sass這個軟件，它預設產出的all.css檔案的路徑，會跟all.scss檔案在相同目錄下。
但是，你想要分隔管理all.css檔案和all.scss檔案的話，就需要修改live sass軟件預設的產出all.css檔案路徑。



接著，上圖中的step1的紅框中，有”使用者”和”工作區”兩個選項，
這兩個選項的意思是
“使用者”:代表你接下來的設定，會是全域的設定，即每個專案都會被這個設定影響到。
“工作區”:代表只有你現在使用的這個專案檔，會被你這個設定影響到。

我這邊只希望只有修改正在使用的專案它的live sass的產出all.css的路徑，所以，我會選擇”工作區”這個選項。

當你按下上一張圖中的step2按下的鈕時，就會跳出這張圖中的settings.json檔案。
接著，你就把圖中的code貼進去這個settings.json檔案中。

這段code你可以在live sass的軟件的官方文件就可以找到囉。

那這段code有三個項目，
第一個format項目 -> 代表產出的檔案格式是壓縮檔
第二個extension項目 -> 代表產出的檔案的檔名
第三個savePath項目 -> 代表產出的all.css檔案路徑設定
那你就可以在第三個savePath項目就可以設定你這個專案產出的all.css要產出在哪裡囉。

閱讀全文 »