当前位置：网站首页>4. Data binding

4. Data binding

2022-07-03 19:38:00 【Shura MIUI】 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> Data binding </title>
		<script type="text/javascript" src="./vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h3>{
    {
    name}}</h3>
		</div>
	</body>
</html>

<script type="text/javascript">
	// Vue and div Analytic process :div->Vue Parse out page ->div
	Vue.config.productionTip = false;
	const v = new Vue({
    
		// el: '#root',// The first way to write it 
		data: {
    
			name: 'jack',
		}
	});
	//dom Objects and vue Instance Association , Here is a delay binding data 
	setTimeout(()=>{
    
		v.$mount('#root');// The second way of writing is more flexible ,mount Mount means 
	},3000);
	new Vue({
    
		el:'#root',
		// data The first way to write it 
		data:{
    
			name:'llx'
		}
		// data The second way 
		data:function(){
    
			console.log(this);// Here this when Vue Instance object 
			return {
    
				name:'llx'
			}
		}
		//  The writing above is troublesome , So the following expressions can also be used 
		data(){
    
			console.log(this);// Here this when Vue Instance object 
			return {
    
				name:'llx'
			}
		}
		// in addition 
		data:()=>{
    
			console.log(this);// At this time this Point to window object 
			return {
    
				name:'llx'
			}
		}
	});
</script>
原网站

版权声明
本文为[Shura MIUI]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202150128090029.html

边栏推荐

猜你喜欢

随机推荐