当前位置：网站首页>04 -- two ways of writing el and data

04 -- two ways of writing el and data

2022-07-25 03:06:00 【Live learning programming ideas】

el and data Two ways of writing

el The first way to write it
el The second way to write
data The first way to write
data The second way to write
summary

el The first way to write it

<!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 And data Two ways of writing </title>
	<!--  introduce vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!--  Prepare a container  -->
	<div id = "root">
		<h1> Hello ,{
    {
    name}}</h1>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false //  Set to  false  To prevent  vue  Generate production prompts at startup .
		new Vue({
    
			el: '#root',
			data:{
    
				name:' Silicon Valley '
			}
		})
	</script>
</body>
</html>

el The second way to write

see Vue Instance object

<!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 And data Two ways of writing </title>
	<!--  introduce vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!--  Prepare a container  -->
	<div id = "root">
		<h1> Hello ,{
    {
    name}}</h1>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false //  Set to  false  To prevent  vue  Generate production prompts at startup .
		const v = new Vue({
    
			// el: '#root',
			data:{
    
				name:' Silicon Valley '
			}
		})
		console.log(v)
	</script>
</body>
</html>

page
Page output vue Instance object of
Insert picture description here
Divided into $ The symbol of and No, $ The symbol of

const v = new Vue（）
Output v yes vue Instance object Everything in the above red box is above itself , And what we need is vue Instance creation on the prototype object
v Is the instance Vue Is the creator of instances
Insert picture description here

<!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 And data Two ways of writing </title>
	<!--  introduce vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!--  Prepare a container  -->
	<div id = "root">
		<h1> Hello ,{
    {
    name}}</h1>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false //  Set to  false  To prevent  vue  Generate production prompts at startup .
		const v = new Vue({
    
			// el: '#root',
			data:{
    
				name:' Silicon Valley '
			}
		})
		console.log(v)
		v.$mount('#root')
	</script>
</body>
</html>

The second is more flexible , For example, add a timer , One second later , as follows ：

<script type="text/javascript">
		Vue.config.productionTip = false //  Set to  false  To prevent  vue  Generate production prompts at startup .
		const v = new Vue({
    
			// el: '#root',
			data:{
    
				name:' Silicon Valley '
			}
		})
		console.log(v)
		setTimeout(() => {
    
			v.$mount('#root')
		}, 1000);
		
	</script>

data The first way to write

// data  The first way to write : Object type 
data:{
    
	name:' Silicon Valley '
}

data The second way to write

// data  The second way to write ： Functional expression 
data:function() {
    
	console.log("@@@", this) //  Here this  yes vue Instance object 
	return{
    
		name:' Silicon Valley '
	}
}
 It can also be written as 
data() {
    
	console.log("@@@", this) //  Here this  yes vue Instance object 
	return{
    
		name:' Silicon Valley '
	}
}

above this Namely Vue Instance object
Insert picture description here

summary

data And el Of 2 Species writing ：

el Yes 2 Species writing
（1）new Vue When to configure el attribute
（2） First create Vue example , And then through vm.$mount(‘#root’) Appoint el Value
data Yes 2 Species writing
（1） Object type
（2） Functional expression
How to choose ： Either way of writing is OK at present , When you learn about components later ,data The functional expression must be used , Otherwise, an error will be reported
An important principle ：
from Vue Management functions , Never write arrow functions , Once you write the arrow function ,this It's not Vue The instance

原网站

版权声明
本文为[Live learning programming ideas]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/202/202207200529066656.html