changes
This commit is contained in:
3056762376@qq.com
parent
70944b3763
commit
7298b00cf0
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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="./模块化开发（ES5）model_first.js"></script>
|
||||||
|
<script src="./模块化开发（ES5）model_second.js"></script>
|
||||||
|
<script src="./模块化开发（ES5）selectA.js"></script>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -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 //返回内容保存到模块化名
|
||||||
|
// }
|
||||||
|
// )()
|
||||||
|
// 别处文件调用使用 模块名.属性进行调用
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
(
|
||||||
|
function(){
|
||||||
|
var name = "这是我的名字";
|
||||||
|
var tip = false
|
||||||
|
function doing(name) {
|
||||||
|
console.log(name+":笑笑");
|
||||||
|
}
|
||||||
|
if (tip==false) {
|
||||||
|
doing(name)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)()
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
content.name="佚名"
|
||||||
|
content.doing(content.name,12);
|
||||||
Loading…
Reference in New Issue