Leo's Space

我寫故我在

0%

發表於 更新於 分類於 ， Disqus：
文章字數： 4.1k 所需閱讀時間 ≈ 4 分鐘

物件與陣列的索引

我們可以用陣列或者物件的形式來存放資料，並且透過 v-for 的方式將資料全部顯示出來，其中我們會使用 index 來存放資料的索引值，而物件和陣列最大的差別就在於索引值部分，陣列是用數字由 0 依序表示索引，而物件則用物件內部指定名稱表示索引。

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <div id=app>
        陣列資料
        <ul>
            <li v-for="(item,index) in dataArray">{{index}}:{{item.name}}{{item.age}}</li>
        </ul>
        物件資料
        <ul>
            <li v-for="(item,index) in dataObject">{{index}}:{{item.name}}{{item.age}}</li>
        </ul>
    </div>
</body>
閱讀全文 »

發表於 更新於 分類於 ， Disqus：
文章字數： 3.6k 所需閱讀時間 ≈ 3 分鐘

物件方式

先前提到我們可以使用 v-bind 來動態綁定會變化的元素屬性，比如用 :class = "{'套用類別名稱':判斷值}"，以物件方式加入類別樣式，在這裡我們有另一種寫法，就是直接將 class 裡面所存放的物件，直接存放在 Vue 資料中，像是下面範例的 classObject，這樣的好處是可直接透過物件的方式來修改類別樣式的判斷式，而不用在另外用資料來存判斷式的值，像是 isColorRed 或 isTextBold 就可以省掉。我們用 v-on 在 button 加上 click 事件，觸發之後可以變更判斷式的值，用！否定語法，將 true 變成 false ，或 false 變成 true 來套用樣式，要注意第二種寫法，如果我們要存取物件時，如果遇到物件內的存取名稱是用-符號連接，我們要改成用['存取名稱']才不會顯示錯誤，像是 text-bold。

1
2
3
4
5
6
7
8
9
10
<body>
    <div id=app>
        <p :class="{'color':isColorRed,'text-bold':isTextBold}">物件寫法1</p>
        <button @click="isColorRed=!isColorRed">變紅</button>
        <button @click="isTextBold=!isTextBold">變粗</button>
        <p :class="classObject">物件寫法2</p>
        <button @click="classObject.color=!classObject.color">變紅</button>
        <button @click="classObject['text-bold']=!classObject['text-bold']">變粗</button>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            isColorRed:true,
            isTextBold:true,
            classObject:{
                'color':true,
                'text-bold':true
            }
        }
    })
</script>
1
2
3
4
5
6
.color{
       color:red;
   }
   .text-bold{
       font-weight: bold;
   }
閱讀全文 »

發表於 更新於 分類於 ， Disqus：
文章字數： 1.3k 所需閱讀時間 ≈ 1 分鐘

單向綁定 (v-once)

一般來說，如果我們使用 v-text 來綁定資料與畫面，那通常會是雙面綁定，資料和畫面是交互影響的，假設我們只想讓畫面只渲染一次資料後就不再變動，我們可以使用 v-once 語法，如下面程式，當 input 輸入畫面資料 text 改變時，有加 v-once 的 div 區塊不會跟著改變。

1
2
3
4
5
6
7
<body>
    <div id=app>
        <input type="text" v-model="text">
        <div v-text='text' v-once></div>
        <div v-text='text' ></div>
    </div>
</body>
1
2
3
4
5
6
7
8
9
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            text:'hello'
        }
    })
</script>
閱讀全文 »

發表於 更新於 分類於 ， Disqus：
文章字數： 2.1k 所需閱讀時間 ≈ 2 分鐘

事件觀念

如果我們建立一個函數 show ，並且將 event 當成它的參數，函數執行在 console 印出 event 參數是什麼，此時我們透過 v-on 將點擊事件還有 show 函數綁在一起，在不傳入任何值給 show 當參數的狀況下，當我們點擊 click ，此時 console 會顯示出 ＭouseEvent ，這就是當我們滑鼠點擊所觸發的 click 滑鼠事件，其他比較常見的還有 keyup 按鍵事件。

1
2
3
4
5
<body>
    <div id=app>
        <a href="https://www.google.com/?hl=zh_tw" v-on:click='show'>點擊</a>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            show:function(event){
                console.log(event)
            }
        }
    })
</script>
閱讀全文 »

發表於 更新於 分類於 ， Disqus：
文章字數： 1.5k 所需閱讀時間 ≈ 1 分鐘

方法綁定按鈕

假如我們要在 Vue 中使用自定義的方法，此時我們可以在宣告好的 Vue 物件底下加上 methods，而 methods 裡面就可以用物件的方式宣告自定義的方法，如程式範例的 reverse 方法，並且用 Vue 的 v-on 指令將 button 還有 reverse 方法綁定，此時當我們點擊 button 就可以看到 console 跳出 test 文字，代表按鈕和方法有綁定成功。

1
2
3
4
5
6
<body>
    <div class="app">
        {{text}}
        <button v-on:click="reverse">反轉字串</button>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            text:'1234'
        },
        methods: {
            reverse:function (){
                console.log('test');
            }
        }
    });
</script>
閱讀全文 »

發表於 更新於 分類於 ， Disqus：
文章字數： 1.7k 所需閱讀時間 ≈ 2 分鐘

錯誤方式

如果我們想將資料加進 html 屬性值，比如 img 的 src 中，可能會嘗試使用下列語法，但卻會發生錯誤。打開 console 它要我們使用 v-bind 的指令。

1
2
3
4
5
<body>
    <div class="app">
        <img src="{{url}}" alt="">
    </div>
</body>
1
2
3
4
5
6
7
8
9
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            url:'https://i.imgur.com/S0wWwee.jpg',
        }
    });
</script>
閱讀全文 »

發表於 更新於 分類於 ， Disqus：
文章字數： 3.1k 所需閱讀時間 ≈ 3 分鐘

今天我們來學習 Vue 如何綁定表單的資料欄位

輸入欄位資料綁定

我們透過 v-model 將變數 text 資料與 input 單行輸入值綁在一起，也透過 v-model 將變數 textarea 資料與 textarea 多行資料輸入值綁在一起。此時，當我們在 input 單行欄位或 textarea 多行欄位輸入時，此時綁定的資料 textarea 還有 text 就會跟著變動。

https://i.imgur.com/CTfJZ1m.png

1
2
3
4
5
6
7
8
<body>
    <div class="app">
        input:<input type="text" v-model="text"> {{text}}
        <br>
        textarea:<textarea cols="30" rows="3" v-model="textarea"></textarea>
        {{textarea}}
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            text:"",
            textarea:""
        }
    });
</script>
閱讀全文 »

發表於 更新於 分類於 ， Disqus：
文章字數： 1.2k 所需閱讀時間 ≈ 1 分鐘

通常我們會用 for 迴圈來存取陣列裡面的值，而在 Vue 中，我們則是使用 v-for 指令。 如果我們今天使用 test 陣列來紀錄學生考試成績，以物件形式當作陣列的值，物件裡面分別存放 name 學生姓名還有 score 考試成績。 透過 v-for 我們將 test 物件值存入 in item ，就很像 foreach 的概念，item 會自動代替陣列裡面的每個物件，而 index 就是物件在陣列的索引值，透過這個方式，li 標籤會自動生成陣列裡面物件的數目，而如果我們要將資料渲染到畫面，就用前面提到的 {{}} 方式來顯示資料。我們也可以在 li 標籤中加上 v-if 指令，就是 if 的概念，來設定條件式篩選資料，像是 score<60 ，找出成績低於 60 分的同學，由於前面的 v-for 已經將陣列資料設定到 item，如果要存取資料記得都要用 item 來取代物件。

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <div id=app>
        全班成績：
        <ul>
            <li v-for="(item,index) in test">{{index}}.{{item.name}} 得分:{{item.score}}</li>
        </ul>
        不及格：
        <ul>
            <li v-for="(item,index) in test" v-if="item.score<60">{{index}}.{{item.name}} 得分:{{item.score}}</li>
        </ul>
    </div>
</body>
閱讀全文 »

發表於 更新於 分類於 ， Disqus：
文章字數： 1.9k 所需閱讀時間 ≈ 2 分鐘

從前面的文章我們可以看出 Vue 是用物件的方式來存取資料，這邊我們就複習一下物件和陣列的差別。

陣列

假設我們今天要計算全班同學的數學成績平均(假設班上只有3個人)，在沒有陣列的狀況下，寫法如下 。

1
2
3
4
5
var math1 = 80;
var math2 = 90;
var math3 = 60;
var total = math1 + math2 + math3;
var average = total / 3

但是如果使用陣列之後，可以這樣寫。

1
2
3
4
5
6
var math = [80,90,60];
var total = 0;
for(var i=0;i<math.length;i++){
    total += math[i]
}
var average_math = total / 3
閱讀全文 »

發表於 更新於 分類於 ， Disqus：
文章字數： 1.4k 所需閱讀時間 ≈ 1 分鐘

介紹三種資料和畫面綁定常用的方式

v-text

可以直接將資料顯示在綁定的 html 標籤內，與 {{}}` 最大的差異在於 `v-text` 會取代原本標籤內的內容，而 `{{}} 則是不會。像是 message 變數用 v-text 放入 p 段落，則 p 段落原本的內容就被取代。

v-html

功能和 v-text 一樣，將資料直接顯示在綁定的 html 標籤內，也會取代標籤內原本的內容，與 v-text 差異在於如果綁定的資料有包含 html 標籤， v-html 會渲染所包含的標籤在網頁上，而不單純只是純文字。像是 message變數因為有包含 a 標籤，所以畫面就會渲染出連結的樣式，用法就像是 js 的innerHTML。最後官網有提醒我們，不要任意讓用戶輸入的資料用 v-html 方式呈現，因為這樣可能會產生 XSS 攻擊，不法人士可以在輸入欄位中插入惡意程式碼，並且透過網頁渲染執行，造成網頁資安風險。

閱讀全文 »