Vue和jQuery是兩個非常流行的前端框架和庫。在開發中,經常需要同時使用這兩個工具。那么怎么引入Vue和jQuery呢?
引入Vue:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
在HTML中使用Vue:
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
引入jQuery:
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
在HTML中使用jQuery:
<div id="app">
<p>Click the button below to add a new item:</p>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<button id="add-item">Add Item</button>
</div>
<script>
$(document).ready(function(){
$('#add-item').click(function(){
$('#list').append('<li>New Item</li>');
});
});
</script>
引入和使用Vue和jQuery相對簡單。在使用過程中,需要注意Vue和jQuery命名沖突的問題。為了避免沖突,可以使用Vue的插件,如vue-jquery插件。
下一篇vue $http請求