04—— el 和 data 的两种写法

最新推荐文章于 2024-04-15 23:58:46 发布

活学编程思想

最新推荐文章于 2024-04-15 23:58:46 发布

阅读量108

点赞数

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

本文链接：https://blog.csdn.net/weixin_45080272/article/details/125794109

版权

vue 2.0 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

el 和 data 的两种写法

el 第一种写法
el 的第二种写法
data 的第一种写法
data 的第二种写法
总结

el 第一种写法

<!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>el与data的两种写法</title>
	<!-- 引入vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器 -->
	<div id = "root">
		<h1>你好，{{name}}</h1>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
		new Vue({
			el: '#root',
			data:{
				name:'尚硅谷'
			}
		})
	</script>
</body>
</html>

el 的第二种写法

查看Vue 实例对象

<!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>el与data的两种写法</title>
	<!-- 引入vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器 -->
	<div id = "root">
		<h1>你好，{{name}}</h1>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
		const v = new Vue({
			// el: '#root',
			data:{
				name:'尚硅谷'
			}
		})
		console.log(v)
	</script>
</body>
</html>

页面
页面输出vue 的实例对象
在这里插入图片描述
分为有 $ 符号的和没有 $ 符号的

const v = new Vue（）
输出的 v 是vue 实例对象上述红色框里面的东西都是它自身上面的，而我们要用的在 vue实例的缔造的原型对象上
v 是实例 Vue 是实例的缔造者
在这里插入图片描述

<!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>el与data的两种写法</title>
	<!-- 引入vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器 -->
	<div id = "root">
		<h1>你好，{{name}}</h1>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
		const v = new Vue({
			// el: '#root',
			data:{
				name:'尚硅谷'
			}
		})
		console.log(v)
		v.$mount('#root')
	</script>
</body>
</html>

第二种比较灵活，例如加了一个定时器，一秒之后才使用，如下：

<script type="text/javascript">
		Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
		const v = new Vue({
			// el: '#root',
			data:{
				name:'尚硅谷'
			}
		})
		console.log(v)
		setTimeout(() => {
			v.$mount('#root')
		}, 1000);
		
	</script>

data 的第一种写法

// data 的第一种写法:对象式
data:{
	name:'尚硅谷'
}

data 的第二种写法

// data 的第二种写法：函数式
data:function() {
	console.log("@@@", this) // 此处的this 是vue实例对象
	return{
		name:'尚硅谷'
	}
}
还可以写成
data() {
	console.log("@@@", this) // 此处的this 是vue实例对象
	return{
		name:'尚硅谷'
	}
}