Skip to content

Commit df1e7b9

Browse files
keepfoolkeepfool
committed
replace the <template> tag to <script> tag, because of IE doesn't support <template> tag
1 parent fd6f738 commit df1e7b9

16 files changed

+123
-25
lines changed

‎02.Components/Part-2/$broadcast.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,15 @@
99
*{
1010
font-family: simhei;
1111
}
12-
1312
#app {
1413
max-width: 640px;
1514
margin: 50px auto;
1615
}
1716

17+
#child-component{
18+
display: none;
19+
}
20+
1821
.parent-content,
1922
.child-content {
2023
height: 150px;

‎02.Components/Part-2/$children.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@
1111
margin: 50px auto;
1212
}
1313

14+
#parent-component, #child-component1, #child-component2{
15+
display: none;
16+
}
17+
1418
</style>
1519
</head>
1620

‎02.Components/Part-2/$dispatch.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414
margin: 50px auto;
1515
}
1616

17+
#child-component{
18+
display: none;
19+
}
20+
1721
.parent-content,
1822
.child-content {
1923
height: 150px;

‎02.Components/Part-2/$parent.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
max-width: 640px;
1010
margin: 50px auto;
1111
}
12+
13+
#parent-component, #child-component{
14+
display: none;
15+
}
1216
</style>
1317
</head>
1418

‎02.Components/Part-2/$ref.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@
1111
margin: 50px auto;
1212
}
1313

14+
#parent-component, #child-component1, #child-component2{
15+
display: none;
16+
}
1417
</style>
1518
</head>
1619

‎02.Components/Part-2/compile-scope.html

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,17 @@
44
<head>
55
<meta charset="UTF-8">
66
<title></title>
7-
7+
<style>
8+
9+
#app{
10+
max-width: 640px;
11+
margin: 50px auto;
12+
}
13+
14+
#myComponent{
15+
display: none;
16+
}
17+
</style>
818
</head>
919

1020
<body>

‎02.Components/Part-2/demo/step01.html

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,16 @@
44
<head>
55
<meta charset="UTF-8">
66
<title></title>
7-
<link rel="stylesheet" href="style.css" />
7+
<link rel="stylesheet" href="style.css" />
8+
<style>
9+
/*
10+
* 由于IE不支持<template>标签，所以template标签中的内容在IE下会直接显示出来。
11+
* 将模板设为隐藏即可解决这个问题，template标签各浏览器支持请参考：http://caniuse.com/#feat=template
12+
*/
13+
#grid-template{
14+
display: none;
15+
}
16+
</style>
817
</head>
918

1019
<body>
@@ -22,7 +31,7 @@
2231
</div>
2332
</div>
2433

25-
<script type="text/x-template" id="grid-template">
34+
<template id="grid-template">
2635
<table>
2736
<thead>
2837
<tr>
@@ -45,7 +54,7 @@
4554
</tr>
4655
</tbody>
4756
</table>
48-
</script>
57+
</template>
4958

5059
<script src="../js/vue.js"></script>
5160
<script>

‎02.Components/Part-2/demo/step02.html

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,15 @@
55
<meta charset="UTF-8">
66
<title></title>
77
<link rel="stylesheet" href="style.css" />
8+
<style>
9+
/*
10+
* 由于IE不支持<template>标签，所以template标签中的内容在IE下会直接显示出来。
11+
* 将模板设为隐藏即可解决这个问题，template标签各浏览器支持请参考：http://caniuse.com/#feat=template
12+
*/
13+
#grid-template, #dialog-template{
14+
display: none;
15+
}
16+
</style>
817
</head>
918

1019
<body>
@@ -22,7 +31,7 @@
2231
</div>
2332
</div>
2433

25-
<script type="text/x-template" id="grid-template">
34+
<template id="grid-template">
2635
<table>
2736
<thead>
2837
<tr>
@@ -47,9 +56,9 @@
4756
</table>
4857
<modal-dialog :mode="mode" :title="title" :fields="columns" :item="item">
4958
</modal-dialog>
50-
</script>
59+
</template>
5160

52-
<script type="text/x-template" id="dialog-template">
61+
<template id="dialog-template">
5362
<div class="dialogs">
5463
<div class="dialog" v-bind:class="{ 'dialog-active': show }">
5564
<div class="dialog-content">
@@ -67,7 +76,7 @@ <h1 class="dialog-title">{{ title }}</h1>
6776
</div>
6877
<div class="dialog-overlay"></div>
6978
</div>
70-
</script>
79+
</template>
7180

7281
<script src="../js/vue.js"></script>
7382
<script>

‎02.Components/Part-2/demo/step03.html

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,15 @@
55
<meta charset="UTF-8">
66
<title></title>
77
<link rel="stylesheet" href="style.css" />
8+
<style>
9+
/*
10+
* 由于IE不支持<template>标签，所以template标签中的内容在IE下会直接显示出来。
11+
* 将模板设为隐藏即可解决这个问题，template标签各浏览器支持请参考：http://caniuse.com/#feat=template
12+
*/
13+
#grid-template, #dialog-template{
14+
display: none;
15+
}
16+
</style>
817
</head>
918

1019
<body>
@@ -22,7 +31,7 @@
2231
</div>
2332
</div>
2433

25-
<script type="text/x-template" id="grid-template">
34+
<template id="grid-template">
2635
<table>
2736
<thead>
2837
<tr>
@@ -52,9 +61,9 @@
5261
<modal-dialog :mode="mode" :title="title" :fields="columns" :item="item" v-on:create-item="createItem">
5362
</modal-dialog>
5463

55-
</script>
64+
</template>
5665

57-
<script type="text/x-template" id="dialog-template">
66+
<template id="dialog-template">
5867
<div class="dialogs">
5968
<div class="dialog" v-bind:class="{ 'dialog-active': show }">
6069
<div class="dialog-content">
@@ -81,7 +90,7 @@ <h1 class="dialog-title">{{ title }}</h1>
8190
</div>
8291
<div class="dialog-overlay"></div>
8392
</div>
84-
</script>
93+
</template>
8594

8695
<script src="../js/vue.js"></script>
8796
<script>

‎02.Components/Part-2/demo/step04.html

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,15 @@
55
<meta charset="UTF-8">
66
<title></title>
77
<link rel="stylesheet" href="style.css" />
8+
<style>
9+
/*
10+
* 由于IE不支持<template>标签，所以template标签中的内容在IE下会直接显示出来。
11+
* 将模板设为隐藏即可解决这个问题，template标签各浏览器支持请参考：http://caniuse.com/#feat=template
12+
*/
13+
#grid-template, #dialog-template{
14+
display: none;
15+
}
16+
</style>
817
</head>
918

1019
<body>
@@ -22,7 +31,7 @@
2231
</div>
2332
</div>
2433

25-
<script type="text/x-template" id="grid-template">
34+
<template id="grid-template">
2635
<table>
2736
<thead>
2837
<tr>
@@ -53,9 +62,9 @@
5362
<modal-dialog :mode="mode" :title="title" :item="item" :fields="columns" v-on:create-item="createItem" v-on:update-item="updateItem">
5463
</modal-dialog>
5564

56-
</script>
65+
</template>
5766

58-
<script type="text/x-template" id="dialog-template">
67+
<template id="dialog-template">
5968
<div class="dialogs">
6069
<div class="dialog" v-bind:class="{ 'dialog-active': show }">
6170
<div class="dialog-content">
@@ -84,7 +93,7 @@ <h1 class="dialog-title">{{ title }}</h1>
8493
</div>
8594
<div class="dialog-overlay"></div>
8695
</div>
87-
</script>
96+
</template>
8897

8998
<script src="../js/vue.js"></script>
9099
<script>

0 commit comments

Comments
 (0)