iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
0
自我挑戰組

網頁前端框架 Vue 3 從頭開始系列 第 4

vue.js 3.x 學習手冊 (4) 事件

  • 分享至 

  • xImage
  •  

接續昨天的範例,我們透過下拉式選單來改變vue中的資料,視圖就會跟著連動改變,這部分是透過Javascript原生的事件去觸發函數來執行,也是在網頁中常見的動作,今天我們來看看這樣的動作在vue裡面的寫法。

HTML

<div id="app">
    <p>
        <select v-on:change="changeValue($event, 'type')">
            <option value="Frontend">Frontend</option>
            <option value="Backend">Backend</option>
        </select>
    </p>
    <p>
        <select v-on:change="changeValue($event, 'name')">
            <option value="Vue">Vue</option>
            <option value="React">React</option>
            <option value="Angular">Angular</option>
            <option value="Laravel">Laravel</option>
            <option value="CakePHP">CakePHP</option>
            <option value="Django">Django</option>
        </select>
    </p>
    <p>Type: {{ vueData.type }}</p>
    <p>Framework: {{ vueData.name }}</p>
</div>
<script>
const app = Vue.createApp({
    data() {
        return {
            vueData: {
                type: 'Frontend',
                name: 'Vue',
            }
        }
    },
    methods: {
        changeValue: function (evt, id) {
            this.vueData[id] = evt.currentTarget.value;
        }
    }
}).mount('#app');
</script>

其實跟原生的Javascript做法差異並不大,不同的是在HTML元素中事件綁定是利用v-on:change,同樣在觸發的函數中可以帶參數進入,第一個參數是DOM Event,前面需要加上一個$帶入,第二個參數是方便函數去處理欲更換的數值,函數的宣告必須在vue區塊內的methods區塊,其他使用方法與原生的Javascript無異。

但這邊要特別注意一件事,script的第12行在vueData中前面要加上this,否則會被判斷成是外層的vueData。

另外v-on:也可以使用@來當作他的縮寫,可以把上面的HTML部分,改為以下的寫法。

<select @change="changeValue($event, 'type')">
<select @change="changeValue($event, 'name')">

下一篇文章會繼續來介紹在Vue Event裡面可以添加的修飾符,請大家繼續關注!


上一篇
vue.js 3.x 學習手冊 (3) 起手式
下一篇
vue.js 3.x 學習手冊 (5) 事件 修飾符
系列文
網頁前端框架 Vue 3 從頭開始10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言