This commit is contained in:
3056762376@qq.com 2022-11-11 13:42:43 +08:00
parent 70944b3763
commit 7298b00cf0
6 changed files with 180 additions and 4 deletions

View File

@ -0,0 +1,65 @@
<!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>
</head>
<body>
<div id="app">
<apps>
<div slot="mid">
<form action="" method="get">
<label class="" for="">
用户名:<input type="text" name="" id="" placeholder="请输入用户名">
</label>
<label class="" for="">
密码:<input type="password" name="" id="" placeholder="请输入密码">
</label>
<button>确认</button>
</form>
</div>
</apps>
<apps>
<div slot-scope="data">
<div v-for="datas in data">
<p>{{datas.join("-")}}</p>
</div>
</div>
</apps>
</div>
<template id="tpl">
<div>
<slot>
<button>左边</button>
</slot>
<slot name="mid">
<button>中间</button>
</slot>
<slot :data="list">
<h1>这是子组件内容</h1>
<div v-for="item in list">
<div>{{item}}</div>
</div>
</slot>
</div>
</template>
</body>
<script src="../../../JavaScript/vue.js"></script>
<script>
new Vue({
el:"#app",
components:{
'apps':{
template:"#tpl",
data(){
return {
list:['这是内容1','这是内容2','这是内容3','这是内容4']
}
}
}
}
})
</script>
</html>

View File

@ -0,0 +1,55 @@
<!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>
</head>
<body>
<div id="app">
<div>
<h1>这是父组件</h1>
<ul v-for="lists in content">
<li>{{lists}}</li>
</ul>
<button @click="Clickme()">点击我获取数据</button>
</div>
<br>
<br>
<apps ref="children"></apps>
</div>
<template id="tpl">
<div>
<h1>这是子组件</h1>
<ul v-for="item in list">
<li>{{item}}</li>
</ul>
</div>
</template>
</body>
<script src="../../JavaScript/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
content:[]
},
methods: {
Clickme(){
this.content= this.$refs.children.list;
}
},
components:{
'apps':{
template:"#tpl",
data(){
return {
list:["这是第一个内容","这是第二个内容","这是第三个内容"]
}
}
}
}
})
</script>
</html>

View File

@ -7,9 +7,9 @@
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<div id="app">
</div>
</body> </body>
<script src="../../"></script> <script src="./模块化开发ES5model_first.js"></script>
<script src="./模块化开发ES5model_second.js"></script>
<script src="./模块化开发ES5selectA.js"></script>
</html> </html>

View File

@ -0,0 +1,42 @@
var content =(
function(){
// 创建模块化
var arr=[];
var name="潇潇";
var age=20;
var tip=true
function doing(name,age) {
console.log("这是你的名字"+name+"\n"+"这是你的年龄"+age+"\n"+name+"在吃饭");
}
if(tip){
doing(name, age)
}
arr.name=name
arr.doing=doing
return arr
}
)()
// 创建闭包:确保有作用域以免变量被修改
// ()(
// function(){
// }
// )
// var content = ( //创建模块化
// function () {
// var arr = [];
// var name = "潇潇";
// var age = 20;
// var tip = true
// function doing(name, age) {
// console.log("这是你的名字" + name + "\n" + "这是你的年龄" + age + "\n" + name + "在吃饭");
// }
// if (tip) {
// doing(name, age)
// }
// arr.name = name
// arr.doing = doing
// return arr //返回内容保存到模块化名
// }
// )()
// 别处文件调用使用 模块名.属性进行调用

View File

@ -0,0 +1,12 @@
(
function(){
var name = "这是我的名字";
var tip = false
function doing(name) {
console.log(name+":笑笑");
}
if (tip==false) {
doing(name)
}
}
)()

View File

@ -0,0 +1,2 @@
content.name="佚名"
content.doing(content.name,12);