Vue学习 4el与data的两种写法

Revin050

已于 2022-07-16 10:27:53 修改

阅读量304

点赞数 1

分类专栏： VUE学习文章标签： vue.js javascript 前端

于 2022-02-15 10:00:32 首次发布

本文链接：https://blog.csdn.net/qq_45847016/article/details/122936455

版权

VUE学习专栏收录该内容

24 篇文章 1 订阅

订阅专栏

el与data的两种写法

el的两种写法

在Vue实例中，我们通常采用在配置文件中直接声明el的方法来连接dom元素。例如下面这样

	<body>
		<div id="demo">
			<h1>你好，{{name}}</h1>
		</div>
		<script type="text/javascript">
			var x =new Vue({
			el:'#demo',
			data:{
				name:'Revin'
			}
		})
		</script>
	</body>

其实连接dom元素还有第二种方法。首先创建Vue实例，创建完成之后采用vm.$mount()的方法连接dom元素。具体使用如下

	<body>
		<div id="demo">
			<h1>你好，{{name}}</h1>
		</div>
		<script type="text/javascript">
			var x =new Vue({
			 data:{
				name:'Revin'
			} 
		})
		x.$mount('#demo')
		
		</script>
	</body>

data的两种写法

与el一样，data也有两种书写方式：
1.对象式
2.函数式
对象式具体写法如下所示

var x =new Vue({
	el:'demo',
	data:{
		name:'Revin'
	}
})

函数式具体写法如下

var x =new Vue({
	el:'demo',
	data:function(){
		return{
			name:'Revin'
		}
	}
})

注意：由Vue管理的函数，不要使用箭头函数，箭头函数会改变this指向，一旦使用箭头函数，this就不指向Vue实例了。
原因：箭头函数中的this实际是外层函数的this（箭头函数的this对象是定义时所在的对象，而不是使用时所在的对象）。由于在Vue中自动绑定this上下文到实例中，因此不能使用箭头函数来定义。

Revin050

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue学习 4el与data的两种写法

el与data的两种写法el的两种写法在Vue实例中，我们通常采用在配置文件中直接声明el的方法来连接dom元素。例如下面这样 <body> <div id="demo"> <h1>你好，{{name}}</h1> </div> <script type="text/javascript"> var x =new Vue({ el:'#demo', data:{ name:'Revin'
复制链接

扫一扫