Vue 2.0 是一款流行的前端框架,它具有輕量、高效、易學易用等特點。在本文中,我們將介紹 Vue 2.0 中的基礎知識。
首先,我們需要在 HTML 文件中加載 Vue 庫:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
然后,我們可以創建一個 Vue 實例:
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
在上面的代碼中,我們使用了 data 選項來定義一個名為 message 的屬性,它的默認值為 "Hello, Vue!"。接著,我們將 app 對象綁定到頁面中的 id 為 "app" 的元素上:
<div id="app">{{ message }}</div>
這樣,在頁面上就會顯示 "Hello, Vue!" 了。注意,我們使用了雙花括號來綁定數據。
接下來,我們可以使用指令來控制頁面元素的顯示和隱藏等:
<div id="app">
<p v-if="show">這是要顯示的內容</p>
<p v-else>這是要隱藏的內容</p>
</div>
在上面的代碼中,我們使用了 v-if 指令來判斷 show 屬性的值,如果為 true,顯示第一個 p 元素,否則顯示第二個 p 元素。在 Vue 中,指令以 v- 開頭。
最后,我們可以使用事件來實現交互效果:
<div id="app">
<p v-on:click="alertMessage">點擊我彈出提示框</p>
</div>
在上面的代碼中,我們使用了 v-on 指令來監聽 click 事件,當點擊元素時,調用 alertMessage 方法:
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
methods: {
alertMessage: function() {
alert(this.message)
}
}
})
在上面的代碼中,我們使用 methods 選項來定義 alertMessage 方法,它會彈出 message 屬性的值。
以上就是 Vue 2.0 的基礎知識,希望對您有所幫助。
上一篇vue input遮擋
下一篇html怎么設置向右浮動