Skip to content

Commit 77c770e

Browse files
bhnddowinfbhnddowinf
committed
14
1 parent 30f099d commit 77c770e

8 files changed

+10498
-0
lines changed

‎14/01.Object.defineProperty().html

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<title></title>
8+
<link rel="stylesheet" href="">
9+
<script src="vue.js"></script>
10+
</head>
11+
12+
<body>
13+
<script>
14+
var o = {}; // 创建一个新对象
15+
16+
17+
//configurable
18+
//当且仅当该属性的 configurable 为 true 时，该属性才能够被改变，也能够被删除。默认为 false。
19+
20+
//enumerable
21+
//当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中。默认为 false。
22+
23+
//value
24+
//该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。
25+
26+
//writable
27+
//当且仅当仅当该属性的writable为 true 时，该属性才能被赋值运算符改变。默认为 false。
28+
29+
console.log('01 o:' + JSON.stringify(o));
30+
// Example of an object property added with defineProperty with a data property descriptor
31+
Object.defineProperty(o, "a", {
32+
value: 37,
33+
writable: true,
34+
enumerable: true,
35+
configurable: true
36+
});
37+
// 对象o拥有了属性a，值为37
38+
console.log('02 o:' + JSON.stringify(o));
39+
40+
// Example of an object property added with defineProperty with an accessor property descriptor
41+
var bValue;
42+
Object.defineProperty(o, "b", {
43+
get: function() {
44+
return bValue;
45+
},
46+
set: function(newValue) {
47+
bValue = newValue;
48+
},
49+
enumerable: true,
50+
configurable: true
51+
});
52+
o.b = 38;
53+
console.log('03 o:' + JSON.stringify(o));
54+
// 对象o拥有了属性b，值为38
55+
56+
// The value of o.b is now always identical to bValue, unless o.b is redefined
57+
</script>
58+
</body>
59+
60+
</html>

‎14/02.Change Detection Caveats.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<title></title>
8+
<link rel="stylesheet" href="">
9+
<script src="vue.js"></script>
10+
</head>
11+
12+
<body>
13+
<div id="app">
14+
<p>a:{{a}}</p>
15+
a:<input v-model="a">
16+
<p>b:{{b}}</p>
17+
b:<input v-model="b">
18+
</div>
19+
<script>
20+
var data = { a: 1 }
21+
var vm = new Vue({
22+
data: data,
23+
el:'#app'
24+
})
25+
// `vm.a` 和 `data.a` 现在是响应的
26+
27+
vm.b = 2
28+
// `vm.b` 不是响应的
29+
30+
data.b = 2
31+
// `data.b` 不是响应的
32+
33+
</script>
34+
</body>
35+
36+
</html>

‎14/03.Change Detection Caveats2.html

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<title></title>
8+
<link rel="stylesheet" href="">
9+
<script src="vue.js"></script>
10+
<style>
11+
pre {
12+
margin: 0;
13+
padding: 0.3em;
14+
border: 1px dashed #2f6fab;
15+
background-color: #f9f9f9;
16+
color: black;
17+
line-height: 1em;
18+
font-family: verdana, helvetica, sans-serif;
19+
}
20+
</style>
21+
</head>
22+
23+
<body>
24+
<div id="app">
25+
<h1>vm</h1>
26+
<pre>a:{{ a | json 4 }}</pre>
27+
<pre>b:{{ b | json 4 }}</pre>
28+
<pre>c:{{ c | json 4 }}</pre>
29+
<pre>d:{{ d | json 4 }}</pre>
30+
<pre>e:{{ e | json 4 }}</pre>
31+
<pre>someObject:{{ someObject | json 4 }}</pre>
32+
<pre>ajax:{{ ajax | json 4 }}</pre>
33+
34+
</div>
35+
<div id="app1">
36+
<h1>vm1</h1>
37+
<pre>f:{{ f | json 4 }}</pre>
38+
<pre>g:{{ g | json 4 }}</pre>
39+
</div>
40+
<script>
41+
var data = {
42+
a: 1,
43+
someObject: {
44+
x: 10
45+
},
46+
ajax:{}
47+
}
48+
var vm = new Vue({
49+
data: data, // `vm.a` 和 `data.a` 现在是响应的
50+
el: '#app',
51+
created: function() {
52+
// 深拷贝，在原有的 someObject 上，新增 record
53+
this.someObject = Object.assign({}, this.someObject, {
54+
y: 20,
55+
z: 30
56+
});
57+
// 深拷贝，把 a 清空，新增 record
58+
this.a = Object.assign({}, {}, {
59+
o: 20,
60+
p: 30
61+
});
62+
63+
this.$set('ajax',{'book':'台湾小凡喜欢 vue.js','id':'123'}); // 小凡：异步 data ，要有预设值，并且使用 set
64+
65+
} // created end
66+
})
67+
68+
vm.b = 2; // `vm.b` 不是响应的, 实例
69+
70+
data.c = 3; // `data.c` 不是响应的，
71+
72+
vm.$set('d', 4); // 实例，增加 record , 建议要 有预设值，不然会出错
73+
74+
// [Vue warn]: You are setting a non-existent path "d" on a vm instance.
75+
// Consider pre-initializing the property with the "data" option
76+
// for more reliable reactivity and better performance.
77+
78+
Vue.set(data, 'e', 5); // 全局方法
79+
80+
vm.$log(); // 打印 vm
81+
var vm1 = new Vue({
82+
el: '#app1',
83+
data: {
84+
f: {},
85+
g: {}
86+
},
87+
created:function (){
88+
this.$set('f.a',80); // 小凡：异步 data ，要有预设值，并且使用 set
89+
}
90+
});
91+
vm1.$set('g.a', 90); // 小凡：异步 data ，要有预设值，并且使用 set
92+
93+
vm1.$log(); // 打印 vm1
94+
</script>
95+
</body>
96+
97+
</html>

‎14/04.MutationObserver.html

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<title></title>
8+
<link rel="stylesheet" href="">
9+
<script src="vue.js"></script>
10+
<style>
11+
pre {
12+
margin: 0;
13+
padding: 0.3em;
14+
border: 1px dashed #2f6fab;
15+
background-color: #f9f9f9;
16+
color: black;
17+
line-height: 1em;
18+
font-family: verdana, helvetica, sans-serif;
19+
}
20+
body{
21+
margin-top: 100px;
22+
}
23+
</style>
24+
</head>
25+
26+
<body>
27+
<div id="app">
28+
<h1>vm</h1>
29+
<input type='text' v-model='a'> {{a}}
30+
</div>
31+
<div id='mo'></div>
32+
<script>
33+
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
34+
35+
// 选择目标节点
36+
var target = document.querySelector('#app');
37+
38+
// 创建观察者对象
39+
var observer = new MutationObserver(function(mutations) {
40+
mutations.forEach(function(mutation) {
41+
var d = new Date();
42+
console.log('有变化了：'+mutation.type+',时间：'+d.getTime());
43+
});
44+
});
45+
46+
// 配置观察选项:
47+
var config = {
48+
attributes: true,
49+
childList: true,
50+
characterData: true
51+
}
52+
53+
// 传入目标节点和观察选项
54+
observer.observe(target, config);
55+
56+
var vm = new Vue({
57+
data: {
58+
a: 1
59+
},
60+
el: '#app',
61+
})
62+
setTimeout(function() {
63+
document.getElementById('app').innerHTML = '台湾小凡喜欢 vue.js';
64+
}, 2000);
65+
66+
</script>
67+
</body>
68+
69+
</html>

‎14/05.Async Update Queue.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<title></title>
8+
<link rel="stylesheet" href="">
9+
<script src="vue.js"></script>
10+
<style>
11+
pre {
12+
margin: 0;
13+
padding: 0.3em;
14+
border: 1px dashed #2f6fab;
15+
background-color: #f9f9f9;
16+
color: black;
17+
line-height: 1em;
18+
font-family: verdana, helvetica, sans-serif;
19+
}
20+
21+
body {
22+
margin-top: 100px;
23+
}
24+
</style>
25+
</head>
26+
27+
<body>
28+
<div id="example">{{msg}}</div>
29+
<script>
30+
var vm = new Vue({
31+
el: '#example',
32+
data: {
33+
msg: '123'
34+
}
35+
})
36+
vm.msg = 'new message' // change data
37+
console.log(vm.$el.textContent === 'new message') // false
38+
Vue.nextTick(function() {
39+
console.log(vm.$el.textContent === 'new message') // true
40+
})
41+
</script>
42+
</body>
43+
44+
</html>

‎14/06.Async Update Queue1.html

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<title></title>
8+
<link rel="stylesheet" href="">
9+
<script src="vue.js"></script>
10+
<style>
11+
pre {
12+
margin: 0;
13+
padding: 0.3em;
14+
border: 1px dashed #2f6fab;
15+
background-color: #f9f9f9;
16+
color: black;
17+
line-height: 1em;
18+
font-family: verdana, helvetica, sans-serif;
19+
}
20+
21+
body {
22+
margin-top: 100px;
23+
}
24+
</style>
25+
</head>
26+
27+
<body>
28+
<div id="example">
29+
{{msg}}
30+
<hr>
31+
<example></example>
32+
</div>
33+
<script>
34+
Vue.component('example', {
35+
template: '<span>{{msg}}<button @click="updateMessage">updateMessage</button></span>',
36+
data: function() {
37+
return {
38+
msg: 'not updated'
39+
}
40+
},
41+
methods: {
42+
updateMessage: function() {
43+
this.msg = 'updated'
44+
console.log(this.$el.textContent) // => 'not updated'
45+
this.$nextTick(function() {
46+
console.log(this.$el.textContent) // => 'updated'
47+
})
48+
}
49+
}
50+
})
51+
var vm = new Vue({
52+
el: '#example',
53+
data: {
54+
msg: '123'
55+
}
56+
})
57+
</script>
58+
</body>
59+
60+
</html>

0 commit comments

Comments
 (0)