VueJS - 模板：初學者指南

你好，未來的 Vue.js 超級巨星！我很興奮能成為您進入 Vue.js 模板世界的導遊。作為一個教了多年計算機科學的人，我可以向您保證，Vue.js 是最適合初學者的框架之一。所以，請繫好安全帶，我們一起來探索吧！

VueJS - Template

Vue.js 模板是什麼？

在我們開始編程之前，讓我們先了解 Vue.js 中的模板是什麼。把它想像成您網頁的骨架——這是您定義 HTML 構架並加入一些 Vue.js 魔法以使其動態化和互動化的地方。

基本結構

這裡有一個簡單的 Vue.js 模板：

<div id="app">
{{ message }}
</div>

在這個例子中，{{ message }} 是 Vue.js 中的一種特殊語法，稱為“插值”。它就像一個佔位符，Vue.js 將用實際數據替換它。

讓我們看看它是如何工作的：

<div id="app">
{{ message }}
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>

當您運行這段代碼時，您會在頁面上看到 "Hello, Vue!"。神奇吧？模板中的 {{ message }} 被我們 Vue 實例數據中的 message 值替換。

指令：Vue 的特殊指示

現在，讓我們來談談指令。這些是以 v- 開頭的特殊屬性，給 Vue.js 提供如何行為的指示。它們就像小魔法師，在您的 HTML 上施展魔法！

v-bind：動態屬性

v-bind 指令用於動態地將屬性绑定到表達式。它非常常用，甚至有一個簡寫：:。

<div id="app">
<a v-bind:href="url">點我！</a>
<!-- 簡寫 -->
<a :href="url">點我！</a>
</div>

<script>
new Vue({
el: '#app',
data: {
url: 'https://vuejs.org/'
}
})
</script>

在這個例子中，<a> 標籤的 href 屬性被動態地設定為 Vue 實例數據中的 url 值。

v-if, v-else-if, v-else：條件渲染

這些指令允許您根據表達式的真值條件性地渲染元素。

<div id="app">
<p v-if="seen">現在你看得到我</p>
<p v-else>現在你看不到我</p>
</div>

<script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>

嘗試將 seen 改為 false，然後看神奇發生！

v-for：列表渲染

v-for 指令用於基於數組渲染列表項目。

<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
todos: [
{ text: '學習 JavaScript' },
{ text: '學習 Vue' },
{ text: '建立一些很棒的东西' }
]
}
})
</script>

這將渲染一個待辦事項列表。對於 todos 數組中的每個項目，都會創建一個 <li> 元素。

使用 v-on 進行事件處理

v-on 指令用於聆聽 DOM 事件，當事件被觸發時運行一些 JavaScript 代碼。它非常有用，甚至有一個簡寫：@。

<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反轉信息</button>
<!-- 簡寫 -->
<button @click="reverseMessage">反轉信息</button>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>

點擊按鈕，然後看您的信息做一個後空翻！

使用 v-model 進行雙向绑定

v-model 指令在表單輸入元素或組件上創建雙向绑定。

<div id="app">
<input v-model="message">
<p>信息是：{{ message }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>

在輸入字段中輸入內容，然後看信息實時更新。這就像魔法，但更好——這是 Vue.js！

計算屬性和監聽器

計算屬性

計算屬性就像是超強大的數據屬性。它們是基於其他屬性計算出來的屬性。

<div id="app">
<p>原始信息："{{ message }}"</p>
<p>計算反轉信息："{{ reversedMessage }}"</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>

reversedMessage 屬性將始終是 message 的反轉，當 message 改變時，它會自動更新！

監聽器

監聽器就像是您數據的警衛。它們會監視數據的變化，並在變化發生時執行動作。

<div id="app">
<p>
問一個是/否問題：
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
question: '',
answer: '問題通常包含一個問號。 ;-)'
},
watch: {
question: function (newQuestion, oldQuestion) {
this.answer = '等待您停止輸入...'
this.debouncedGetAnswer()
}
},
created: function () {
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.question.indexOf('?') === -1) {
this.answer = '問題通常包含一個問號。 ;-)'
return
}
this.answer = '思考中...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = '錯誤！無法連接到 API。' + error
})
}
}
})
</script>

在這個例子中，我們正在監視 question 屬性。當它改變時，我們更新 answer 並調用一個方法從 API 獲取新答案。

方法表

這裡是一個總結我們所涵蓋方法的表格：

方法	描述	示例
`v-bind`	動態绑定屬性	`<a v-bind:href="url">`
`v-if`	條件渲染	`<p v-if="seen">Now you see me</p>`
`v-for`	列表渲染	`<li v-for="item in items">{{ item }}</li>`
`v-on`	事件处理	`<button v-on:click="doSomething">`
`v-model`	雙向数据绑定	`<input v-model="message">`

以上就是 Vue.js 模板的入門步驟。記住，熟能生巧，所以不要害怕嘗試這些概念。在您知道之前，您將會建立令人驚艷的 Vue.js 應用程序。快樂編程！

Credits: Image by storyset