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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
|
||||
</div>
|
||||
</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>
|
||||
|
|
@ -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