Vue是一款流行的JavaScript框架，可輕松創(chuàng)建交互式Web應(yīng)用程序。Vue組件是Vue應(yīng)用程序的構(gòu)建塊，是一種封裝了HTML，CSS和JavaScript的模塊化方式，可以讓應(yīng)用程序更加容易維護(hù)。除了HTML和CSS，你還可以在Vue組件中編寫JavaScript代碼，使得它們更加強(qiáng)大和靈活。

在Vue組件中添加JavaScript代碼通常有兩種方式：聲明式和命令式。聲明式的方式是通過Vue的指令系統(tǒng)，在HTML模板中聲明應(yīng)該執(zhí)行的JavaScript代碼。命令式的方式則是在Vue組件中使用JavaScript直接操作DOM或執(zhí)行其他JavaScript代碼。

Vue.component('example-component', {
data() {
return {
message: 'Hello Vue!'
}
},
methods: {
showMessage() {
alert(this.message)
}
},
template: `
{{ message }}
Show Message
`
})

在這個(gè)例子中，我們使用Vue組件定義了一個(gè)簡單的頁面，包含了一個(gè)顯示消息和一個(gè)按鈕的HTML代碼塊。我們還定義了一個(gè)名為message的屬性和一個(gè)名為showMessage的方法，使用了Vue的數(shù)據(jù)綁定和事件監(jiān)聽機(jī)制。當(dāng)點(diǎn)擊按鈕時(shí)，showMessage方法將彈出一個(gè)包含消息的對(duì)話框。

現(xiàn)在，假設(shè)我們希望在消息中添加一些動(dòng)畫效果，讓它更加生動(dòng)。我們可以使用Vue提供的動(dòng)畫系統(tǒng)來實(shí)現(xiàn)這個(gè)功能，需要在Vue組件中添加一些JavaScript代碼。

Vue.component('example-component', {
data() {
return {
message: 'Hello Vue!'
}
},
methods: {
showMessage() {
alert(this.message)
}
},
mounted() {
this.$nextTick(() =>{
const el = this.$refs.message
el.classList.add('animate__animated', 'animate__bounceIn')
})
},
template: `
{{ message }}
Show Message
`
})

這個(gè)例子中，我們使用了Vue的mounted生命周期鉤子函數(shù)，在組件渲染完成后執(zhí)行JavaScript代碼。我們使用了$this.$refs屬性獲取了message元素，然后使用JavaScript添加了一些動(dòng)畫效果。在這個(gè)例子中，我們使用了animate.css庫提供的動(dòng)畫效果，需要在頁面中引入相關(guān)的CSS文件。

總之，Vue允許我們?cè)诮M件中添加JavaScript代碼，可以使組件更加強(qiáng)大和靈活。無論是聲明式還是命令式的方式，都可以使用Vue提供的數(shù)據(jù)綁定和事件監(jiān)聽等機(jī)制來實(shí)現(xiàn)各種功能。