在如今的
Web
套用開發中，前端也逐漸離不開一些框架的使用。今天一篇文章帶大家回顧一下
Vue
的基礎語法！
Vue.js 是一個構建使用者介面的漸進式框架，它易於上手且靈活，被廣泛用於構建單頁應用程式。
Vue 的基礎語法
1）樣版語法
：Vue 使用樣版語法來聲明性地將 DOM 繫結到底層數據上。
2）數據繫結
：Vue 提供了多種數據繫結方式，如內容繫結、事件處理、條件渲染等。
3）元件系統
：Vue 的元件系統使得開發者能夠構建可復用的元件，使得開發大型套用變得可行。
4）響應式系統
：Vue 的數據是響應式的，當數據變化時，檢視會自動更新。
下面是 Vue 的基礎語法範例程式碼：
<div id="app">
<!-- 使用插值運算式輸出數據 -->
<h1>{{ message }}</h1>
<!-- 使用 v-bind 指令進行內容繫結 -->
<img v-bind:src="imageSrc" v-bind:alt="imageAlt">
<!-- 使用 v-on 指令為 DOM 元素添加事件監聽 -->
<button v-on:click="counter += 1">增加</button>
<p>計數: {{ counter }}</p>
<!-- 使用 v-if 指令進行條件渲染 -->
<p v-if="user.isLoggedIn">歡迎回來，{{ user.name }}！</p>
<!-- 使用元件 -->
<my-component></my-component>
</div>
<!-- 定義一個新元件 -->
<script type="text/x-template" id="my-component-template">
<p>這是一個元件！</p>
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
// 註冊一個新元件
Vue.component('my-component', {
template: '#my-component-template'
})
// 建立一個新 Vue 例項
new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
imageSrc: 'https://vuejs.org/images/logo.png',
imageAlt: 'Vue Logo',
counter: 0,
user: {
isLoggedIn: true,
name: 'yupi'
}
}
})
</script>
在上述程式碼中，我們首先使用插值運算式 {{ message }} 將數據渲染到 HTML 中。然後，我們使用 v-bind 指令將 src 和 alt 內容繫結到數據上。接著，我們使用 v-on 指令為按鈕添加點選事件，每次點選都會增加計數器的值。我們還使用 v-if 指令根據使用者是否登入來條件性地渲染一段文本。最後，我們定義了一個名為 my-component 的新元件，並在例項化 Vue 物件時註冊了這個元件。
今天的程式碼大賞就到這裏。希望透過這篇文章，你能夠對 Vue 的基礎語法 有一個更深入的理解。
完整程式碼片段來源於程式碼小抄，歡迎點選進入小程式閱讀！
線上存取：https://www.codecopy.cn/post/dositw
在程式碼小抄可以看到更多優質程式碼，也歡迎大家積極分享，可能會獲得我們官方的小禮品 🎁~
往期推薦
