创建 Vue 实例

发布时间：2023-04-18 14:59:00 所属栏目：教程来源：

导读：每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。

Vue 实例是通过 Vue 函数传入对应 options 参数创建出的一个实例对象。

创建 Vue 实例

Vue 实例的创建是通过 new Vue(options) 来实现的，

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。

Vue 实例是通过 Vue 函数传入对应 options 参数创建出的一个实例对象。

创建 Vue 实例

Vue 实例的创建是通过 new Vue(options) 来实现的，options 是创建 vue 实例传递的参数。它是一个对象：

//最简单的 options 对象示例：
{
el: "#app",
data() {
return {}
},
}
接下来我们用一个简单的例子来学习如何创建 vue 实例：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app"
})
</script>
代码解释
JS 代码第 3-10 行，我们使用 Vue 函数创建了一个实例对象，在调用函数时我们传入了一个对象参数，该对象只有一个 el 属性。

在之前的小节中我们学习到Vue是一个MVVM框架，所以在日常开发中我们通常将 Vue 实例的变量名取为 vm。当然，这并不是必须的，你也可以给他其他任意的变量名。

vue 实例参数

在上述的例子中，我们首先使用 Vue 函数创建一个新的 Vue 实例，并在创建实例的时候传入了一个选项对象，接下来我们逐个分析每个对象属性的意义。

el 属性表示 Vue 实例要挂载的节点，该属性的值可以是一个 CSS 选择器，也可以是一个 HTMLElement。

<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<div>
{{ message }}
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
message: 'Hello Imooc !'
}
}
})
</script>
</html>
代码解释:
JS 代码第 3-10 行，我们创建了一个 Vue 实例，将它挂载在 id 为 app 的 html 元素节点上。
HTML 代码第 2-4 行，我们定义了 id 为 app 的 DOM 元素。所以我们看到 id 为 app 的节点内 {{ message }} 被替换成了 Hello Imooc !，而未给定 id 的元素并未受到 Vue 的作用。

同样，我们可以使用 HTMLElement 的方式给 el 赋值：

<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: document.getElementById('app'),
data() {
return {
message: 'Hello Imooc !'
}
}
})
</script>
</html>
代码解释:
JS 代码第 4 行，我们使用 HTMLElement 的方式给 el 赋值。

data 属性

data 属性表示 Vue 实例中的数据，data接收一个 Object 或者返回一个对象数据的函数 Function。当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到Vue 的响应式系统中。当这些属性的值发生改变时，视图也会同时更新。

data 为对象的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
message: 'Hello Imooc !'
}
})
</script>
</html>
/修改 vue 实例上的 message 数据
vm.message = 'Hello 句号！'
代码解释：
JS 代码第 3-5 行，我们定义了 data 数据，在页面中可以看到已经显示出 message 的值。当我们打开控制台，修改 vm 上的 message 时，页面会同时做更新。

data 为函数的示例：

var vm = new Vue({
el: "#app",
data() {
return {
message: 'Hello Imooc !'
}
}
})
TIPS：只有当实例被创建时就已经存在于 data 中的属性才是响应式的。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!