VueJS - 模板：初学者指南

你好，未来的Vue.js超级巨星！我很高兴能成为你进入Vue.js模板世界的向导。作为一名有着多年计算机科学教学经验的人，我可以向你保证，Vue.js是市场上最易于初学者上手的框架之一。那么，系好安全带，让我们开始吧！

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>

这将渲染一个待办事项列表。每个 <li> 元素都是为 todos 数组中的每个项创建的。

使用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