Skip to content

Commit 29c8a89

Browse files
j717273419j717273419
committed
更新vue cdn链接，添加vue组件创建方法x-template
1 parent 251763e commit 29c8a89

35 files changed

+229
-118
lines changed

‎@vue-exercise-template.htm

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<head>
3-
<script src="https://unpkg.com/vue"></script>
3+
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
44

55
</head>
66
<body>

‎Vue Component/vue-component-demo event val.vue

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div class="hello" @click="show">Hello {{who}}</div>
3+
</template>
4+
5+
<script>
6+
module.exports = {
7+
data: function() {
8+
return {
9+
who: 'world'
10+
}
11+
},
12+
methods: {
13+
show: function () {
14+
alert('from child')
15+
}
16+
},
17+
18+
}
19+
</script>
20+
21+
<style scoped>
22+
.hello {
23+
background-color: rgb(241, 64, 19);
24+
}
25+
</style>

‎Vue Component/vue-component-demo.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ module.exports = {
1212
}
1313
</script>
1414

15-
<style>
15+
<style scoped>
1616
.hello {
1717
background-color: #ffe;
1818
}

‎Vue Component/vue-exercise-16-component-basic parents send val to child.htm

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
<html>
2-
<head>
3-
<script src="https://unpkg.com/vue"></script>
4-
</head>
5-
<body>
6-
<div id="app">
7-
<h1>父组件传值到子组件，通过在vue组件中设置props实现</h1>
8-
<props-demo title="My Last Class"></props-demo>
9-
</div>
10-
<script>
11-
Vue.component("props-demo", {
12-
props: ["title"],
13-
template: "<h4>my title is {{title}}</h4>",
14-
});
15-
const app = new Vue({
16-
el:"#app"
17-
});
18-
</script>
19-
</body>
20-
</html>
2+
3+
<head>
4+
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
5+
</head>
6+
7+
<body>
8+
<div id="app">
9+
<h1>父组件传值到子组件，通过在vue组件中设置props实现</h1>
10+
<props-demo title="My Last Class"></props-demo>
11+
</div>
12+
<script>
13+
Vue.component("props-demo", {
14+
props: ["title"],
15+
template: "<h4>my title is {{title}}</h4>",
16+
});
17+
const app = new Vue({
18+
el: "#app"
19+
});
20+
</script>
21+
</body>
22+
23+
</html>

‎Vue Component/vue-exercise-16-component-basic.htm

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<html>
22

33
<head>
4-
<script src="https://unpkg.com/vue"></script>
4+
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
55
</head>
66

77
<body>

‎Vue Component/vue-exercise-16-component-refs.htm

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<html>
22

33
<head>
4-
<script src="https://unpkg.com/vue"></script>
4+
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
55
</head>
66

77
<body>

‎Vue Component/vue-exercise-16-component-slot.htm

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<html>
22

33
<head>
4-
<script src="https://unpkg.com/vue"></script>
4+
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
55
</head>
66

77
<body>

‎Vue Component/vue-exercise-16-component-vue-loader.htm

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<script src="https://unpkg.com/vue"></script>
4+
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
55
<script src="https://unpkg.com/http-vue-loader"></script>
66
</head>
77

‎Vue Component/vue-exercise-17-component-single-file.htm

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<html>
22

33
<head>
4-
<script src="https://unpkg.com/vue"></script>
4+
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
55
</head>
66

77
<body>

‎Vue Component/vue-exercise-18-component-props.htm

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
<html>
22

33
<head>
4-
<script src="https://unpkg.com/vue"></script>
4+
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
55
</head>
66

77
<body>
88
<div id="app">
99
<h5>一个vue组件的综合小实例,同时显示2个vue组件,通过api获取数据并绑定到vue组件</h5>
1010
<button-counter></button-counter>
11-
<hr/>
11+
<hr />
1212
<props-demo title="Vue.js React Angular"></props-demo>
13-
<hr/>
14-
<props-demo
15-
v-for="user in users"
16-
v-bind:key="user.id"
17-
v-bind:title="user.name"
18-
></props-demo>
13+
<hr />
14+
<props-demo v-for="user in users" v-bind:key="user.id" v-bind:title="user.name"></props-demo>
1915
</div>
2016

2117
<script>
@@ -33,26 +29,26 @@ <h5>一个vue组件的综合小实例,同时显示2个vue组件,通过api获取
3329
}
3430
});
3531

36-
Vue.component('props-demo',{
37-
props:["title"],
38-
template:'<h4>{{title}}</h4>'
32+
Vue.component('props-demo', {
33+
props: ["title"],
34+
template: '<h4>{{title}}</h4>'
3935
});
4036

4137
var vm = new Vue({
4238
el: "#app",
43-
data:{
44-
users:[],
39+
data: {
40+
users: [],
4541
},
46-
created:function(){
47-
var vm2 = this;
48-
fetch("https://jsonplaceholder.typicode.com/users")
49-
.then(function(response){
50-
return response.json();
51-
})
52-
.then(function(data){
53-
vm2.users = data;
54-
});
55-
}
42+
created: function () {
43+
var vm2 = this;
44+
fetch("https://jsonplaceholder.typicode.com/users")
45+
.then(function (response) {
46+
return response.json();
47+
})
48+
.then(function (data) {
49+
vm2.users = data;
50+
});
51+
}
5652
});
5753
</script>
5854

‎Vue Component/vue-exercise-19-component-x-template.htm

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<html>
2+
3+
<head>
4+
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
5+
</head>
6+
7+
<body>
8+
<div id="app">
9+
<button-counter></button-counter>
10+
<br>
11+
<button-counter2></button-counter2>
12+
</div>
13+
<script type="text/x-template" id="x-template">
14+
<div>
15+
<h1>vue component demo basic</h1>
16+
<button @click="Add">You clicked me {{count}} times.</button>
17+
</div>
18+
</script>
19+
<script>
20+
Vue.component("button-counter", {
21+
data: function () {
22+
return {
23+
count: 0,
24+
}
25+
},
26+
template: '#x-template',
27+
methods: {
28+
Add: function () {
29+
this.count++;
30+
}
31+
}
32+
});
33+
34+
var vm = new Vue({
35+
el: "#app",
36+
});
37+
</script>
38+
39+
<p>
40+
x-template
41+
使用此方法，你的模板被定义在例如 index.html 文件中的 script 标签里。此 script 标签使用 text/x-template 标记，并由组件定义的 id 引用。
42+
这种方法，它允许你使用适当的 HTML 标记编写你的 HTML，不过不好的一面是，它把模板和组件定义的其它部分分离开来。
43+
44+
</p>
45+
</body>
46+
47+
</html>

‎Vue Component/vue-exercise-20-component-vue-loader-event-val.htm

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<html>
2+
3+
<head>
4+
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
5+
<script src="https://unpkg.com/http-vue-loader"></script>
6+
</head>
7+
8+
<body>
9+
<div id="app">
10+
<testdemo></testdemo>
11+
<hr>
12+
<testdemo2></testdemo2>
13+
</div>
14+
<script>
15+
16+
var vm = new Vue({
17+
el: "#app",
18+
components: {
19+
'testdemo': httpVueLoader('/Vue Component/vue-component-demo event val.vue'),
20+
'testdemo2': httpVueLoader('/Vue Component/vue-component-demo.vue'),
21+
}
22+
23+
});
24+
</script>
25+
26+
<p>
27+
28+
</p>
29+
</body>
30+
31+
</html>

‎Vue Router/vue-router-exercise-01-hello-world.htm

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<head>
3-
<script src="https://unpkg.com/vue"></script>
3+
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
44
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
55
</head>
66
<body>

‎Vue Router/vue-router-exercise-01-path-query-params.htm

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<head>
3-
<script src="https://unpkg.com/vue"></script>
3+
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
44
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
55
</head>
66
<body>

‎vue-ajax demo/vue-exercise-ajax-get 1 demo.htm

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<html>
22

33
<head>
4-
<script src="https://unpkg.com/vue"></script>
4+
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
55
<script src="https://unpkg.com/[email protected]/dist/axios.js"></script>
66
</head>
77

‎vue-ajax demo/vue-exercise-ajax-get 2.htm

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<html>
22

33
<head>
4-
<script src="https://unpkg.com/vue"></script>
4+
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
55
<script src="https://unpkg.com/[email protected]/dist/axios.js"></script>
66
</head>
77

‎vue-ajax demo/vue-exercise-ajax-get 3 bind select.htm

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<html>
22

33
<head>
4-
<script src="https://unpkg.com/vue"></script>
4+
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
55
<script src="https://unpkg.com/[email protected]/dist/axios.js"></script>
66
</head>
77

‎vue-ajax demo/vue-exercise-ajax-get 4 axios encapsulation.htm

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<head>
3-
<script src="https://unpkg.com/vue"></script>
3+
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
44
<script src="https://unpkg.com/[email protected]/dist/axios.js"></script>
55
</head>
66

‎vue-ajax demo/vue-exercise-ajax-post.htm

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<html>
22

33
<head>
4-
<script src="https://unpkg.com/vue"></script>
4+
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
55
<script src="https://unpkg.com/[email protected]/dist/axios.js"></script>
66
</head>
77

‎vue-exercise-01-hello-world.htm

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
11
<html>
2-
<head>
3-
<script src="https://unpkg.com/vue"></script>
42

5-
</head>
6-
<body>
3+
<head>
4+
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
75

8-
<div id="app">
9-
<p>{{ message }}</p>
10-
</div>
6+
</head>
117

12-
<script>
8+
<body>
9+
10+
<div id="app">
11+
<p>{{ message }}</p>
12+
</div>
13+
14+
<script>
1315
new Vue({
14-
el: '#app',
15-
data: {
16-
message: 'Hello Vue.js!'
17-
}
18-
})
19-
</script>
20-
</body>
16+
el: '#app',
17+
data: {
18+
message: 'Hello Vue.js!'
19+
}
20+
})
21+
</script>
22+
</body>
23+
2124
</html>

0 commit comments

Comments
 (0)