Vue中el和data的写法

最新推荐文章于 2024-07-06 16:47:02 发布

安全天天学

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量156

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_53568983/article/details/128254557

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue中el和data的写法

前言
一、el的两种写法
- - 1.1el写法1
  - 1.2el写法2
二、data的两种写法
- - 1.1data写法1
  - 1.2data写法2
总结

前言

Vue中el和data的写法都有两种，而且所用的的地方都不一样，所以都必须要学，el是用来挂载模块的，而data是用来把vue的数据显示在页面中的

一、el的两种写法

1.1el写法1

这种写法一般用于直接显示，就是显示之前不需要任何的操作，直接显示即可

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
			<input type="text" v-bind:value="school.name"> 
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const x = new Vue({
		   el:'#root'
			data:{
				school:{
					name:'asd'
				}
			}
		})
	</script>
</body>
</html>

1.2el写法2

这种写法一般用于在数据显示之前还需要进行其他操作

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
			<input type="text" v-bind:value="school.name"> 
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const x = new Vue({
			data:{
				school:{
					name:'asd'
				}
			}
		})
		x.$mount('#root')
	</script>
</body>
</html>

二、data的两种写法

1.1data写法1

最原始的写法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
			<input type="text" v-bind:value="name"> 
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const x = new Vue({
			 data:{
			 name:'123'
			 }
		}
		})
		x.$mount('#root')
		 
	</script>
</body>
</html>

1.2data写法2

组件只能够使用这种写法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
			<input type="text" v-bind:value="name"> 
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const x = new Vue({
			// data(){
			// return {
			// 	name:'123'
			// }
			/*如上的写法是简写方式*/
			data:function(){
			return {
				name:'123'
			}
		}
		})
		x.$mount('#root')
		 
	</script>
</body>
</html>

总结

el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。
data有2种写法
(1).对象式
(2).函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

安全天天学

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue中el和data的写法

Vue中el和data的写法都有两种，而且所用的的地方都不一样，所以都必须要学，el是用来挂载模块的，而data是用来把vue的数据显示在页面中的el有2种写法(1).new Vue时候配置el属性。(2).先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。data有2种写法(1).对象式(2).函数式如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
复制链接

扫一扫