Vue实例对象

Vue实例对象教程

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

Vue实例对象详解

语法

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

说明

创建了一个 Vue 对象的实例 vm。

Vue实例对象案例

<!DOCTYPE html>
<html>
<head>
	<title>Vue 对象实例</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
	<div id="app">
		{{ msg }}
	</div>
	<p>嗨客网（www.haicoder.net）</p>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
			msg:'Hello HaiCoder'
		}
	})
	console.log(vm);
</script>
</html>

使用浏览器，打开该文件，显示效果如下图所示：

03 vue 实例对象.png

Vue实例对象属性

Vue 实例对象中的以 $ 开头的为公有属性。公有属性如下：

04 vue 实例对象.png

Vue 实例对象中的以 _ 开头的为私有属性。私有属性如下：

05 vue 实例对象.png

其中 el 被 Vue 放入了公有属性中，而 data 则被放入了私有属性中。

data 中的数据，需要被外部使用，于是 Vue 直接将 data 中的属性及属性值，直接挂载到 Vue 实例中，也就是说，data 中的数据，我们可以直接使用 app.msg 直接调用。

Vue实例对象教程总结

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。Vue 实例对象中的以 $ 开头的为公有属性，以 _ 开头的为私有属性。