VueJS - 实例

你好，有抱负的网页开发者们！今天，我们将深入探索Vue.js实例的精彩世界。如果你是编程新手，不用担心——我会一步步引导你，就像我过去几年里教导无数学生一样。所以，拿起一杯咖啡（或者茶，如果你喜欢的话），让我们开始吧！

VueJS - Instances

Vue实例是什么？

在跳入代码之前，让我们先了解Vue实例是什么。想象你在建造一栋房子。Vue实例就像房子的地基——一切从这里开始。它是控制你的整个Vue应用程序的核心。

语法

创建Vue实例非常简单。这是基本语法：

new Vue({
// options
})

就这么简单！我们使用new关键字后跟Vue()，在括号内，我们传递一个包含各种选项的对象。这些选项就像我们房子的蓝图——它们告诉Vue我们希望应用程序如何运行。

你的第一个Vue实例

让我们一起创建我们的第一个Vue实例。如果你一开始不理解所有内容，不用担心——我们会一点一点地分解。

示例 1

<!DOCTYPE html>
<html>
<head>
<title>我的第一个Vue应用</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: '你好，Vue!'
}
})
</script>
</body>
</html>

输出

你好，Vue!

现在，让我们分解一下：

我们在HTML文件中包含了Vue.js库。
我们创建了一个id为"app"的<div>。这是我们Vue应用程序的所在地。
在<div>内部，我们使用{{ message }}。这称为插值——这是我们如何在Vue中显示数据。
在我们的<script>标签中，我们创建了一个新的Vue实例。
我们使用el: '#app'来告诉Vue它应该控制哪个元素（我们id为"app"的div）。
在data对象中，我们定义了一个message属性，值为'你好，Vue!'。

当Vue在我们的HTML中看到{{ message }}时，它会用我们数据中的message值替换它。神奇吧？

数据和方法

Vue实例不仅仅包含数据。它们还可以有方法——可以执行操作或计算的函数。

示例 2

<!DOCTYPE html>
<html>
<head>
<title>Vue方法示例</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: '你好，Vue!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>

输出

最初，你会看到"你好，Vue!"和一个按钮。当你点击按钮时，消息会反转成"!euV ,olleH"。

在这个示例中：

我们添加了一个按钮，带有v-on:click="reverseMessage"。这告诉Vue在按钮被点击时调用reverseMessage方法。
在我们的Vue实例中，我们添加了一个methods对象和一个reverseMessage函数。
函数将消息拆分成字符数组，反转它，然后将其重新组合成字符串。
我们使用this.message来访问和修改message数据属性。

生命周期钩子

Vue实例有一个生命周期——它们被创建、挂载到DOM、更新，最终被销毁。Vue提供了钩子，允许你在生命周期的特定阶段运行代码。

示例

<!DOCTYPE html>
<html>
<head>
<title>Vue生命周期钩子</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: '你好，Vue!'
},
created: function() {
console.log('Vue实例已创建！')
},
mounted: function() {
console.log('Vue实例已挂载到DOM！')
this.message = '欢迎来到Vue！'
}
})
</script>
</body>
</html>

输出

在浏览器中，你会看到"欢迎来到Vue！"在控制台中，你会看到两条消息：

Vue实例已创建！
Vue实例已挂载到DOM！

以下是发生的事情：

created钩子在Vue实例创建时运行。我们正在控制台中打印一条消息。
mounted钩子在Vue实例挂载到DOM时运行。我们打印另一条消息并更改message数据属性。

这些钩子对于在应用程序生命周期的特定点运行代码非常有用。

Vue实例属性和方法

Vue实例还带有内置的属性和方法。让我们看几个：

示例

<!DOCTYPE html>
<html>
<head>
<title>Vue实例属性和方法</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="updateMessage">更新消息</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: '你好，Vue!'
},
methods: {
updateMessage: function() {
this.$data.message = '消息已更新！'
console.log(this.$el)
this.$nextTick(function() {
console.log('DOM已更新！')
})
}
}
})

console.log(app.$data)
</script>
</body>
</html>

在这个示例中：

我们使用this.$data直接访问数据对象。
我们使用this.$el来打印Vue实例的根DOM元素。
我们使用this.$nextTick在DOM更新后运行一个函数。
在Vue实例外部，我们可以使用app.$data访问其属性。

以下是一些常用的Vue实例属性和方法：

属性/方法	描述
$data	Vue实例正在观察的数据对象
$el	Vue实例管理的元素
$watch	观察Vue实例的属性变化
$set	在对象上设置属性，触发视图更新
$nextTick	在下一次DOM更新循环后执行回调

请记住，这些只是一些示例。Vue.js有许多更多的功能和能力，我们将在未来的课程中探索。

我希望这个关于Vue实例的介绍对你有所帮助！记住，学习编码就像学习一门新语言——它需要时间和练习。如果你一开始不理解所有内容，不要气馁。继续尝试，继续编码，最重要的是，继续享受乐趣！下一课见！

Credits: Image by storyset