数据资源修复
This commit is contained in:
Code12121
parent
2949f20e47
commit
c816056e33
|
|
@ -7,12 +7,13 @@
|
|||
<title>Document</title>
|
||||
</head>
|
||||
<!--
|
||||
最主要的目的在于函数进行每一次调用的时候，
|
||||
它所调用的当前的数据永远都不会干扰到其他的数据，
|
||||
永远传递的是你当前传递的值，如果组件中的data是一个对象的话，
|
||||
那么其他组件对表面上看起来是自己组件的data的属性所做的修改实际上修改的就是全部data属性的值
|
||||
在内存中若使用的是data属性，那么就是直接修改在内存中所有指向这块区域的属性
|
||||
在内存中若使用的是data方法，那么组件之间的data是互不干扰
|
||||
最主要的目的在于函数进行每一次调用的时候，
|
||||
它所调用的当前的数据永远都不会干扰到其他的数据，
|
||||
永远传递的是你当前传递的值，如果组件中的data是一个对象的话，
|
||||
那么其他组件对表面上看起来是自己组件的data的属性所做的修改实际上修改的就是全部data属性的值
|
||||
在内存中若使用的是data属性，那么就是直接修改在内存中所有指向这块区域的属性
|
||||
在内存中若使用的是data方法，那么组件之间的data是互不干扰
|
||||
简单来讲就是data在组件是一个函数最主要的目的就是防止值传递
|
||||
-->
|
||||
<body>
|
||||
<div id="app">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
<!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>
|
||||
<!--
|
||||
子组件使用父组件步骤
|
||||
1、创建一个组件（局部/全局）
|
||||
2、在子组件中设置props属性
|
||||
格式props:['内容']
|
||||
3、在应用子组件中添加属性：props属性=父组件的数据
|
||||
4、在组件中使用mustache语法（插值语法）应用
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<apps :new_content="content"></apps>
|
||||
</div>
|
||||
</body>
|
||||
<template id="tpl">
|
||||
<div>
|
||||
<h1>{{new_content}}</h1>
|
||||
</div>
|
||||
</template>
|
||||
<script src="../../../JavaScript/vue.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
content:["这是第一个内容","这是第二个内容","这是第三个内容"]
|
||||
},
|
||||
components:{
|
||||
'apps':{
|
||||
template:"#tpl",
|
||||
props:['new_content'],
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!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>
|
||||
<!--
|
||||
子组件使用父组件步骤
|
||||
1、创建一个组件（局部/全局）
|
||||
2、在子组件中设置props属性
|
||||
格式props:['内容']
|
||||
3、在应用子组件中添加属性：props属性=父组件的数据
|
||||
4、在组件中使用mustache语法（插值语法）应用
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<apps :new_content="content"></apps>
|
||||
</div>
|
||||
</body>
|
||||
<template id="tpl">
|
||||
<div>
|
||||
<h1>{{new_content}}</h1>
|
||||
</div>
|
||||
</template>
|
||||
<script src="../../../JavaScript/vue.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
content:"这是一个父组件"
|
||||
},
|
||||
components:{
|
||||
'apps':{
|
||||
template:"#tpl",
|
||||
props:['new_content'],
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
Binary file not shown.
Loading…
Reference in New Issue