03_Vue 实例对象

最新推荐文章于 2024-05-16 14:18:15 发布

嫣夜来

最新推荐文章于 2024-05-16 14:18:15 发布

阅读量264

点赞数 1

分类专栏： Vue前端框架

本文链接：https://blog.csdn.net/qq_41865652/article/details/100976735

版权

Vue前端框架专栏收录该内容

21 篇文章

订阅专栏

本文介绍Vue.js的两种引入方式：本地文件引入和CDN在线引入。并通过实例详细讲解了Vue实例对象的创建过程，展示了如何在HTML中使用Vue进行数据绑定。

摘要由CSDN通过智能技术生成

1、vue的引入方式

两种方式
方式一 下载vue.js源文件，使用script标签引入

<script src="./vue.js"></script>

方式二 CDN服务提供的联网引入，前提是你的开发环境可以接入外网

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

2、Vue 实例对象

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

var vm = new Vue({
  // 选项
})

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01_初识vue实例对象</title>
</head>
<body>
<div id='para'></div>
</body>
<!-- -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
	var app = new Vue({
		el: '#para',
		data: {
			content: 'Helllo World'
		}
	});
	console.log(app);
</script>
</html>

通过控制台输出 Vue 实例 对象，让大家对Vue对象的属性有一个基本的认识，如下图：
在这里插入图片描述
通过打印实例对象发现：
el 是Vue对象公有属性中的一员；而data 是Vue对象私有属性中的一员，同时私有属性data 中的数据，需要被外部使用，于是 Vue 直接将data 中的属性及属性值，直接挂载到 Vue 实例中，也就是说，data中的数据，我们可以直接使用 app.content 直接调用；如下图：
在这里插入图片描述