-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1435 lines (753 loc) · 134 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html class="theme-next pisces use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.9.0">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">
<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">
<link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">
<meta name="keywords" content="Hexo, NexT">
<meta name="description" content="love coding, love life">
<meta property="og:type" content="website">
<meta property="og:title" content="Eastboat">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Eastboat">
<meta property="og:description" content="love coding, love life">
<meta property="og:locale" content="zh-Hans">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Eastboat">
<meta name="twitter:description" content="love coding, love life">
<script type="text/javascript" id="hexo.configurations">
var NexT = window.NexT || {};
var CONFIG = {
root: '/',
scheme: 'Pisces',
version: '5.1.4',
sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
fancybox: true,
tabs: true,
motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
duoshuo: {
userId: '0',
author: '博主'
},
algolia: {
applicationID: '',
apiKey: '',
indexName: '',
hits: {"per_page":10},
labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
}
};
</script>
<link rel="canonical" href="http://yoursite.com/">
<title>Eastboat</title>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
<div class="container sidebar-position-left
page-home">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-wrapper">
<div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">Eastboat</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle"></p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br>
首页
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives/" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
归档
</a>
</li>
<li class="menu-item menu-item-something">
<a href="/something" rel="section">
<i class="menu-item-icon fa fa-fw fa-question-circle"></i> <br>
我的有料
</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<section id="posts" class="posts-expand">
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2019/02/20/vue项目开发(二)/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Eastboat">
<meta itemprop="description" content>
<meta itemprop="image" content="/images/1.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Eastboat">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2019/02/20/vue项目开发(二)/" itemprop="url">vue项目开发(二)</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2019-02-20T23:27:56+08:00">
2019-02-20
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="六-Vue指令-Directive"><a href="#六-Vue指令-Directive" class="headerlink" title="六 Vue指令(Directive)"></a>六 Vue指令(Directive)</h1><h4 id="条件渲染指令"><a href="#条件渲染指令" class="headerlink" title="条件渲染指令"></a>条件渲染指令</h4><ul>
<li>v-if</li>
<li>v-else (必须紧跟v-if其后)</li>
<li>v-show <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">区别：</span><br><span class="line">1.v-show通过改变元素的css属性display，v-if通过适当的销毁和重建元素，是真正的条件渲染</span><br><span class="line">2.v-if适合条件不经常改变的场景，v-show适合频繁切换</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="列表渲染指令v-for"><a href="#列表渲染指令v-for" class="headerlink" title="列表渲染指令v-for"></a>列表渲染指令v-for</h4><ul>
<li><p>遍历数组</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><div v-for="(item,index) in items"></div></span><br><span class="line">// item为每次遍历的元素</span><br><span class="line">// index为下标索引</span><br><span class="line">// item表示数组或对象</span><br></pre></td></tr></table></figure>
</li>
<li><p>遍历对象</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><div v-for="(value,key,index) in personObj" :key="index"></div></span><br><span class="line"></span><br><span class="line">// index 索引</span><br><span class="line">// key</span><br><span class="line">// value</span><br></pre></td></tr></table></figure>
</li>
<li><p>key属性</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">为了方便Vue实例跟踪每个节点的身份，从而重用或重新排列现有的元素</span><br><span class="line">key需要通过v-bind来绑定动态值，尽可能在使用v-for时提供key属性</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="方法和事件"><a href="#方法和事件" class="headerlink" title="方法和事件"></a>方法和事件</h4><blockquote>
<p>v-on:事件名=”fn()” 函数定义在vue的选项methods中，没有参数时候后面的参数可以省略</p>
<ul>
<li>v-on可以简写成@符号</li>
<li>事件修饰符</li>
</ul>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><span class="line">//event的事件可以使用vue事件的修饰符来实现.在@绑定的事件后面加上小圆点，在跟一个后缀来是使用修饰符</span><br><span class="line">1.stop</span><br><span class="line">2.prevent</span><br><span class="line">3.capture</span><br><span class="line">4.self</span><br><span class="line">5.once</span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- 组织单击事件冒泡--></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">""</span> @<span class="attr">click.stop</span>=<span class="string">'handle'</span>></span>阻止单击事件冒泡<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> </span><br><span class="line"> <span class="comment"><!-- 提交事件不再重载页面 --></span></span><br><span class="line"> <span class="tag"><<span class="name">form</span> <span class="attr">action</span>=<span class="string">""</span> @<span class="attr">submit.prevent</span>=<span class="string">''</span><span class="attr">handle</span>></span><span class="tag"></<span class="name">form</span>></span></span><br><span class="line"> </span><br><span class="line"> <span class="comment"><!-- 修饰符可以串联 --></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">""</span> @<span class="attr">click.stop.prevent</span>=<span class="string">'handle'</span>></span><span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> </span><br><span class="line"> <span class="comment"><!-- 只有修饰符 --></span></span><br><span class="line"> <span class="tag"><<span class="name">form</span> <span class="attr">action</span>=<span class="string">""</span> @<span class="attr">submit.prevent</span>></span><span class="tag"></<span class="name">form</span>></span></span><br><span class="line"> </span><br><span class="line"> <span class="comment"><!-- 添加事件侦听器时使用时间捕获模式 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> @<span class="attr">click.capture</span>=<span class="string">'handle'</span>></span>..<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> </span><br><span class="line"> <span class="comment"><!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> @<span class="attr">click.self</span>=<span class="string">'handle'</span>></span>..<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> </span><br><span class="line"> <span class="comment"><!-- 只触发一次，组件同样适用 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> @<span class="attr">click.once</span>=<span class="string">'handle'</span>></span>..<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> </span><br><span class="line"> <span class="comment"><!-- 在表单元素上监听键盘事件时。还可以使用按键修饰符，比如按下具体的某个键时才调用方法 --></span></span><br><span class="line"> <span class="comment"><!-- 只有在keyCode是13时调用vm.submit() --></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> @<span class="attr">keyup.13</span>=<span class="string">'submit'</span>></span></span><br><span class="line"> <span class="comment"><!-- </span></span><br><span class="line"><span class="comment"> 也可以自己配置具体的按键 </span></span><br><span class="line"><span class="comment"> Vue.config.keyCodes.f1=112;</span></span><br><span class="line"><span class="comment"> 全局定义后，就可以使用@keyup.f1</span></span><br><span class="line"><span class="comment"> </span></span><br><span class="line"><span class="comment"> 除了某个具体的keyCode外，vue还提供了一些快捷名称，以下是全部的别名</span></span><br><span class="line"><span class="comment"> .enter</span></span><br><span class="line"><span class="comment"> .tab</span></span><br><span class="line"><span class="comment"> .delete</span></span><br><span class="line"><span class="comment"> .esc</span></span><br><span class="line"><span class="comment"> .space</span></span><br><span class="line"><span class="comment"> .up</span></span><br><span class="line"><span class="comment"> .down</span></span><br><span class="line"><span class="comment"> .left</span></span><br><span class="line"><span class="comment"> .right</span></span><br><span class="line"><span class="comment"> 这些按键修饰符还可以组合使用，或和鼠标一起配合使用</span></span><br><span class="line"><span class="comment"> .ctrl</span></span><br><span class="line"><span class="comment"> .alt</span></span><br><span class="line"><span class="comment"> .shift</span></span><br><span class="line"><span class="comment"> .meta （mac下Command键 WIndows是窗口键）</span></span><br><span class="line"><span class="comment"> --></span></span><br></pre></td></tr></table></figure>
<h4 id="表单双向绑定v-model"><a href="#表单双向绑定v-model" class="headerlink" title="表单双向绑定v-model"></a>表单双向绑定v-model</h4><ul>
<li>v-model只能用在input,select，textarea等表单元素上</li>
<li>修饰符<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">1. lazy将改变默认的同步状态，在change事件中同步</span><br><span class="line">2. trim将自动过滤输入的首尾空格</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h1 id="七-组件详解"><a href="#七-组件详解" class="headerlink" title="七 组件详解"></a>七 组件详解</h1><h4 id="组件概念和复用"><a href="#组件概念和复用" class="headerlink" title="组件概念和复用"></a>组件概念和复用</h4><h4 id="使用props传递数据"><a href="#使用props传递数据" class="headerlink" title="使用props传递数据"></a>使用props传递数据</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">组件的内容不仅仅是对模板的复用，更重要的是组件之间的通讯.</span></span><br><span class="line"><span class="comment">父组件向子组件传递数据和参数，子组件接收到参数后再根据参数的</span></span><br><span class="line"><span class="comment">不同来渲染不同的内容或执行操作，这个正向传递的过程就是通过props来实现的</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>props来声明需要从父组件接受的数据，值类型为数组和对象，对象中可以自定义数据类型<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">为什么子组件的数据需要从父组件中去获取？</span></span><br><span class="line"><span class="comment">做项目中组件很多，大部分数据都是有后台提供，</span></span><br><span class="line"><span class="comment">如果每个组件都向后台去申请获取数据，</span></span><br><span class="line"><span class="comment">这样的效率是很低下的，管理这些数据也比较麻烦，</span></span><br><span class="line"><span class="comment">所以采取的方法是,所有数据都在页面级的组件中去获取，</span></span><br><span class="line"><span class="comment">子组件如果需要数据就可以通过父组件将所需要的数据传</span></span><br><span class="line"><span class="comment">递给子组件，这样项目中的数据就很方便的管理</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="comment">//父组件</span></span><br><span class="line"><template></span><br><span class="line"> <div <span class="class"><span class="keyword">class</span></span>=<span class="string">"page"</span>></span><br><span class="line"> <h3>这是列表页<<span class="regexp">/h3></span></span><br><span class="line"><span class="regexp"> <button @click="skip()">跳转到详情页</</span>button></span><br><span class="line"> <!--使用组件--></span><br><span class="line"> <list-item message=<span class="string">"来自列表页的数据"</span>><<span class="regexp">/list-item></span></span><br><span class="line"><span class="regexp"> </</span>div></span><br><span class="line"><<span class="regexp">/template></span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp"><script></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/引入组件</span></span><br><span class="line"><span class="regexp">import ListItem from "@/</span>components/ticketlist/listitem<span class="string">"</span></span><br><span class="line"><span class="string">export defalt{</span></span><br><span class="line"><span class="string"> components:{</span></span><br><span class="line"><span class="string"> ListItem //注册组件</span></span><br><span class="line"><span class="string"> }</span></span><br><span class="line"><span class="string">}</span></span><br><span class="line"><span class="string"></script></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">//子组件</span></span><br><span class="line"><span class="string"><template></span></span><br><span class="line"><span class="string"> <div class="</span>list<span class="string">"></span></span><br><span class="line"><span class="string"> <p>{{message}}</p></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"></template></span></span><br><span class="line"><span class="string"><script></span></span><br><span class="line"><span class="string"> export default{</span></span><br><span class="line"><span class="string"> props:['message']</span></span><br><span class="line"><span class="string"> }</span></span><br><span class="line"><span class="string"></script></span></span><br></pre></td></tr></table></figure></p>
</blockquote>
<h6 id="单向数据流"><a href="#单向数据流" class="headerlink" title="单向数据流"></a>单向数据流</h6><blockquote>
<p>为了保证父组件和子组件完全解耦，避免子组件无意修改了父组件的状态</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">业务中经常遇到两种需要改变props传递过来数据的情况</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//1.父组件传递初始值，子组件将其作为初始值保存起来</span></span><br><span class="line"><template></span><br><span class="line"> <div <span class="class"><span class="keyword">class</span></span>=<span class="string">"page"</span>></span><br><span class="line"> <!--使用组件--></span><br><span class="line"> <list-item :message=<span class="string">"normalVariable"</span>><<span class="regexp">/list-item></span></span><br><span class="line"><span class="regexp"> </</span>div></span><br><span class="line"><<span class="regexp">/template></span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp"><script></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/引入组件</span></span><br><span class="line"><span class="regexp">import ListItem from "@/</span>components/ticketlist/listitem<span class="string">"</span></span><br><span class="line"><span class="string">export defalt{</span></span><br><span class="line"><span class="string"> data(){</span></span><br><span class="line"><span class="string"> return{</span></span><br><span class="line"><span class="string"> mormalVariable:"</span>初始值<span class="string">" </span></span><br><span class="line"><span class="string"> }</span></span><br><span class="line"><span class="string"> },</span></span><br><span class="line"><span class="string"> components:{</span></span><br><span class="line"><span class="string"> ListItem //注册组件</span></span><br><span class="line"><span class="string"> }</span></span><br><span class="line"><span class="string">}</span></span><br><span class="line"><span class="string"></script></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> //子组件</span></span><br><span class="line"><span class="string"> <template></span></span><br><span class="line"><span class="string"> <div class="</span>page-child<span class="string">"></span></span><br><span class="line"><span class="string"> <p>{{receive}}</p></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> </templte></span></span><br><span class="line"><span class="string"> export dafault{</span></span><br><span class="line"><span class="string"> data(){</span></span><br><span class="line"><span class="string"> return{</span></span><br><span class="line"><span class="string"> receive:this.message //只需要维护receive不需要操作message</span></span><br><span class="line"><span class="string"> }</span></span><br><span class="line"><span class="string"> },</span></span><br><span class="line"><span class="string"> props:["</span>message<span class="string">"]</span></span><br><span class="line"><span class="string"> }</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">//2.另一种情况是props作为需要被转变的原始值传入，这种情况用计算属性就可以了</span></span><br></pre></td></tr></table></figure>
<h4 id="组件通信"><a href="#组件通信" class="headerlink" title="组件通信"></a>组件通信</h4><ul>
<li>自定义事件以及$emit方法<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.$emit(<span class="string">'event'</span>,val)</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">vue实例方法$emit</span></span><br><span class="line"><span class="comment">参数event为自定义事件名</span></span><br><span class="line"><span class="comment">参数val代表通过自定义事件传递的值(可选)</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<blockquote>
<p>子组件传值给父组件的时候，事件触发及接受原则是:<strong> 谁触发的监听谁接受 </strong></p>
</blockquote>
<ul>
<li>兄弟组件通信的处理方式<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">利用props和$emit的综合使用</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="slot插槽分发内容"><a href="#slot插槽分发内容" class="headerlink" title="slot插槽分发内容"></a>slot插槽分发内容</h4><ul>
<li><p>匿名插槽</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">//假设现在有一个弹出提示框，头部，中间，底部，只有中间区域改变</span><br><span class="line">// 子组件</span><br><span class="line"><div class="child></span><br><span class="line"> <slot>如果没有分内容则显示此段话</slot></span><br><span class="line"></div></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">//父组件</span><br><span class="line"><child></span><br><span class="line"> <h1>显示弹出的内容</h1></span><br><span class="line"></child></span><br></pre></td></tr></table></figure>
</li>
<li><p>具名插槽</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">// 子组件</span><br><span class="line"><div class="child></span><br><span class="line"> <slot name="CPU">CPU插槽</slot></span><br><span class="line"> <slot name="GPU">显卡插槽</slot></span><br><span class="line"> <slot name="Memory">内存插槽</slot></span><br><span class="line"> <slot name="Hard-drive">硬盘插槽</slot></span><br><span class="line"></div></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">//父组件</span><br><span class="line"><child></span><br><span class="line"> <div slot="CPU"></div></span><br><span class="line"> <div slot="GPU"></div></span><br><span class="line"> <div slot="Memory"></div></span><br><span class="line"> <div slot="Hard-drive"></div></span><br><span class="line"></child></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h1 id="八计算属性和侦听器"><a href="#八计算属性和侦听器" class="headerlink" title="八计算属性和侦听器"></a>八计算属性和侦听器</h1><h5 id="计算属性"><a href="#计算属性" class="headerlink" title="计算属性"></a>计算属性</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1、计算属性是基于他依赖缓存的，一个计算属性所依赖的数据发生变化的时候它才会重新计算取值</span><br><span class="line">2、methods不同，只要重新渲染，方法就会被调，函数就会执行</span><br><span class="line">3、究竟使用什么取决于是否需要缓存，当遍历大数组和计算量很大时，应使用计算属性，除非不希望得到缓存</span><br></pre></td></tr></table></figure>
<h1 id="九插件的使用"><a href="#九插件的使用" class="headerlink" title="九插件的使用"></a>九插件的使用</h1><h4 id="状态管理和vuex"><a href="#状态管理和vuex" class="headerlink" title="状态管理和vuex"></a>状态管理和vuex</h4><ul>
<li>安装 cnpm installl vuex –save</li>
<li><p>使用</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//@/store/index.js</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> Vuex <span class="keyword">from</span> <span class="string">'vuex'</span></span><br><span class="line">Vue.use(Vuex)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Vuex.Store({</span><br><span class="line"> state:{</span><br><span class="line"> <span class="comment">//state存放数据</span></span><br><span class="line"> count:<span class="number">0</span></span><br><span class="line"> },</span><br><span class="line"> mutations:{</span><br><span class="line"> <span class="comment">//状态的变化</span></span><br><span class="line"> increment:<span class="function"><span class="params">state</span>=></span>state.count++,</span><br><span class="line"> decrement:<span class="function"><span class="params">state</span>=></span>state.count--</span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// main.js中映入store</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">"@/store"</span></span><br><span class="line"><span class="comment">//在实例中挂载</span></span><br><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line"> el:<span class="string">"#app"</span>,</span><br><span class="line"> store,</span><br><span class="line"> ....</span><br><span class="line"> ...</span><br><span class="line"> ..</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 新建组件page</span></span><br><span class="line"><template></span><br><span class="line"> <div <span class="class"><span class="keyword">class</span></span>=<span class="string">"page"</span>></span><br><span class="line"> <Button type=<span class="string">"success"</span> @click=<span class="string">"increment"</span>>+<<span class="regexp">/Button></span></span><br><span class="line"><span class="regexp"> <Button type="success" @click="decrement">-</</span>Button></span><br><span class="line"> <<span class="regexp">/div></span></span><br><span class="line"><span class="regexp"></</span>template></span><br><span class="line"></span><br><span class="line"><script></span><br><span class="line"> <span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"> data(){</span><br><span class="line"> <span class="keyword">return</span>{</span><br><span class="line"> </span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> methods:{</span><br><span class="line"> increment(){</span><br><span class="line"> <span class="keyword">this</span>.$store.commit(<span class="string">"increment"</span>)</span><br><span class="line"> },</span><br><span class="line"> decrement(){</span><br><span class="line"> <span class="keyword">this</span>.$store.commit(<span class="string">"decrement"</span>)</span><br><span class="line"> } </span><br><span class="line"> },</span><br><span class="line"> computed:{</span><br><span class="line"> count(){</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.$store.state.count</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"><<span class="regexp">/script></span></span><br></pre></td></tr></table></figure>
</li>
<li><p>总结：引入Vuex后统一的对数据进行管理存放，在各个页面组件中使用commit方法提交mutation对共享数据进行修改</p>
<blockquote>
<p>案例：项目中统一管理登录状态的数据，如购票业务中，未登录的情况下如果点击购票肯定是会提示用户先登录，整个页面都会共享登录信息，也就是token标识，通过vuex很容易就拿到token值，方便后面的操作</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">const</span> state={</span><br><span class="line"> sLoginInfo:loginInfo <span class="comment">//登录信息</span></span><br><span class="line">}</span><br><span class="line"><span class="keyword">const</span> mutations={</span><br><span class="line"> <span class="comment">//登录</span></span><br><span class="line"> mLogin:<span class="function">(<span class="params">state,loginInfo</span>)=></span>{</span><br><span class="line"> loginInfo.extTime-=<span class="number">0</span></span><br><span class="line"> loginInfo.genTime-=<span class="number">0</span></span><br><span class="line"> state.sLoginInfo=loginInfo</span><br><span class="line"> <span class="built_in">window</span>.localStorage.setItem(storageKey,<span class="built_in">JSON</span>.stringify(loginInfo))</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//退出</span></span><br><span class="line"> mLogout:<span class="function">(<span class="params">state</span>)=></span>{</span><br><span class="line"> state.sLoginInfo={}</span><br><span class="line"> <span class="built_in">window</span>.localStorage.removeItem(storageKey)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Vuex.Store({</span><br><span class="line"> state,mutations</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ul>
<h4 id="二维码插件-QRCode"><a href="#二维码插件-QRCode" class="headerlink" title="二维码插件 QRCode"></a>二维码插件 QRCode</h4><p>微信支付流程</p>
<ul>
<li>1.确定微信支付时把当前订单号发送给后台</li>
<li>2.后台利用订单号去数据库查询订单信息并整合微信官方等信息后发送给微信官方，微信官方会生成一个携带支付必要信息的链接给后台开发人员</li>
<li>3.后台将微信官方提供的字符串链接返回给前端，利用二维码插件可以将链接生成二维码展示处理，用户扫码就能支付了</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">// cnpm install qrcode --save</span><br><span class="line"></span><br><span class="line"><template></span><br><span class="line"> <div class="page"></span><br><span class="line"> <div id="canvasArea"></span><br><span class="line"> <canvas id="canvas"></canvas></span><br><span class="line"> </div></span><br><span class="line"> </div></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><script></span><br><span class="line"></span><br><span class="line">import Vue from 'vue'</span><br><span class="line">import QRCode from "qrcode"</span><br><span class="line">Vue.use(QRCode)</span><br><span class="line"></span><br><span class="line">export default {</span><br><span class="line"> data(){</span><br><span class="line"> return{}</span><br><span class="line"> },</span><br><span class="line"> methods:{</span><br><span class="line"> useqrcode(){</span><br><span class="line"> //放二维码的容器</span><br><span class="line"> var canvas=document.getElementById("canvas")</span><br><span class="line"> //调用函数生成二维码，参数依次为 容器，生成的内容，回调函数</span><br><span class="line"> QRCode.toCanvas(canvas,"http://www.baidu.com",function(err){</span><br><span class="line"> if(err){</span><br><span class="line"> console.error(err)</span><br><span class="line"> }else{</span><br><span class="line"> //成功之后可回调的函数</span><br><span class="line"> alert("success")</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> mounted () {</span><br><span class="line"> this.useqrcode() //组件挂载的时候调用二维码生成函数</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></script></span><br><span class="line"></span><br><span class="line"><style></span><br><span class="line"></span><br><span class="line"></style></span><br></pre></td></tr></table></figure>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2019/02/15/vue项目开发(一)/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Eastboat">
<meta itemprop="description" content>
<meta itemprop="image" content="/images/1.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Eastboat">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2019/02/15/vue项目开发(一)/" itemprop="url">vue项目开发(一)</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2019-02-15T23:27:56+08:00">
2019-02-15
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="ES6"><a href="#ES6" class="headerlink" title="ES6"></a>ES6</h1><h4 id="let和const命令"><a href="#let和const命令" class="headerlink" title="let和const命令"></a>let和const命令</h4><ul>
<li><p>let</p>
<blockquote>
<p>块级作用域<br><br>变量作用域不会提前声明<br><br>相同作用域内不能重复声明同一个变量<br>for循环中的父子作用域</p>
</blockquote>
</li>
<li><p>const(内存地址不变，所以是常量)</p>
<blockquote>
<p>与let的作用域相同<br><br>const一单声明常量就立即被初始化。<br><br>只声明不赋值也会报错</p>
</blockquote>
</li>
</ul>
<h6 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h6><pre><code>const一般用在定义模块中的常量
let限制了变量的作用域，保证变量不去影响全局变量，所以尽量用let代替var
</code></pre><h4 id="变量的解构赋值"><a href="#变量的解构赋值" class="headerlink" title="变量的解构赋值"></a>变量的解构赋值</h4><h6 id="数组的解构赋值"><a href="#数组的解构赋值" class="headerlink" title="数组的解构赋值"></a>数组的解构赋值</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//传统赋值</span></span><br><span class="line"><span class="keyword">let</span> a=<span class="number">1</span>;</span><br><span class="line"><span class="keyword">let</span> b=<span class="number">2</span>;</span><br><span class="line"><span class="keyword">let</span> c=<span class="number">3</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//es6中解构赋值 </span></span><br><span class="line"><span class="keyword">let</span> [a,b,c]=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line"></span><br><span class="line"><span class="comment">//允许使用默认值</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> [foo=<span class="literal">true</span>]=[];</span><br><span class="line"><span class="keyword">let</span> [boo=<span class="number">1</span>]=[<span class="literal">undefined</span>]; <span class="comment">// 1</span></span><br><span class="line"><span class="built_in">console</span>.log(foo) <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> [x,y=<span class="string">'123'</span>]=[<span class="string">'a'</span>]</span><br><span class="line"><span class="built_in">console</span>.log(x)<span class="comment">// a</span></span><br><span class="line"><span class="built_in">console</span>.log(y) <span class="comment">// 123</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>这种写法属于模式匹配，只要等号左右的模式相同，就会对号入座</p>
</blockquote>
<h6 id="对象的解构赋值"><a href="#对象的解构赋值" class="headerlink" title="对象的解构赋值"></a>对象的解构赋值</h6><blockquote>
<p>数组的元素是按次序排列的，变量的取值由特德位置决定的，而对象的属性没有次序，变量必须与属性同名，才能取到正确的值<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">let {bar,foo}={foo:"123",bar:"222222"};</span><br><span class="line">console.log(bar) //123</span><br><span class="line">console.log(foo) //222222</span><br></pre></td></tr></table></figure></p>
</blockquote>
<blockquote>
<p>如果变量名和属性名不一致就应该这样书写(类似重命名属性)<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">let obj = {less01:"00001",less02:"00002"};</span><br><span class="line">console.log(obj) //{ less01: '00001', less02: '00002' }</span><br><span class="line"></span><br><span class="line">let {less01:l1,less02:l2}=obj</span><br><span class="line">console.log(l1) //00001</span><br><span class="line">console.log(l2) //00002</span><br><span class="line"></span><br><span class="line">//简写如下形式</span><br><span class="line">let {rightNumber:R,leftNumber:L}=</span><br><span class="line">{rightNumber:"r00001",leftNumber:"l00001"};</span><br><span class="line">console.log(R)</span><br><span class="line">console.log(L)</span><br></pre></td></tr></table></figure></p>
</blockquote>
<blockquote>
<p>经验：对象的解构赋值的内部机制，是先找到同名属性 再赋给对应的变量 真正被赋值的是后者，而不是前者<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">// 示例：</span><br><span class="line">let {foo:baz}={foo:"aaa",bar:"bbb"};</span><br><span class="line">console.log(baz); //aaa</span><br><span class="line">console.log(foo) //foo is not defined</span><br><span class="line"></span><br><span class="line">foo是匹配的模式</span><br><span class="line">baz才是变量，真正被赋值的是变量baz,而不是模式foo</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">//对象的结构也可以使用默认值</span><br><span class="line">let {x:y=1234}={};</span><br><span class="line">console.log(y) //1234</span><br><span class="line"></span><br><span class="line">let {x:y=1234}={x:5678};</span><br><span class="line">console.log(y) //5678</span><br></pre></td></tr></table></figure></p>
</blockquote>
<h6 id="上机训练"><a href="#上机训练" class="headerlink" title="上机训练"></a>上机训练</h6><h4 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h4><h6 id="箭头函数起因"><a href="#箭头函数起因" class="headerlink" title="箭头函数起因"></a>箭头函数起因</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//setInterval函数是在全局作用域window下执行的，window上找不到属性username和age</span></span><br><span class="line"><span class="keyword">const</span> Person={</span><br><span class="line"> username:<span class="string">"小陈"</span>,</span><br><span class="line"> age:<span class="string">"23"</span>,</span><br><span class="line"> sayHello:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'这是'</span>+<span class="keyword">this</span>.username+<span class="string">"他今年"</span>+<span class="keyword">this</span>.age+<span class="string">"岁"</span>);</span><br><span class="line"> },<span class="number">1000</span>)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">Person.sayHello() <span class="comment">//这是undefined他今年undefined岁</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 缓存this进行使用（问题:明明写在对象里面的方法，为什么还要使用缓存对象才能使用呢？）</span></span><br><span class="line"><span class="keyword">const</span> Person={</span><br><span class="line"> username:<span class="string">"小陈"</span>,</span><br><span class="line"> age:<span class="string">"23"</span>,</span><br><span class="line"> sayHello:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">let</span> that=<span class="keyword">this</span>;</span><br><span class="line"> setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'这是'</span>+that.username+<span class="string">"他今年"</span>+that.age+<span class="string">"岁"</span>);</span><br><span class="line"> },<span class="number">1000</span>)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">Person.sayHello() <span class="comment">//这是小陈他今年23岁</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//es6中箭头函数</span></span><br></pre></td></tr></table></figure>
<h6 id="箭头函数的定义"><a href="#箭头函数的定义" class="headerlink" title="箭头函数的定义"></a>箭头函数的定义</h6><h6 id="箭头函数和普通函数相比的优势"><a href="#箭头函数和普通函数相比的优势" class="headerlink" title="箭头函数和普通函数相比的优势"></a>箭头函数和普通函数相比的优势</h6><ul>
<li>不绑定this和arguments</li>
<li>更简洁的代码语法</li>
</ul>
<p><strong>说明:不绑定this</strong><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">//箭头函数的this在定义的时候就已经确定了，之后不管什么时候调用，this都是之前定义时的this,</span><br><span class="line"></span><br><span class="line">function Person(name,age){</span><br><span class="line"> this.name=name;</span><br><span class="line"> this.age=age;</span><br><span class="line"> setInterval(()=>{</span><br><span class="line"> console.log(`我的名字叫${this.name}我今年${this.age}岁`)</span><br><span class="line"> },3000)</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line">let p=new Person('chenhang',20);</span><br></pre></td></tr></table></figure></p>
<p><strong>说明:不绑定arguments</strong><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">//所以在箭头函数中不能直接使用arguments对象，</span><br><span class="line">//如果需要获得函的参数又该怎么办呢？可以使用余参数来取代arguments</span><br><span class="line"></span><br><span class="line">let func=(...args)=>console.log(args.length);</span><br><span class="line">func(1,2,3,4,5,6) // 显示打印 6</span><br></pre></td></tr></table></figure></p>
<h6 id="箭头函数不适应的场景"><a href="#箭头函数不适应的场景" class="headerlink" title="箭头函数不适应的场景"></a>箭头函数不适应的场景</h6><ul>
<li><p>对象的方法中不建议使用箭头函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> Person={</span><br><span class="line"> username:<span class="string">"陈子"</span>,</span><br><span class="line"> age:<span class="number">20</span>,</span><br><span class="line"> say:<span class="function"><span class="params">()</span>=></span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'111'</span>) <span class="comment">//111</span></span><br><span class="line"> setInterval(<span class="function"><span class="params">()</span>=></span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.username+<span class="string">'----'</span>+<span class="keyword">this</span>.age)</span><br><span class="line"> },<span class="number">2000</span>) <span class="comment">//undefined----undefined</span></span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line">}</span><br><span class="line">Person.say()</span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">输出结果有问题，因为方法 在了对象里，而对象的括号是不能封闭作用域的，所</span></span><br><span class="line"><span class="comment">以此时的 this 还是指向全局对象，而全局对象下没有 usemame age 属性，所以会出现</span></span><br><span class="line"><span class="comment">问题</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>不能作为构造函数</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">/*</span><br><span class="line">由于箭头函数的 this 具有不绑定的特点，不能使用箭头函数作为构造函数，如果这</span><br><span class="line">样做了，也会报错。</span><br><span class="line">*/</span><br></pre></td></tr></table></figure>
</li>
<li><p>定义原型方法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">function Student(){</span><br><span class="line"> this.username="成成"</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">Student.prototype.sayName=()=>{</span><br><span class="line"> console.log(this.username) //报undefined</span><br><span class="line">}</span><br><span class="line">var p=new Student();</span><br><span class="line">p.sayName()</span><br><span class="line">/*</span><br><span class="line">出现问题的原因是 his 指向 window 象，这和使用箭头函数在对象中定义方法十</span><br><span class="line">分类似</span><br><span class="line">*/</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="Map数据结构"><a href="#Map数据结构" class="headerlink" title="Map数据结构"></a>Map数据结构</h4><blockquote>
<p>js中的对象是键值对形式的集合（Hash结构）,键只能是字符串类型</p>
</blockquote>
<blockquote>
<p>对象提供了’字符串-值’,Map提供了’值-值’的对应</p>
</blockquote>
<h6 id="创建Map"><a href="#创建Map" class="headerlink" title="创建Map"></a>创建Map</h6><ul>
<li>Map 可以接受 个数组作为参数，该数组的成员是 个个表示键值对的数组<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">const MapTree=new Map([</span><br><span class="line"> ['name','chenhang'],</span><br><span class="line"> ['age',20]</span><br><span class="line"> ]);</span><br><span class="line">console.log(MapTree) // { 'name' => 'chenhang', 'age' => 20 }</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h6 id="Map常用的属性和方法"><a href="#Map常用的属性和方法" class="headerlink" title="Map常用的属性和方法"></a>Map常用的属性和方法</h6><ul>
<li><p>size返回Map的成员总数</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">console.log(MapTree.size) //2</span><br></pre></td></tr></table></figure>
</li>
<li><p>set 方法设置键名 key 对应的键值为 value ，然后返回整个 Map 结构。</p>
</li>
<li>如果 key有对应的键值，则键值会被更新，否则就新生成键值。</li>
<li>set方法返回的是当前的 Map对象 因此可以采用链式写法。</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">MapTree.set(<span class="string">'address'</span>,<span class="string">"上海市闵行区"</span>).set(<span class="string">'sex'</span>,<span class="string">'男'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(MapTree) </span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">Map {</span></span><br><span class="line"><span class="comment"> 'name' => 'chenhang',</span></span><br><span class="line"><span class="comment"> 'age' => 20,</span></span><br><span class="line"><span class="comment"> 'address' => '上海市闵行区',</span></span><br><span class="line"><span class="comment"> 'sex' => '男' }</span></span><br><span class="line"><span class="comment"> */</span></span><br></pre></td></tr></table></figure>
<ul>
<li><p>has方法 放回一个布尔值判断某个键是否在当前的Map对象中</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(MapTree.has(<span class="string">'sex'</span>)) <span class="comment">//true</span></span><br><span class="line"><span class="built_in">console</span>.log(MapTree.has(<span class="string">'sex2'</span>)) <span class="comment">//false</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>delete方法 删除键成功返true，删除失败返回false</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(MapTree.delete(<span class="string">"address"</span>)) <span class="comment">//true</span></span><br><span class="line"><span class="built_in">console</span>.log(MapTree)</span><br><span class="line"><span class="comment">//Map { 'name' => 'chenhang', 'age' => 20, 'sex' => '男' }</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>遍历方法 </p>
<blockquote>
<p>Map结构提供三个遍历器生成函数和一个遍历方法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// keys() 返回所有键的遍历器</span></span><br><span class="line"> <span class="keyword">const</span> a=MapTree.keys();</span><br><span class="line"> <span class="built_in">console</span>.log(a) <span class="comment">//MapIterator { 'name', 'age', 'sex' }</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">let</span> key <span class="keyword">of</span> MapTree.keys()){</span><br><span class="line"> <span class="built_in">console</span>.log(key+<span class="string">"----这是key"</span>)</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"><span class="comment">// values() 返回所有值的遍历器</span></span><br><span class="line"> <span class="keyword">const</span> b=MapTree.values();</span><br><span class="line"> <span class="built_in">console</span>.log(b) <span class="comment">//MapIterator { 'chenhang', 20, '男' }</span></span><br><span class="line"> </span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">let</span> value <span class="keyword">of</span> MapTree.values()){</span><br><span class="line"> <span class="built_in">console</span>.log(value+<span class="string">"----这是value"</span>)</span><br><span class="line"> }</span><br><span class="line"><span class="comment">//entries() 返回所有成员的遍历器 </span></span><br><span class="line"> <span class="keyword">const</span> c=MapTree.entries();</span><br><span class="line"> <span class="built_in">console</span>.log(c) <span class="comment">//MapIterator { [ 'name', 'chenhang' ], [ 'age', 20 ], [ 'sex', '男' ] }</span></span><br><span class="line"> </span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> [key,value] <span class="keyword">of</span> MapTree.entries()){</span><br><span class="line"> <span class="built_in">console</span>.log(key,value)</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">/*</span></span><br><span class="line"><span class="comment">name chenhang</span></span><br><span class="line"><span class="comment">age 20</span></span><br><span class="line"><span class="comment">sex 男</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"><span class="comment">// forEach() 遍历Map所有的成员</span></span><br><span class="line">MapTree.forEach(<span class="function">(<span class="params">value,index</span>)=></span>{</span><br><span class="line"> <span class="built_in">console</span>.log(value+<span class="string">'--'</span>+index); </span><br><span class="line">})</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">chenhang--name</span></span><br><span class="line"><span class="comment">20--age</span></span><br><span class="line"><span class="comment">男--sex</span></span><br><span class="line"><span class="comment"> */</span></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ul>
<h4 id="Module语法"><a href="#Module语法" class="headerlink" title="Module语法"></a>Module语法</h4><blockquote>
<p>es6之前社区使用CommonJS规范(服务器端)和AMD规范(浏览器端)，<br>ES6 模块的设计思想是尽量静态化，使得编译时就能确定模块的依赖关系，以及输<br>入和输出的变量。</p>
</blockquote>
<h6 id="export"><a href="#export" class="headerlink" title="export"></a>export</h6><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//第1种写法</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> firstName = ’Michael<span class="string">';</span></span><br><span class="line"><span class="string">export var lastName =’Jackson'</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> year= <span class="number">1958</span>; </span><br><span class="line"></span><br><span class="line"><span class="comment">//第2种写法</span></span><br><span class="line"><span class="keyword">var</span> firstName =’Michael’,</span><br><span class="line"><span class="keyword">var</span> lastName =’Jackson<span class="string">';</span></span><br><span class="line"><span class="string">var year= 1958;</span></span><br><span class="line"><span class="string">export { firstName, lastName, year } ; </span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">//还可以导出函数</span></span><br><span class="line"><span class="string">export function multiply(x, y) {</span></span><br><span class="line"><span class="string"> return x * y;</span></span><br><span class="line"><span class="string">}</span></span><br><span class="line"><span class="string">导出多个函数</span></span><br><span class="line"><span class="string">function v1() { }</span></span><br><span class="line"><span class="string">function v2() { } </span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">export {v1,v2}</span></span><br></pre></td></tr></table></figure>
<h6 id="import"><a href="#import" class="headerlink" title="import"></a>import</h6><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//main.js</span></span><br><span class="line"><span class="keyword">import</span> {firstName, lastName, year} <span class="keyword">from</span> ./rofile js</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">setName</span>(<span class="params">element</span>) </span>{</span><br><span class="line"> element.textContent = firstName +’’+ lastName;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h6 id="export-default"><a href="#export-default" class="headerlink" title="export default"></a>export default</h6><blockquote>
<p>使用 import 命令时，用户需要知道所要加载的变量名或函数名，否则将无法加载<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// export-default.js</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'foo'</span>);</span><br><span class="line"> }</span><br><span class="line"><span class="comment">// import-default.js</span></span><br><span class="line"><span class="keyword">import</span> customName <span class="keyword">from</span> <span class="string">'./export-default</span></span><br><span class="line"><span class="string">customName(); //foo</span></span><br></pre></td></tr></table></figure></p>
</blockquote>
<p><strong>import 可以为匿名函数指定任意名字<br>，这时就不需要知道<br>原模块输出的函数名。需要注意的是，这时 import 令后面不使用大括号。</strong></p>
<p><strong>使用 export default 时，对 import<br>语句不需要使用大括号：不使用 export default 时，对应的 import 语句需要使用大括号。<br>export default 令用于指定模块的默认输出。显然 模块只能有 个默认输出，因此<br>expo default 令只能使用 所以 import 命令后面才不用加大括号，因为只能唯<br>对应 export default 命令</strong></p>
<h4 id="Promise对象"><a href="#Promise对象" class="headerlink" title="Promise对象"></a>Promise对象</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">const promise=new Promise(function(resolve,reject){</span><br><span class="line"> var value="成功值";</span><br><span class="line"> if(true){</span><br><span class="line"> resolve(value)</span><br><span class="line"> }else{</span><br><span class="line"> reject(error)</span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">promise.then(function(value){</span><br><span class="line"> console.log(value)</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">/*</span><br><span class="line">resolve 函数的作用是将 Promise 象的状态从“未完成”变为“成功”（即从 pending</span><br><span class="line">变为 resolved ），在异步操作成功时调用，并将异步操作的结果作为参数传递出去。</span><br><span class="line">reject 函数的作用是将 romise 象的状态从“未完成”变为“失败”（即从 pending</span><br><span class="line">变为 ected ）， 在异步操作失败时调用，并将异步操作的报错作为参数传递出去</span><br><span class="line">*/</span><br></pre></td></tr></table></figure>
<h1 id="项目的路由配置"><a href="#项目的路由配置" class="headerlink" title="项目的路由配置"></a>项目的路由配置</h1><blockquote>
<p>在 HTML5 history<br>API 出现之前，前端路由都通过 hash 实现， hash 能够兼容低版本的浏览器 如果把<br>节的 阳例子用 hash 来实现的话，它的 URI 规则中需要带上呀”。</p>
</blockquote>
<h4 id="什么是前端路由"><a href="#什么是前端路由" class="headerlink" title="什么是前端路由"></a>什么是前端路由</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">/*</span><br><span class="line"> 前端路由通过配置js文件，将这个工作拿到前端来完成。</span><br><span class="line"> 路由就是根据不用的url来展示对应的内容和页面</span><br><span class="line">*/</span><br></pre></td></tr></table></figure>
<h4 id="前端路由的使用场景"><a href="#前端路由的使用场景" class="headerlink" title="前端路由的使用场景"></a>前端路由的使用场景</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">主要适用于单页面，spa基本是前后端分离，所以后端不会提供路由</span><br></pre></td></tr></table></figure>
<h4 id="前端路由优缺点"><a href="#前端路由优缺点" class="headerlink" title="前端路由优缺点"></a>前端路由优缺点</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">优点</span><br><span class="line">1.没有网路延迟，用户体验提升，后端路由每次都会请求服务器然后响应</span><br><span class="line">2.在某些场合中，用 JAX 请求，可以让页面无刷新，页面变了，但 URL 没变，</span><br><span class="line">时不能复山时址阳路由支阳面应用叫地解二</span><br><span class="line"></span><br><span class="line">缺点</span><br><span class="line">使用浏览器的前进、后退按钮的时候会 新发送请求，没有合理地利用缓存</span><br></pre></td></tr></table></figure>
<h4 id="Vue-Router的使用"><a href="#Vue-Router的使用" class="headerlink" title="Vue-Router的使用"></a>Vue-Router的使用</h4><p>1.安装路由<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">cnpm install vue-router --save</span><br><span class="line"></span><br><span class="line">//index.js</span><br><span class="line"></span><br><span class="line">import Vue from 'vue';</span><br><span class="line">import VueRouter from 'vue-router'</span><br><span class="line">Vue.use(VueRouter);</span><br><span class="line"></span><br><span class="line">// main.js</span><br><span class="line">import router from "./router"</span><br></pre></td></tr></table></figure></p>
<p>2.建立路由器模块<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span>;</span><br><span class="line"><span class="keyword">import</span> VueRouter <span class="keyword">from</span> <span class="string">'vue-router'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> Login <span class="keyword">from</span> <span class="string">"@/components/Login"</span></span><br><span class="line"><span class="keyword">import</span> Home <span class="keyword">from</span> <span class="string">"@/components/Home"</span></span><br><span class="line"></span><br><span class="line">Vue.use(VueRouter);</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> VueRouter({</span><br><span class="line"> routes:[</span><br><span class="line"> {</span><br><span class="line"> path:<span class="string">"/home"</span>,</span><br><span class="line"> name:<span class="string">"Home"</span>,</span><br><span class="line"> component:Home,</span><br><span class="line"> },{</span><br><span class="line"> path:<span class="string">"/login"</span>,</span><br><span class="line"> name:<span class="string">"Login"</span>,</span><br><span class="line"> component:Login</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="comment">//.....</span></span><br><span class="line"> ]</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p>
<p>3.启动路由器<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">/*</span><br><span class="line">在main.js入口文件中启用路由器，创建和挂载根实例，通过</span><br><span class="line">router配置参数注入路由，从而让整个应用都有路由功能</span><br><span class="line">*/</span><br><span class="line"></span><br><span class="line">import Vue from "vue";</span><br><span class="line">import App from "./App";</span><br><span class="line">import router from "./router/index.js"</span><br><span class="line">new Vue({</span><br><span class="line"> el:"#app",</span><br><span class="line"> router,</span><br><span class="line"> template:"<App/>",</span><br><span class="line"> components:{App}</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">// App.vue中对用的router-view会渲染</span><br></pre></td></tr></table></figure></p>
<p>4.路由重定向<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> VueRouter({</span><br><span class="line"> routes:[</span><br><span class="line"> {</span><br><span class="line"> path:<span class="string">"/"</span>,</span><br><span class="line"> redirect:<span class="string">"/home"</span></span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">//重定向的目标也可以是一个命名的路由</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> VueRouter({</span><br><span class="line"> routes:[</span><br><span class="line"> {</span><br><span class="line"> path:<span class="string">"/"</span>,</span><br><span class="line"> redirect:{<span class="attr">name</span>:<span class="string">'home'</span>}</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//重定向的目标甚至可以是一个方法，动态的返回重定向的目标</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> VueRouter({</span><br><span class="line"> routes:[</span><br><span class="line"> {</span><br><span class="line"> path:<span class="string">"/"</span>,</span><br><span class="line"> redirect:<span class="function"><span class="params">to</span>=></span>{</span><br><span class="line"> <span class="comment">//方法接收“目标路由”作为参数</span></span><br><span class="line"> <span class="keyword">return</span> <span class="comment">//重定向的“字符串路径／路径对象”</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p>
<p>5.路由懒加载</p>
<blockquote>
<p>结合 Vue 的异步组件和 Webpack 的代码分割功能，可以轻松实现路由组件的懒加载</p>
</blockquote>
<p>6.router-link<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">router-link</span> <span class="attr">:to</span>=<span class="string">"home"</span>></span>Home<span class="tag"></<span class="name">route-link</span>></span></span><br><span class="line"></span><br><span class="line"><span class="comment"><!-- 同上---></span></span><br><span class="line"><span class="tag"><<span class="name">router-link</span> <span class="attr">:to</span>=<span class="string">"{path:'home'}"</span>></span>HOme<span class="tag"></<span class="name">router-link</span>></span></span><br><span class="line"></span><br><span class="line"><span class="comment"><!-- 命名的路由---></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">routet-link</span> <span class="attr">:to</span>=<span class="string">"{name:'user',params:{userID:123}}"</span>></span>User<span class="tag"></<span class="name">router-link</span>></span></span><br><span class="line"></span><br><span class="line"><span class="comment"><!--带参数的查询---></span></span><br><span class="line"><span class="tag"><<span class="name">router-link</span> <span class="attr">:to</span>=<span class="string">"{name:'register',query:{plan:'private'}}"</span>></span>Register<span class="tag"></<span class="name">router-link</span>></span></span><br><span class="line"></span><br><span class="line"><span class="comment"><!--结果为/register?plan=private--></span></span><br></pre></td></tr></table></figure></p>
<p>7.路由的对象属性</p>
<ul>
<li><p>$router.path</p>
<blockquote>
<p>字符串，对应当前路由的路径 总是解析为绝对路径，如“／foo/bar “</p>
</blockquote>
</li>
<li><p>$router.params</p>
<blockquote>
<p>一个key/value对象，包含了动态片段和全匹配片段，如果没有路由参数 就为空对象</p>
</blockquote>
</li>
<li><p>$router.query</p>
<blockquote>
<p>一个key/value对象，表示url的查询参数，/foo?id=1 表示$router.query.id==1,如果没有查询参数就为空对象</p>
</blockquote>
</li>
<li>$router.hash<blockquote>
<p>当前路由的hash值（不带#），如果没有hash值则为空字符串</p>
</blockquote>
</li>
<li>$router.fullPath<blockquote>
<p>完成解析后的 URL ，包含查询参数 hash 完整路径</p>
</blockquote>
</li>
<li>$router.matched<blockquote>
<p>一个数组，包含当前路由的所有嵌套路径片段的路由记录 </p>
</blockquote>
</li>
</ul>
<h4 id="页面之间的导航"><a href="#页面之间的导航" class="headerlink" title="页面之间的导航"></a>页面之间的导航</h4><blockquote>
<p>借助router实例的一些方法实现编程路由</p>
</blockquote>
<h6 id="router-push"><a href="#router-push" class="headerlink" title="$router.push"></a>$router.push</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//参数可以是字符串路径</span></span><br><span class="line"><span class="keyword">this</span>.$router.push(<span class="string">"user"</span>) </span><br><span class="line"></span><br><span class="line"><span class="comment">//参数可以是描述地址的对象</span></span><br><span class="line"><span class="keyword">this</span>.$router.push({<span class="attr">path</span>:<span class="string">"user"</span>})</span><br><span class="line"></span><br><span class="line"><span class="comment">//命名的路由 #/user/123</span></span><br><span class="line"> <span class="keyword">this</span>.$router.push({<span class="attr">name</span>:<span class="string">"User"</span>,<span class="attr">params</span>:{<span class="attr">Id</span>:<span class="number">123</span>}})</span><br><span class="line"> </span><br><span class="line"> <span class="comment">//带参数的查询 页面跳转另一个页面需要携带数据可以使用此方法</span></span><br><span class="line"> <span class="keyword">this</span>.$router.push({<span class="attr">path</span>:<span class="string">"user"</span>,<span class="attr">query</span>:{<span class="attr">userAddress</span>:<span class="string">'上海市'</span>}})</span><br></pre></td></tr></table></figure>
<h6 id="router-replace"><a href="#router-replace" class="headerlink" title="$router.replace"></a>$router.replace</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> 和push方法不同的是，他不会像history栈中添加新的记录,</span></span><br><span class="line"><span class="comment"> 而是跟他的方法名一样只替换掉当前的历史记录</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">this</span>.$router.replace(<span class="string">"/user"</span>) <span class="comment">//等价如下</span></span><br><span class="line"></span><br><span class="line"><router-link :to=<span class="string">"user"</span> replace><<span class="regexp">/router-link></span></span><br></pre></td></tr></table></figure>
<h6 id="router-go"><a href="#router-go" class="headerlink" title="$router.go"></a>$router.go</h6><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">this.$router.go(1) ==> history.forward()</span><br><span class="line">this.$router.go(-1) ==> history.back()</span><br><span class="line"></span><br><span class="line">//如果记录不够就会失败</span><br></pre></td></tr></table></figure>
<h1 id="Vue-js-知识点"><a href="#Vue-js-知识点" class="headerlink" title="Vue.js 知识点"></a>Vue.js 知识点</h1><p>特点</p>
<blockquote>
<p>解耦视图和数据</p>
</blockquote>
<blockquote>
<p>前端路由</p>
</blockquote>
<blockquote>
<p>可复用的组件</p>
</blockquote>
<blockquote>
<p>状态管理</p>
</blockquote>
<blockquote>
<p>Virtual DOM</p>
</blockquote>
<h4 id="MVVM特点"><a href="#MVVM特点" class="headerlink" title="MVVM特点"></a>MVVM特点</h4><ul>
<li>低耦合</li>
<li>可重用视图逻辑</li>
<li>独立开发 专注于业务逻辑和数据的开发</li>
</ul>
<h4 id="Vue实例的生命周期"><a href="#Vue实例的生命周期" class="headerlink" title="Vue实例的生命周期"></a>Vue实例的生命周期</h4><blockquote>
<p>实例对象从构造函数时开始执行(被创建)到被GC回收销毁的整个存在的时期，在生命周期中被自动调用的函数称之为生命周期函数，也形象的称之为生命周期钩子函数</p>
</blockquote>
<table>
<thead>
<tr>
<th>生命周期函数</th>
<th>含义</th>
</tr>
</thead>
<tbody>
<tr>
<td>beforeCreate（创建前）</td>
<td>组件实例刚被创建，组件属性计算之前 比如data属性</td>
</tr>
<tr>
<td>created （创建后）</td>
<td>组件实例刚刚创建完成，属性已经绑定，此时DOM尚未生成，$el属性还不存在</td>
</tr>
<tr>
<td>beforeMount(载入前)</td>
<td>模板编译、挂载之前</td>
</tr>
<tr>
<td>mounted(挂载后)</td>
<td>模板编译、挂载之后</td>
</tr>
<tr>
<td>beforeUpdate(更新前)</td>
<td>组件更新之前</td>
</tr>
<tr>
<td>updated(更新后)</td>
<td>组件更新之后</td>
</tr>
<tr>
<td>beforeDestroy(销毁前)</td>
<td>组件销毁前调用</td>
</tr>
<tr>
<td>destroyed(销毁后)</td>
<td>组件销毁后调用</td>
</tr>
</tbody>
</table>
<h6 id="beforeCreate在组件刚刚被创建的时候增加一些loading事件"><a href="#beforeCreate在组件刚刚被创建的时候增加一些loading事件" class="headerlink" title="beforeCreate在组件刚刚被创建的时候增加一些loading事件"></a>beforeCreate在组件刚刚被创建的时候增加一些loading事件</h6><h6 id="created调用时结束loading事件，完成一些初始化，实现函数自执行等"><a href="#created调用时结束loading事件，完成一些初始化，实现函数自执行等" class="headerlink" title="created调用时结束loading事件，完成一些初始化，实现函数自执行等"></a>created调用时结束loading事件，完成一些初始化，实现函数自执行等</h6><h6 id="mounted是比较重要的函数，可以发起后端请求数据，接受页面之间传递的参数，由子组件向父组件传递参数等"><a href="#mounted是比较重要的函数，可以发起后端请求数据，接受页面之间传递的参数，由子组件向父组件传递参数等" class="headerlink" title="mounted是比较重要的函数，可以发起后端请求数据，接受页面之间传递的参数，由子组件向父组件传递参数等"></a>mounted是比较重要的函数，可以发起后端请求数据，接受页面之间传递的参数，由子组件向父组件传递参数等</h6><h4 id="class和style的绑定"><a href="#class和style的绑定" class="headerlink" title="class和style的绑定"></a>class和style的绑定</h4><blockquote>
<p>当：class的表达式过长或逻辑复杂的时候，可以绑定一个计算属性，这是一种很友好和常见的做法</p>
<ol>
<li>对象语法<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><div :class="{active:isActive,....}"></div></span><br><span class="line"></span><br><span class="line">data(){</span><br><span class="line"> return{</span><br><span class="line"> isActive:true</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
</ol>
</blockquote>
<ol start="2">
<li><p>数组语法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><div :class="[activeClass,errorClass]"></div></span><br><span class="line"></span><br><span class="line">data(){</span><br><span class="line"> return{</span><br><span class="line"> activeClass:"active",</span><br><span class="line"> errorClass:"static"</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
<li><p>绑定内联样式</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><div :style="{border:activeColor,fontSize:fontSize+'px'}"></div></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">data(){</span><br><span class="line"> return{</span><br><span class="line"> activeColor:"1px solid #ffc",</span><br><span class="line"> fontSize:22</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">//实际开发中写在data或者计算属性中</span><br><span class="line"></span><br><span class="line"><div :style="styleList"></div></span><br><span class="line"></span><br><span class="line">data(){</span><br><span class="line"> return{</span><br><span class="line"> styleList:{</span><br><span class="line"> border:"1px solid #fff",</span><br><span class="line"> fontSize:22+"px"</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h1 id="项目中与服务端通信"><a href="#项目中与服务端通信" class="headerlink" title="项目中与服务端通信"></a>项目中与服务端通信</h1><h4 id="1-connect-mock-middleware工具的使用"><a href="#1-connect-mock-middleware工具的使用" class="headerlink" title="1.connect-mock-middleware工具的使用"></a>1.connect-mock-middleware工具的使用</h4><ul>
<li><p>config中的index.js中添加middleware，实际项目会换成后台提供的地址</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">proxyTable:{</span><br><span class="line"> <span class="string">"/api"</span>:{</span><br><span class="line"> target:<span class="string">"http://127.0.0.1:3721"</span>,</span><br><span class="line"> changeOrigin:<span class="literal">true</span>,</span><br><span class="line"> secure:<span class="literal">false</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
<li><p>写mock文件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> mock文件支持两种请求</span></span><br><span class="line"><span class="comment"> 1.get/api/xxx</span></span><br><span class="line"><span class="comment"> 2.post/api/<id>/123</span></span><br><span class="line"><span class="comment"> </span></span><br><span class="line"><span class="comment"> <id>代表路由链接表达式 如/api/:id/123 id的值会发生变化</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="2-Mock-js语法"><a href="#2-Mock-js语法" class="headerlink" title="2.Mock.js语法"></a>2.Mock.js语法</h4><ul>
<li>优点</li>
</ul>
<ol>
<li>根据数据模板生成模拟数据</li>
<li>模拟Ajax请求返回模拟数据</li>
<li>基于html模板生成模拟数据</li>
</ol>
<ul>
<li>语法规范</li>
</ul>
<ol>
<li><p>数据模板定义规范 (Data Template Definition—– DTD)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> 属性名 name</span></span><br><span class="line"><span class="comment"> 生成规则 rule</span></span><br><span class="line"><span class="comment"> 属性值 value</span></span><br><span class="line"><span class="comment"> 'name|rule':value</span></span><br><span class="line"><span class="comment"> </span></span><br><span class="line"><span class="comment"> rule包括七种格式</span></span><br><span class="line"><span class="comment"> 'name|min-max'</span></span><br><span class="line"><span class="comment"> 'name|count'</span></span><br><span class="line"><span class="comment"> 'name|min-max.dmin-dmax'</span></span><br><span class="line"><span class="comment"> 'name|min-max.dcount'</span></span><br><span class="line"><span class="comment"> 'name|count.dmin-dmax'</span></span><br><span class="line"><span class="comment"> 'name|count.dcount'</span></span><br><span class="line"><span class="comment"> 'name|+step'</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"> 生成规则是可选的</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>数据占位符定义规范（Data Placeholder Definition —–DPD）</p>
</li>
</ol>
<h4 id="3-snail-mock工具的使用"><a href="#3-snail-mock工具的使用" class="headerlink" title="3.snail mock工具的使用"></a>3.snail mock工具的使用</h4><ul>
<li>上面定义好了模拟的后台数据，现在需要通过生成的url来调用这些数据，snail mock可以模拟服务器的功能。生成的url</li>
</ul>
<blockquote>
<p>安装 cnpm isntall snail-cline -g</p>
</blockquote>
<blockquote>
<p>开启mock服务（在项目目录下打开cmd执行 ‘snail mock’ 命令会看到之前配置好的api地址）</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">经验：本地全局安装了snail-cline 其内部实现依赖很多其他的包，打开本地的package.json,</span><br><span class="line">其中很多选项都是依赖于connect-mock-middleware的，依赖内部会自动下载管理依赖的包，同理</span><br><span class="line">connect-mock-middleware中依赖mock，所以只需在本地全局安装snail-cline既可以使用mock语法</span><br></pre></td></tr></table></figure>
<h4 id="4-Axios安装和配置"><a href="#4-Axios安装和配置" class="headerlink" title="4.Axios安装和配置"></a>4.Axios安装和配置</h4><h4 id="项目服务端通信配置"><a href="#项目服务端通信配置" class="headerlink" title="项目服务端通信配置"></a>项目服务端通信配置</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/10/23/前端模块化演变/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Eastboat">
<meta itemprop="description" content>
<meta itemprop="image" content="/images/1.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Eastboat">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/10/23/前端模块化演变/" itemprop="url">前端模块化演变</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-10-23T23:27:56+08:00">
2018-10-23
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="现状"><a href="#现状" class="headerlink" title="现状"></a>现状</h2><p>前端产品的交付是基于浏览器，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。</p>
<ul>
<li><p>异步概念<br> js是单线程的，由于执行ajax请求会消耗一定的时间，甚至出现了网络故障而迟迟得不到返回结果；这时，如果同步执行的话，就必须等到ajax返回结果以后才能执行接下来的代码，如果ajax请求需要1分钟，程序就得等1分钟。如果是异步执行的话，就是告诉ajax代码“老兄，既然你迟迟不返回结果，我先不等你了，我还有一大堆代码要执行，等你执行完了给我说一下”</p>
</li>
<li><p>模块系统主要解决模块的定义、依赖和导出，先来看看已经存在的模块系统。</p>
</li>
</ul>
<h2 id="模块系统的演进"><a href="#模块系统的演进" class="headerlink" title="模块系统的演进"></a>模块系统的演进</h2><p> 原始的 JavaScript 文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在 window 对象中，不同模块的接口调用都是一个作用域中，一些复杂的框架，会使用命名空间的概念来组织这些模块的接口，典型的例子如 YUI 库</p>
<p>这种原始的加载方式暴露了一些显而易见的弊端：</p>
<p>1.全局作用域下容易造成变量冲突</p>
<p>2.文件只能按照 <code><script></code> 的书写顺序进行加载</p>
<p>3.开发人员必须主观解决模块和代码库的依赖关系</p>
<p>4.在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪<br> </p>
<h2 id="CommonJS"><a href="#CommonJS" class="headerlink" title="CommonJS"></a>CommonJS</h2><p>服务器端的 Node.js 遵循 CommonJS规范，该规范的核心思想是允许模块通过 require 方法来同步加载所要依赖的其他模块，然后通过 exports 或 module.exports 来导出需要暴露的接口。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">require("module");</span><br><span class="line">module.exports = module;</span><br></pre></td></tr></table></figure></p>
<p>优点：</p>
<ol>
<li>服务器端模块便于重用</li>
<li>NPM 中已经有将近20万个可以使用模块包</li>
<li>简单并容易使用</li>
</ol>
<p>缺点：</p>
<ol>
<li>同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步加载的</li>
<li>不能非阻塞的并行加载多个模块</li>
</ol>
<p>实现：</p>
<ol>
<li>服务器端的 Node.js</li>
<li>Browserify，浏览器端的 CommonJS 实现，可以使用 NPM 的模块，但是编译打包后的文件体积可能很大</li>
<li>modules-webmake，类似Browserify，还不如 Browserify 灵活</li>
<li>wreq，Browserify 的前身</li>
</ol>
<hr>
<h2 id="AMD"><a href="#AMD" class="headerlink" title="AMD"></a>AMD</h2><p>Asynchronous Module Definition 规范其实只有一个主要接口 define(id?, dependencies?, factory)，它要在声明模块的时候指定所有的依赖 dependencies，并且还要当做形参传到 factory 中，对于依赖的模块提前执行，依赖前置。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">define("module", ["dep1", "dep2"], function(d1, d2) {</span><br><span class="line"> return someExportedValue;</span><br><span class="line">});</span><br><span class="line">require(["module", "../file"], function(module, file) { /* ... */ });</span><br></pre></td></tr></table></figure>
<p>优点：</p>
<ul>
<li>适合在浏览器环境中异步加载模块</li>
<li>可以并行加载多个模块</li>
<li>缺点：</li>
<li>提高了开发成本，代码的阅读和书写比较困难，模块定义方式的语义不顺畅</li>
<li>不符合通用的模块化思维方式，是一种妥协的实现</li>
</ul>
<p>实现：</p>
<ul>
<li>RequireJS</li>
<li>curl</li>
</ul>
<hr>
<h2 id="CMD"><a href="#CMD" class="headerlink" title="CMD"></a>CMD</h2><p>Common Module Definition 规范和 AMD 很相似，尽量保持简单，并与 CommonJS 和 Node.js 的 Modules 规范保持了很大的兼容性。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">define(function(require, exports, module) {</span><br><span class="line"> var $ = require('jquery');</span><br><span class="line"> var Spinning = require('./spinning');</span><br><span class="line"> exports.doSomething = ...</span><br><span class="line"> module.exports = ...</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p>
<p>优点：</p>
<ul>
<li>依赖就近，延迟执行</li>
<li>可以很容易在 Node.js 中运行</li>
</ul>
<p>缺点：</p>
<ul>
<li>依赖 SPM 打包，模块的加载逻辑偏重</li>
</ul>
<p>实现：</p>
<ul>
<li>Sea.js</li>
<li>coolie</li>
</ul>
<hr>
<h2 id="UMD"><a href="#UMD" class="headerlink" title="UMD"></a>UMD</h2><p>Universal Module Definition 规范类似于兼容 CommonJS 和 AMD 的语法糖，是模块定义的跨平台解决方案。</p>
<h2 id="ES6-模块"><a href="#ES6-模块" class="headerlink" title="ES6 模块"></a>ES6 模块</h2><p>ECMAScript6 标准增加了 JavaScript 语言层面的模块体系定义。ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">import "jquery";</span><br><span class="line">export function doStuff() {}</span><br><span class="line">module "localModule" {}</span><br></pre></td></tr></table></figure></p>
<p>优点：</p>
<ul>
<li>容易进行静态分析</li>
<li>面向未来的 ECMAScript 标准</li>
</ul>
<p>缺点：</p>
<ul>
<li>原生浏览器端还没有实现该标准</li>
<li>全新的命令字，新版的 Node.js才支持</li>
</ul>
<p>实现：</p>
<ul>
<li>Babel</li>
</ul>
<hr>
<h2 id="前端模块加载"><a href="#前端模块加载" class="headerlink" title="前端模块加载"></a>前端模块加载</h2><p>前端模块要在客户端中执行，所以他们需要增量加载到浏览器中。<br>模块的加载和传输，我们首先能想到两种极端的方式，一种是每个模块文件都单独请求，另一种是把所有模块打包成一个文件然后只请求一次。显而易见，每个模块都发起单独的请求造成了请求次数过多，导致应用启动速度慢；一次请求加载所有模块导致流量浪费、初始化过程慢。这两种方式都不是好的解决方案，它们过于简单粗暴。<br>分块传输，按需进行懒加载，在实际用到某些模块的时候再增量更新，才是较为合理的模块加载方案。<br>要实现模块的按需加载，就需要一个对整个代码库中的模块进行静态分析、编译打包的过程。</p>
<h2 id="所有资源都是模块"><a href="#所有资源都是模块" class="headerlink" title="所有资源都是模块"></a>所有资源都是模块</h2><p>在上面的分析过程中，我们提到的模块仅仅是指JavaScript模块文件。然而，在前端开发过程中还涉及到样式、图片、字体、HTML 模板等等众多的资源。这些资源还会以各种方言的形式存在，比如 coffeescript、 less、 sass、众多的模板库、多语言系统（i18n）等等。<br>如果他们都可以视作模块，并且都可以通过require的方式来加载，将带来优雅的开发体验，比如：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">require("./style.css");</span><br><span class="line">require("./style.less");</span><br><span class="line">require("./template.jade");</span><br><span class="line">require("./image.png");</span><br></pre></td></tr></table></figure></p>
<p>如何使用reuqire管理</p>
<h2 id="静态分析"><a href="#静态分析" class="headerlink" title="静态分析"></a>静态分析</h2><p>在编译的时候，要对整个代码进行静态分析，分析出各个模块的类型和它们依赖关系，然后将不同类型的模块提交给适配的加载器来处理。比如一个用 LESS 写的样式模块，可以先用 LESS 加载器将它转成一个CSS 模块，在通过 CSS 模块把他插入到页面的 <style> 标签中执行。Webpack 就是在这样的需求中应运而生。<br>同时，为了能利用已经存在的各种框架、库和已经写好的文件，我们还需要一个模块加载的兼容策略，来避免重写所有的模块。<br>那么接下来，让我们开始 Webpack 的神奇之旅吧。</p>
</style></p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>