数据资源修复
This commit is contained in:
Code12121
parent
2949f20e47
commit
c816056e33
|
|
@ -7,12 +7,13 @@
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
</head>
|
</head>
|
||||||
<!--
|
<!--
|
||||||
最主要的目的在于函数进行每一次调用的时候，
|
最主要的目的在于函数进行每一次调用的时候，
|
||||||
它所调用的当前的数据永远都不会干扰到其他的数据，
|
它所调用的当前的数据永远都不会干扰到其他的数据，
|
||||||
永远传递的是你当前传递的值，如果组件中的data是一个对象的话，
|
永远传递的是你当前传递的值，如果组件中的data是一个对象的话，
|
||||||
那么其他组件对表面上看起来是自己组件的data的属性所做的修改实际上修改的就是全部data属性的值
|
那么其他组件对表面上看起来是自己组件的data的属性所做的修改实际上修改的就是全部data属性的值
|
||||||
在内存中若使用的是data属性，那么就是直接修改在内存中所有指向这块区域的属性
|
在内存中若使用的是data属性，那么就是直接修改在内存中所有指向这块区域的属性
|
||||||
在内存中若使用的是data方法，那么组件之间的data是互不干扰
|
在内存中若使用的是data方法，那么组件之间的data是互不干扰
|
||||||
|
简单来讲就是data在组件是一个函数最主要的目的就是防止值传递
|
||||||
-->
|
-->
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<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