Skip to content

Commit e0bae9e

Browse files
ygs-codeygs-code
authored
Add files via upload
0 parents  commit e0bae9e

File tree

100 files changed

+7562
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

100 files changed

+7562
-0
lines changed

‎0.html

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<script src="vue.js"></script>
7+
8+
9+
10+
</head>
11+
<body>
12+
13+
<div id="app">
14+
<!--this is comment--> {{ message }}
15+
</div>
16+
<div id="app1">
17+
<div >
18+
19+
<!--count={{count}}-->
20+
<!--reversedCount={{reversedCount}}-->
21+
</div>
22+
23+
24+
</div>
25+
26+
27+
<script>
28+
console.log( Object.keys('abcd'))
29+
debugger;
30+
console.log('=====return 1=======')
31+
console.log( new Function('return 1'))
32+
33+
console.log('return='+ new Function(("return " + function () {
34+
35+
})));
36+
37+
38+
39+
var app = new Vue({
40+
41+
el: '#app',
42+
beforeCreate(){
43+
44+
},
45+
created(){
46+
47+
},
48+
beforeMount(){
49+
50+
},
51+
mounted: ()=> { //挂载元素，获取到DOM节点
52+
setTimeout(()=>{
53+
// this.count+=1;
54+
// console.log('this.count='+this.count)
55+
},1000)
56+
},
57+
beforeUpdate(){
58+
59+
},
60+
updated(){ //挂载元素，获取到DOM节点
61+
},
62+
beforeDestroy(){
63+
64+
},
65+
destroyed(){
66+
67+
},
68+
data:function () {
69+
return {
70+
count:0,
71+
72+
message: 'Hello Vue!1111111'
73+
}
74+
},
75+
// data: {
76+
// count:0,
77+
// message: 'Hello Vue!'
78+
// }
79+
})
80+
var app1 = new Vue({
81+
comments:true,
82+
el: '#app1',
83+
beforeCreate(){
84+
85+
},
86+
created(){
87+
88+
},
89+
beforeMount(){
90+
91+
},
92+
methods:{
93+
click:function () {
94+
console.log('点击事件')
95+
}
96+
},
97+
mounted: function (){ //挂载元素，获取到DOM节点
98+
setTimeout(()=>{
99+
console.log(this.count)
100+
this.count++;
101+
console.log('this.count=')
102+
console.log(this.count)
103+
},1000)
104+
},
105+
computed: {
106+
// 计算属性的 getter
107+
reversedCount: function () {
108+
// `this` 指向 vm 实例
109+
return this.count++;
110+
}
111+
},
112+
113+
beforeUpdate(){
114+
115+
},
116+
updated(){ //挂载元素，获取到DOM节点
117+
},
118+
beforeDestroy(){
119+
120+
},
121+
destroyed(){
122+
123+
},
124+
data: {
125+
count:0,
126+
127+
message: 'Hello Vue!2222'
128+
}
129+
})
130+
</script>
131+
132+
</body>
133+
</html>

‎05自定义指令.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<script src="vue.js"></script>
7+
</head>
8+
<body>
9+
<div id="app">
10+
<my-comp v-if="msg" :msg="msg"></my-comp>
11+
<button @click="update">更新</button>
12+
<button @click="uninstall">卸载</button>
13+
<button @click="install">安装</button>
14+
</div>
15+
<script type="text/javascript">
16+
Vue.component('button-counter', {
17+
18+
19+
data: function () {
20+
return {
21+
count: 0
22+
}
23+
},
24+
mounted: ()=> { //挂载元素，获取到DOM节点
25+
26+
},
27+
template: '<button v-hello="123">You clicked me times.</button>'
28+
})
29+
Vue.directive('hello', {
30+
bind: function (el){
31+
console.log('bind:');
32+
},
33+
inserted: function (el){
34+
console.log('inserted:');
35+
},
36+
update: function (el){
37+
console.log('update:');
38+
},
39+
componentUpdated: function (el){
40+
console.log('componentUpdated:');
41+
},
42+
unbind: function (el){
43+
console.log('unbind:');
44+
}
45+
});
46+
47+
var myComp = {
48+
template: '<button-counter >{{msg}}</button-counter>',
49+
props: {
50+
msg: String
51+
}
52+
}
53+
54+
new Vue({
55+
el: '#app',
56+
data: {
57+
msg: 'Hello'
58+
},
59+
components: {
60+
myComp: myComp
61+
},
62+
methods: {
63+
update: function (){
64+
this.msg = 'Hi';
65+
},
66+
uninstall: function (){
67+
this.msg = '';
68+
},
69+
install: function (){
70+
this.msg = 'Hello';
71+
}
72+
}
73+
})
74+
</script>
75+
</body>
76+
</html>

‎06provide组件通信.html

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<script src="vue.js"></script>
7+
</head>
8+
<body>
9+
<div id="components-demo">
10+
<button-counter id="123"></button-counter>
11+
</div>
12+
<div id="app">
13+
{{ message }}
14+
</div>
15+
16+
<script>
17+
// function person (){
18+
// this.options='aaa'
19+
// }
20+
//
21+
// person.constructor={aa:'c'}
22+
// person.prototype.options='span'
23+
//
24+
// console.log(person.constructor.options)
25+
// console.log(Object.create(person.constructor.options));
26+
// new Vue({})
27+
var obj = {
28+
name: 'name',
29+
age: 29
30+
}
31+
var arr = []
32+
var res = new Array(obj.length);
33+
34+
console.log(obj.length)
35+
console.log(res)
36+
console.log(arr.length)
37+
38+
39+
Vue.component('button-counter', {
40+
props:['id'],
41+
functional:true,
42+
inject: ['foo'],
43+
data: function () {
44+
return {
45+
count: 0
46+
}
47+
},
48+
mounted: ()=> { //挂载元素，获取到DOM节点
49+
console.log('==this.foo==')
50+
console.log(this.foo)
51+
52+
},
53+
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
54+
})
55+
56+
new Vue({el: '#components-demo'})
57+
58+
var app = new Vue({
59+
el: '#app',
60+
provide: {
61+
foo: 'bar'
62+
},
63+
beforeCreate(){
64+
65+
},
66+
created(){
67+
68+
},
69+
beforeMount(){
70+
71+
},
72+
mounted: ()=> { //挂载元素，获取到DOM节点
73+
74+
setTimeout(()=>{
75+
this.count=11;
76+
console.log('this.count='+this.count)
77+
},5000)
78+
},
79+
beforeUpdate(){
80+
81+
},
82+
updated(){ //挂载元素，获取到DOM节点
83+
},
84+
beforeDestroy(){
85+
86+
},
87+
destroyed(){
88+
89+
},
90+
data: {
91+
count:0,
92+
message: 'Hello Vue!'
93+
}
94+
})
95+
</script>
96+
97+
</body>
98+
</html>

‎07.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<script src="vue.js"></script>
7+
</head>
8+
<body>
9+
<div id="example">
10+
<my-component :msg="count" >
11+
12+
</my-component>
13+
</div>
14+
<script >
15+
16+
// 注册
17+
Vue.component('my-component', {
18+
// _isComponent:true,
19+
props: ['msg'],
20+
template: '<div>{{msg}} A custom component!</div>'
21+
})
22+
23+
// 创建根实例
24+
25+
var app = new Vue({
26+
el: '#example',
27+
beforeCreate(){
28+
29+
},
30+
created(){
31+
32+
},
33+
beforeMount(){
34+
35+
},
36+
mounted: function () {
37+
38+
39+
},
40+
beforeUpdate(){
41+
42+
},
43+
updated(){ //挂载元素，获取到DOM节点
44+
},
45+
beforeDestroy(){
46+
47+
},
48+
destroyed(){
49+
50+
},
51+
data: {
52+
count:0,
53+
message: 'Hello Vue!'
54+
}
55+
})
56+
</script>
57+
58+
</body>
59+
</html>

0 commit comments

Comments
 (0)