Vue实例以及el-data使用介绍

最新推荐文章于 2023-05-23 16:13:16 发布

俗世凡人行

最新推荐文章于 2023-05-23 16:13:16 发布

阅读量754

点赞数

分类专栏： Vue 文章标签： vue实例

本文链接：https://blog.csdn.net/weixin_41887155/article/details/107587207

版权

Vue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

Vue实例以及el-data使用介绍

Vue实例

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

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

Vue选项
- el
  - 提供一个在页面上已经存在的DOM元素作为Vue实例的挂载目标; 可以是CSS选择器, 也可以是一个HTMLElement实例;
  - 元素可以用vm.$el访问;
```
console.log(vm.$el)<br>
结果为:<br>
<div id="app"></div>;
类似找到了这个dom节点对象		
```
- data
  - Vue实例的数据对象, 必须是纯粹的对象(含有另个或多个的key/value对);
  - vm. $d a t a 访问原始数据对象; ‘ V u e 实例也代理了 d a t a 对象上所有的属性 ‘, 因此, 访问 v m . a 等价于访问 v m .$ data.a;

eg

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue实例以及el-data使用介绍</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}			
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{
			msg:'hello vue'
		}
	})
	
	//console.log(vm.$el)
	//console.log(vm.$data.msg)
	console.log(vm.msg)
	
</script>