使用 Vue 写项目时,最重要的是 Vue 实例,它提供了学习 Vue 的方向,逐步掌握与 Vue 实例相关的「特性」是我们的终极目标。
首先,在一个 html 文件中加载 vue.js,在 学习 Vue 从如何贡献代码开始 这节内容中我们提到过,可以通过 script 标签直接加载 vue.js 文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue实例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<body>
用浏览器打开这个页面,在 console 中输入 Vue ,你会发现 Vue 其本质是一个函数:
其实 Vue 是一个构造函数,可以被看作是一个“类”,通过 new 创建它的实例。那究竟在一个页面中能创建多少个实例呢?
通常在一个页面中只创建一个 Vue 实例:
<body>
<div id="app">Hello {
{ msg }}</div>
<script>
const vm = new Vue({
el: '#app'