-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
257 lines (123 loc) · 313 KB
/
search.xml
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
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>软件工程期末知识总结</title>
<link href="/2023/01/05/Courses/%E8%BD%AF%E4%BB%B6%E5%B7%A5%E7%A8%8B/"/>
<url>/2023/01/05/Courses/%E8%BD%AF%E4%BB%B6%E5%B7%A5%E7%A8%8B/</url>
<content type="html"><![CDATA[<h3 id="什么是软件工程？"><a href="#什么是软件工程？" class="headerlink" title="什么是软件工程？"></a>什么是软件工程？</h3><blockquote><p>软件工程包括技术和管理两个方面的内容，是<strong>技术与管理</strong>紧密结合所形成的工程学科</p><ul><li><p>管理：合理配置和使用各种资源</p></li><li><p>技术：<strong>技术方法的集合</strong>称为<strong>方法学</strong>，也称为泛型</p><ul><li><p>软件工程方法学包括3个要素：方法、工具和过程</p><p>方法：技术方法</p><p>工具：运用方法的工具</p><p>过程：规定任务的工作步骤</p><p>在<code>工具</code>中依据<code>过程</code>使用<code>方法</code></p></li><li><p>软件工程方法学又分为传统方法学与面向对象方法学</p></li></ul></li></ul></blockquote><p>采用<strong>工程</strong>的概念、原理、技术和方法<strong>来开发与维护软件</strong>，把经过时间考验而证明正确的<strong>管理技术</strong>和当前能够得到的最好的<strong>技术方法</strong>结合起来，以经济地开发出高质量的软件<strong>并有效地维护它</strong></p><h3 id="软件工程的阶段？任务？"><a href="#软件工程的阶段？任务？" class="headerlink" title="软件工程的阶段？任务？"></a>软件工程的阶段？任务？</h3><p>软件生命周期由<strong>软件定义、软件开发、软件维护</strong>3个时期组成，每个时期又可以进一步划分为若干个阶段，总共8个阶段</p><h4 id="软件定义（系统定义）"><a href="#软件定义（系统定义）" class="headerlink" title="软件定义（系统定义）"></a>软件定义（系统定义）</h4><h5 id="问题定义"><a href="#问题定义" class="headerlink" title="问题定义"></a>问题定义</h5><p>明确要解决的问题</p><h5 id="可行性研究"><a href="#可行性研究" class="headerlink" title="可行性研究"></a>可行性研究</h5><p>任务：探索问题是否值得去解</p><p>主要集中在：</p><ol><li><p>经济可行性</p></li><li><p>技术可行性</p></li><li><p>操作可行性</p><p>让盲人去看视频的软件显然操作上是不可行的</p></li></ol><h5 id="需求分析"><a href="#需求分析" class="headerlink" title="需求分析"></a>需求分析</h5><p>为了解决问题，系统需要具备什么功能</p><h4 id="软件开发"><a href="#软件开发" class="headerlink" title="软件开发"></a>软件开发</h4><h5 id="总体设计"><a href="#总体设计" class="headerlink" title="总体设计"></a>总体设计</h5><p>确定目标系统的实现方案</p><p>设计软件结构，确定程序由哪些模块组成以及模块之间的关系</p><h5 id="详细设计"><a href="#详细设计" class="headerlink" title="详细设计"></a>详细设计</h5><p>详细的设计每个模块，确定实现模块功能所需要的算法和数据结构</p><blockquote><p>前两个阶段又称为<strong>系统设计</strong></p><p>后两个阶段又称为<strong>系统实现</strong></p></blockquote><h5 id="编码和单元测试"><a href="#编码和单元测试" class="headerlink" title="编码和单元测试"></a>编码和单元测试</h5><p>将详细设计好的模块翻译成高级程序设计语言编写的程序，并测试每个模块</p><h5 id="综合测试"><a href="#综合测试" class="headerlink" title="综合测试"></a>综合测试</h5><p>通过<strong>各种类型的测试</strong>使软件达到预定的要求</p><h4 id="运行维护（软件维护）"><a href="#运行维护（软件维护）" class="headerlink" title="运行维护（软件维护）"></a>运行维护（软件维护）</h4><p>通过<strong>各种必要的维护</strong>使系统持久的满足用户的需求</p><h3 id="数据流图"><a href="#数据流图" class="headerlink" title="数据流图"></a>数据流图</h3><blockquote><p><strong>数据流图和数据字典</strong>共同构成了系统的逻辑模型</p></blockquote><p>数据流图描绘<strong>信息流和数据</strong>从输入<strong>移动</strong>到输出的<strong>过程中经受的变换</strong></p><p>包含4种成分：</p><ol><li>数据的源点和终点（正方形表示</li><li>变换数据的处理（圆形表示</li><li>数据存储（开口矩形</li><li>数据流（箭头</li></ol><ul><li>数据存储和数据流都是数据，只是所处的状态不同，数据存储是处于静止状态的数据，而数据流是处于运动中的数据</li></ul><h4 id="如何绘制数据流图？"><a href="#如何绘制数据流图？" class="headerlink" title="如何绘制数据流图？"></a>如何绘制数据流图？</h4><ol><li><p>确定系统输入输出、源点以及终点</p></li><li><p>画系统顶层数据流图</p><p>用【变换数据的处理】将输入输出数据连接起来，给变换数据的处理、数据等命名</p></li><li><p>自顶向下分解，画出分层数据流图</p><p>将【变换数据的处理】细分，细分成几个数据流图表示</p></li></ol><h3 id="软件测试步骤"><a href="#软件测试步骤" class="headerlink" title="软件测试步骤"></a>软件测试步骤</h3><h4 id="单元测试（模块测试）"><a href="#单元测试（模块测试）" class="headerlink" title="单元测试（模块测试）"></a>单元测试（模块测试）</h4><p>任务：把每个模块作为一个单独的实体来测试</p><ul><li>主要使用白盒测试</li></ul><h4 id="集成测试"><a href="#集成测试" class="headerlink" title="集成测试"></a>集成测试</h4><p>任务：按照软件结构，将经过测试的模块按某种策略装配起来，并在装配过程中进行必要的测试</p><blockquote><p>不论是子系统测试，还是系统测试，都有检测和组装两重含义，通常称为集成测试</p><p>集成：不仅有模块的组装，还有对于组装后的检测</p></blockquote><p>由模块组装成程序时有两种方法：</p><ol><li><p>非渐增式测试方法</p></li><li><p>渐增式测试方法（普遍采用）</p><p>渐增式有两种集成策略：</p><ul><li>自顶向下：又分深度优先策略和<strong>宽度</strong>优先策略</li><li>自底向上：</li></ul></li></ol><h5 id="子系统测试"><a href="#子系统测试" class="headerlink" title="子系统测试"></a>子系统测试</h5><p>把测试好的模块装配成一个子系统来测试</p><h5 id="系统测试"><a href="#系统测试" class="headerlink" title="系统测试"></a>系统测试</h5><p>把测试好的子系统装配成一个完整的系统来测试</p><h4 id="确认测试（验收测试）"><a href="#确认测试（验收测试）" class="headerlink" title="确认测试（验收测试）"></a>确认测试（验收测试）</h4><p>任务：按照规格说明书（需求分析时确定）的规定，由用户对目标系统进行验收</p><ul><li>主要采用黑盒测试</li></ul><h4 id="平行运行"><a href="#平行运行" class="headerlink" title="平行运行"></a>平行运行</h4><p>同时运行新系统和旧系统，比较两个系统的处理结果</p><h3 id="结构化分析方法"><a href="#结构化分析方法" class="headerlink" title="结构化分析方法"></a>结构化分析方法</h3><blockquote><p>结构化分析方法：SA：structured analysis</p><p>传统软件工程方法学使用结构化分析方法，完成分析用户需求的工作</p></blockquote><p>结构化分析方法就是<strong>面向数据流自顶向下逐步求精</strong>进行<strong>需求分析</strong>的方法</p><ul><li>结构化分析方法使用<strong>数据流图与数据字典</strong>来描述</li></ul><h3 id="什么是结构程序设计"><a href="#什么是结构程序设计" class="headerlink" title="什么是结构程序设计"></a>什么是结构程序设计</h3><p>如果<strong>一个程序的代码块</strong>仅仅通过顺序、选择和循环这3种<strong>基本控制结构</strong>进行连接，并且每一个代码块只有一个入口和一个出口，则称这个程序是结构化的</p><h3 id="软件配置管理"><a href="#软件配置管理" class="headerlink" title="软件配置管理"></a>软件配置管理</h3><blockquote><p>任何软件开发都是迭代（求精）过程，因此在开发软件中，变化是不可避免的</p></blockquote><p>软件配置：（软件=程序+设计+文档）</p><ol><li>程序</li><li>文档</li><li>数据</li></ol><p>软件配置管理：在软件的<strong>生命周期</strong>内<strong>管理变化</strong></p><p>软件配置管理主要有5项任务，也是软件配置管理的过程：</p><ol><li>标识对象（标识对象）</li><li>控制版本（控制变化）</li><li>控制变化（控制变化）</li><li>配置审计（确保适当的实现了变化）</li><li>报告状态（向需要知道这类信息的人报告变化）</li></ol><h3 id="白盒测试"><a href="#白盒测试" class="headerlink" title="白盒测试"></a>白盒测试</h3><p>逻辑覆盖：对一系列测试过程的总称，这组测试过程逐渐进行越来越完整的通路测试</p><p>测试数据执行（覆盖）程序逻辑的程度可以划分为以下等级：</p><ul><li>语句覆盖：被测程序中的每个语句至少执行一次</li><li>判定覆盖：又名分支覆盖；不仅要做到语句覆盖，而且每个判定的每个分支都至少执行一次</li><li>条件覆盖：不仅语句覆盖，而且判定表达式中的每个条件都取到各种可能的结果</li></ul><p><strong>判定覆盖不一定包含条件覆盖，条件覆盖也不一定包含判定覆盖</strong></p><p>黑盒测试</p><h3 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h3><ul><li><p>占用人员最多的为编码阶段</p></li><li><p>花费最多的阶段为软件维护</p></li><li><p>维护种类中占比最多的是完善性维护（不断添加新的需求）</p></li><li><p>程序复杂度为图中判定节点的数目+1，即程序流程图中有2个分支的节点的数目加1</p></li><li><p>需求分析阶段应该建立三种模型：</p><ol><li>数据模型：ER图——实体-联系图：描述问题的信息域</li><li>功能模型：数据流图：描述软件的功能</li><li>行为模型：状态转换图：通过描绘系统的状态及引起系统状态转换的事件，来表示系统的行为</li></ol></li><li><p>用面向对象方法开发软件，需要建立3种形式的模型：</p><ol><li><p>对象模型：描述系统数据结构</p></li><li><p>动态模型：描述系统控制结构</p></li><li><p>功能模型：描述系统功能</p><p>使用数据结构（对象模型），执行操作（动态模型），并且完成数据值的变化（功能模型）</p></li></ol></li></ul><h3 id="画图"><a href="#画图" class="headerlink" title="画图"></a>画图</h3><ul><li><p><strong>数据流图</strong></p><p>源点和终点是矩形</p><p>变换数据的处理是圆角矩形</p></li><li><p><strong>程序流程图</strong></p><p>开始和停止是圆角矩形</p><p>处理是矩形</p></li><li><p>盒图（NS图）</p><p><img src="http://cdn.upeveryday.cn/img/image-20211202113323838.png" alt="image-20211202113323838"></p></li><li><p>PAD图</p><p><img src="http://cdn.upeveryday.cn/img/image-20211202115217503.png" alt="image-20211202115217503"></p></li><li></li></ul>]]></content>
<categories>
<category> Courses </category>
</categories>
<tags>
<tag> technology </tag>
</tags>
</entry>
<entry>
<title>Git使用技巧</title>
<link href="/2023/01/05/Git/git/"/>
<url>/2023/01/05/Git/git/</url>
<content type="html"><![CDATA[<h1 id="Git"><a href="#Git" class="headerlink" title="Git"></a>Git</h1><h2 id="1-Git简介"><a href="#1-Git简介" class="headerlink" title="1. Git简介"></a>1. Git简介</h2><p>Git是<font color='red'>分布式版本控制系统</font>（distributed version control system，简称DVCS），分为本地仓库和远程仓库</p><p><img src="http://cdn.upeveryday.cn/img/image-20210601002731835.png" alt="image-20210601002731835"></p><h2 id="2-Git工作流程"><a href="#2-Git工作流程" class="headerlink" title="2. Git工作流程"></a>2. Git工作流程</h2><p><img src="http://cdn.upeveryday.cn/img/image-20210601004713183.png" alt="image-20210601004713183"></p><h3 id="clone与pull的区别"><a href="#clone与pull的区别" class="headerlink" title="clone与pull的区别"></a>clone与pull的区别</h3><ol><li>clone操作是一个从无到有的<strong>克隆</strong>操作（只执行一次）。因此不需要本地进行<code>git init</code>初始化</li><li>git pull是拉取远程分支更新到本地仓库的操作（要执行很多次）。事实上，git pull是相当于从远程仓库获取最新版本，然后再与本地分支merge（合并）。</li></ol><p><code>git init</code>把当前目录变成Git可以管理的仓库</p><p><code>git add</code>把文件添加到仓库</p><p> <code>git add .</code>添加文件下所有文件及文件夹</p><p><code>git commit -m "comment"</code>把文件提交到仓库</p><blockquote><p>为什么Git添加文件需要<code>add</code>，<code>commit</code>一共两步呢？因为<code>commit</code>可以一次提交很多文件，所以你可以多次<code>add</code>不同的文件，比如：</p><figure class="highlight plaintext"><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">$ git add file1.txt</span><br><span class="line">$ git add file2.txt file3.txt</span><br><span class="line">$ git commit -m "add 3 files."</span><br></pre></td></tr></table></figure></blockquote><p><code>git status</code>查看仓库当前的状态</p><p><code>git diff</code>查看修改之后的不同（difference）</p><h2 id="版本回退"><a href="#版本回退" class="headerlink" title="版本回退"></a>版本回退</h2><p>穿梭前，用<code>git log --pretty=oneline</code>可以查看提交历史，以便确定要回退到哪个版本。</p><p><code>HEAD</code>指向的版本就是当前版本，因此，Git允许我们在版本的历史之间穿梭，使用命令<code>git reset --hard commit_id</code>。</p><p>要重返未来，用<code>git reflog</code>查看命令历史，以便确定要回到未来的哪个版本。</p><h2 id="工作区和版本库"><a href="#工作区和版本库" class="headerlink" title="工作区和版本库"></a>工作区和版本库</h2><p><strong>工作区</strong>：<code>git init</code>把当前目录变成工作区</p><p><strong>版本库</strong>：工作区的隐藏目录<code>.git</code>，是Git的版本库。</p><p>Git的版本库里存了很多东西，其中最重要的就是称为stage（或者叫index）的<strong>暂存区</strong>，还有Git为我们自动创建的第一个分支<code>master</code>，以及指向<code>master</code>的一个指针叫<code>HEAD</code>。</p><p><img src="https://www.liaoxuefeng.com/files/attachments/919020037470528/0" alt="img"></p><blockquote><p>第一步是用<code>git add</code>把文件添加进去，实际上就是把文件修改添加到暂存区；</p><p>第二步是用<code>git commit</code>提交更改，实际上就是把暂存区的所有内容提交到当前分支。</p></blockquote><h2 id="撤销修改"><a href="#撤销修改" class="headerlink" title="撤销修改"></a>撤销修改</h2><p>场景1：当你改乱了工作区某个文件的内容，想直接丢弃工作区的修改时，用命令<code>git restore <file></code>。</p><p>场景2：当你不但改乱了工作区某个文件的内容，还添加到了暂存区时，想丢弃修改，分两步，第一步用命令<code>git restore --staged <file></code>，就回到了场景1，第二步按场景1操作。</p><p>场景3：已经提交了不合适的修改到版本库时，想要撤销本次提交，参考版本回退一节，不过前提是没有推送到远程库。</p><h2 id="删除文件"><a href="#删除文件" class="headerlink" title="删除文件"></a>删除文件</h2><p><code>rm file</code>删除文件</p><p>现在你有两个选择，一是确实要从版本库中删除该文件，那就用命令<code>git rm file</code>删掉，并且<code>git commit</code></p><p>另一种情况是删错了，因为版本库里还有呢，所以可以很轻松地把误删的文件恢复到最新版本：<code>"git restore <file></code></p><h2 id="添加远程库"><a href="#添加远程库" class="headerlink" title="添加远程库"></a>添加远程库</h2><p>第1步：创建SSH Key。在用户主目录下（<code>cd ~</code>然后<code>pwd</code>，即可看到用户主目录路径<code>C:\Users\ThinkPad\.ssh</code>），看看有没有.ssh目录，如果有，再看看这个目录下有没有<code>id_rsa</code>和<code>id_rsa.pub</code>这两个文件，如果已经有了，可直接跳到下一步。如果没有，打开Shell（Windows下打开Git Bash），创建SSH Key：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t rsa -C "[email protected]"</span><br></pre></td></tr></table></figure><p>把邮件地址换成自己的，然后一路回车，都使用默认值即可</p><p>如果一切顺利的话，可以在用户主目录里找到<code>.ssh</code>目录，里面有<code>id_rsa</code>和<code>id_rsa.pub</code>两个文件，这两个就是<strong>SSH Key的秘钥对</strong>，<code>id_rsa</code>是私钥，不能泄露出去，<code>id_rsa.pub</code>是公钥，可以放心地告诉任何人。</p><p>第2步：登陆GitHub，打开“Account settings”，“SSH Keys”页面：</p><p>然后，点“Add SSH Key”，填上任意Title，在Key文本框里粘贴<code>id_rsa.pub</code>文件的内容</p><h2 id="关联-amp-提交远程库"><a href="#关联-amp-提交远程库" class="headerlink" title="关联&提交远程库"></a>关联&提交远程库</h2><p>要关联一个远程库，使用命令<code>git remote add blog [email protected]:GGBond6/push_blog.git</code>；</p><p>关联一个远程库时必须给远程库指定一个名字，<code>origin</code>是默认习惯命名；</p><p>关联后，使用命令<code>git push -u origin master</code>第一次推送master分支的所有内容；</p><p>此后，每次本地提交后，只要有必要，就可以使用命令<code>git push origin master</code>推送最新修改；</p><h2 id="解绑远程库"><a href="#解绑远程库" class="headerlink" title="解绑远程库"></a>解绑远程库</h2><p><strong>查看本地已经关联的远程库：</strong><code>git remote -v</code></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git remote remove origin</span><br></pre></td></tr></table></figure><h2 id="克隆远程库"><a href="#克隆远程库" class="headerlink" title="克隆远程库"></a>克隆远程库</h2><p>要克隆一个仓库，首先必须知道仓库的地址，然后使用<code>git clone</code>命令克隆。</p><p>Git支持多种协议，包括<code>https</code>，但<code>ssh</code>协议速度最快。</p><h2 id="分支管理"><a href="#分支管理" class="headerlink" title="分支管理"></a>分支管理</h2><p>查看分支：<code>git branch</code></p><p>查看项目的分支们(包括本地和远程)：<code>git branch -a</code></p><p>删除本地分支：<code>git branch -d <name></code></p><p>删除远程分支：<code>git push origin --delete <Name></code></p><p>创建分支：<code>git branch <name></code></p><p>切换分支：<code>git switch <name></code></p><p>创建+切换分支：<code>git switch -c <name></code></p><p>合并某分支到当前分支：<code>git merge <name></code></p><p>重命名分支<code>git branch -M <name></code></p><h2 id="同一客户端下使用多个git账号"><a href="#同一客户端下使用多个git账号" class="headerlink" title="同一客户端下使用多个git账号"></a>同一客户端下使用多个git账号</h2><h3 id="1-生成新的-SSH-keys"><a href="#1-生成新的-SSH-keys" class="headerlink" title="1. 生成新的 SSH keys"></a>1. 生成新的 SSH keys</h3><p>在用户主目录下（<code>cd ~</code>然后<code>pwd</code>，即可看到用户主目录路径）的.ssh目录中打开git bash</p><figure class="highlight plaintext"><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">ssh-keygen -t rsa -C "[email protected]"</span><br><span class="line">ssh-keygen -t rsa -C "[email protected]"</span><br></pre></td></tr></table></figure><p>在生成第一组 <strong>id_rsa</strong> 和 <strong>id_rsa.pub_</strong> 可以选用默认的文件名，在出现提示输入文件名的时候要输入一个不同的文件名，<strong>比如：</strong>这里填的是 <code>id_rsa_new</code></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Enter file in which to save the key (~/.ssh/id_rsa): id_rsa_new</span><br></pre></td></tr></table></figure><h3 id="2-将公钥添加到GitHub的-SSH-设置中"><a href="#2-将公钥添加到GitHub的-SSH-设置中" class="headerlink" title="2. 将公钥添加到GitHub的 SSH 设置中"></a>2. 将公钥添加到GitHub的 SSH 设置中</h3><h3 id="3-配置-ssh-config-文件"><a href="#3-配置-ssh-config-文件" class="headerlink" title="3. 配置 ~/.ssh/config 文件"></a>3. 配置 ~/.ssh/config 文件</h3><p>通过以上步骤，公钥、密钥分别被添加到 git 服务器和本地了。下面我们需要在本地创建一个密钥配置文件，通过该文件，实现根据仓库的 remote 链接地址自动选择合适的私钥。</p><figure class="highlight plaintext"><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"># 该文件用于配置私钥对应的服务器</span><br><span class="line">Host ggbond6 # 别名，随便定 后面配置地址有用</span><br><span class="line"> HostName ssh.github.com</span><br><span class="line"> User git</span><br><span class="line"> IdentityFile ~/.ssh/id_rsa_ggbond6</span><br><span class="line"># 该文件用于配置私钥对应的服务器</span><br><span class="line">Host ggbondd # 别名，随便定 后面配置地址有用</span><br><span class="line"> HostName ssh.github.com</span><br><span class="line"> User git</span><br><span class="line"> IdentityFile ~/.ssh/id_rsa_ggbondd</span><br></pre></td></tr></table></figure><h3 id="4-测试一下"><a href="#4-测试一下" class="headerlink" title="4. 测试一下"></a>4. 测试一下</h3><figure class="highlight plaintext"><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">ssh -T git@ggbond6</span><br><span class="line">SSH -T git@ggbondd</span><br></pre></td></tr></table></figure><figure class="highlight plaintext"><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">Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access.</span><br></pre></td></tr></table></figure><h3 id="5-本地仓库的用户配置"><a href="#5-本地仓库的用户配置" class="headerlink" title="5. 本地仓库的用户配置"></a>5. 本地仓库的用户配置</h3><p>git 的配置分为三级别，System —> Global —>Local。System 即系统级别，Global 为配置的全局，Local 为仓库级别，优先级是 Local > Global > System。</p><h4 id="查看配置"><a href="#查看配置" class="headerlink" title="查看配置"></a>查看配置</h4><figure class="highlight plaintext"><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">git config --local -l</span><br><span class="line">git config --global -l</span><br><span class="line">git config --system -l</span><br></pre></td></tr></table></figure><h4 id="清除-Git-的全局设置"><a href="#清除-Git-的全局设置" class="headerlink" title="清除 Git 的全局设置"></a>清除 Git 的全局设置</h4><figure class="highlight plaintext"><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">git config --global --unset user.name</span><br><span class="line">git config --global --unset user.email</span><br></pre></td></tr></table></figure><p>因此我们需要为每个仓库单独配置用户名信息，假设我们要配置 github 的某个仓库，进入该仓库后，执行：</p><figure class="highlight plaintext"><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">git config --local user.name "ggbondd"</span><br><span class="line">git config --local user.email "[email protected]"</span><br></pre></td></tr></table></figure><p>执行完毕后，通过以下命令查看本仓库的所有配置信息：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git config --local -l</span><br></pre></td></tr></table></figure><p>至此你已经配置好了 Local 级别的配置了，此时提交该仓库的代码，提交用户名就是你设置的 Local 级别的用户名了</p><h3 id="6-绑定远程库"><a href="#6-绑定远程库" class="headerlink" title="6. 绑定远程库"></a>6. 绑定远程库</h3><p>需要将github.com修改成ggbondd(配置文件中的Host)</p><figure class="highlight plaintext"><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">git remote add fp git@ggbondd:ggbondd/fucking-physical.git</span><br><span class="line">git branch -M main</span><br><span class="line">git push -u fp main</span><br></pre></td></tr></table></figure><figure class="highlight plaintext"><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">git remote add origin git@ggbond6:GGBond6/typora.git</span><br><span class="line">git branch -M main</span><br><span class="line">git push -u origin main</span><br></pre></td></tr></table></figure><h1 id="本地仓库"><a href="#本地仓库" class="headerlink" title="本地仓库"></a>本地仓库</h1><p>练习网站：<a href="https://learngitbranching.js.org/?locale=zh_CN">https://learngitbranching.js.org/?locale=zh_CN</a></p><blockquote><p> <code>reset</code> 可以重新开始</p><p> <code>Esc</code> 可以跳过讲解。</p><p><code>undo</code>可以撤销</p><p><code>hint</code> 显示提示指令</p><p><code>objective</code> 是目标</p></blockquote><h2 id="分支与合并"><a href="#分支与合并" class="headerlink" title="分支与合并"></a>分支与合并</h2><h3 id="分支"><a href="#分支" class="headerlink" title="分支"></a>分支</h3><blockquote><p>主线是main，需要创建一个新的分支bugfix，同时切换到这个bugfix分支</p></blockquote><ol><li><p><code>git branch bugfix</code> 创建bugfix分支</p><p><code>git checkout bugfix</code> 切换到bugfix分支</p></li><li><p><code>git checkout -b bugfix</code>：相比上面的操作更加简洁</p></li></ol><h3 id="合并"><a href="#合并" class="headerlink" title="合并"></a>合并</h3><img src="http://cdn.upeveryday.cn/img/image-20210912211628741.png" alt="image-20210912211628741" style="zoom: 67%;" /><blockquote><p>上图的两个分支中，每个分支各有一个独立的提交，表明没有任何一个分支包含我们修改的全部内容。我们可以通过合并操作解决这个问题</p></blockquote><h4 id="方法1：git-merge"><a href="#方法1：git-merge" class="headerlink" title="方法1：git merge"></a>方法1：git merge</h4><p><code>git merge bugfix</code>：把bugfix分支合并到当前主线main分支里</p><p>main现在指向一个拥有两个父节点的提交记录；假如从 <code>main</code> 开始沿着箭头向上看，在到达起点的路上会经过所有的提交记录。这意味着 <code>main</code> 包含了对代码库的所有修改</p><img src="http://cdn.upeveryday.cn/img/image-20210912211849553.png" alt="image-20210912211849553" style="zoom: 67%;" /><p>每个分支都有不同的颜色，而每个提交记录的颜色是所有包含该提交记录的分支的颜色混合之后的颜色。所以，<code>main</code> 分支的颜色被混入到所有的提交记录，但 <code>bugFix</code> 没有。下面咱们让它也改变一下颜色。</p><p><code>git checkout bugfix</code>：将当前主线切换到bugfix分支</p><p><code>git merge main</code>：将main分支合并到主线bugfix分支中</p><img src="http://cdn.upeveryday.cn/img/image-20210912212100050.png" alt="image-20210912212100050" style="zoom: 67%;" /><p>因为min分支继承自bugfix，那么Git什么都不用做，只需要把bugfix移动到main指向的那个提交记录即可。</p><p>现在所有提交记录的颜色都一样了，这表明每一个分支都包含了代码库的所有修改</p><h4 id="方法2：git-rebase"><a href="#方法2：git-rebase" class="headerlink" title="方法2：git rebase"></a>方法2：git rebase</h4><p>Rebase 实际上就是取出一系列的提交记录，“复制”它们，然后在另外一个地方逐个的放下去。</p><p>Rebase 的优势就是可以创造更<strong>线性</strong>的提交历史，这听上去有些难以理解。如果只允许使用 Rebase 的话，代码库的提交历史将会变得异常清晰。</p><img src="http://cdn.upeveryday.cn/img/image-20210912215223487.png" alt="image-20210912215223487" style="zoom:67%;" /><blockquote><p>还是准备了两个分支；注意当前所在的分支是 bugFix（星号标识的是当前分支）</p><p>我们想要把 bugFix 分支里的工作直接移到 main 分支上。移动以后会使得两个分支的功能看起来像是按顺序开发，但实际上它们是并行开发的。</p></blockquote><p><code>git rebase main</code>：将main分支合并到主线bugfix分支</p><img src="http://cdn.upeveryday.cn/img/image-20210912215528299.png" alt="image-20210912215528299" style="zoom:67%;" /><p>注意，提交记录 C3 依然存在（树上那个半透明的节点），而 C3’ 是我们 Rebase 到 main 分支上的 C3 的副本。</p><p>现在唯一的问题就是 main 还没有更新，下面咱们就来更新它吧……</p><p><code>git checkout main</code></p><p><code>git rebase bugfix</code></p><img src="http://cdn.upeveryday.cn/img/image-20210912215907588.png" alt="image-20210912215907588" style="zoom:67%;" /><h2 id="在项目树上的移动"><a href="#在项目树上的移动" class="headerlink" title="在项目树上的移动"></a>在项目树上的移动</h2><h3 id="HEAD"><a href="#HEAD" class="headerlink" title="HEAD"></a>HEAD</h3><blockquote><p><strong>HEAD是checkout的灵魂</strong>，实现切换分支与新建分支的主要功臣就是在**.git目录下的HEAD引用**</p><p>可以通过<code>cat .git/HEAD</code>查看HEAD的指向，如果 HEAD 指向的是一个引用，还可以用 <code>git symbolic-ref HEAD</code> 查看它的指向</p></blockquote><p>HEAD默认指向分支名， 而分支名指向最近一次提交，都随着提交前进</p><h4 id="分离的HEAD"><a href="#分离的HEAD" class="headerlink" title="分离的HEAD"></a>分离的HEAD</h4><blockquote><p>分离的 HEAD 就是让其指向了某个具体的提交记录而不是分支名</p></blockquote><p>在命令执行之前的状态如下所示：</p><p>HEAD -> main -> C1</p><p>HEAD 指向 main， main 指向 C1</p><img src="http://cdn.upeveryday.cn/img/image-20210912220811979.png" alt="image-20210912220811979" style="zoom:67%;" /><p>执行 <code>git checkout c1</code></p><img src="http://cdn.upeveryday.cn/img/image-20210912223313005.png" alt="image-20210912223313005" style="zoom:67%;" /><h4 id="相对引用"><a href="#相对引用" class="headerlink" title="相对引用"></a>相对引用</h4><blockquote><p>通过哈希值指定提交记录很不方便，所以 Git 引入了相对引用</p></blockquote><p>使用相对引用的话，你就可以从一个易于记忆的地方（比如 <code>bugFix</code> 分支或 <code>HEAD</code>）开始计算。</p><p>相对引用非常给力，这里我介绍两个简单的用法：</p><ul><li>使用 <code>^</code> 向上移动 1 个提交记录</li><li>使用 <code>~<num></code> 向上移动多个提交记录，如 <code>~3</code></li></ul><h5 id="操作符"><a href="#操作符" class="headerlink" title="操作符^"></a>操作符^</h5><p>首先看看操作符 (^)。把这个符号加在引用名称的后面，表示让 Git 寻找指定提交记录的父提交。</p><p>所以 <code>main^</code> 相当于“<code>main</code> 的父节点”。</p><p><code>main^^</code> 是 <code>main</code> 的第二个父节点</p><p>现在咱们切换到 main 的父节点</p><img src="http://cdn.upeveryday.cn/img/image-20210912225547625.png" alt="image-20210912225547625" style="zoom:67%;" /><p><code>git checkout main^</code></p><img src="http://cdn.upeveryday.cn/img/image-20210912225632694.png" alt="image-20210912225632694" style="zoom:67%;" /><h5 id="操作符-1"><a href="#操作符-1" class="headerlink" title="操作符~"></a>操作符~</h5><p>如果你想在提交树中向上移动很多步的话，敲那么多 <code>^</code> 貌似也挺烦人的，Git 当然也考虑到了这一点，于是又引入了操作符 <code>~</code>。</p><p>该操作符后面可以跟一个数字（可选，不跟数字时与 <code>^</code> 相同，向上移动一次），指定向上移动多少次。</p><h3 id="强制修改分支位置"><a href="#强制修改分支位置" class="headerlink" title="强制修改分支位置"></a>强制修改分支位置</h3><p>可以直接使用 <code>-f</code> 选项让分支指向另一个提交。例如:</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git branch -f main HEAD~3</span><br></pre></td></tr></table></figure><p>上面的命令会将 main 分支强制指向 HEAD 的第 3 级父提交。</p><h3 id="撤销变更"><a href="#撤销变更" class="headerlink" title="撤销变更"></a>撤销变更</h3><p>在 Git 里撤销变更的方法很多。和提交一样，撤销变更由底层部分（暂存区的独立文件或者片段）和上层部分（变更到底是通过哪种方式被撤销的）组成。我们这个应用主要关注的是后者。</p><p>主要有两种方法用来撤销变更 —— 一是 <code>git reset</code>，还有就是 <code>git revert</code>。</p><h4 id="git-reset"><a href="#git-reset" class="headerlink" title="git reset"></a>git reset</h4><p><code>git reset</code> 通过把分支记录回退几个提交记录来实现撤销改动。你可以将这想象成“改写历史”。<code>git reset</code> 向上移动分支，原来指向的提交记录就跟从来没有提交过一样</p><img src="http://cdn.upeveryday.cn/img/image-20210912232700848.png" alt="image-20210912232700848" style="zoom:67%;" /><p><code>git reset HEAD~1</code></p><img src="http://cdn.upeveryday.cn/img/image-20210912232808092.png" alt="image-20210912232808092" style="zoom:67%;" /><p>Git 把 main 分支移回到 <code>C1</code>；现在我们的本地代码库根本就不知道有 <code>C2</code> 这个提交了</p><p>在reset后， <code>C2</code> 所做的变更还在，但是处于未加入暂存区状态</p><h4 id="git-revert"><a href="#git-revert" class="headerlink" title="git revert"></a>git revert</h4><p>虽然在你的本地分支中使用 <code>git reset</code> 很方便，但是这种“改写历史”的方法对大家一起使用的远程分支是无效的哦！</p><p>为了撤销更改并<strong>分享这次撤销</strong>给别人，我们需要使用 <code>git revert</code>。</p><img src="http://cdn.upeveryday.cn/img/image-20210912232700848.png" alt="image-20210912232700848" style="zoom:67%;" /><p><code>git revert HEAD</code></p><img src="http://cdn.upeveryday.cn/img/image-20210912233108418.png" alt="image-20210912233108418" style="zoom:67%;" /><p>在我们要撤销的提交记录后面居然多了一个新提交！这是因为新提交记录 <code>C2'</code> 引入了<strong>更改</strong> —— 这些更改刚好是用来撤销 <code>C2</code> 这个提交的。也就是说 <code>C2'</code> 的状态与 <code>C1</code> 是相同的。</p><p>revert 之后就可以把你的更改推送到远程仓库与别人分享啦。</p><h2 id="整理提交记录"><a href="#整理提交记录" class="headerlink" title="整理提交记录"></a>整理提交记录</h2><h3 id="git-cherry-pick-lt-提交号-gt"><a href="#git-cherry-pick-lt-提交号-gt" class="headerlink" title="git cherry-pick <提交号>"></a>git cherry-pick <提交号></h3><blockquote><p>如果你想<strong>将一些提交复制到当前所在的位置（<code>HEAD</code>）下面（且必须当前分支上没有这些提交）</strong>的话， Cherry-pick 是最直接的方式了</p><p>cherry-pick：择优挑选</p></blockquote><img src="http://cdn.upeveryday.cn/img/image-20210913094053606.png" alt="image-20210913094053606" style="zoom:67%;" /><p>这里有一个仓库, 我们想将 <code>side</code> 分支上的工作复制到 <code>main</code> 分支</p><p><code>git cherry-pick c2 c4</code></p><img src="http://cdn.upeveryday.cn/img/image-20210913094330027.png" alt="image-20210913094330027" style="zoom:67%;" /><p>我们只需要提交记录 <code>C2</code> 和 <code>C4</code>，所以 Git 就将它们抓过来放到当前分支下了。</p><h3 id="交互式的rebase"><a href="#交互式的rebase" class="headerlink" title="交互式的rebase"></a>交互式的rebase</h3><p>当你知道你所需要的提交记录（并且还知道这些提交记录的哈希值）时, 用 cherry-pick 再好不过了 —— 没有比这更简单的方式了。</p><p>但是如果你<strong>不清楚想要的提交记录的哈希值</strong>呢? 幸好 Git 帮你想到了这一点, 我们可以利用<strong>交互式的 rebase</strong> —— 如果你想<strong>从一系列的提交记录中找到想要的记录,</strong> 这就是最好的方法了</p><p>交互式 rebase 指的是使用带参数 <code>--interactive</code> 的 rebase 命令, 简写为 <code>-i</code></p><p>如果你在命令后增加了这个选项, Git 会打开一个 UI 界面并<strong>列出将要被复制到目标分支的备选提交记录</strong>，它还会显示每个提交记录的哈希值和提交说明，提交说明有助于你理解这个提交进行了哪些更改。</p><p>在实际使用时，所谓的 UI 窗口一般会在文本编辑器 —— 如 Vim 中打开一个文件。</p><p>当 rebase UI界面打开时, 你能做3件事:</p><ul><li>调整提交记录的顺序（通过鼠标拖放来完成）</li><li>删除你不想要的提交（通过切换 <code>pick</code> 的状态来完成，关闭就意味着你不想要这个提交记录）</li><li>合并提交。 它允许你把多个提交记录合并成一个</li></ul><img src="http://cdn.upeveryday.cn/img/image-20210913095622910.png" alt="image-20210913095622910" style="zoom:67%;" /><p><code>git rebase -i HEAD~4</code></p><img src="http://cdn.upeveryday.cn/img/image-20210913095830843.png" alt="image-20210913095830843" style="zoom: 50%;" /><img src="http://cdn.upeveryday.cn/img/image-20210913095859179.png" alt="image-20210913095859179" style="zoom:67%;" /><h2 id="小技巧"><a href="#小技巧" class="headerlink" title="小技巧"></a>小技巧</h2><h3 id="只取一个提交记录"><a href="#只取一个提交记录" class="headerlink" title="只取一个提交记录"></a>只取一个提交记录</h3><p>来看一个在开发中经常会遇到的情况：我正在解决某个特别棘手的 Bug，<strong>为了便于调试而在代码中添加了一些调试命令并向控制台打印了一些信息</strong>。</p><p>这些调试和打印语句都在它们各自的提交记录里。最后我终于找到了造成这个 Bug 的根本原因，解决掉以后觉得沾沾自喜！</p><p>最后就差把 <code>bugFix</code> 分支里的工作合并回 <code>main</code> 分支了。你可以选择通过 fast-forward 快速合并到 <code>main</code> 分支上，但这样的话 <code>main</code> 分支就会包含我这些调试语句了</p><p>实际我们只要让 Git 复制解决问题的那一个提交记录就可以了。跟之前我们在“整理提交记录”中学到的一样，我们可以使用</p><ul><li><code>git rebase -i</code></li><li><code>git cherry-pick</code></li></ul><p>来达到目的。</p><h3 id="提交技巧1"><a href="#提交技巧1" class="headerlink" title="提交技巧1"></a>提交技巧1</h3><blockquote><p>git rebase -i</p></blockquote><p>你之前在 <code>newImage</code> 分支上进行了一次提交，然后又基于它创建了 <code>caption</code> 分支，然后又提交了一次。</p><p>此时你想对某个以前的提交记录进行一些小小的调整。比如设计师想修改一下 <code>newImage</code> 中图片的分辨率，尽管那个提交记录并不是最新的了。</p><p>我们可以通过下面的方法来克服困难：</p><ul><li><p>先用 <code>git rebase -i</code> 将提交重新排序，然后把我们想要修改的提交记录挪到最前</p></li><li><p>然后用 <code>git commit --amend</code> 来进行一些小修改</p><p>git commit –amend命令用来修复最近一次commit. 可以让你合并你缓存区的修改和上一次commit, 而不是提交一个新的快照. 还可以用来编辑上一次的commit描述. 记住amend不是修改最近一次commit, 而是整个替换掉他. 对于Git来说是一个新的commit</p></li><li><p>接着再用 <code>git rebase -i</code> 来将他们调回原来的顺序</p></li><li><p>最后我们把 main 移到修改的最前端（用你自己喜欢的方法），就大功告成啦！</p></li></ul><p>当然完成这个任务的方法不止上面提到的一种（我知道你在看 cherry-pick 啦），最后有必要说明一下目标状态中的那几个<code>'</code> —— 我们把这个提交移动了两次，每移动一次会产生一个 <code>'</code>；而 C2 上多出来的那个是我们在使用了 amend 参数提交时产生的，所以最终结果就是这样了。</p><p>也就是说，我在对比结果的时候只会对比提交树的结构，对于 <code>'</code> 的数量上的不同，并不纳入对比范围内。只要你的 <code>main</code> 分支结构与目标结构相同，我就算你通过。</p><h3 id="提交技巧2"><a href="#提交技巧2" class="headerlink" title="提交技巧2"></a>提交技巧2</h3><blockquote><p>git cherry-pick</p></blockquote><p>cherry-pick 可以将提交树上任何地方的提交记录取过来<strong>追加到 HEAD 上</strong>（只要不是 HEAD 上游的提交就没问题）</p><h3 id="git-tag"><a href="#git-tag" class="headerlink" title="git tag"></a>git tag</h3><p>通过前面的学习，我们发现分支很容易被人为移动，并且当有新的提交时，它也会移动。分支很容易被改变，大部分分支还只是临时的，并且还一直在变。</p><p>那么有没有什么可以<em>永远</em>指向某个提交记录的标识呢，比如软件发布新的大版本，或者是修正一些重要的 Bug 或是增加了某些新特性，有没有比分支更好的可以永远指向这些提交的方法呢？</p><p>Git 的 <strong>tag</strong> 就是干这个用的啊，它们可以（在某种程度上 —— 因为标签可以被删除后重新在另外一个位置创建同名的标签）<strong>永久地将某个特定的提交命名为里程碑</strong>，然后就可以像分支一样引用了。</p><p>更难得的是，<strong>它们并不会随着新的提交而移动</strong>。你也不能检出到某个标签上面进行修改提交，它就像是提交树上的一个锚点，标识了某个特定的位置。</p><img src="http://cdn.upeveryday.cn/img/image-20210913104446451.png" alt="image-20210913104446451" style="zoom:67%;" /><p>咱们先建立一个标签，指向提交记录 <code>C1</code>，表示这是我们 1.0 版本。如果不指定提交记录，Git 会用 <code>HEAD</code>所指向的位置。</p><p><code>git tag v1 c1</code></p><img src="http://cdn.upeveryday.cn/img/image-20210913104606201.png" alt="image-20210913104606201" style="zoom:67%;" /><h3 id="git-describe"><a href="#git-describe" class="headerlink" title="git describe"></a>git describe</h3><p>由于标签在代码库中起着“锚点”的作用，Git 还为此专门设计了一个命令用来<strong>描述</strong>离你最近的锚点（也就是标签），它就是 <code>git describe</code>！</p><p>Git Describe 能帮你在提交历史中移动了多次以后找到方向；当你用 <code>git bisect</code>（一个查找产生 Bug 的提交记录的指令）找到某个提交记录时，或者是当你坐在你那刚刚度假回来的同事的电脑前时， 可能会用到这个命令。</p><p><code>git describe</code> 的语法是：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git describe <ref></span><br></pre></td></tr></table></figure><p><code><ref></code> 可以是任何能被 Git 识别成提交记录的引用，如果你没有指定的话，Git 会以你目前所检出的位置（<code>HEAD</code>）。</p><p>它输出的结果是这样的：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><tag>_<numCommits>_g<hash></span><br></pre></td></tr></table></figure><p><code>tag</code> 表示的是离 <code>ref</code> 最近的标签， <code>numCommits</code> 是表示这个 <code>ref</code> 与 <code>tag</code> 相差有多少个提交记录， <code>hash</code> 表示的是你所给定的 <code>ref</code> 所表示的提交记录哈希值的前几位。</p><p>当 <code>ref</code> 提交记录上有某个标签时，则只输出标签名称</p><img src="http://cdn.upeveryday.cn/img/image-20210913105542351.png" alt="image-20210913105542351" style="zoom:67%;" /><p>执行<code>git tag v2 c3</code>命令后：</p><p>执行<code>git describe main</code> 会输出：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">v1_2_gC2</span><br></pre></td></tr></table></figure><p>执行<code>git describe side</code> 会输出：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">v2_1_gC4</span><br></pre></td></tr></table></figure><h1 id="远程仓库"><a href="#远程仓库" class="headerlink" title="远程仓库"></a>远程仓库</h1><h2 id="push-amp-pull"><a href="#push-amp-pull" class="headerlink" title="push & pull"></a>push & pull</h2><h3 id="远程分支"><a href="#远程分支" class="headerlink" title="远程分支"></a>远程分支</h3><p>远程分支有一个特别的属性，在你<strong>检出（checkout）时自动进入分离 HEAD 状态</strong>（HEAD指向一个提交记录而不是分支）。</p><p>Git 这么做是出于<strong>不能直接在这些分支上进行操作的原因</strong>, 你必须在别的地方完成你的工作, （更新了远程分支之后）再用远程分享你的工作成果。</p><p>远程分支有一个<strong>命名规范</strong> —— 它们的格式是:</p><ul><li><code><remote name>/<branch name></code></li></ul><p>因此，如果你看到一个名为 <code>o/main</code> 的分支，那么这个分支就叫 <code>main</code>，远程仓库的名称就是 <code>o</code>。</p><p>大多数的开发人员会将它们主要的远程仓库命名为 <code>origin</code>，并不是 <code>o</code>。这是因为当你用 <code>git clone</code> 某个仓库时，Git 已经帮你把远程仓库的名称设置为 <code>origin</code> 了</p><img src="http://cdn.upeveryday.cn/img/image-20210913111159307.png" alt="image-20210913111159307" style="zoom:67%;" /><p><code>git checkout o/main</code></p><p><code>git commit</code></p><img src="http://cdn.upeveryday.cn/img/image-20210913111259498.png" alt="image-20210913111259498" style="zoom:67%;" /><p>执行之后，<strong>Git 变成了分离 HEAD 状态，当添加新的提交时 <code>o/main</code> 也不会更新</strong>。这是因为 <code>o/main</code> 只有在远程仓库中相应的分支更新了以后才会更新。</p><h4 id="本地新分支xxx推送到远程分支"><a href="#本地新分支xxx推送到远程分支" class="headerlink" title="本地新分支xxx推送到远程分支"></a>本地新分支xxx推送到远程分支</h4><figure class="highlight shell"><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">git checkout xxx</span><br><span class="line">git push -u chatroom xxx</span><br></pre></td></tr></table></figure><h3 id="git-fetch"><a href="#git-fetch" class="headerlink" title="git fetch"></a>git fetch</h3><blockquote><p>拉取远程仓库的更新到本地的远程分支</p></blockquote><p>Git 远程仓库相当的操作实际可以归纳为两点：<strong>向远程仓库传输数据以及从远程仓库获取数据</strong>。</p><p>既然我们能与远程仓库同步，那么就可以分享任何能被 Git 管理的更新（因此可以分享代码、文件、想法、情书等等）。</p><p>如何从远程仓库<strong>获取数据</strong> —— 命令如其名，它就是 <code>git fetch</code>。</p><img src="http://cdn.upeveryday.cn/img/image-20210913112022943.png" alt="image-20210913112022943" style="zoom:67%;" /><p>上图中有一个远程仓库，它有2个我们本地仓库中没有的</p><p>执行<code>git fetch</code>之后，<code>C2</code>,<code>C3</code> 被下载到了本地仓库，<strong>同时远程分支 <code>o/main</code> 也被更新</strong></p><img src="http://cdn.upeveryday.cn/img/image-20210913163512546.png" alt="image-20210913163512546" style="zoom:67%;" /><h4 id="git-fetch做的事情"><a href="#git-fetch做的事情" class="headerlink" title="git fetch做的事情"></a>git fetch做的事情</h4><p><code>git fetch</code> 完成了仅有的但是很重要的两步:</p><ul><li>从远程仓库下载本地仓库中缺失的提交记录</li><li>更新远程分支指针(如 <code>o/main</code>)</li></ul><p><code>git fetch</code> 实际上<strong>将本地仓库中的远程分支更新成了远程仓库相应分支最新的状态</strong>。</p><p>如果你还记得上一节课程中我们说过的，远程分支反映了远程仓库在你<strong>最后一次与它通信时</strong>的状态，<code>git fetch</code> 就是你与远程仓库通信的方式了！</p><p><code>git fetch</code> 通常通过互联网（使用 <code>http://</code> 或 <code>git://</code> 协议) 与远程仓库通信。</p><h4 id="git-fetch不会做的事情"><a href="#git-fetch不会做的事情" class="headerlink" title="git fetch不会做的事情"></a>git fetch不会做的事情</h4><p><code>git fetch</code> 并不会改变你本地仓库的状态。<strong>它不会更新你的 <code>main</code> 分支</strong>，也不会修改你磁盘上的文件。</p><p>理解这一点很重要，因为许多开发人员误以为执行了 <code>git fetch</code> 以后，他们本地仓库就与远程仓库同步了。它可能已经将进行这一操作所需的所有数据都下载了下来，但是<strong>并没有</strong>修改你本地的文件。</p><p>所以,<strong>可以将 <code>git fetch</code> 的理解为单纯的下载操作</strong>。</p><h3 id="git-pull"><a href="#git-pull" class="headerlink" title="git pull"></a>git pull</h3><p>当<strong>远程分支中有新的提交时</strong>，你可以像合并本地分支那样来合并远程分支。也就是说就是你可以执行以下命令:</p><ul><li><code>git cherry-pick o/main</code></li><li><code>git rebase o/main</code></li><li><code>git merge o/main</code></li><li>等等</li></ul><p>实际上，由于先抓取更新再合并到本地分支这个流程很常用，因此 Git <strong>提供了一个专门的命令来完成这两个操作</strong>。它就是我们要讲的 <code>git pull</code>。</p><p>我们先来看看 <code>fetch</code>、<code>merge</code> 依次执行的效果</p><img src="http://cdn.upeveryday.cn/img/image-20210913164542616.png" alt="image-20210913164542616" style="zoom:67%;" /><p><code>git fetch</code>：将远程仓库的新提交拉取到本地的远程分支</p><p><code>git merge o/main</code>：将远程分支o/main合并到主线分支main</p><img src="http://cdn.upeveryday.cn/img/image-20210913164711487.png" alt="image-20210913164711487" style="zoom: 80%;" /><p>我们用 <code>fetch</code> 下载了 <code>C3</code>, 然后通过 <code>git merge o/main</code> 合并了这一提交记录。现在我们的 <code>main</code> 分支包含了远程仓库中的更新（在本例中远程仓库名为 <code>origin</code>）</p><h4 id="git-pull包含的简写"><a href="#git-pull包含的简写" class="headerlink" title="git pull包含的简写"></a>git pull包含的简写</h4><ol><li><strong><code>git pull</code> 就是 git fetch 和 git merge 的缩写</strong></li><li><strong><code>git pull --rebase</code> 就是 fetch 和 rebase 的简写</strong></li></ol><h3 id="git-push"><a href="#git-push" class="headerlink" title="git push"></a>git push</h3><p><code>git push</code> 不带任何参数时的行为与 Git 的一个名为 <code>push.default</code> 的配置有关。它的默认值取决于你正使用的 Git 的版本，但是在教程中我们使用的是 <code>upstream</code>。 这没什么太大的影响，但是在你的项目中进行推送之前，最好检查一下这个配置</p><img src="http://cdn.upeveryday.cn/img/image-20210913171209433.png" alt="image-20210913171209433" style="zoom:67%;" /><p><code>git push</code></p><img src="http://cdn.upeveryday.cn/img/image-20210913171254633.png" alt="image-20210913171254633" style="zoom:67%;" /><p>远程仓库接收了 <code>C2</code>，远程仓库中的 <code>main</code> 分支也被更新到指向 <code>C2</code> 了，我们的远程分支 (o/main) 也同样被更新了。<strong>所有的分支都同步了</strong>！</p><h3 id="远程服务器拒绝-Remote-Rejected"><a href="#远程服务器拒绝-Remote-Rejected" class="headerlink" title="远程服务器拒绝(Remote Rejected)"></a>远程服务器拒绝(Remote Rejected)</h3><p>如果你是在一个大的合作团队中工作, 很可能是main被锁定了, 需要一些Pull Request流程来合并修改。如果你直接提交(commit)到本地main, 然后试图推送(push)修改, 你将会收到这样类似的信息:</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">! [远程服务器拒绝] main -> main (TF402455: 不允许推送(push)这个分支; 你必须使用pull request来更新这个分支.)</span><br></pre></td></tr></table></figure><p>远程服务器拒绝直接推送(push)提交到main, 因为策略配置要求 pull requests 来提交更新.</p><p>你应该按照流程,新建一个分支, 推送(push)这个分支并申请pull request,但是你忘记并直接提交给了main.现在你卡住并且无法推送你的更新.</p>]]></content>
<categories>
<category> Git </category>
</categories>
<tags>
<tag> technology </tag>
</tags>
</entry>
<entry>
<title>Vue全家桶</title>
<link href="/2023/01/05/frontend/Vue/"/>
<url>/2023/01/05/frontend/Vue/</url>
<content type="html"><![CDATA[<h2 id="MVVM模式"><a href="#MVVM模式" class="headerlink" title="MVVM模式"></a>MVVM模式</h2><h3 id="MVVM"><a href="#MVVM" class="headerlink" title="MVVM"></a>MVVM</h3><p>M 是模型（model），V是视图（view），VM（ViewModel）是V和M的双向协调者。</p><img src="http://cdn.upeveryday.cn/img/image-20211109185324431.png" alt="image-20211109185324431" style="zoom: 80%;" /><h4 id="view"><a href="#view" class="headerlink" title="view"></a>view</h4><blockquote><p>DOM元素</p></blockquote><p><strong>View是视图层，也就是用户界面</strong>。前端主要由HTML和css来构建，为了更方便地展现viewModel或者Model层的数据，已经产生了各种各样的前后端模板语言，比如FreeMarker、Thymeleaf等等，各大MVVM框架如Vue.js， AngularJs， EJS等也都有自己用来构建用户界面的内置模板语言。</p><h4 id="model"><a href="#model" class="headerlink" title="model"></a>model</h4><blockquote><p>data中的属性</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></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span><br><span class="line"> <span class="attr">data</span>: {</span><br><span class="line"> <span class="attr">ok</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">message</span>: <span class="string">'RUNOOB'</span>,</span><br><span class="line"> <span class="attr">id</span> : <span class="number">1</span></span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line"></script></span><br></pre></td></tr></table></figure></blockquote><p><strong>Model是指数据模型</strong>，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则</p><h4 id="ViewModel"><a href="#ViewModel" class="headerlink" title="ViewModel"></a>ViewModel</h4><p>ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层，<strong>前端开发者对从后端获取的Model数据进行转换处理，做二次封装，以生成符合View层使用预期的视图数据模型</strong>。</p><p>需要注意的是ViewModel所封装出来的数据模型包括视图的<strong>状态</strong>和<strong>行为</strong>两部分，而<strong>Model层的数据模型是只包含状态</strong>的</p><ul><li>比如页面的这一块展示什么，那一块展示什么这些都属于视图状态（展示）</li><li>页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互）</li></ul><p>视图状态和行为都封装在了ViewModel里。这样的封装使得 ViewModel 可以完整地去描述View 层。<strong>由于实现了双向绑定，ViewModel的内容会实时展现在View层</strong>，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图。</p><p>MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护ViewModel，更新数据视图就会自动得到相应更新，真正实现事件驱动编程。 View 层展现的不是Model层的数据，而是ViewModel的数据，由ViewModel 负责与Model 层交互，这就<strong>完全解耦View 层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。</strong></p><h3 id="MVC"><a href="#MVC" class="headerlink" title="MVC"></a>MVC</h3><p>M 是模型，V是视图，C是控制器（业务）</p><hr><p>vue使用了MVVM<strong>架构</strong>来设计<strong>框架</strong>。架构是说逻辑分层，框架是指具体的实现。</p><p>很明显VM的实现是这个框架的核心，也是最复杂的地方。<strong>从更大范围上看，vue专注界面的实现，也就是MVC中的V层</strong>。因此，vue只是一个局部框架，传统MVC中的模型和业务不是vue的范畴，需要自行设计。</p><ul><li>Model：模型层，这里表示JavaScript对象</li><li>View：视图层，这里表示DOM（HTML操作的元素）</li><li>ViewModel：连接视图和数据的中间件</li></ul><h2 id="vue基础"><a href="#vue基础" class="headerlink" title="vue基础"></a>vue基础</h2><h3 id="1-安装"><a href="#1-安装" class="headerlink" title="1. 安装"></a>1. 安装</h3><h4 id="lt-script-gt-引入"><a href="#lt-script-gt-引入" class="headerlink" title="<script>引入"></a><code><script></code>引入</h4><p>直接下载并用 <code><script></code> 标签引入，<code>Vue</code> 会被注册为一个全局变量。</p><p>对于制作原型或学习，你可以这样使用最新版本：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><script src="https://cdn.jsdelivr.net/npm/vue"></script></span><br></pre></td></tr></table></figure><p>对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script></span><br></pre></td></tr></table></figure><h3 id="2-常用操作"><a href="#2-常用操作" class="headerlink" title="2. 常用操作"></a>2. 常用操作</h3><h4 id="变量取值"><a href="#变量取值" class="headerlink" title="变量取值"></a>变量取值</h4><h5 id="标签内取值"><a href="#标签内取值" class="headerlink" title="标签内取值"></a>标签内取值</h5><blockquote><p>使用双引号</p></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></pre></td><td class="code"><pre><span class="line"><span class="comment"><!--view层：模板--></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> <span class="attr">v-text</span>=<span class="string">"message"</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> vm=<span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="javascript"> <span class="attr">el</span>:<span class="string">"#app"</span>,</span></span><br><span class="line"><span class="javascript"> <span class="comment">//model：数据对象</span></span></span><br><span class="line"><span class="javascript"> <span class="attr">data</span>:{</span></span><br><span class="line"><span class="javascript"> <span class="attr">message</span>:<span class="string">"hello world!"</span></span></span><br><span class="line"><span class="javascript"> }</span></span><br><span class="line"><span class="javascript"> })</span></span><br><span class="line"><span class="javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h5 id="标签外取值"><a href="#标签外取值" class="headerlink" title="标签外取值"></a>标签外取值</h5><blockquote><p>使用双大括号<code>{{}}</code></p></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></pre></td><td class="code"><pre><span class="line"><span class="comment"><!--view层：模板--></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> {{ message }}</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> vm=<span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="javascript"> <span class="attr">el</span>:<span class="string">"#app"</span>,</span></span><br><span class="line"><span class="javascript"> <span class="comment">//model：数据</span></span></span><br><span class="line"><span class="javascript"> <span class="attr">data</span>:{</span></span><br><span class="line"><span class="javascript"> <span class="attr">message</span>:<span class="string">"hello world!"</span></span></span><br><span class="line"><span class="javascript"> }</span></span><br><span class="line"><span class="javascript"> })</span></span><br><span class="line"><span class="javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h4 id="绑定HTML属性v-bind"><a href="#绑定HTML属性v-bind" class="headerlink" title="绑定HTML属性v-bind"></a>绑定HTML属性v-bind</h4><blockquote><p>v-bind</p></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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">v-bind:title</span>=<span class="string">"title"</span>></span>html属性不能使用双大括号形式绑定，只能使用v-bind指令<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line">......</span><br><span class="line">var vm = new Vue({</span><br><span class="line"> el: '#app',</span><br><span class="line"> data: {</span><br><span class="line"> title: 'title content'</span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p>这里的 html 最后会渲染成：</p><figure class="highlight xml"><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="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">title</span>=<span class="string">"title content"</span>></span>html属性不能使用双大括号形式绑定，只能使用v-bind指令<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><p><strong>v-bind缩写</strong></p><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></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- 完整语法 --></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">v-bind:href</span>=<span class="string">"url"</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">a</span> <span class="attr">:href</span>=<span class="string">"url"</span>></span>...<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"></span><br><span class="line"><span class="comment"><!-- 动态参数的缩写 (2.6.0+) --></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">:</span>[<span class="attr">key</span>]=<span class="string">"url"</span>></span> ... <span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><h4 id="条件v-if"><a href="#条件v-if" class="headerlink" title="条件v-if"></a>条件v-if</h4><blockquote><p>是否显示当前标签</p></blockquote><h5 id="if-else"><a href="#if-else" class="headerlink" title="if-else"></a>if-else</h5><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 class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> ></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">v-if</span>=<span class="string">"seen"</span>></span>seen为真<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">v-else</span>></span>seen为假<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> vm=<span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="javascript"> <span class="attr">el</span>:<span class="string">"#app"</span>,</span></span><br><span class="line"><span class="javascript"> <span class="attr">data</span>:{</span></span><br><span class="line"><span class="javascript"> <span class="comment">// seen:true</span></span></span><br><span class="line"><span class="javascript"> <span class="attr">seen</span>:<span class="literal">false</span></span></span><br><span class="line"><span class="javascript"> }</span></span><br><span class="line"><span class="javascript"> })</span></span><br><span class="line"><span class="javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h5 id="if-else-if"><a href="#if-else-if" class="headerlink" title="if-else-if"></a>if-else-if</h5><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> ></span></span><br><span class="line"><span class="comment"><!-- ==只要求值相等，===要求类型和值都要相同--></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">v-if</span>=<span class="string">"type==='A'"</span>></span>A<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">v-else-if</span>=<span class="string">"type==='B'"</span>></span>B<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">v-else-if</span>=<span class="string">"type==='C'"</span>></span>C<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">v-else-if</span>=<span class="string">"type==='D'"</span>></span>D<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">v-else</span>></span>0<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> vm=<span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="javascript"> <span class="attr">el</span>:<span class="string">"#app"</span>,</span></span><br><span class="line"><span class="javascript"> <span class="attr">data</span>:{</span></span><br><span class="line"><span class="javascript"> <span class="attr">type</span>:<span class="string">'1'</span></span></span><br><span class="line"><span class="javascript"> }</span></span><br><span class="line"><span class="javascript"> })</span></span><br><span class="line"><span class="javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h4 id="循环v-for"><a href="#循环v-for" class="headerlink" title="循环v-for"></a>循环v-for</h4><blockquote><p>v-for</p></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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> ></span></span><br><span class="line"> <span class="tag"><<span class="name">ol</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"(todo,index) in todos"</span>></span></span><br><span class="line"> <span class="comment"><!--index是当前遍历元素的索引--></span></span><br><span class="line"> {{ todo.text }}--{{index}}</span><br><span class="line"> <span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">ol</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> vm=<span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="javascript"> <span class="attr">el</span>:<span class="string">"#app"</span>,</span></span><br><span class="line"><span class="javascript"> <span class="comment">//js中对象用{}，数组用[]</span></span></span><br><span class="line"><span class="javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="javascript"> <span class="attr">todos</span>: [<span class="comment">//数组中存放对象</span></span></span><br><span class="line"><span class="javascript"> { <span class="attr">text</span>: <span class="string">'学习 JavaScript'</span> },</span></span><br><span class="line"><span class="javascript"> { <span class="attr">text</span>: <span class="string">'学习 Vue'</span> },</span></span><br><span class="line"><span class="javascript"> { <span class="attr">text</span>: <span class="string">'整个牛项目'</span> }</span></span><br><span class="line"><span class="javascript"> ]</span></span><br><span class="line"><span class="javascript"> }</span></span><br><span class="line"><span class="javascript"> })</span></span><br><span class="line"><span class="javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h5 id="key属性"><a href="#key属性" class="headerlink" title="key属性"></a>key属性</h5><p>当使用列表渲染时，永远添加<code>key</code>属性，这样可以提高列表渲染的效率，提高了页面的性能。</p><p>如果我们要利用<code>key</code>属性的优点，必须保证<strong>同一父元素的所有子元素有不同的<code>key</code>属性</strong>。</p><figure class="highlight plaintext"><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"><div v-for="(user,index) in users" class="text item" :key="index"></span><br><span class="line"> {{user.username}}</span><br><span class="line"></div></span><br></pre></td></tr></table></figure><h4 id="事件处理v-on"><a href="#事件处理v-on" class="headerlink" title="事件处理v-on"></a>事件处理v-on</h4><blockquote><p>v-on</p></blockquote><p>给按钮绑定单机事件，事件方法定义在<code>methods</code>对象中</p><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> ></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"sayHello"</span>></span>点击我<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> vm=<span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="javascript"> <span class="attr">el</span>:<span class="string">"#app"</span>,</span></span><br><span class="line"><span class="javascript"> <span class="comment">//js中对象用{}，数组用[]</span></span></span><br><span class="line"><span class="javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="javascript"> <span class="attr">message</span>:<span class="string">"hello"</span></span></span><br><span class="line"><span class="javascript"> },</span></span><br><span class="line"><span class="javascript"> <span class="attr">methods</span>:{<span class="comment">//方法必须定义在methods对象中</span></span></span><br><span class="line"><span class="javascript"> <span class="attr">sayHello</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span></span><br><span class="line"><span class="javascript"> alert(<span class="built_in">this</span>.message)</span></span><br><span class="line"><span class="javascript"> }</span></span><br><span class="line"><span class="javascript"> }</span></span><br><span class="line"><span class="javascript"> })</span></span><br><span class="line"><span class="javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><p><strong>v-on可以缩写</strong></p><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></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- 完整语法 --></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">v-on:click</span>=<span class="string">"doSomething"</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">a</span> @<span class="attr">click</span>=<span class="string">"doSomething"</span>></span>...<span class="tag"></<span class="name">a</span>></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><blockquote><p>v-model</p><p>v-model后可以跟任何变量名称，只要此变量名称在data中存在，那么表单中的值就与此变量进行了双向绑定</p></blockquote><p>将表单与model变量进行双向绑定</p><ul><li>修改变量，表单内容也会改变</li><li>修改表单内容，变量也会改变</li></ul><h5 id="文本"><a href="#文本" class="headerlink" title="文本"></a>文本</h5><p>示例1：将输入框与变量message绑定</p><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> ></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">v-model</span>=<span class="string">"message"</span>></span> {{message}}</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> vm=<span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="javascript"> <span class="attr">el</span>:<span class="string">"#app"</span>,</span></span><br><span class="line"><span class="javascript"> <span class="comment">//js中对象用{}，数组用[]</span></span></span><br><span class="line"><span class="javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="javascript"> <span class="attr">message</span>:<span class="string">"hello"</span></span></span><br><span class="line"><span class="javascript"> },</span></span><br><span class="line"><span class="javascript"> <span class="attr">methods</span>:{<span class="comment">//方法必须定义在methods对象中</span></span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript"> }</span></span><br><span class="line"><span class="javascript"> })</span></span><br><span class="line"><span class="javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h5 id="单选框"><a href="#单选框" class="headerlink" title="单选框"></a>单选框</h5><p>实例2：将单选框与model变量message绑定，并且在下面展示出选择的内容</p><blockquote><p>将单选框的value与message进行双向绑定</p></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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">value</span>=<span class="string">"男"</span> <span class="attr">v-model</span>=<span class="string">"message"</span>></span>男</span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">value</span>=<span class="string">"女"</span> <span class="attr">v-model</span>=<span class="string">"message"</span>></span>女</span><br><span class="line"> 您的选择：{{message}}</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> vm=<span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="javascript"> <span class="attr">el</span>:<span class="string">"#app"</span>,</span></span><br><span class="line"><span class="javascript"> <span class="comment">//js中对象用{}，数组用[]</span></span></span><br><span class="line"><span class="javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="javascript"> <span class="attr">message</span>:<span class="string">""</span></span></span><br><span class="line"><span class="javascript"> },</span></span><br><span class="line"><span class="javascript"> <span class="attr">methods</span>:{<span class="comment">//方法必须定义在methods对象中</span></span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript"> }</span></span><br><span class="line"><span class="javascript"> })</span></span><br><span class="line"><span class="javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h5 id="下拉框"><a href="#下拉框" class="headerlink" title="下拉框"></a>下拉框</h5><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">select</span> <span class="attr">v-model</span>=<span class="string">"message"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">disabled</span> <span class="attr">value</span>=<span class="string">""</span>></span>请选择<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span>></span>A<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span>></span>B<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span>></span>C<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">select</span>></span></span><br><span class="line"> 您的选择：{{message}}</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> vm=<span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="javascript"> <span class="attr">el</span>:<span class="string">"#app"</span>,</span></span><br><span class="line"><span class="javascript"> <span class="comment">//js中对象用{}，数组用[]</span></span></span><br><span class="line"><span class="javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="javascript"> <span class="attr">message</span>:<span class="string">""</span></span></span><br><span class="line"><span class="javascript"> },</span></span><br><span class="line"><span class="javascript"> <span class="attr">methods</span>:{<span class="comment">//方法必须定义在methods对象中</span></span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript"> }</span></span><br><span class="line"><span class="javascript"> })</span></span><br><span class="line"><span class="javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h3 id="3-Vue组件"><a href="#3-Vue组件" class="headerlink" title="3. Vue组件"></a>3. Vue组件</h3><p>组件注册注意事项：</p><ul><li><p><strong>组件模板内容必须是单个根元素，例如最外层不能有两个同一级别的div标签</strong></p></li><li><p><strong>一个组件的 <code>data</code> 选项必须是一个函数</strong></p><p>每次实例化组件调用data函数，返回一个新对象，使其组件拥有独立的对象数据，若不是函数就会共用一个对象，不具有独立性</p></li><li><p>命名尽量使用短横线的方式</p></li></ul><h4 id="子组件与父组件"><a href="#子组件与父组件" class="headerlink" title="子组件与父组件"></a>子组件与父组件</h4><p>我们将某段代码封装成一个组件，而这个组件又在另一个组件中引入，而引入该封装的组件的文件叫做父组件，被引入的组件叫做子组件</p><p>父组件：调用方</p><p>子组件：被调用方</p><h4 id="组件的全局注册与局部注册"><a href="#组件的全局注册与局部注册" class="headerlink" title="组件的全局注册与局部注册"></a>组件的全局注册与局部注册</h4><p>全局组件：注册之后可以用在任何新创建的vue根实例(new Vue)的模板中</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></pre></td><td class="code"><pre><span class="line"><div id=<span class="string">"app"</span>></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">runoob</span>></span><span class="tag"></<span class="name">runoob</span>></span></span></span><br><span class="line"></div></span><br><span class="line"> </span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="comment">// 定义和注册组件</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">Vue.component(<span class="string">'runoob'</span>, {</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="attr">template</span>: <span class="string">'<h1>自定义组件!</h1>'</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">})</span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="comment">// 创建根实例</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">new</span> Vue({</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="attr">el</span>: <span class="string">'#app'</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">})</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure><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></pre></td><td class="code"><pre><span class="line"><div id=<span class="string">"app"</span>></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">runoob</span>></span><span class="tag"></<span class="name">runoob</span>></span></span></span><br><span class="line"></div></span><br><span class="line"> </span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="comment">//通过一个普通的 JavaScript 对象来定义组件：</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">var</span> Child = {<span class="attr">template</span>: <span class="string">'<h1>自定义组件!</h1>'</span>}</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> </span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="comment">// 创建根实例，然后在 components 选项中注册想要使用的组件</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">new</span> Vue({</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="attr">components</span>: {</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="comment">//runoob：用在模板中的自定义元素的名称</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="comment">//Child：组件名</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="string">'runoob'</span>: Child</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> }</span></span></span><br><span class="line"><span class="javascript"><span class="xml">})</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure><p>**<strong style="color:#c00000;">局部组件只能在注册它的父组件中使用</strong>**，如果你希望 <code>ComponentA</code> 在 <code>ComponentB</code> 中可用，则你需要这样写：</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ComponentA = { <span class="comment">/* ... */</span> }</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> ComponentB = {</span><br><span class="line"> <span class="attr">components</span>: {</span><br><span class="line"> <span class="string">'component-a'</span>: ComponentA</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>或者如果你通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像：</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> ComponentA <span class="keyword">from</span> <span class="string">'./ComponentA.vue'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"> <span class="attr">components</span>: {</span><br><span class="line"> ComponentA</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>注意在 ES2015+ 中，在对象中放一个类似 <code>ComponentA</code> 的变量名其实是 <code>ComponentA: ComponentA</code> 的缩写，即这个变量名同时是：</p><ul><li>用在模板中的自定义元素的名称</li><li>组件变量的名字</li></ul><h4 id="通过子组件的自定义属性props实现父组件向子组件传值"><a href="#通过子组件的自定义属性props实现父组件向子组件传值" class="headerlink" title="通过子组件的自定义属性props实现父组件向子组件传值"></a>通过子组件的自定义属性props实现父组件向子组件传值</h4><blockquote><p>用于修改公共页面的动态部分，如网页title，用户名等</p><p>子组件中通过prop接收子父组件传来的内容</p><p>单向数据流，只允许父组件向子组件传递数据</p></blockquote><p><strong>props</strong> 是在注册组件时的一些<strong>自定义的属性</strong>。</p><ol><li>自定义组件：zujian</li><li>自定义组件的属性：shuxing</li><li>调用组件时，通过v-bind<strong>将组件属性与父组件中的data变量绑定</strong>，进而实现父组件向子组件中传值</li></ol><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">zujian</span> <span class="attr">v-bind:shuxing</span>=<span class="string">"title"</span>></span><span class="tag"></<span class="name">zujian</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span><br><span class="line"><span class="javascript"> Vue.component(<span class="string">'zujian'</span>,{</span></span><br><span class="line"><span class="javascript"> <span class="attr">props</span>:[<span class="string">'shuxing'</span>],</span></span><br><span class="line"><span class="javascript"> <span class="attr">template</span>:<span class="string">'<h3>{{ shuxing }}</h3>'</span></span></span><br><span class="line"><span class="javascript"> })</span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> vm=<span class="keyword">new</span> Vue({a</span></span><br><span class="line"><span class="javascript"> <span class="attr">el</span>:<span class="string">"#app"</span>,</span></span><br><span class="line"><span class="javascript"> <span class="attr">data</span>:{</span></span><br><span class="line"><span class="javascript"> <span class="attr">title</span>:<span class="string">"这是标题"</span></span></span><br><span class="line"><span class="javascript"> }</span></span><br><span class="line"><span class="javascript"> })</span></span><br><span class="line"><span class="javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h4 id="通过子组件的自定义事件的参数实现子组件向父组件传值"><a href="#通过子组件的自定义事件的参数实现子组件向父组件传值" class="headerlink" title="通过子组件的自定义事件的参数实现子组件向父组件传值"></a>通过子组件的自定义事件的参数实现子组件向父组件传值</h4><p>子组件通过调用 <strong><code>$emit</code></strong> 方法并传入事件名称来触发一个<strong>自定义事件</strong></p><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"$emit('enlarge-text')"</span>></span></span><br><span class="line"> Enlarge text</span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><p>父组件通过<code>v-on</code>监听自定义事件，并给出相应的的处理逻辑</p><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">blog-post</span></span></span><br><span class="line"><span class="tag"> <span class="attr">...</span></span></span><br><span class="line"><span class="tag"> <span class="attr">v-on:enlarge-text</span>=<span class="string">"postFontSize += 0.1"</span></span></span><br><span class="line"><span class="tag">></span><span class="tag"></<span class="name">blog-post</span>></span></span><br></pre></td></tr></table></figure><p>一个更加清晰的例子：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">my-component</span> <span class="attr">v-bind:foo</span>=<span class="string">"baz"</span> <span class="attr">v-on:event-a</span>=<span class="string">"doThis(arg1,...arg2)"</span>></span><span class="tag"></<span class="name">my-component</span>></span></span><br></pre></td></tr></table></figure><p>如上代码</p><figure class="highlight plaintext"><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></pre></td><td class="code"><pre><span class="line">foo是<my-component>组件内部定义的一个prop属性，baz是父组件的一个data属性，</span><br><span class="line"></span><br><span class="line">event-a是子组件定义的一个事件，doThis是父组件的一个方法</span><br><span class="line"></span><br><span class="line">父组件把baz数据通过prop传递给子组件的foo；</span><br><span class="line"></span><br><span class="line">子组件内部得到foo的值，就可以进行相应的操作；</span><br><span class="line"></span><br><span class="line">当子组件内部发生了一些变化，希望父组件能知道时，就利用代码触发event-a事件，把一些数据发送出去</span><br><span class="line"></span><br><span class="line">父组件把这个事件处理器绑定为doThis方法，子组件发送的数据，就作为doThis方法的参数被传进来</span><br><span class="line"></span><br><span class="line">然后父组件就可以根据这些数据，进行相应的操作</span><br></pre></td></tr></table></figure><h4 id="import与export"><a href="#import与export" class="headerlink" title="import与export"></a>import与export</h4><p>-export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口</p><p>-import用于在一个模块中加载另一个含有export接口的模块。</p><p><strong>也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。这几个都是ES6的语法。</strong></p><h4 id="export与export-default"><a href="#export与export-default" class="headerlink" title="export与export default"></a>export与export default</h4><p>1、export与export default均可用于导出常量、函数、文件、模块等<br>2、你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用<br>3、在一个文件或模块中，<strong>export、import可以有多个，export default仅有一个</strong><br>4、<strong>通过export方式导出，在导入时要加{ }，export default则不需要</strong></p><p>这样来说其实很多时候<strong>export与export default可以实现同样的目的，只是用法有些区别</strong>。注意第四条，通过export方式导出，在导入时要加{ }，export default则不需要。<strong>使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名。</strong></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="keyword">var</span> name=<span class="string">"李四"</span>;</span><br><span class="line"><span class="keyword">export</span> { name }</span><br><span class="line"><span class="comment">//import { name } from "/.a.js" </span></span><br><span class="line">可以写成：</span><br><span class="line"><span class="keyword">var</span> name=<span class="string">"李四"</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> name</span><br><span class="line"><span class="comment">//import name from "/.a.js" 这里name不需要大括号</span></span><br></pre></td></tr></table></figure><h4 id="vue实例与组件"><a href="#vue实例与组件" class="headerlink" title="vue实例与组件"></a>vue实例与组件</h4><p>vue实例本质上也是组件；在实例中传递的参数，在我们定义组件时，大多数都是通用的；但是<strong>data</strong>的值不同，<strong>实例中的data值是对象，组件中却是函数</strong></p><p><img src="http://cdn.upeveryday.cn/img/image-20211109200308101.png" alt="image-20211109200308101"></p><h3 id="new-Vue-和-export-default-的区别"><a href="#new-Vue-和-export-default-的区别" class="headerlink" title="new Vue() 和 export default{}的区别"></a>new Vue() 和 export default{}的区别</h3><p><strong>new Vue()</strong></p><p>Vue 就是一个构造函数，生成的实例是一个巨大的对象，可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。</p><p>所以渲染的时候，可以使用构造 Vue 实例的方式来渲染相应的 html 页面：</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line"> <span class="attr">el</span>: <span class="string">'#app'</span></span><br><span class="line"> ...</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p><strong>export default {}</strong></p><p>这是在复用组件的时候用到的。假设我们写了一个单页面组件 A 文件，而在另一个文件 B 里面需要用到它，那么就要用 <strong>ES6 的 import/export 语法</strong> ，在文件 A 中定义输出接口 **export ****，在文件 B 中引入 **import *<strong><em>，然后再生成一个 Vue 实例 new Vue (*</em>)，把引入的组件用起来，这样就</strong>可以复用组件 A 去配合文件 B 生成 html 页面了。**</p><p>所以在复用组件的时候，export 和 new Vue 缺一不可。</p><p>export 用来导出模块，Vue 的单文件组件通常需要导出一个对象，这个对象是 Vue 实例的选项对象，以便于在其它地方可以使用 import 引入。而 new Vue() 相当于一个构造函数，在入口文件 main.js 构造根组件的同时，如果根组件还包含其它子组件，那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例，最终形成一棵组件树。</p><p><strong>export 和export default 的区别在于</strong>：export 可以导出多个命名模块，例如：</p><blockquote><p>export：按需导出，可以使用多次；导入时需要加{}，可以使用as起别名</p><p>export default：默认导出，只能使用一次；导入时可以自定义名字</p></blockquote><figure class="highlight plaintext"><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">//demo1.js</span><br><span class="line">export const str = 'hello world'</span><br><span class="line"></span><br><span class="line">export function f(a){</span><br><span class="line"> return a+1</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p> 对应的引入方式：</p><figure class="highlight plaintext"><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">//demo2.js</span><br><span class="line">import { str, f } from 'demo1'</span><br></pre></td></tr></table></figure><p> export default 只能导出一个默认模块，这个模块可以匿名，例如：</p><figure class="highlight plaintext"><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">//demo1.js</span><br><span class="line">export default {</span><br><span class="line"> a: 'hello',</span><br><span class="line"> b: 'world' </span><br><span class="line">}</span><br></pre></td></tr></table></figure><p> 对应的引入方式：</p><figure class="highlight plaintext"><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">//demo2.js</span><br><span class="line">import obj from 'demo1'</span><br></pre></td></tr></table></figure><p>引入的时候可以给这个模块取任意名字，例如 “obj”，且不需要用大括号括起来。</p><h3 id="渲染函数render"><a href="#渲染函数render" class="headerlink" title="渲染函数render"></a>渲染函数render</h3><blockquote><p>字符串模板的代替方案：Vue 选项中的 <code>render</code> 函数若存在，则 Vue 构造函数不会从 <code>template</code> 选项或通过 <code>el</code> 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。</p><p>将一个组件渲染为虚拟节点</p></blockquote><p>该渲染函数接收一个 <code>createElement</code> 方法作为第一个参数，返回<code>createElement(组件)</code>，即VNode（虚拟节点，我们要渲染的节点）<br>createElement简写为h</p><p><strong>写法1</strong></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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./App'</span></span><br><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line"> <span class="attr">el</span>: <span class="string">'#root'</span>,</span><br><span class="line"> <span class="attr">render</span>: <span class="function"><span class="params">h</span> =></span> h(App)</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p><strong>写法2</strong></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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./App'</span></span><br><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line"> <span class="attr">el</span>: <span class="string">'#root'</span>,</span><br><span class="line"> <span class="attr">template</span>: <span class="string">'<App></App>'</span>,</span><br><span class="line"> <span class="attr">components</span>: {</span><br><span class="line"> App</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p><strong>写法3</strong></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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./App'</span></span><br><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line"> <span class="attr">render</span>: <span class="function"><span class="params">h</span> =></span> h(App)</span><br><span class="line">})$.mount(<span class="string">'#root'</span>)</span><br></pre></td></tr></table></figure><p>上面三种的效果是一样的</p><p>方法三中，创建的vue实例没有el属性，而是在实例后面添加了一个$mount(’#app’)方法。</p><p><code>$mount(’#root’)</code> ：手动挂载到id为root的dom中的意思</p><p>当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；<br>假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载</p><p><img src="https://pic2.zhimg.com/v2-f0afb78679b7d1aa5ee4b0d3a6d7e2cd_b.jpg" alt="img"></p><h3 id="生命周期"><a href="#生命周期" class="headerlink" title="生命周期"></a>生命周期</h3><blockquote><p>创建Vue实例的过程</p></blockquote><ul><li><p>outerHTML是什么？</p><p>1）innerHTML:<br> 从对象的起始位置到终止位置的全部内容,不包括Html标签。<br>2）outerHTML:<br> 除了包含innerHTML的全部内容外, 还包含对象标签本身。</p></li><li><p><code>el</code>与<code>mount(el)</code>选项必须存在一个（el>mount）</p></li><li><p>如果没有template属性，那么就将el的内容作为template来compile（template>el）</p></li><li><p>Vue 选项中的 <code>render</code> 函数若存在，则 Vue 构造函数不会从 <code>template</code> 选项或通过 <code>el</code> 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数（render>template>el）</p></li></ul><img src="https://upload-images.jianshu.io/upload_images/11370083-f279314aef6741db.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1080/format/webp" alt="img" style="zoom:70%;" /><p>vue的声明周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。</p><ul><li>创建前/后： 在beforeCreated阶段，vue实例的挂载元素<code>$el</code>和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，<code>$el</code>还没有。</li><li>载入前/后：在beforeMount阶段，vue实例的<code>$el</code>和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。</li><li>更新前/后：当data变化时，会触发beforeUpdate和updated方法。</li><li>销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。</li></ul><h3 id="v-model与v-bind的区别"><a href="#v-model与v-bind的区别" class="headerlink" title="v-model与v-bind的区别"></a>v-model与v-bind的区别</h3><ul><li>v-bind是<strong>单向绑定</strong></li><li>用 <code>v-model</code> 指令在表单 <code><input></code>、<code><textarea></code> 及 <code><select></code> 元素上创建<strong>双向数据绑定</strong></li></ul><figure class="highlight plaintext"><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"><template></span><br><span class="line"> <div></span><br><span class="line"> <el-input</span><br><span class="line"> placeholder="请输入内容"</span><br><span class="line"> v-model="sb"</span><br><span class="line"> clearable></span><br><span class="line"> </el-input></span><br><span class="line"> </div></span><br><span class="line"></template></span><br><span class="line"><script></span><br><span class="line">export default {</span><br><span class="line"> name: 'Websocket',</span><br><span class="line"> data () {</span><br><span class="line"> return {</span><br><span class="line"> sb: 'testttt'</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><h3 id="虚拟DOM"><a href="#虚拟DOM" class="headerlink" title="虚拟DOM"></a>虚拟DOM</h3><p><strong>操作DOM消耗性能的原因</strong></p><p>JavaScript是解析引擎的，页面渲染是渲染引擎的。因此不可避免地要进行两个线程之间的通信，操作越频繁，两个线程通信消耗的性能就越多</p><h3 id="slot、slot-scope和v-slot"><a href="#slot、slot-scope和v-slot" class="headerlink" title="slot、slot-scope和v-slot"></a>slot、slot-scope和v-slot</h3><blockquote><p>通过父组件来使子组件的内容发生变化</p><p><a href="https://cloud.tencent.com/developer/article/1557440?from=article.detail.1601536">https://cloud.tencent.com/developer/article/1557440?from=article.detail.1601536</a></p></blockquote><ul><li><p>什么时候使用slot？</p><p>当一个组件的展示层你需要做到大体结构固定，但其内的部分结构可变，样式表现不固定。例如 Button 中是否显示 icon，或者 Modal 框的中间内容展示区域的变化等，要通过子组件自己实现是不可能的。组件并不直接支持 HTML DOM 结构的传递，此时就可以通过使用 <code>slot</code> 作为 HTML 结构的传递入口来解决问题。</p></li></ul><p>在 2.6.0 版本中，Vue 为具名插槽和作用域插槽引入了一个新的统一的语法 （即 <code><v-slot></code> 指令）。它取代了 <code>slot</code> 和 <code>slot-scope</code> 这两个目前已被废弃、尚未移除，仍在文档中的特性。</p><h4 id="v-slot"><a href="#v-slot" class="headerlink" title="v-slot"></a>v-slot</h4><p>使用方法可以分为三类：<strong>默认插槽</strong>、<strong>具名插槽</strong>以及<strong>作用域插槽</strong>。</p><h4 id="slot"><a href="#slot" class="headerlink" title="slot"></a>slot</h4><p>插槽，也就是slot，是组件的一块HTML模板，<strong>这块模板显示不显示、以及怎样显示由父组件来决定</strong>。值得注意的是：内容要写在父组件中，然后分给需要的子组件，<strong>当slot多个时，可以通过name来加以区分，这就是所谓的具名插槽</strong>。</p><blockquote><p>子组件中的占位符：父组件插入到子组件中的内容会放在子组件中<code><slot></slot></code>的位置</p></blockquote><figure class="highlight plaintext"><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"><div id="app"> </span><br><span class="line"> <children> </span><br><span class="line"> <span>12345</span> </span><br><span class="line"> </children> </span><br><span class="line"></div> </span><br><span class="line"><script> </span><br><span class="line"> var vm = new Vue({ </span><br><span class="line"> el: '#app', </span><br><span class="line"> components: { </span><br><span class="line"> children: { //这个无返回值，不会继续派发 </span><br><span class="line"> template: "<button><slot></slot>为了明确作用范围，所以使用button标签</button>" </span><br><span class="line"> } </span><br><span class="line"> } </span><br><span class="line"> }); </span><br><span class="line"></script> </span><br></pre></td></tr></table></figure><p>例如这样写的话，结果是：</p><p><code><button><span>12345</span>为了明确作用范围，所以使用button标签</button></code></p><p>即父组件放在子组件里的内容，插到了子组件的<code><slot></slot></code>位置；</p><p>注意，<strong>即使有多个标签，会一起被插入</strong>，相当于用父组件放在子组件里的标签，替换了<code><slot></slot></code>这个标签。</p><h4 id="slot-scope（带数据的插槽）"><a href="#slot-scope（带数据的插槽）" class="headerlink" title="slot-scope（带数据的插槽）"></a>slot-scope（带数据的插槽）</h4><p>slot-scope就是<strong>作用域插槽</strong>。官方叫它作用域插槽，实际上，对比具名插槽，我们可以叫它<strong>带数据的插槽</strong>。<strong>具名插槽在组件的template里面写，作用域插槽要求，在slot上面绑定数据。</strong></p><p>将子组件的属性传递给父组件使用</p><h2 id="前后端交互"><a href="#前后端交互" class="headerlink" title="前后端交互"></a>前后端交互</h2><h3 id="接口调用的方式"><a href="#接口调用的方式" class="headerlink" title="接口调用的方式"></a>接口调用的方式</h3><ul><li><p>原生ajax</p></li><li><p>基于jQuery的ajax</p><p>侧重于DOM操作，但使用vue开发很少使用到DOM操作</p></li><li><p>fetch</p></li><li><p>axios</p></li></ul><h3 id="URL地址格式"><a href="#URL地址格式" class="headerlink" title="URL地址格式"></a>URL地址格式</h3><h4 id="传统形式的URL"><a href="#传统形式的URL" class="headerlink" title="传统形式的URL"></a>传统形式的URL</h4><p><img src="http://cdn.upeveryday.cn/img/image-20211117092914924.png" alt="image-20211117092914924"></p><h4 id="Restful形式的URL"><a href="#Restful形式的URL" class="headerlink" title="Restful形式的URL"></a>Restful形式的URL</h4><p><img src="http://cdn.upeveryday.cn/img/image-20211117093135603.png" alt="image-20211117093135603"></p><h3 id="axios"><a href="#axios" class="headerlink" title="axios"></a>axios</h3><p>cdn</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://unpkg.com/axios/dist/axios.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><p>get请求</p><figure class="highlight json"><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></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="attr">"name"</span>:<span class="string">"狂神说java"</span>,</span><br><span class="line"> <span class="attr">"url"</span>: <span class="string">"http://baidu.com"</span>,</span><br><span class="line"> <span class="attr">"page"</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="attr">"isNonProfit"</span>:<span class="literal">true</span>,</span><br><span class="line"> <span class="attr">"address"</span>: {</span><br><span class="line"> <span class="attr">"street"</span>: <span class="string">"含光门"</span>,</span><br><span class="line"> <span class="attr">"city"</span>:<span class="string">"陕西西安"</span>,</span><br><span class="line"> <span class="attr">"country"</span>: <span class="string">"中国"</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">"links"</span>: [</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"name"</span>: <span class="string">"B站"</span>,</span><br><span class="line"> <span class="attr">"url"</span>: <span class="string">"https://www.bilibili.com/"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"name"</span>: <span class="number">4399</span>,</span><br><span class="line"> <span class="attr">"url"</span>: <span class="string">"https://www.4399.com/"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"name"</span>: <span class="string">"百度"</span>,</span><br><span class="line"> <span class="attr">"url"</span>: <span class="string">"https://www.baidu.com/"</span></span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">}</span><br></pre></td></tr></table></figure><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line">{{name}}</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> vm=<span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="javascript"> <span class="attr">el</span>:<span class="string">"#app"</span>,</span></span><br><span class="line"><span class="javascript"> <span class="attr">data</span>:{</span></span><br><span class="line"><span class="javascript"> <span class="attr">name</span>:<span class="string">''</span>,</span></span><br><span class="line"><span class="javascript"> },</span></span><br><span class="line"><span class="javascript"> <span class="function"><span class="title">mounted</span>(<span class="params"></span>)</span>{<span class="comment">//钩子函数，用来加载异步请求</span></span></span><br><span class="line"><span class="javascript"> axios.get(<span class="string">"data.json"</span>).then(<span class="function"><span class="params">response</span>=></span>(<span class="built_in">this</span>.name=response.data.address.city))</span></span><br><span class="line"><span class="javascript"> }</span></span><br><span class="line"><span class="javascript"> })</span></span><br><span class="line"><span class="javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h4 id="在vue中的使用"><a href="#在vue中的使用" class="headerlink" title="在vue中的使用"></a>在vue中的使用</h4><p>在入口文件main.js中：</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="keyword">import</span> axios <span class="keyword">from</span> <span class="string">'axios'</span><span class="comment">// 导入axios</span></span><br><span class="line">axios.defaults.baseURL = <span class="string">''</span><span class="comment">// 配置请求的根路径</span></span><br><span class="line">Vue.prototype.$http = axios<span class="comment">// 挂载到vue的原型对象上，每一个vue组件都可以通过this直接访问到$http，从而去发起axios请求</span></span><br></pre></td></tr></table></figure><ul><li><code>Vue.prototype.$http = axios</code>给构造函数Vue添加新的属性<code>$http</code></li><li><code>$</code> 是在Vue 所有实例中都可用的属性 的一个简单约定。这样做会避免与已被定义的数据、方法、计算属性产生冲突</li></ul><h2 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h2><h3 id="模块化概述"><a href="#模块化概述" class="headerlink" title="模块化概述"></a>模块化概述</h3><p>传统开发模式的主要问题：</p><ol><li><p><strong>命名冲突</strong></p><p>多个JS文件之间若存在同名变量，则会发生变量覆盖问题</p></li><li><p><strong>文件依赖</strong></p><p>JS文件之间无法相互引用</p></li></ol><p>通过模块化解决上述问题：</p><p><strong>模块化</strong>就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块</p><h3 id="浏览器端模块化规范"><a href="#浏览器端模块化规范" class="headerlink" title="浏览器端模块化规范"></a>浏览器端模块化规范</h3><p>AMD</p><p>CMD</p><h3 id="服务器端模块化规范"><a href="#服务器端模块化规范" class="headerlink" title="服务器端模块化规范"></a>服务器端模块化规范</h3><h4 id="CommonJS"><a href="#CommonJS" class="headerlink" title="CommonJS"></a>CommonJS</h4><ol><li><p>模块分为单文件模块与包</p></li><li><p>模块成员导出：<code>module.exports</code>与<code>exports</code></p></li><li><p>模块成员导入：<code>require('模块标识符')</code></p><p><strong>模块的名字就是文件名（去掉<code>.js</code>后缀）</strong></p></li></ol><p>要在模块中对外输出变量，用：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = variable;</span><br></pre></td></tr></table></figure><p>输出的变量可以是任意对象、函数、数组等等。</p><p>要引入其他模块输出的对象，用：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> foo = <span class="built_in">require</span>(<span class="string">'other_module'</span>);</span><br></pre></td></tr></table></figure><p>引入的对象具体是什么，取决于引入模块输出的对象。</p><h5 id="module-exports与exports的区别"><a href="#module-exports与exports的区别" class="headerlink" title="module.exports与exports的区别"></a><code>module.exports</code>与<code>exports</code>的区别</h5><blockquote><p>module.exports类似默认导出</p><p>exports类似按需导出</p></blockquote><p>从<strong>模块编写者</strong>的角度出发，并没有什么区别，二者都能用</p><p>假设我作为<strong>模块使用者</strong>，要在我的代码中导入一个函数：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> func = <span class="built_in">require</span>(<span class="string">'./module'</span>);<span class="comment">//模块的名字就是文件名（去掉.js后缀）</span></span><br></pre></td></tr></table></figure><p>则编写者只能使用 <code>module.exports</code> 来定义：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">module.exports = function () {}</span><br></pre></td></tr></table></figure><p>如果编写者使用 <code>exports</code> 来定义：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">exports.func = function () {}</span><br></pre></td></tr></table></figure><p>则使用者必须知道该函数的名称才能使用：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> { func } = <span class="built_in">require</span>(<span class="string">'./module'</span>);</span><br></pre></td></tr></table></figure><p>把函数换成变量、常量或其它，也是一样道理。</p><h3 id="大一统的模块化规范——ES6模块化"><a href="#大一统的模块化规范——ES6模块化" class="headerlink" title="大一统的模块化规范——ES6模块化"></a>大一统的模块化规范——ES6模块化</h3><p>ES6模块化规范浏览器端与服务器端通用</p><ol><li>每个JS文件都是一个独立的模块</li><li>导入模块成员：import</li><li>暴露模块成员：export</li></ol><p>Node.JS对于ES6规范的支持并不是很好，需要借助第三方插件<strong>babel</strong></p><p><strong>babel是一个语法转换工具</strong>，可以把高级的有兼容性的JS代码转换为低级的没有兼容性的JS代码</p><h4 id="默认导出与默认导入"><a href="#默认导出与默认导入" class="headerlink" title="默认导出与默认导入"></a>默认导出与默认导入</h4><p><strong>默认导出语法</strong>：<code>export default 一个对象</code></p><blockquote><p>每个模块中，只允许使用唯一的一次<code>export default</code>，否则会报错</p></blockquote><p><strong>默认导入语法</strong>：<code>import 接收名称 from '模块标识符'</code></p><blockquote><p>接收名称为自定义，合法即可</p></blockquote><img src="http://cdn.upeveryday.cn/img/image-20211114152820427.png" alt="image-20211114152820427" style="zoom: 60%;" /><img src="http://cdn.upeveryday.cn/img/image-20211114153113772.png" alt="image-20211114153113772" style="zoom: 70%;" /><h4 id="按需导出与按需导入"><a href="#按需导出与按需导入" class="headerlink" title="按需导出与按需导入"></a>按需导出与按需导入</h4><p><strong>按需导出语法</strong>：<code>export let s1=10</code></p><blockquote><p>每个模块中，可以使用多次export</p></blockquote><p><strong>按需导入语法</strong>：<code>import {s1} from '模块标识符'</code></p><blockquote><p>使用as给变量起别名</p></blockquote><p><img src="http://cdn.upeveryday.cn/img/image-20211114153701944.png" alt="image-20211114153701944"></p><h4 id="直接导入并执行模块代码"><a href="#直接导入并执行模块代码" class="headerlink" title="直接导入并执行模块代码"></a>直接导入并执行模块代码</h4><p>若<strong>只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员</strong>，此时，可以直接导入并执行模块代码</p><p><img src="http://cdn.upeveryday.cn/img/image-20211114154408813.png" alt="image-20211114154408813"></p><h2 id="vue-cli"><a href="#vue-cli" class="headerlink" title="vue-cli"></a>vue-cli</h2><blockquote><p>cli：command line interface：命令行界面</p><p>脚手架帮助我们快速搭建vue项目</p><p>配置文件为项目根目录中的<code>vue.config.js</code></p></blockquote><p>nodejs淘宝镜像加速</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm config set registry https://registry.npm.taobao.org</span><br></pre></td></tr></table></figure><p>安装vue-cli</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install vue-cli -g</span><br></pre></td></tr></table></figure><h3 id="创建"><a href="#创建" class="headerlink" title="创建"></a>创建</h3><p>在projects文件夹下初始化vue项目</p><blockquote><p>myvue是名字，一路no即可</p></blockquote><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue init webpack myvue</span><br></pre></td></tr></table></figure><p>进入myvue文件的cmd窗口，下载所有的依赖</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cd myvue</span><br></pre></td></tr></table></figure><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install</span><br></pre></td></tr></table></figure><p>运行</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run dev</span><br></pre></td></tr></table></figure><p>Ctrl+C停止</p><h3 id="脚手架的自定义配置"><a href="#脚手架的自定义配置" class="headerlink" title="脚手架的自定义配置"></a>脚手架的自定义配置</h3><h4 id="通过package-json配置项目"><a href="#通过package-json配置项目" class="headerlink" title="通过package.json配置项目"></a>通过package.json配置项目</h4><p>在package.json中添加：</p><figure class="highlight json"><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="string">"vue"</span>: {</span><br><span class="line"> <span class="attr">"devServer"</span>: {</span><br><span class="line"> <span class="attr">"port"</span>: <span class="number">8888</span>,</span><br><span class="line"> <span class="attr">"open"</span>: <span class="literal">true</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ul><li>port：修改项目端口</li><li>open：是否自动打开浏览器</li></ul><p>不推荐使用这种配置方式，因为package主要用来管理包的配置信息；为了方便维护，推荐将vue脚手架的相关配置，单独定义到<code>vue.config.js</code>配置文件中</p><h4 id="通过单独的配置文件配置项目（推荐）"><a href="#通过单独的配置文件配置项目（推荐）" class="headerlink" title="通过单独的配置文件配置项目（推荐）"></a>通过单独的配置文件配置项目（推荐）</h4><ol><li>在项目根目录创建vue.config.js</li><li>在该文件中进行相关配置，从而覆盖默认配置</li></ol><h5 id="配置代理与项目端口号"><a href="#配置代理与项目端口号" class="headerlink" title="配置代理与项目端口号"></a>配置代理与项目端口号</h5><blockquote><p>解决跨域：在axios.js中设置axios.defaults.baseURL = “<a href="http://localhost:8080"写成axios.defaults.baseURL">http://localhost:8080"写成axios.defaults.baseURL</a> = “/api”，然后再在下面文件中配置</p></blockquote><p>proxy是ES6中就存在的，用于修改某些操作的默认行为，可以理解成在目标对象前设一个拦截层，因此也叫“代理器”。</p><p>如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。</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></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports={</span><br><span class="line"> <span class="attr">devServer</span>: {</span><br><span class="line"> <span class="attr">disableHostCheck</span>: <span class="literal">false</span>,</span><br><span class="line"> <span class="attr">port</span>: <span class="number">8181</span>, <span class="comment">//指定项目运行的端口号</span></span><br><span class="line"> <span class="comment">//配置代理</span></span><br><span class="line"> <span class="attr">proxy</span>: {</span><br><span class="line"> <span class="string">"/api"</span>: {</span><br><span class="line"> <span class="attr">target</span>: <span class="string">"http://localhost:8080"</span>,<span class="comment">//代理地址，这里设置的地址会代替axios中设置的baseURL</span></span><br><span class="line"> <span class="attr">changeOrigin</span>: <span class="literal">true</span>,<span class="comment">// 是否跨域，虚拟的站点需要更管origin</span></span><br><span class="line"> <span class="attr">pathRewrite</span>: {</span><br><span class="line"> <span class="string">"^/api"</span>: <span class="string">""</span></span><br><span class="line"> <span class="comment">//pathRewrite: {'^/api': '/'} 重写之后url为 http://localhost:8080/xxxx</span></span><br><span class="line"> <span class="comment">//pathRewrite: {'^/api': '/api'} 重写之后url为 http://localhost:8080/api/xxxx</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="attr">chainWebpack</span>: <span class="function"><span class="params">config</span> =></span> {</span><br><span class="line"> config.resolve.alias.set(<span class="string">"@"</span>, resolve(<span class="string">"src"</span>));</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">"path"</span>);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">resolve</span>(<span class="params">dir</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> path.join(__dirname, dir);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>axios请求</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></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">getNewsList</span>(<span class="params"></span>)</span> {</span><br><span class="line"> axios.get(<span class="string">'/api/getData'</span>)</span><br><span class="line">.then(<span class="function">(<span class="params">res</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(res) </span><br><span class="line">})</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ul><li><code>axios</code> 中 <code>baseURL</code> 如果被配置过，如：<code>baseURL="http://192.168.100.1/9000"</code>，此时proxy代理不生效</li></ul><h2 id="webpack"><a href="#webpack" class="headerlink" title="webpack"></a>webpack</h2><blockquote><p>配置文件为项目根目录中的 <code>webpack.config.js</code></p></blockquote><h3 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述</h3><p><img src="http://cdn.upeveryday.cn/img/image-20211111141820873.png" alt="image-20211111141820873"></p><p>安装</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install webpack -g</span><br></pre></td></tr></table></figure><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install webpack-cli -g</span><br></pre></td></tr></table></figure><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install webpack-dev-server -g</span><br></pre></td></tr></table></figure><p>查看版本</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">webpack -v</span><br></pre></td></tr></table></figure><h3 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h3><p>一、定义一个模块hello.js</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></pre></td><td class="code"><pre><span class="line"><span class="comment">//暴露方法</span></span><br><span class="line"><span class="built_in">exports</span>.sayHello=<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">document</span>.write(<span class="string">"<h1>hello,webpack</h1>"</span>)</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>二、在main.js中引入hello模块，并调用其方法</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></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入hello模块</span></span><br><span class="line"><span class="keyword">var</span> hello=<span class="built_in">require</span>(<span class="string">"./hello"</span>);</span><br><span class="line"><span class="comment">//调用hello模块中的sayHello方法</span></span><br><span class="line">hello.sayHello()</span><br></pre></td></tr></table></figure><p>三、在项目根目录下创建 <code>webpack.config.js</code> 配置文件</p><ul><li>entry：入口文件，指定WebPack 用哪个文件作为项目的入口</li><li>output：输出，指定WebPack把处理完成的文件放置到指定路径</li><li>module：模块，用于处理各种类型的文件</li><li>plugins：插件，如：热更新、代码重用等</li><li>resolve：设置路径指向</li><li>watch：监听，用于设置文件改动后直接打包</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><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 class="comment">// entry：入口文件，指定WebPack 用哪个文件作为项目的入口</span></span><br><span class="line"><span class="comment">// output：输出，指定WebPack把处理完成的文件放置到指定路径</span></span><br><span class="line"><span class="comment">// module：模块，用于处理各种类型的文件</span></span><br><span class="line"><span class="comment">// plugins：插件，如：热更新、代码重用等</span></span><br><span class="line"><span class="comment">// resolve：设置路径指向</span></span><br><span class="line"><span class="comment">// watch：监听，用于s设置文件改动后直接打包</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports={</span><br><span class="line"> <span class="attr">mode</span>: <span class="string">'development'</span>,<span class="comment">//development production</span></span><br><span class="line"> <span class="attr">entry</span>:<span class="string">"./modules/main.js"</span>,</span><br><span class="line"> <span class="attr">output</span>:{</span><br><span class="line"> <span class="attr">filename</span>:<span class="string">"./js/bundle.js"</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>四、在package.json配置文件中script节点下，新增dev脚本如下：</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></pre></td><td class="code"><pre><span class="line"><span class="string">"scripts"</span>: {</span><br><span class="line"> <span class="string">"serve"</span>: <span class="string">"vue-cli-service serve"</span>,</span><br><span class="line"> <span class="string">"build"</span>: <span class="string">"vue-cli-service build"</span>,</span><br><span class="line"> <span class="string">"lint"</span>: <span class="string">"vue-cli-service lint"</span>,</span><br><span class="line"> <span class="string">"dev"</span>: <span class="string">"webpack"</span></span><br><span class="line">},</span><br></pre></td></tr></table></figure><p>在终端运行<code>npm run dev</code>，启动webpack进行项目打包</p><h3 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h3><h4 id="入口与出口"><a href="#入口与出口" class="headerlink" title="入口与出口"></a>入口与出口</h4><blockquote><p>main.js是整个项目的入口文件</p></blockquote><p>webpack中默认：</p><ul><li>打包入口文件为：<code>./src/main.js</code></li><li>打包输出文件为：<code>./dist/main.js</code></li></ul><h4 id="自动打包"><a href="#自动打包" class="headerlink" title="自动打包"></a>自动打包</h4><ol><li><p>运行<code>npm install webpack-dev-server -D</code>命令，安装支持项目自动打包的工具</p></li><li><p>修改package.json中script中的dev命令如下：</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></pre></td><td class="code"><pre><span class="line"><span class="string">"scripts"</span>: {</span><br><span class="line"> <span class="string">"serve"</span>: <span class="string">"vue-cli-service serve"</span>,</span><br><span class="line"> <span class="string">"build"</span>: <span class="string">"vue-cli-service build"</span>,</span><br><span class="line"> <span class="string">"lint"</span>: <span class="string">"vue-cli-service lint"</span>,</span><br><span class="line"> <span class="string">"dev"</span>: <span class="string">"webpack serve --open --host 127.0.0.1 --port 3000"</span></span><br><span class="line"> <span class="comment">//open：打包完成后自动打开浏览器页面</span></span><br><span class="line"> <span class="comment">//host：配置IP地址</span></span><br><span class="line"> <span class="comment">//port：配置端口</span></span><br><span class="line">},</span><br></pre></td></tr></table></figure></li><li><p>配置生成预览界面</p><blockquote><p>将指定HTML文件复制到项目根目录下，这样子打开浏览器就会自动显示主页了</p></blockquote><p>下载插件</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i [email protected] -D</span><br></pre></td></tr></table></figure><p>修改webpack.config.js文件头部区域</p><p><img src="http://cdn.upeveryday.cn/img/image-20211115101317530.png" alt="image-20211115101317530"></p></li></ol><h4 id="webpack打包发布"><a href="#webpack打包发布" class="headerlink" title="webpack打包发布"></a>webpack打包发布</h4><blockquote><p>注意：</p><p>webpack已经失效，需要使用：<code>webpack --mode production</code></p></blockquote><img src="http://cdn.upeveryday.cn/img/image-20211115102116218.png" alt="image-20211115102116218" style="zoom:80%;" /><h4 id="加载器loader"><a href="#加载器loader" class="headerlink" title="加载器loader"></a>加载器loader</h4><p>webpack默认只能打包<code>.js</code>后缀名结尾的模块，其他非<code>.js</code>后缀名结尾的模块，webpack处理不了，需要调用loader加载器才可以正常打包，否则会报错</p><p><img src="http://cdn.upeveryday.cn/img/image-20211114194906467.png" alt="loader的调用过程"></p><h5 id="配置vue组件的加载器"><a href="#配置vue组件的加载器" class="headerlink" title="配置vue组件的加载器"></a>配置vue组件的加载器</h5><ol><li><p>安装对应的loader</p><figure class="highlight plaintext"><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">npm i vue-loader vue-template-compiler -D</span><br><span class="line">npm i style-loader css-loader -D</span><br></pre></td></tr></table></figure></li><li><p>然后指示 webpack 对每个 <code>.vue</code> 使用 <code>vue-loader</code>：</p><p><strong>webpack.config.js</strong></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></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>: {</span><br><span class="line"> <span class="attr">rules</span>: [</span><br><span class="line"> { <span class="attr">test</span>: <span class="regexp">/\.vue$/</span>, use: <span class="string">'vue-loader'</span> }</span><br><span class="line"> ]</span><br><span class="line">}</span><br></pre></td></tr></table></figure><blockquote><p>可能遇到的问题：</p><p>Error: Cannot find module ‘webpack-cli/bin/config-yargs’、</p><p>解决：安装最新的 <code>webpack-cli</code> 并使用 <code>webpack serve</code> 来运行 webpack dev server 而不是 <code>webpack-dev-server</code></p></blockquote></li></ol><h3 id="在webpack项目中使用vue"><a href="#在webpack项目中使用vue" class="headerlink" title="在webpack项目中使用vue"></a>在webpack项目中使用vue</h3><blockquote><p>注意：</p><p>使用webpack导入的vue并不完全，只支持render函数来渲染组件；不支持template属性和component属性</p></blockquote><ol><li>运行<code>npm i vue -S</code>安装vue</li><li>在src→main.js入口文件中，通过<code>import Vue from 'vue'</code>来导入vue构造函数</li><li>创建vue实例对象，并指定要控制的el区域</li><li>通过render函数渲染App根组件</li></ol><img src="http://cdn.upeveryday.cn/img/image-20211114204012219.png" alt="image-20211114204012219" style="zoom: 80%;" /><h3 id="相关问题"><a href="#相关问题" class="headerlink" title="相关问题"></a>相关问题</h3><h4 id="如何找到webpack对应的loader版本"><a href="#如何找到webpack对应的loader版本" class="headerlink" title="如何找到webpack对应的loader版本"></a>如何找到webpack对应的loader版本</h4><p><a href="https://juejin.cn/post/6898889812741210125">https://juejin.cn/post/6898889812741210125</a></p><h4 id="配置图片"><a href="#配置图片" class="headerlink" title="配置图片"></a>配置图片</h4><p><a href="https://www.cnblogs.com/ghost-xyx/p/5812902.html">https://www.cnblogs.com/ghost-xyx/p/5812902.html</a></p><h4 id="webpack-config-js"><a href="#webpack-config-js" class="headerlink" title="webpack.config.js"></a>webpack.config.js</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><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>)<span class="comment">// 导入node.js中专门操作路径的模块</span></span><br><span class="line"><span class="comment">/* Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外，</span></span><br><span class="line"><span class="comment">请确保在你的 webpack 配置中添加 Vue Loader 的插件：这个插件是必须的！</span></span><br><span class="line"><span class="comment">它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。</span></span><br><span class="line"><span class="comment">例如，如果你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块 */</span></span><br><span class="line"><span class="keyword">const</span> VueLoaderPlugin = <span class="built_in">require</span>(<span class="string">'vue-loader/lib/plugin'</span>)<span class="comment">// 引入的是一个构造函数</span></span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>)</span><br><span class="line"><span class="keyword">const</span> htmlPlugin = <span class="keyword">new</span> HtmlWebpackPlugin({ <span class="comment">// 创建插件的实例对象</span></span><br><span class="line"> <span class="attr">template</span>: <span class="string">'./dist/index.html'</span>, <span class="comment">// 指定要用到的模板文件</span></span><br><span class="line"> <span class="attr">filename</span>: <span class="string">'index.html'</span><span class="comment">// 指定生成文件的名称，该文件存在内存中的根目录下，在目录中不显示</span></span><br><span class="line">})</span><br><span class="line"><span class="built_in">module</span>.exports = {</span><br><span class="line"> <span class="attr">mode</span>: <span class="string">'development'</span>, <span class="comment">// mode用来指定构建模式</span></span><br><span class="line"> <span class="comment">// development：开发模式，转换出来的代码不会进行压缩和混淆</span></span><br><span class="line"> <span class="comment">// production：生产模式，转换出的代码会进行压缩和混淆</span></span><br><span class="line"> <span class="attr">entry</span>: path.join(__dirname, <span class="string">'./src/main.js'</span>), <span class="comment">// 打包入口文件的绝对路径（__dirname是指当前文件所处的目录，即项目根目录）</span></span><br><span class="line"> <span class="attr">output</span>: {</span><br><span class="line"> <span class="attr">path</span>: path.join(__dirname, <span class="string">'./dist'</span>), <span class="comment">// 输出文件的存放路径</span></span><br><span class="line"> <span class="attr">filename</span>: <span class="string">'bundle.js'</span><span class="comment">// 输出文件的名称</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">module</span>: {</span><br><span class="line"> <span class="attr">rules</span>: [</span><br><span class="line"> { <span class="attr">test</span>: <span class="regexp">/\.css$/</span>, use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>] },</span><br><span class="line"> <span class="comment">// { test: /\.css$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }] },</span></span><br><span class="line"> { <span class="attr">test</span>: <span class="regexp">/\.vue$/</span>, use: <span class="string">'vue-loader'</span> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/\.(png|jpg|ttf|eot|svg|woff|woff2|ico)$/</span>,</span><br><span class="line"> loader: <span class="string">'url-loader?limit=8192'</span></span><br><span class="line"> } <span class="comment">// 处理 字体和图片文件的 loader</span></span><br><span class="line"> ]</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// plugins数组是webpack打包期间会用到的一些插件列表</span></span><br><span class="line"> <span class="attr">plugins</span>: [</span><br><span class="line"> <span class="keyword">new</span> VueLoaderPlugin(), <span class="comment">// 确保已经引入这个插件</span></span><br><span class="line"> htmlPlugin</span><br><span class="line"> ]</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="vue单文件组件"><a href="#vue单文件组件" class="headerlink" title="vue单文件组件"></a>vue单文件组件</h2><p><img src="http://cdn.upeveryday.cn/img/image-20211114200619376.png" alt="image-20211114200619376"></p><h2 id="vue前端路由"><a href="#vue前端路由" class="headerlink" title="vue前端路由"></a>vue前端路由</h2><blockquote><p><a href="https://router.vuejs.org/zh/guide/">https://router.vuejs.org/zh/guide/</a></p></blockquote><h3 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h3><ul><li>早期web开发使用大多使用后端路由来渲染网页，称为后端渲染，若用户与服务器之间经常有提交表单之类的数据交互行为，那么后端路由就会造成网页的频繁刷新，用户体验较差（存在性能问题）</li><li>ajax技术来实现前端页面的局部刷新（浏览器地址栏不变，局部内容变化），称为前端渲染（性能得到了提升，但是不支持浏览器在同一个URL下的前进后退操作）</li><li>SPA（single page application）单页面应用程序：整个网站只有一个页面，内容的变化通过ajax局部更新实现、同时支持浏览器地址栏的前进后退操作</li><li>SPA实现原理之一：基于URL地址中的hash（hash的变化会导致浏览器历史记录的变化，但是hash的变化不会触发新的URL请求）</li><li>实现SPA过程中，最核心的技术就是前端路由</li></ul><p><strong>后端路由</strong>：根据不同的URL地址分发不同的资源</p><p><strong>前端路由</strong>：</p><ol><li>根据不同的用户事件，显示不同的页面内容；</li><li>用户事件与事件处理函数之间的对应关系；</li></ol><img src="http://cdn.upeveryday.cn/img/image-20211112165010375.png" alt="image-20211112165010375" style="zoom: 67%;" /><h3 id="vue-router"><a href="#vue-router" class="headerlink" title="vue router"></a>vue router</h3><ul><li>支持HTML5历史模式或hash模式</li><li>支持嵌套路由</li><li>支持路由参数</li><li>支持编程式路由</li><li>支持命名路由</li></ul><h4 id="使用步骤"><a href="#使用步骤" class="headerlink" title="使用步骤"></a>使用步骤</h4><ol><li><p><strong style="color:#00b050;">引入相关库文件</strong></p><figure class="highlight html"><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="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/path/to/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/path/to/vue-router.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><p>导入vue文件，会为全局window对象挂载vue构造函数</p><p>导入vue-router文件，会<strong>为全局window对象挂载vue-router构造函数</strong></p></li><li><p><strong style="color:#00b050;">添加路由链接</strong></p><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></pre></td><td class="code"><pre><span class="line"> <span class="comment"><!-- 使用 router-link 组件来导航. --></span></span><br><span class="line"> <span class="comment"><!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --></span></span><br><span class="line"><span class="comment"><!-- 通过传入 `to` 属性指定链接，默认渲染为href属性 --></span></span><br><span class="line"><span class="comment"><!-- to(href)属性的值默认渲染为 # 开头的hash地址 --></span></span><br><span class="line"> <span class="tag"><<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/user"</span>></span>Go to Foo<span class="tag"></<span class="name">router-link</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/register"</span>></span>Go to Bar<span class="tag"></<span class="name">router-link</span>></span></span><br></pre></td></tr></table></figure></li><li><p><strong style="color:#00b050;">添加路由填充位（占位符）</strong></p><p>将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置</p><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></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="tag"><<span class="name">router-view</span>></span><span class="tag"></<span class="name">router-view</span>></span></span><br></pre></td></tr></table></figure></li><li><p><strong style="color:#00b050;">定义路由组件</strong></p><blockquote><p>template里面可以定义子路由链接和子路由的填充位，进而实现嵌套路由</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> User = {</span><br><span class="line"> <span class="attr">template</span>: <span class="string">'<h1>自定义组件!</h1>'</span></span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> Register = {</span><br><span class="line"> <span class="attr">template</span>: <span class="string">'<h1>自定义组件!</h1>'</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p><strong style="color:#00b050;">创建路由实例并配置路由规则</strong></p><blockquote><p>VueRouter构造函数是导入vue-router文件时挂载到全局window对象上的</p></blockquote><ol><li>每个路由规则都是一个配置对象，其中至少包含path和component两个属性</li><li>path：当前路由规则匹配的hash地址</li><li>component：当前路由规则对应要展示的组件（此属性只接收组件，不接收字符串）</li></ol><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//创建 router 实例对象，然后传 `routes` ，为路由规则数组</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter({</span><br><span class="line"> <span class="attr">routers</span>: [</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">path</span>:<span class="string">'/user'</span>,</span><br><span class="line"> <span class="attr">component</span>:User,</span><br><span class="line"> <span class="comment">//children是子路由规则数组</span></span><br><span class="line"> <span class="attr">children</span>:[</span><br><span class="line"> path: <span class="string">'xx'</span>,<span class="comment">//当path匹配成功，component会被渲染在User的<router-view>中，进而展现出组件之间的嵌套</span></span><br><span class="line"> <span class="attr">component</span>: xx</span><br><span class="line"> ]</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">path</span>:<span class="string">'/register'</span>,</span><br><span class="line"> <span class="attr">component</span>:Register</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">})</span><br></pre></td></tr></table></figure></li><li><p><strong style="color:#00b050;">把路由挂载到vue根实例上</strong></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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建和挂载根实例。</span></span><br><span class="line"><span class="comment">// 记得要通过 router 配置参数注入路由，</span></span><br><span class="line"><span class="comment">// 从而让整个应用都有路由功能</span></span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> Vue({</span><br><span class="line"> router<span class="comment">// (缩写) 相当于 router: router；挂载的是之前创建的router实例对象</span></span><br><span class="line">}).$mount(<span class="string">'#app'</span>)</span><br></pre></td></tr></table></figure></li></ol><h4 id="编程式导航"><a href="#编程式导航" class="headerlink" title="编程式导航"></a>编程式导航</h4><p><strong>声明式导航</strong>：通过点击链接实现导航的方式（只写标签即可）</p><p>例如：HTML中的a标签或vue中的router-link标签</p><p>先声明标签，再实现的导航</p><p><strong>编程式导航</strong>：通过<strong style="color:#00b050;">调用JS的api实现导航</strong>的方式，叫做编程式导航（需要写代码）</p><p>例如：普通网页中的location.href</p><p>不需要声明标签，直接定义点击事件的事件处理函数，在JS中使用**<code>this.$router.push(hash地址)</code>**</p><h4 id="路由导航守卫：控制访问权限"><a href="#路由导航守卫：控制访问权限" class="headerlink" title="路由导航守卫：控制访问权限"></a>路由导航守卫：控制访问权限</h4><p>如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面</p><p>src/router/index.js：</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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 路由导航守卫</span></span><br><span class="line">router.beforeEach(<span class="function">(<span class="params">to, <span class="keyword">from</span>, next</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (to.path === <span class="string">'/login'</span>) <span class="keyword">return</span> next()</span><br><span class="line"> <span class="comment">// 获取token</span></span><br><span class="line"> <span class="keyword">const</span> token = <span class="built_in">window</span>.sessionStorage.getItem(<span class="string">'token'</span>)</span><br><span class="line"> <span class="comment">// token不存在，则表示未登录，强制跳转至登录页</span></span><br><span class="line"> <span class="keyword">if</span> (!token) <span class="keyword">return</span> next(<span class="string">'/login'</span>)</span><br><span class="line"> <span class="comment">// 已登录，放行</span></span><br><span class="line"> next()</span><br><span class="line">})</span><br></pre></td></tr></table></figure><h4 id="动态路由"><a href="#动态路由" class="headerlink" title="动态路由"></a>动态路由</h4><p>为了控制不同权限的用户访问可以访问不同的资源，当用户登录成功后，从数据库获取其permissions（可访问资源数组）存储在sessionStorage中，定义一个单独的js文件，用来根据permissions动态的生成路由规则</p><p>匹配的优先级就按照路由的定义顺序：路由定义得越早，优先级就越高。</p><ul><li>chatroom-vue/src/router/permission.js</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><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="keyword">import</span> Layout <span class="keyword">from</span> <span class="string">'@/layout/Layout'</span></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">'@/router/index'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">dynamicRouter</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">const</span> userStr = sessionStorage.getItem(<span class="string">'user'</span>)</span><br><span class="line"> <span class="keyword">const</span> root = {</span><br><span class="line"> <span class="attr">path</span>: <span class="string">'/'</span>,</span><br><span class="line"> <span class="attr">component</span>: Layout,</span><br><span class="line"> <span class="attr">redirect</span>: <span class="string">'/chatroom'</span>,</span><br><span class="line"> <span class="comment">// 嵌套路由</span></span><br><span class="line"> <span class="attr">children</span>: []</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (userStr !== <span class="literal">null</span>) {</span><br><span class="line"> <span class="keyword">const</span> user = <span class="built_in">JSON</span>.parse(userStr)</span><br><span class="line"> user.permissions.forEach(<span class="function"><span class="params">p</span> =></span> {</span><br><span class="line"> root.children.push({ <span class="attr">path</span>: p.path, <span class="attr">component</span>: <span class="function">() =></span> <span class="keyword">import</span>(<span class="string">'@/views'</span> + p.path) })</span><br><span class="line"> })</span><br><span class="line"> router.addRoute(root)</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>登录后调用dynamicRouter (permissions)方法即可</p><ul><li>chatroom-vue/src/router/index.js</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><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></pre></td><td class="code"><pre><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 class="keyword">import</span> Login <span class="keyword">from</span> <span class="string">'@/views/Login'</span></span><br><span class="line"><span class="keyword">import</span> Register <span class="keyword">from</span> <span class="string">'@/views/Register'</span></span><br><span class="line"><span class="keyword">import</span> ChatRoom <span class="keyword">from</span> <span class="string">'@/views/ChatRoom'</span></span><br><span class="line"><span class="keyword">import</span> Layout <span class="keyword">from</span> <span class="string">'@/layout/Layout'</span></span><br><span class="line"><span class="keyword">import</span> Person <span class="keyword">from</span> <span class="string">'@/views/Person'</span></span><br><span class="line"><span class="keyword">import</span> User <span class="keyword">from</span> <span class="string">'@/views/User'</span></span><br><span class="line"><span class="keyword">import</span> Message <span class="keyword">from</span> <span class="string">'@/views/Message'</span></span><br><span class="line">Vue.use(VueRouter)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> routes = [</span><br><span class="line"> { <span class="attr">path</span>: <span class="string">'/login'</span>, <span class="attr">component</span>: Login },</span><br><span class="line"> { <span class="attr">path</span>: <span class="string">'/register'</span>, <span class="attr">component</span>: Register },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">path</span>: <span class="string">'/'</span>,</span><br><span class="line"> <span class="attr">component</span>: Layout,</span><br><span class="line"> <span class="attr">redirect</span>: <span class="string">'/chatroom'</span>,</span><br><span class="line"> <span class="comment">// 嵌套路由</span></span><br><span class="line"> <span class="attr">children</span>: [</span><br><span class="line"> { <span class="comment">// 当 /chatroom 匹配成功，</span></span><br><span class="line"> <span class="comment">// Chatroom 会被渲染在 Layout 的 <router-view> 中</span></span><br><span class="line"> <span class="attr">path</span>: <span class="string">'chatroom'</span>, <span class="attr">component</span>: ChatRoom</span><br><span class="line"> },</span><br><span class="line"> { <span class="attr">path</span>: <span class="string">'/user'</span>, <span class="attr">component</span>: User },</span><br><span class="line"> { <span class="attr">path</span>: <span class="string">'/person'</span>, <span class="attr">component</span>: Person },</span><br><span class="line"> { <span class="attr">path</span>: <span class="string">'/message'</span>, <span class="attr">component</span>: Message }</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="keyword">const</span> router = <span class="keyword">new</span> VueRouter({</span><br><span class="line"> routes</span><br><span class="line">})</span><br><span class="line"><span class="comment">// 路由导航守卫</span></span><br><span class="line">router.beforeEach(<span class="function">(<span class="params">to, <span class="keyword">from</span>, next</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (to.path === <span class="string">'/login'</span>) <span class="keyword">return</span> next()</span><br><span class="line"> <span class="keyword">if</span> (to.path === <span class="string">'/register'</span>) <span class="keyword">return</span> next()</span><br><span class="line"> <span class="keyword">const</span> user = sessionStorage.getItem(<span class="string">'user'</span>)</span><br><span class="line"> <span class="keyword">if</span> (!user) {</span><br><span class="line"> next(<span class="string">'/login'</span>)</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> next()</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> router</span><br></pre></td></tr></table></figure><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install vue-router --save-dev</span><br></pre></td></tr></table></figure><p>路由配置文件 src/router/index.js</p><blockquote><p>类似controller的功能，将请求路径与资源进行绑定</p><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></pre></td><td class="code"><pre><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 class="keyword">import</span> content <span class="keyword">from</span> <span class="string">"../components/content"</span>;</span><br><span class="line"><span class="keyword">import</span> Main <span class="keyword">from</span> <span class="string">"../components/Main"</span>;</span><br><span class="line"><span class="comment">//使用路由</span></span><br><span class="line">Vue.use(VueRouter);</span><br><span class="line"></span><br><span class="line"><span class="comment">//配置导出路由</span></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"> <span class="attr">routes</span>:[</span><br><span class="line"> {</span><br><span class="line"> <span class="comment">//路由路径</span></span><br><span class="line"> <span class="attr">path</span>:<span class="string">"/content"</span>,</span><br><span class="line"> <span class="comment">//路由名字</span></span><br><span class="line"> <span class="attr">name</span>:<span class="string">"content"</span>,</span><br><span class="line"> <span class="comment">//跳转的组件</span></span><br><span class="line"> <span class="attr">component</span>:content</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">path</span>: <span class="string">"/login"</span>,</span><br><span class="line"> <span class="attr">name</span>: <span class="string">"登录"</span>,</span><br><span class="line"> <span class="attr">hidden</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">component</span>: <span class="function">() =></span> <span class="keyword">import</span>(<span class="string">"../views/login/Login.vue"</span>)<span class="comment">//vue3的新语法，将login.vue组件与路径"/login"进行绑定</span></span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p>src/main.js</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></pre></td><td class="code"><pre><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> App <span class="keyword">from</span> <span class="string">'./App'</span></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">"./router"</span><span class="comment">//自动加载index.js配置</span></span><br><span class="line">Vue.config.productionTip = <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line"> <span class="comment">//配置路由</span></span><br><span class="line"> router,</span><br><span class="line"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span><br><span class="line"> <span class="attr">components</span>: { App },</span><br><span class="line"> <span class="attr">template</span>: <span class="string">'<App/>'</span></span><br><span class="line">})</span><br><span class="line"></span><br></pre></td></tr></table></figure><h2 id="elementUI"><a href="#elementUI" class="headerlink" title="elementUI"></a>elementUI</h2><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//初始化项目</span></span><br><span class="line">vue init webpack eleUI</span><br><span class="line"><span class="comment">//进入工程目录</span></span><br><span class="line">cd eleUI</span><br><span class="line"><span class="comment">//安装vue-router</span></span><br><span class="line">npm install vue-router --save-dev</span><br><span class="line"><span class="comment">//安装elementUI</span></span><br><span class="line">npm i element-ui -S</span><br><span class="line"><span class="comment">//安装依赖</span></span><br><span class="line">npm install</span><br><span class="line"><span class="comment">//安装SASS加载器</span></span><br><span class="line">npm install sass-loader node-sass --save-dev</span><br><span class="line"><span class="comment">//启动测试</span></span><br><span class="line">npm run dev</span><br></pre></td></tr></table></figure><h3 id="按需导入"><a href="#按需导入" class="headerlink" title="按需导入"></a>按需导入</h3><p>在<code>src/plugins/element.js</code>中按需导入，并进行全局注册</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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 按需导入</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> { Button, Form, FormItem, Input, Message } <span class="keyword">from</span> <span class="string">'element-ui'</span></span><br><span class="line"><span class="comment">// 使用Vue.use进行全局注册</span></span><br><span class="line">Vue.use(Button)</span><br><span class="line">Vue.use(Form)</span><br><span class="line">Vue.use(FormItem)</span><br><span class="line">Vue.use(Input)</span><br><span class="line"></span><br><span class="line">Vue.prototype.$message = Message</span><br></pre></td></tr></table></figure><h4 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h4><p>因为要在JS代码中编写弹框的出现时机，那么<strong>Message组件需要定义为Vue的实例属性</strong>，只需<code>this.$message</code>即可调用Message组件（this是获取当前实例对象）</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Vue.prototype.$message = Message</span><br></pre></td></tr></table></figure><h3 id="form数据绑定"><a href="#form数据绑定" class="headerlink" title="form数据绑定"></a>form数据绑定</h3><figure class="highlight plaintext"><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></pre></td><td class="code"><pre><span class="line"><template></span><br><span class="line"><div class="login_container"></span><br><span class="line"> <div class="login_box"></span><br><span class="line"> <!--登录表单区域，将表单绑定到数据对象form，在输入框中绑定时直接 form.属性 即可--></span><br><span class="line"> <el-form :model="form" label-width="0px" class="login_form"></span><br><span class="line"> <!--用户名--></span><br><span class="line"> <el-form-item label=""></span><br><span class="line"> <el-input v-model="form.username" prefix-icon="el-icon-user"></el-input></span><br><span class="line"> </el-form-item></span><br><span class="line"> <!--密码--></span><br><span class="line"> <el-form-item label=""></span><br><span class="line"> <el-input v-model="form.password" prefix-icon="el-icon-goods"></el-input></span><br><span class="line"> </el-form-item></span><br><span class="line"> </el-form></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">export default {</span><br><span class="line"> name: 'Login',</span><br><span class="line"> data () {</span><br><span class="line"> return {</span><br><span class="line"> // 登录表单的数据绑定对象</span><br><span class="line"> form: {</span><br><span class="line"> username: '',</span><br><span class="line"> password: ''</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"></script></span><br></pre></td></tr></table></figure><h3 id="获取表单实例对象"><a href="#获取表单实例对象" class="headerlink" title="获取表单实例对象"></a>获取表单实例对象</h3><p>获取form表单的实例对象，进而可以执行<code>Form Methods</code>，例如重置表单方法<code>resetFields</code></p><ul><li>为表单添加一个ref引用属性，属性值就是组件的实例对象</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><el-form ref="loginFormRef"></span><br></pre></td></tr></table></figure><figure class="highlight plaintext"><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"><template></span><br><span class="line"><div class="login_container"></span><br><span class="line"> <div class="login_box"></span><br><span class="line"> <!--登录表单区域--></span><br><span class="line"> <el-form ref="loginFormRef"></span><br><span class="line"> <!--按钮区域--></span><br><span class="line"> <el-form-item label="" class="btns"></span><br><span class="line"> <el-button type="info" @click="resetLoginForm">重置</el-button></span><br><span class="line"> </el-form-item></span><br><span class="line"> </el-form></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">export default {</span><br><span class="line"> name: 'Login',</span><br><span class="line"> methods: {</span><br><span class="line"> // 重置表单</span><br><span class="line"> resetLoginForm () {</span><br><span class="line"> // console.log(this)</span><br><span class="line"> // this.$refs是一个对象，其中的属性loginFormRef是表单的实例对象，可以直接调用表单方法</span><br><span class="line"> this.$refs.loginFormRef.resetFields()</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><h3 id="表单数据重置"><a href="#表单数据重置" class="headerlink" title="表单数据重置"></a>表单数据重置</h3><blockquote><p>重置表单到初始值，不是清空表单</p></blockquote><p>表单项el-form-item没有添加prop属性，<strong>prop属性需要与input框绑定的属性一致</strong></p><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">el-form</span> <span class="attr">ref</span>=<span class="string">"userForm"</span> <span class="attr">:model</span>=<span class="string">"sizeForm"</span> <span class="attr">label-width</span>=<span class="string">"80px"</span> <span class="attr">size</span>=<span class="string">"mini"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">el-form-item</span> <span class="attr">label</span>=<span class="string">"活动名称"</span> <span class="attr">prop</span>=<span class="string">"name"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">el-input</span> <span class="attr">v-model</span>=<span class="string">"sizeForm.name"</span>></span><span class="tag"></<span class="name">el-input</span>></span></span><br><span class="line"><span class="tag"></<span class="name">el-form-item</span>></span></span><br><span class="line"><span class="tag"></<span class="name">el-form</span>></span></span><br></pre></td></tr></table></figure><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">resetForm () {</span><br><span class="line"> <span class="comment">// this.$refs是一个对象，其中的属性formRef是表单的实例对象，可以直接调用表单方法</span></span><br><span class="line"> <span class="built_in">this</span>.$refs.userForm.resetFields()</span><br><span class="line">},</span><br></pre></td></tr></table></figure><h3 id="使用技巧"><a href="#使用技巧" class="headerlink" title="使用技巧"></a>使用技巧</h3><h4 id="组件名就是类名"><a href="#组件名就是类名" class="headerlink" title="组件名就是类名"></a>组件名就是类名</h4><p>例如：</p><p>header组件</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">el-header</span>></span>header<span class="tag"></<span class="name">el-header</span>></span></span><br></pre></td></tr></table></figure><p>可以直接在style中使用</p><figure class="highlight css"><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="selector-class">.el-header</span>{</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#2b4b6b</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h4 id="Layout布局"><a href="#Layout布局" class="headerlink" title="Layout布局"></a>Layout布局</h4><p>先定义row组件，再定义col组件通过span属性进行分配列数</p><figure class="highlight plaintext"><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"><el-row></span><br><span class="line"> <el-col :span="12"></el-col></span><br><span class="line"> <el-col :span="12"></el-col></span><br><span class="line"></el-row></span><br></pre></td></tr></table></figure><h2 id="npm脚本"><a href="#npm脚本" class="headerlink" title="npm脚本"></a>npm脚本</h2><p>NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：</p><ul><li>允许用户从NPM服务器下载别人编写的第三方包到本地使用。</li><li>允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。</li><li>允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。</li></ul><p>由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 <strong>“npm -v”</strong> 来测试是否成功安装</p><h3 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h3><p>npm 允许在<code>package.json</code>文件里面，使用<code>scripts</code>字段定义脚本命令。</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></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> <span class="string">"scripts"</span>: {</span><br><span class="line"> <span class="string">"build"</span>: <span class="string">"node build.js"</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>上面代码是<code>package.json</code>文件的一个片段，里面的<code>scripts</code>字段是一个对象。它的每一个属性，对应一段脚本。比如，<code>build</code>命令对应的脚本是<code>node build.js</code>。</p><p>命令行下使用<code>npm run</code>命令，就可以执行这段脚本。</p><figure class="highlight bash"><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">$ npm run build</span><br><span class="line"><span class="comment"># 等同于执行</span></span><br><span class="line">$ node build.js</span><br></pre></td></tr></table></figure><p>这些定义在<code>package.json</code>里面的脚本，就称为 <strong>npm 脚本</strong>。它的优点很多：</p><ul><li>项目的相关脚本，可以集中在一个地方。</li><li>不同项目的脚本命令，只要功能相同，就可以有同样的对外接口。用户不需要知道怎么测试你的项目，只要运行<code>npm run test</code>即可。</li><li>可以利用 npm 提供的很多辅助功能。</li></ul><p>查看当前项目的所有 npm 脚本命令，可以使用不带任何参数的<code>npm run</code>命令。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm run</span><br></pre></td></tr></table></figure><h3 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install packagename --save 或 -S</span><br></pre></td></tr></table></figure><p>–save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中；</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install packagename --save-dev 或 -D</span><br></pre></td></tr></table></figure><p>–save-dev 、 -D参数意思是吧模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的devDependencies字段中；</p><h3 id="命令"><a href="#命令" class="headerlink" title="命令"></a>命令</h3><p>npm run serve：启动项目</p><h2 id="vuex"><a href="#vuex" class="headerlink" title="vuex"></a>vuex</h2><p>组件之间共享数据</p><p>Vuex中的主要核心概念如下：</p><ul><li>State</li><li>Mutation</li><li>Action</li><li>Getter</li></ul><h3 id="State"><a href="#State" class="headerlink" title="State"></a>State</h3><p>在Vuex中，State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储，这里的Store相当于一个用于存储数据的公共容器。</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vue.Store({</span><br><span class="line"> <span class="attr">state</span>: {</span><br><span class="line"> <span class="attr">count</span>: <span class="number">0</span></span><br><span class="line"> }</span><br><span class="line"> ...</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>在js中访问State中的数据</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">this</span>.$store.state.全局数据名称</span><br></pre></td></tr></table></figure><p>在HTML中</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">span</span>></span>{{$store.state.全局数据名称}}<span class="tag"></<span class="name">span</span>></span></span><br></pre></td></tr></table></figure><h3 id="Mutation"><a href="#Mutation" class="headerlink" title="Mutation"></a>Mutation</h3><blockquote><p>mutation：变化</p></blockquote><p>Vuex中的Mutation是用于变更Store中的数据。</p><p>在Vuex中，<strong>只能通过mutation变更Store数据</strong>，不可以直接操作Store中的数据。虽然通过mutation的方式来操作数据，虽然繁琐了一点，但是却可以集中监控所有数据的变化。</p><p>例如需要让全局数据自增加1，则可以通过如下的方式在Mutation中定义</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store({</span><br><span class="line"> <span class="attr">state</span>: {</span><br><span class="line"> <span class="attr">count</span>: <span class="number">0</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">mutations</span>: {</span><br><span class="line"> <span class="function"><span class="title">add</span>(<span class="params">state</span>)</span> {</span><br><span class="line"> <span class="comment">//变更状态</span></span><br><span class="line"> state.count++;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><h4 id="触发mutation函数"><a href="#触发mutation函数" class="headerlink" title="触发mutation函数"></a>触发mutation函数</h4><p>在方法中，通过$store.commit()函数来触发mutation</p><blockquote><p>commit参数为mutation函数的名字</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></pre></td><td class="code"><pre><span class="line">methods: {</span><br><span class="line"> handle1 () {</span><br><span class="line"> <span class="comment">// 触发mutations的第一种方式</span></span><br><span class="line"> <span class="built_in">this</span>.$store.commit(<span class="string">'add'</span>)</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>接着就可以通过@click方法来调用handle1，从而来触发mutation函数。</p><p>另外，可以在触发mutation函数时，传入参数</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store({</span><br><span class="line"> <span class="attr">state</span>: {</span><br><span class="line"> <span class="attr">count</span>: <span class="number">0</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">mutations</span>: {</span><br><span class="line"> <span class="function"><span class="title">add</span>(<span class="params">state</span>)</span> {</span><br><span class="line"> <span class="comment">//变更状态</span></span><br><span class="line"> state.count++;</span><br><span class="line"> },</span><br><span class="line"> <span class="function"><span class="title">addN</span>(<span class="params">state, n</span>)</span> {</span><br><span class="line"> state.count += n;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>然后定义handler2</p><blockquote><p>commit参数为mutation函数的名字和参数</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></pre></td><td class="code"><pre><span class="line">methods: {</span><br><span class="line"> <span class="attr">handler2</span>: {</span><br><span class="line"> <span class="built_in">this</span>.$store.commit(<span class="string">'addN'</span>, <span class="number">5</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="Action"><a href="#Action" class="headerlink" title="Action"></a>Action</h3><p>从vuex官网中可以了解到，Action类似于mutation，不同之处在于：</p><ul><li>Action 提交的是 mutation，而不是直接变更状态。</li><li>Action 可以包含任意异步操作。</li></ul><p>可以得出一个结论就是，如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据。</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store({</span><br><span class="line"> <span class="attr">state</span>: {</span><br><span class="line"> <span class="attr">count</span>: <span class="number">0</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">mutations</span>: {</span><br><span class="line"> <span class="function"><span class="title">add</span>(<span class="params">state</span>)</span> {</span><br><span class="line"> <span class="comment">//变更状态</span></span><br><span class="line"> state.count++;</span><br><span class="line"> },</span><br><span class="line"> <span class="function"><span class="title">addN</span>(<span class="params">state, n</span>)</span> {</span><br><span class="line"> state.count += n;</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">actions</span>: {</span><br><span class="line"> <span class="comment">// 通过context去调用mutation</span></span><br><span class="line"> <span class="function"><span class="title">addAsync</span>(<span class="params">context</span>)</span> {</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line"> context.commit(<span class="string">'add'</span> </span><br><span class="line"> }, <span class="number">1000</span>)</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 调用Actions是也可以传入参数</span></span><br><span class="line"> <span class="function"><span class="title">addNAsync</span>(<span class="params">context, n</span>)</span> {</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line"> context.commit(<span class="string">'addN'</span>, n);</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></pre></td></tr></table></figure><p>需要再次强调的是，只有通过mutation中定义的函数，才有权利去修改state中的数据，因此actions最终还是要调用mutation。</p><h4 id="触发action函数"><a href="#触发action函数" class="headerlink" title="触发action函数"></a>触发action函数</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><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">methods: {</span><br><span class="line"> <span class="function"><span class="title">handleAddAsync</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="built_in">this</span>.$store.dispatch(<span class="string">'addAsync'</span>);</span><br><span class="line"> },</span><br><span class="line"> <span class="function"><span class="title">handleAddNAsync</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="built_in">this</span>.$store.dispatch(<span class="string">'addNAsync'</span>, n);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="Getter"><a href="#Getter" class="headerlink" title="Getter"></a>Getter</h3><p>在Vuex官网中，用到了派生这一词来介绍Getter，在这里可以理解为就是用于对Store中的数据进行加工处理，形成新的数据，类似Vue的计算属性。Getter的数据是基于Store中的数据的，所以当Store中数据发生变化时，Getter中的数据也会随之变化。</p><h4 id="定义Getter"><a href="#定义Getter" class="headerlink" title="定义Getter"></a>定义Getter</h4><p>例如state中存有todos计划项，其对象有一个done状态表示完成与否。</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 class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store({</span><br><span class="line"> <span class="attr">state</span>: {</span><br><span class="line"> <span class="attr">todos</span>: [</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">1</span>, <span class="attr">text</span>: <span class="string">'...'</span>, <span class="attr">done</span>: <span class="literal">true</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">2</span>, <span class="attr">text</span>: <span class="string">'...'</span>, <span class="attr">done</span>: <span class="literal">false</span> }</span><br><span class="line"> ]</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">getters</span>: {</span><br><span class="line"> <span class="comment">// 这里通过getters定义的doneTodos方法来过滤已完成的todo项</span></span><br><span class="line"> <span class="attr">doneTodos</span>: <span class="function"><span class="params">state</span> =></span> {</span><br><span class="line"> <span class="keyword">return</span> state.todos.filter(<span class="function"><span class="params">todo</span> =></span> todo.done);</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 这里还可以通过传入getters对象来获取其他方法</span></span><br><span class="line"> <span class="attr">doneTodosCount</span>: <span class="function">(<span class="params">state, getters</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> getters.doneTools.length;</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 传入参数</span></span><br><span class="line"> <span class="attr">getTodoById</span>: <span class="function">(<span class="params">state</span>) =></span> <span class="function">(<span class="params">id</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> state.todos.find(<span class="function"><span class="params">todo</span> =></span> todo.id == id);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><h4 id="触发getter函数"><a href="#触发getter函数" class="headerlink" title="触发getter函数"></a>触发getter函数</h4><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">this</span>.$store.getters.doneTodos <span class="comment">// -> [{id: 1, text: '...', done: true}]</span></span><br><span class="line"><span class="built_in">this</span>.$store.getters.doneTodosCount <span class="comment">// -> 1</span></span><br></pre></td></tr></table></figure><h3 id="Module"><a href="#Module" class="headerlink" title="Module"></a>Module</h3><p>当Store中存放了非常多非常大的共享数据对象时，应用会变的非常的复杂，Store对象也会非常臃肿，所以Vuex提供了一个Module模块来分隔Store。通过对Vuex中的Store分隔，分隔成一个一个的Module模块，每个Module模块都拥有自己的state、mutation、actions和getters。</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 class="keyword">const</span> moduleA = {</span><br><span class="line"> <span class="attr">state</span>: <span class="function">() =></span> ({ ... }),</span><br><span class="line"> <span class="attr">mutations</span>: { ... },</span><br><span class="line"> <span class="attr">actions</span>: { ... },</span><br><span class="line"> <span class="attr">getters</span>: { ... }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> moduleB = {</span><br><span class="line"> <span class="attr">state</span>: <span class="function">() =></span> ({ ... }),</span><br><span class="line"> <span class="attr">mutations</span>: { ... },</span><br><span class="line"> <span class="attr">actions</span>: { ... }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store({</span><br><span class="line"> <span class="attr">modules</span>: {</span><br><span class="line"> <span class="attr">a</span>: moduleA,</span><br><span class="line"> <span class="attr">b</span>: moduleB</span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">store.state.a <span class="comment">// -> moduleA 的状态</span></span><br><span class="line">store.state.b <span class="comment">// -> moduleB 的状态</span></span><br></pre></td></tr></table></figure><p><strong>对于模块中的mutations和getters，传入的第一个参数规定为state，而actions则依旧是context参数。如下：</strong></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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> moduleA = {</span><br><span class="line"> <span class="attr">state</span>: {</span><br><span class="line"> <span class="attr">count</span>: <span class="number">0</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">mutations</span>: {</span><br><span class="line"> increment (state) {</span><br><span class="line"> <span class="comment">// 这里的 `state` 对象是模块的局部状态</span></span><br><span class="line"> state.count++</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> <span class="attr">getters</span>: {</span><br><span class="line"> doubleCount (state) {</span><br><span class="line"> <span class="keyword">return</span> state.count * <span class="number">2</span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">actions</span>: {</span><br><span class="line"> <span class="comment">// context对象其实包含了 state、commit、rootState。</span></span><br><span class="line"> incrementIfOddRootsum (context) {</span><br><span class="line"><span class="keyword">if</span> ((context.state.count + context.rootState.count) % <span class="number">2</span> === <span class="number">1</span>) {</span><br><span class="line"> <span class="comment">// 调用mutations</span></span><br><span class="line"> commit(<span class="string">'increment'</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><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ol><li>Vuex主要用于管理Vue组件中共享的数据。</li><li>Vuex中有state、mutation、action、getter等核心概念。</li><li>获取state可以通过this.$store.state.xx或者是通过定义mapState来获取。</li><li>修改state中的变量需要通过mutation函数实现，而mutation的触发由两种方式，一种是通过this.$store.commit()函数，另外一种是通过mapMutations来实现。</li><li>mutation只能用于修改数据，而Actions可以实现异步操作。</li><li>通过Actions的异步操作+mutation的修改数据，可以实现异步修改数据。调用Actions有两种方式，第一种是通this.$store.dispatch来调用，另外一种方式是通过mapActions来调用。</li><li>Getters函数用于对Store中数据进行加工，不会修改原本Store中的数据；Getters中的数据会受Store中数据进行影响。</li></ol>]]></content>
<categories>
<category> FrontEnd </category>
</categories>
<tags>
<tag> technology </tag>
</tags>
</entry>
<entry>
<title>人体肌肉相关的知识</title>
<link href="/2021/10/17/ImproveOneself/bodybuilding/"/>
<url>/2021/10/17/ImproveOneself/bodybuilding/</url>
<content type="html"><![CDATA[<h1 id="肌肉"><a href="#肌肉" class="headerlink" title="肌肉"></a>肌肉</h1><h3 id="不可主动强化的4块肌肉"><a href="#不可主动强化的4块肌肉" class="headerlink" title="不可主动强化的4块肌肉"></a>不可主动强化的4块肌肉</h3><p><strong>1.肩胛提肌</strong></p><p>肌肉肥大会缩短肌肉和神经线的距离会压迫神经线</p><p><strong>2.胸小肌</strong> </p><p>变大会导致肩关节能力减小关节压力变大</p><p><strong>3.斜角肌</strong> </p><p>强化后肋骨上提，锁骨和肋骨的空间变小，有机会压迫神经线</p><p><strong>4.髂腰肌</strong></p><p>强化会导致腰椎往前增加，骨盆前倾</p><h3 id="扳机点"><a href="#扳机点" class="headerlink" title="扳机点"></a>扳机点</h3><blockquote><p>trigger：扳机；触发</p><p>trigger point：扳机点；触发点</p><p>触发点也称为<strong>肌筋膜</strong>触发点</p><p><strong>扳机点</strong>会导致肌肉疼痛，更麻烦的是一个地方的扳机点会在另外的地方产生症状，堪称“<strong>声东击西</strong>”。这种奇怪的现象被称为“<strong>牵涉痛</strong>”，常常导致误诊。</p></blockquote><p>按照扳机点理论的创始者特拉维尔和西蒙的话说，扳机点是“<strong>骨骼肌中过度应激的点</strong>，这个点与紧带区中高度敏感的可以触摸到的小结节密切相关。按压这个点会引发典型的牵涉痛、触痛、运动功能障碍以及自主神经症状”。</p><p>简单来说，扳机点就是肌肉组织中的紧带区中一个娇弱的小结节，按压它会产生疼痛感。</p><p>对于扳机点的产生来说，最关键的因素是<strong>肌肉的过度使用</strong>，但导致肌肉过度使用的因素却多种多样。正是由于这些因素的存在，扳机点即便通过一些方法消除了，很快又会复发，只有解决这背后的因素，才能真正消除扳机点。</p><ul><li>如果是肌肉的问题，我们向触发点施压会引起疼痛</li><li></li></ul><h3 id="筋膜"><a href="#筋膜" class="headerlink" title="筋膜"></a>筋膜</h3><p>指筋，附着于骨而聚于关节，是联结关节、肌肉的一种组织。筋性坚韧刚劲，对骨节肌肉等运动组织有约束和保护作用。</p><h3 id="有氧运动与无氧运动"><a href="#有氧运动与无氧运动" class="headerlink" title="有氧运动与无氧运动"></a>有氧运动与无氧运动</h3><img src="https://pica.zhimg.com/50/31611b10463c8cd1a36779f12ba5af77_720w.jpg?source=1940ef5c" alt="img" style="zoom:80%;" /><h3 id="上交叉综合征"><a href="#上交叉综合征" class="headerlink" title="上交叉综合征"></a>上交叉综合征</h3><img src="http://5b0988e595225.cdn.sohucs.com/images/20190913/6ba4ed8ad7954237a6fdd5a908118d12.jpeg" alt="img" style="zoom: 50%;" /><img src="http://cdn.upeveryday.cn/img/image-20210914180611467.png" alt="image-20210914180611467" style="zoom: 67%;" /><h3 id="下交叉综合征（骨盆前倾）"><a href="#下交叉综合征（骨盆前倾）" class="headerlink" title="下交叉综合征（骨盆前倾）"></a>下交叉综合征（骨盆前倾）</h3><p><img src="https://pic3.zhimg.com/50/v2-935f330c7bd491047653c9fe15fbe8f6_720w.jpg?source=1940ef5c" alt="img"></p><p>主流观点认为，造成骨盆前倾的原因主要是前后肌力不平衡，即左上的竖脊肌和右下的髂腰肌、股直肌、阔筋膜张肌等过于紧张，而右上的腹肌和左下的臀肌则过于松弛导致的。 </p><p>在骨骼层面，前倾时骨盆是向前旋转的。 </p><p><img src="https://mmbiz.qpic.cn/mmbiz_jpg/HlXCVMYbzs9p48tNN9iawyY9OqwsNJEsKkxh2QxfYtoKTf54gjj4AWpEMct6p59gA6yXrTWfvVA1M8AKPuKhrzQ/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="img"></p><h2 id="背部肌肉"><a href="#背部肌肉" class="headerlink" title="背部肌肉"></a>背部肌肉</h2><p>浅层：五块肌肉</p><p> 斜方肌、肩胛提肌、小菱形肌、大菱形肌、背阔肌</p><p> </p><p>中层：两块小型肌群（连接到肋骨，因此可以影响<strong>胸廓的运动</strong>）</p><p> 位于大菱形肌下方的<strong>上后锯肌</strong>：由内上方连接到外下方的肋骨，提供上部肋骨向下的拉力</p><p> 位于下部的<strong>下后锯肌</strong>：由内向外连接到上面的肋骨，提供肋骨向下的拉力。由于连接到肋骨</p><p>深层：</p><p> 分布在脊柱的两侧</p><p> 竖脊肌：包含了三部分的肌肉</p><p><img src="http://5b0988e595225.cdn.sohucs.com/images/20190816/72e3a6405ddc4473b434da2c4a0fbe4d.jpeg" alt="img"></p><p><img src="http://cdn.upeveryday.cn/img/49b007559f86ca3bf89d0287e157f685298993f0.png@942w_942h_progressive.webp" alt="img"></p><h3 id="肩胛提肌"><a href="#肩胛提肌" class="headerlink" title="肩胛提肌"></a>肩胛提肌</h3><blockquote><p>拉伸肩胛提肌</p></blockquote><h4 id="帅气沉思拉伸"><a href="#帅气沉思拉伸" class="headerlink" title="帅气沉思拉伸"></a>帅气沉思拉伸</h4><p><a href="https://www.bilibili.com/video/BV1JP4y1p79i?spm_id_from=333.999.0.0">https://www.bilibili.com/video/BV1JP4y1p79i?spm_id_from=333.999.0.0</a></p><p>右手放在身后，抓着椅子边缘，保持上身笔直向左侧倾斜；此时会感觉脖子或肩膀有拉伸感，维持这个感觉，头向左侧扭转45度，左手放在后脑勺往膝盖方向拉。保持3个深呼吸，重复5次。结束后换边继续</p><h3 id="斜方肌"><a href="#斜方肌" class="headerlink" title="斜方肌"></a>斜方肌</h3><ul><li>如果一侧斜方肌比较紧张，比较高，那么这一侧就挂不住衣服，漏出来的肩部会比另一侧多（高低肩）</li></ul><blockquote><p>放松斜方肌</p></blockquote><p>把一只手的手肘和前臂放在足够高的支撑面上，接着另一只手捏住斜方肌的上部；注意：<strong>要保持按压肌肉</strong></p><h3 id="翼状肩胛"><a href="#翼状肩胛" class="headerlink" title="翼状肩胛"></a>翼状肩胛</h3><p>当前锯肌无力时，肩胛骨就会翘起来，视觉上呈现出小翅膀</p><img src="http://cdn.upeveryday.cn/img/image-20210815155338270.png" alt="image-20210815155338270" style="zoom:50%;" /><h4 id="1-肩胛提肌拉伸"><a href="#1-肩胛提肌拉伸" class="headerlink" title="1. 肩胛提肌拉伸"></a>1. 肩胛提肌拉伸</h4><p><img src="https://pic3.zhimg.com/v2-1e777cabe276e2a1389a0f12a4eae5db_r.jpg?source=1940ef5c" alt="img"></p><p>自然站立，左手抬起压住后颈，接着用右手掰后脑勺，向右膝盖的方向看，坚持三秒。</p><p>换边重复上述动作，每天3-4组（练习肩胛提肌）</p><ul><li>举手会让肩胛提肌更加紧绷</li></ul><blockquote><p>肩胛提肌可以改善高低肩</p><p>视线看向肌肉不紧的那侧，拉伸紧张的那一侧</p><p>如果左边的肩膀比较高，那么右侧肩胛提肌比较紧张，我们要放松右侧肩胛提肌，看向右边的口袋</p><p>靠墙站立，肩膀要往后且往下，眼睛朝着口袋看</p></blockquote><h4 id="2-壁虎推墙"><a href="#2-壁虎推墙" class="headerlink" title="2. 壁虎推墙"></a>2. 壁虎推墙</h4><p>面向墙壁站立，脚尖距墙20~30cm，双手撑在墙上，手肘内扣，让身体保持直线状态交替向上爬行，到最大限度后反方向推墙，</p><p>重复动作，每天3-5组（锻炼前锯肌）</p><h3 id="髂-qia-腰肌群"><a href="#髂-qia-腰肌群" class="headerlink" title="髂(qia)腰肌群"></a>髂(qia)腰肌群</h3><p>髂腰肌是由<strong>髂肌</strong>和<strong>腰大肌</strong>共同组成的<strong>髋屈肌群</strong>，因为个体差异，部分人也存在腰小肌。</p><p>平时不论是<strong>抬腿或者弯腰</strong>，髂腰肌都会参与其中，髂腰肌既能让我们的身姿更挺拔也能够缓解特定的下背痛，甚至能让你走得更快，运动速度更高</p><h4 id="位置"><a href="#位置" class="headerlink" title="位置"></a>位置</h4><p>髂肌在骶髂关节的上方，附着在髂窝上以及骶骨的最外边缘上。</p><p>腰大肌沿着第12胸椎和所有腰椎的横突附着。<strong>和神经关系密切</strong></p><p>髂肌和腰大肌的纤维在股骨头的前方融合在一起，形成的肌腱在小转子上把肌肉固定在股骨上。</p><blockquote><p>腰大肌这一条肌肉跨越了四种关节</p><ol><li>椎间关节：腰椎的椎体与椎体之间</li><li>腰骶关节：腰椎与骶骨之间</li><li>骶髂关节：骶骨与髂骨之间</li><li>髋关节：</li></ol></blockquote><p><img src="https://pic3.zhimg.com/v2-a23c628b4bcf85aa5878682c83355ae6_b.jpg" alt="img"></p><h4 id="功能"><a href="#功能" class="headerlink" title="功能"></a>功能</h4><p><strong>近固定</strong>,使大腿在髋关节处屈和外旋</p><p><strong>远固定</strong>，一侧收缩，使躯干侧屈，两侧同时收缩，使躯干前屈和骨盆前倾</p><blockquote><p><strong>小贴士：</strong>髂腰肌远端的过度拉长有可能会协同其他髋屈肌收缩，促使上身躯干过度代偿，呈现“弯腰驼背”姿势。</p></blockquote><p><img src="https://pic2.zhimg.com/v2-200819518ba85f02b95810b510967585_b.jpg" alt="img"></p><p>髂腰肌过强会造成平背的体态，在脊柱侧弯中，腰凹侧同样需要训练凹侧的髂腰肌。</p><p>肌电图研究显示，在我们站立时，健康的髂腰肌能为我们腰部提供很好的支持；如果髂腰肌过紧躯干出现明显的前倾时，下背部肌肉会过度代偿，以维持正常的生理姿势。</p><p>如果髂腰肌很弱，屈髋的能力就会下降，这就意味着你抬腿的能力会变差，让你觉得从椅子上站起来或者走上坡路更困难。</p><p>对于跑者来说，屈髋肌的强弱会直接影响自身的跑步的步幅。</p><h3 id="竖脊肌"><a href="#竖脊肌" class="headerlink" title="竖脊肌"></a>竖脊肌</h3><p>竖脊肌不是一块肌肉，而是沿脊柱两侧走形的一组肌群，<strong>竖脊肌肌群横跨整个背部</strong></p><p><img src="https://jhspt.com.tw/wp-content/uploads/4-32.jpg" alt="img"></p><h2 id="颈部肌肉"><a href="#颈部肌肉" class="headerlink" title="颈部肌肉"></a>颈部肌肉</h2><h3 id="胸锁乳突肌"><a href="#胸锁乳突肌" class="headerlink" title="胸锁乳突肌"></a>胸锁乳突肌</h3><p>胸锁乳突肌是人体唯二的两对直接连接胸廓、肩带和头部的肌肉，另一对是斜方肌。</p><img src="https://pic3.zhimg.com/v2-f10e48b1e77550b72bbad697b8963ab6_b.jpg" alt="img" style="zoom:33%;" /><p>胸锁乳突肌（SCM，<strong>Sternocleidomastoid</strong>），顾名思义，是连接<strong>胸骨、锁骨和颞骨乳突</strong>的肌肉。根据起点的不同，它可以分为两部分：胸骨部和锁骨部。</p><img src="https://pic3.zhimg.com/v2-46a7b534f8be8d9f267f5b171b4caaea_b.gif" alt="img" style="zoom: 80%;" /><p><img src="https://lh3.googleusercontent.com/proxy/XBZJDG8TxdyBRXc4iy5oJ2z0OyHkubaB4oj-ZfqKKjrKP3pFOCVNYSAGY2YepqypiXnU60Wen6WL33ZATsq8G0s0umfrgqi5WobOhBs8BV0nCfKRmA_THu46W3YIL0WE-_dI5QvNpcgdPIM4jY_xjRZl59F8qgNdOBFj2fxirqpDvjFiADBs2IzvNcugzMqx2VhqtffoCSgS3R_jrg" alt="img"></p><p>胸锁乳突肌是颈部的浅层屈肌，<strong>两侧同时收缩可以屈曲颈椎（头后仰）和向前拉动头部</strong>，单侧收缩则可以使得头部向对侧旋转。</p><blockquote><p>胸锁乳突肌作为颈伸肌是有前提的，那就是颈椎的各个节段有很好的稳定性，这需要颈部深层肌肉的提前激活，如果节段稳定没有建立好，那么胸锁乳突肌会将头向下向前拉，也会使得头后仰，这个时候寰枕关节是伸展的，而中下段颈椎是屈曲的，这也就颈曲变平甚至反曲的常见原因。这也是为什么胸锁乳突肌被称为浅层颈屈肌。</p><img src="https://pic1.zhimg.com/v2-88cd3b791560d1f9cebeca9fc09f10b0_b.jpg" alt="img" style="zoom: 67%;" /></blockquote><p>除了最基本的运动功能之外，胸锁乳突肌可以控制和监控头部在空间中的位置，即本体感觉方面的功能。来自胸锁乳突肌的本体感受反馈对于保持一个人的平衡至关重要，对于解释视觉信息也很重要。</p><p>此外，胸锁乳突肌还是重要的辅助吸气肌，在吸气时，可以辅助上抬胸廓，促进吸气。</p><p>当我们将头转向一侧时，对侧的胸锁乳突肌会被凸显出来。上图所示的就是胸锁乳突肌的胸骨部，非常容易找到。锁骨部在胸骨部外侧，相对小一些。</p><img src="https://pic1.zhimg.com/v2-53e2b094f2944d4dae53b3ddead8adec_b.jpg" alt="img" style="zoom:80%;" /><p>胸锁乳突肌很容易因为过度使用而产生扳机点，而且这对肌肉上的扳机点产生的症状看起来不太像和肌肉有关，而更像是身体其它系统的问题。</p><p>常见的症状有以下几种。</p><ul><li><strong>紧张性头痛：</strong>一种常见但令人虚弱的头痛，持续时间可以从30分钟到几天不等，在一些慢性病例中可能每天发生。</li><li><strong>偏头痛：</strong>胸锁乳突肌扳机点可产生许多与非先兆性偏头痛相关的症状，如肌肉压痛和单侧头痛。</li><li><strong>宿醉头痛：</strong>过量饮酒引起的脱水可以激活胸锁乳突肌和斜方肌的扳机点，并产生可怕的“宿醉”头痛。</li><li><strong>非典型面部神经痛：</strong>脸颊、下颌和太阳穴区域疼痛。</li><li><strong>喉咙痛和吞咽疼痛：</strong>胸骨部的中间扳机点会在舌根处产生疼痛，使吞咽困难或疼痛。</li><li><strong>视觉障碍：</strong>胸骨部的扳机点通常会产生视力模糊和重影。</li><li><strong>眼睛问题：</strong>如眼睑下垂、眼睛发红。</li><li><strong>头晕：</strong>移动头部时头晕，例如抬起头在床上翻身时。</li><li><strong>听力障碍：</strong>锁骨部的扳机点可能导致一只耳朵中度耳聋或耳鸣。</li></ul><p>位于颈部的其它肌肉，特别是斜方肌和斜角肌上如果有扳机点，可能会引发胸锁乳突肌上产生扳机点。左右两侧的胸锁乳突肌也会互相影响。</p><p>胸锁乳突肌可能产生多个扳机点，最高可达7个，密度非常高。其中，胸骨部有4个，锁骨部有3个。这些位于不同位置的扳机点可能会导致不同部位的症状。</p><img src="https://pic2.zhimg.com/v2-3d56f076dbc56c3d67243ffc36c6bff9_b.jpg" alt="img" style="zoom:80%;" /><p>上图左侧是胸骨部的4个扳机点的位置和可能产生症状的部位，症状区域主要是眼窝深处、眼睛上方、脸颊区域、颞下颌关节、头顶、头后方和上胸部。</p><p>右侧则是锁骨部的3个扳机点，症状区域主要是前额、耳朵深处、耳后。</p><p>针对胸锁乳突肌的扳机点，我们可以通过简单的手指按摩就取得不错的效果，但前提是能够准确地处理到扳机点所在位置。</p><p>可以在站姿或坐姿中，利用对侧手的手指来按摩。</p><img src="https://pic1.zhimg.com/v2-a3c671f08443a8eb7a83f79de7bc0a9c_b.jpg" alt="img" style="zoom:80%;" /><p>按摩的方式是用手指将整条肌肉掐住。这条肌肉可能比你想象得要更粗一些，一些姿势不佳的同学，胸锁乳突肌可能异常肥大。</p><p>如果你刚开始按摩放松这条肌肉，你可能会发现自己好像掐不住它，很容易滑走，或是边缘特别不清晰，这很常见，在一段时间的按摩之后会有所改善。</p><p>有几个小策略可以帮助你更好地按摩。</p><ul><li>自上而下地按摩，先按摩胸骨部，然后锁骨部（千万不要忘记锁骨部）。</li><li>按摩的时候，目视前方，可以稍稍低头。</li><li>掐住肌肉之后，轻轻向外和向后提拉。要掐住整条肌肉，不是捏住皮肤。</li><li>按压的力度不用太大，有轻微的疼痛感即可。按摩时，可能感觉疼痛窜到头部，一般来说是正常的，也可稍缓再进行或降低按摩力度。</li><li>每天可按摩多次，特别是在晚上睡觉前。</li></ul><h3 id="斜角肌"><a href="#斜角肌" class="headerlink" title="斜角肌"></a>斜角肌</h3><p><img src="https://pic1.zhimg.com/v2-2fdea48aec70976bf1cb0f5058078b68_b.jpg" alt="img"></p><img src="https://pic3.zhimg.com/v2-9ce5d7aac11192a4d9ccb0310541ca8e_b.jpg" alt="img" style="zoom:67%;" /><h3 id="颈阔肌"><a href="#颈阔肌" class="headerlink" title="颈阔肌"></a>颈阔肌</h3><p><strong>颈阔肌</strong>位于<strong>颈部浅筋膜</strong>中，为一皮肌，<strong>薄而宽阔</strong>，也<strong>属于表情肌</strong>。起自胸大肌和三角肌表面的深筋膜，向上止于口角。</p><img src="https://bkimg.cdn.bcebos.com/pic/562c11dfa9ec8a1331bfae09fb03918fa1ecc0b6?x-bce-process=image/resize,m_lfit,w_536,limit_1/format,f_jpg" alt="img" style="zoom:50%;" /><p>颈阔肌是<strong>使嘴向下伸张</strong>的肌肉。它是一块<strong>表面肌肉</strong>，也就是说，<strong>它不直接连在骨骼上</strong>，<strong>与胸锁乳突肌重叠</strong>。</p><p><strong>沿下巴和颈的两侧</strong>各有一大块颈阔肌,每块的形状就像一把倒置的扇形。此扇形的的宽端连接到肩部和上胸部，具体地说覆盖胸大肌和三角肌上部的筋膜，然后与锁骨交叉向上通过颈的两侧。前部的肌肉束在下颌骨的下面和后面与对面的颈阔肌前部的肌肉束交叉，后部的肌肉束则穿过下颌骨，一些伸入骨头里，一些则和皮肤和脸下部的皮下组织相连。许多这些肌肉束与嘴下部的肌肉交叉。如果将嘴的外缘尽量向下拉,就会感受到颈部的颈阔肌拉紧。</p><p>有时一些肌肉束可以延伸到颧骨或者口轮匝肌的边缘。外咽喉静脉在颈阔肌下面从下颌角下降到锁骨。</p><h2 id="胸部肌肉"><a href="#胸部肌肉" class="headerlink" title="胸部肌肉"></a>胸部肌肉</h2><h3 id="胸小肌"><a href="#胸小肌" class="headerlink" title="胸小肌"></a>胸小肌</h3><p><strong>位置：</strong></p><img src="https://pic2.zhimg.com/v2-18f9d185f93e6e26c6386bba582725f2_1440w.jpg?source=172ae18b" alt="img" style="zoom: 20%;" /><p>胸小肌（Pectoralis minor）为胸部上侧一条三角型的肌肉，在人体中位于胸大肌深层处。</p><img src="https://pic3.zhimg.com/v2-77ef6a0e259fcafc3872f4d73259c7f2_b.jpg" alt="img" style="zoom:67%;" /><p><strong>功能：</strong></p><p>胸小肌负责的主要动作包括肩胛骨的下压、外展、下旋及肩胛骨固定，用力吸气时协助上提胸部。所以，我们出拳的时候，将手伸进裤袋前的深口袋的时候，深呼吸的时候，都会使用到我们的胸小肌哦！</p><p>静态姿势的驼背、上交叉症候群、上半身系列动作肩胛无法稳定之代偿动作…都跟胸小肌有关</p><img src="http://5b0988e595225.cdn.sohucs.com/images/20190913/6ba4ed8ad7954237a6fdd5a908118d12.jpeg" alt="img" style="zoom: 43%;" /><p>其次，胸小肌所在的肩膀区域同时也包含了很多其他的肌肉，所以当我们进行训练时，它很容易就会因为太兴奋而过度活跃，然后抑制许多和它相反结抗的肩关节肌肉动作</p><p><strong>胸小肌紧张带来的影响：</strong></p><ul><li>圆肩姿势及前位头部错姿将导致胸小肌短缩，这个动作称为前突，会影响到中斜方肌与菱形肌。普遍来说，胸小肌处於诱发状况下，中斜方肌会受到抑制。</li><li>胸小肌将肩膀往前拉动，而位在对侧的背阔肌则是将肩膀往後往下进行移动。胸小肌过度紧张，会限制背阔肌的活动。</li><li>胸小肌是一个肩胛骨的下转肌群，经常涉及肩盂肱骨关节异常。若它处於诱发状况，会抑制肩胛骨上转肌”前锯肌”的作用，导致夹击症候群(Impingement Syndrome)，而有时可能造成肩胛骨内缘外掀的情况，这种情况所产生不稳定肩胛骨会引起肩关节异常的状况。</li><li>胸小肌也是肱骨的内转肌。当它处於诱发的状况下，会抑制肱骨的外转肌群，包括肱二头肌长头、後三角肌及棘下肌。</li><li>胸小肌也会引起动力链异常的情况。举例，在前侧线，胸小肌经常抑制腰肌。在对侧线，它会抑制对侧的腰肌。这是步态异常其中一个因素。在步态中，胸小肌会抑制对侧手臂後摆的动作及同侧脚的往後摆动。右胸腔旋转会被右侧的胸小肌给抑制住，因为胸小肌步及内转的动作。</li></ul><p><strong>对呼吸模式的影响</strong></p><ul><li>胸小肌作为一块辅助呼吸的肌肉，本应在中高强度运动，摄氧量增大时才会参与呼吸。但是由于姿势原因，导致很多人的胸小肌过紧，即便在站立状态下，依然是“圆肩驼背”的不良体态。膈肌的功能就会受到限制，肋骨无法充分开合，呼吸模式就会受到影响。</li></ul><p>如果你有圆肩驼背的现象，上肢和背部训练一直找不到感觉，不妨试着放松下我们的胸小肌。</p><h2 id="手臂肌肉"><a href="#手臂肌肉" class="headerlink" title="手臂肌肉"></a>手臂肌肉</h2><h3 id="三角肌"><a href="#三角肌" class="headerlink" title="三角肌"></a>三角肌</h3><h1 id="关节"><a href="#关节" class="headerlink" title="关节"></a>关节</h1><h2 id="髋关节"><a href="#髋关节" class="headerlink" title="髋关节"></a>髋关节</h2><p>髋关节，是指位于大腿根处的大关节，其在人体的所有单个关节中属于最大的关节。呈碗形的髋骨臼（臼盖）位于骨盆，呈球形的大腿骨头紧密容纳于其中。正常的髋关节中，在大腿骨头和臼盖的表面，覆盖有关节软骨，保证了髋关节动作的自由流畅。</p><p><img src="https://www.dr-ishibe.net/china/images/hipjoint/mis_01.jpg" alt="img"></p><p><img src="https://www.dr-ishibe.net/china/img/hipjoint/mis_zu.jpg" alt="img"></p><p>髋关节内旋：可能会造成X型腿，O型腿</p><h1 id="骨头"><a href="#骨头" class="headerlink" title="骨头"></a>骨头</h1><h2 id="肱骨前移"><a href="#肱骨前移" class="headerlink" title="肱骨前移"></a>肱骨前移</h2><p><strong>这玩意相当于是圆肩的超进化版</strong>：圆肩，肩胛骨前伸 + 上回旋。</p><h2 id="脊柱"><a href="#脊柱" class="headerlink" title="脊柱"></a>脊柱</h2><blockquote><p>脊柱=颈椎+胸椎+腰椎+骶骨+尾骨</p></blockquote><p>小孩刚出生的脊椎数量是32-33，成人脊柱由26块<a href="https://baike.baidu.com/item/%E6%A4%8E%E9%AA%A8/3240013">椎骨</a>（包括颈椎7块，<a href="https://baike.baidu.com/item/%E8%83%B8%E6%A4%8E/7697519">胸椎</a>12块，<a href="https://baike.baidu.com/item/%E8%85%B0%E6%A4%8E/485788">腰椎</a>5块，骶骨1块（由5块骶椎融合构成）、尾骨1块（由3-4块尾椎融合构成））借韧带、关节及<a href="https://baike.baidu.com/item/%E6%A4%8E%E9%97%B4%E7%9B%98/767919">椎间盘</a>连接而成。</p><p>脊柱上端承托<a href="https://baike.baidu.com/item/%E9%A2%85%E9%AA%A8/1572998">颅骨</a>，下联<a href="https://baike.baidu.com/item/%E9%AB%8B%E9%AA%A8/1663329">髋骨</a>，中附<a href="https://baike.baidu.com/item/%E8%82%8B%E9%AA%A8/72080">肋骨</a>，并作为<a href="https://baike.baidu.com/item/%E8%83%B8%E5%BB%93/3243440">胸廓</a>、腹腔和盆腔的后壁。脊柱具有支持躯干、保护内脏、保护脊髓和进行运动的功能。脊柱内部自上而下形成一条纵行的脊管，内有<a href="https://baike.baidu.com/item/%E8%84%8A%E9%AB%93/239263">脊髓</a>（注：<strong>脊柱不等于脊椎或脊椎骨</strong>，脊柱是由多块脊椎组成的）。</p><p>脊柱的长度，3/4是由椎体构成，1/4由椎间盘构成。</p><h3 id="组成"><a href="#组成" class="headerlink" title="组成"></a>组成</h3><p>脊柱由称<strong>椎体骨</strong>的小骨组成，每个往上叠形成人体背部自然弯曲。椎体骨间互不直接接触，由椎间盘相隔，即<strong>椎体夹椎间盘</strong>。</p><p>椎体骨连接形成椎管保护脊髓。颈椎有7块小椎体骨组成，起自颅底，止于上胸部。胸椎由12块椎骨组成，起自上胸，与胸廓相连。因腰椎须承受身体的更多重量，所以由5块大椎骨组成。骶骨和尾椎骨（尾骨）形成最底部分脊柱，通过骶髂关节与骨盆相连。</p><p>椎体图如下：分别是俯视图、右视图</p><p><img src="https://bkimg.cdn.bcebos.com/pic/fcfaaf51f3deb48f91d3e660f31f3a292cf578d1?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5/format,f_auto" alt="img"></p><h3 id="人的脊柱存在四处生理弯曲"><a href="#人的脊柱存在四处生理弯曲" class="headerlink" title="人的脊柱存在四处生理弯曲"></a>人的脊柱存在四处生理弯曲</h3><blockquote><p>2个S，4个弯曲</p></blockquote><p><img src="http://cdn.upeveryday.cn/img/image-20210910223137193.png" alt="image-20210910223137193"></p><h4 id="颈椎"><a href="#颈椎" class="headerlink" title="颈椎"></a>颈椎</h4><blockquote><p>脖子末端，C7T1交界处的脊椎骨会凸起是正常现象</p><p>C：颈椎</p><p>T：胸椎</p></blockquote><p>我们的颈椎共有7节，它们像是在玩叠罗汉般一节节相叠，你可以把你的手往脖子后面摸，每一个凸点，都代表着一节脊椎。</p><p>而从横剖面来看，可以发现<strong>每节颈椎之间都有一块软骨</strong>，它们就像是脊椎间的缓冲垫一样，我们称之为「<strong>椎间盘</strong>」。</p><p>而在软骨后方还有一条贯穿整个上半身的脊椎神经，大脑就是靠着这个神经下达指令。若是我们把其中两节颈椎与一个椎间盘，特别分成一组放大来看的话，你会发现你的颈椎就像是个—汉堡，上下两个脊椎骨是面包，而中间的椎间盘就是那块美味肉排</p><p>当我们低头用笔电、看手机、玩平板、驼背时，会不知不觉地将脖子往前弯，使得<strong>软骨前侧的压力变大</strong>，里面的水分就会往后侧跑，造成所谓的「<strong>椎间盘突出</strong>」，这就像是大口吃汉堡时，馅料会往另一侧掉下来一样。然而在我们脊椎后侧的，正是负责全身讯息传递的脊椎神经，它在每一节都会往左右两侧各分支出一条神经根，因此若是椎间盘往右后侧突出，就会导致右边酸痛，往左后侧突出，就会是左边酸痛，往正中间突出的话最惨，就两边一起痛。也正因为受伤的患者椎间盘的水分很不稳定，而容易因为姿势而跑位，所以就会发生有时候右边脖子痛、有时候左边肩胛骨痛、有时候又不会痛⋯⋯</p><h5 id="收下巴运动"><a href="#收下巴运动" class="headerlink" title="收下巴运动"></a>收下巴运动</h5><p>收下巴运动：许多人都觉得肩颈肌肉紧绷，因此要去左拉右拉把肌肉拉松，但这样其实是完全没用的，因为<strong>肩部肌肉的紧绷，主要是因为驼背与椎间盘突出，而刺激到神经所造成的</strong>。</p><p>因此 而这边介绍的收下巴运动，就是一个可以将椎间盘归位，又能拉伸到颈部小肌肉的简单运动，你不必做什么头转、一堆有的没的牵拉，做这个就够了！只要神经一减压，颈部肌肉也就自然放松。</p><p>(1) 预备动作：身体挺直不驼背、眼睛直视前方。</p><p>(2) 像是挤双下巴一样，做收下巴的动作，轻点头、头部往后平移，若是觉得后颈的肌肉有被拉紧的感觉就是对的。</p><p>(3) 收下巴时停留1秒，就放松回原来的位置，建议每天做50下，能多做就多做。</p><h4 id="腰椎"><a href="#腰椎" class="headerlink" title="腰椎"></a>腰椎</h4><p>腰椎共有5个椎体组成，椎体之间<strong>靠椎间盘和两侧的小关节连接</strong>。<strong>腰椎小关节，又称为椎间关节、关节突关节</strong>，是位于腰椎椎体之间，由上一椎体的下关节突和下一椎体的上关节突构成，周围包绕关节囊，有丰富的神经末梢分布。</p><p><img src="https://bkimg.cdn.bcebos.com/pic/fcfaaf51f3deb48f91d3e660f31f3a292cf578d1?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5/format,f_auto" alt="img"></p><p>腰椎小关节位于椎间盘后方，左右各一，与椎间盘形成三角稳定关系，对于腰椎支撑功能具有重要作用。</p><h2 id="下肢"><a href="#下肢" class="headerlink" title="下肢"></a>下肢</h2><h3 id="胫骨"><a href="#胫骨" class="headerlink" title="胫骨"></a>胫骨</h3><blockquote><p>又称：小腿骨</p></blockquote><p><strong>胫骨是小腿内侧的长骨</strong>，分一体两端。胫骨近侧端膨大，向两侧突出成为内侧踝与外侧髁</p><p>人体胫骨和腓骨：</p><img src="https://bkimg.cdn.bcebos.com/pic/267f9e2f070828381f303f1992c9be014c086e065b27?x-bce-process=image/resize,m_lfit,w_808,limit_1/format,f_auto" alt="img" style="zoom: 50%;" /><h3 id="股骨"><a href="#股骨" class="headerlink" title="股骨"></a>股骨</h3><p><strong>股骨</strong>(femur)又名<strong>大腿骨</strong>、髀骨、楗，是人体最长的管状骨。上端以股骨头与髋臼构成髋关节，下端与<a href="https://baike.baidu.com/item/%E8%86%91%E9%AA%A8/5717527">膑骨</a>、胫骨上端构成膝关节，支撑全身体重。</p><h1 id="something"><a href="#something" class="headerlink" title="something"></a>something</h1><h2 id="被动耸肩"><a href="#被动耸肩" class="headerlink" title="被动耸肩"></a>被动耸肩</h2><p>关于坐姿，你可以横向对比一下手臂悬空和手臂有完全支撑时肩膀状态。</p><p>前者处于被动耸肩的样子，后者非常帅气。</p><p><img src="https://mmbiz.qpic.cn/mmbiz_gif/HlXCVMYbzs8343fQAPp5Isrp1NJZv7t79cYgyfuLvMMFlVXFv7Pt0k59ogH5sajnLVDbR5hknk45vM9Cd4AujA/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1" alt="img"></p><p>被动耸肩会让你的肩胛提肌特别紧张缩短，慢慢进化成为没脖子兽。</p><p>解决办法就是记住 3 个 90 ——</p><p><strong>手肘 90 有支撑，大腿 90 踩稳地，腰椎 90 很精神。</strong></p><p><img src="https://mmbiz.qpic.cn/mmbiz_gif/HlXCVMYbzs8343fQAPp5Isrp1NJZv7t7OnMsqcxYicSeibMMmrlD1JhImNyndsUNiaA13JIeGldgpOfwyzgEIlPpQ/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1" alt="img"></p>]]></content>
<categories>
<category> bodybuilding </category>
</categories>
<tags>
<tag> improveOneself </tag>
</tags>
</entry>
<entry>
<title>跑步那些事儿</title>
<link href="/2021/10/17/ImproveOneself/running/"/>
<url>/2021/10/17/ImproveOneself/running/</url>
<content type="html"><![CDATA[<h3 id="跑姿"><a href="#跑姿" class="headerlink" title="跑姿"></a>跑姿</h3><blockquote><p>参考视频：<a href="https://www.bilibili.com/video/BV1QD4y1d7xP?from=articleDetail">https://www.bilibili.com/video/BV1QD4y1d7xP?from=articleDetail</a></p></blockquote><ol><li><p>想象头顶有个鸡蛋，不要让它掉下来</p><ul><li><p>保持头部的中立，双耳与肩膀是平行的，不要探脖子</p></li><li><p>双眼自然的目视前方，30-40的位置，而不是去看脚下→会低头</p><p>有些人跑步会腰酸背痛，很多时候就是因为头不够直；上坡和不平整路面是可以低头的</p></li></ul></li><li><p>想象会有人随时给肚子来一拳</p><ul><li>跑步时核心是要收紧的；上腹部的区域收紧：有咳嗽一下绷住的感觉</li><li>只有核心稳定的情况下，我们的臀部、下肢才能非常有效的去发力，并且推动身体向前进</li><li>如果核心没有收紧，那么臀部、下肢就要耗费更多的力量；导致不会越跑越轻松，而且会让腿越跑越粗</li></ul></li><li><p>想象你是一个西部牛仔将要拔枪的样子 </p><ul><li>手臂向后摆动的时候，像是一个牛仔要在腰间掏枪的姿势</li><li>手腕在摆臂的时候尽可能贴近腰</li></ul></li><li><p>落地点靠近重心</p></li></ol><h3 id="呼吸"><a href="#呼吸" class="headerlink" title="呼吸"></a>呼吸</h3><h4 id="呼吸节奏"><a href="#呼吸节奏" class="headerlink" title="呼吸节奏"></a>呼吸节奏</h4><ul><li><p>快：2步呼吸</p><p>也可以尝试：<strong>一步一吸，两步一呼</strong>；适合速度非常快，比如1000米考试</p></li><li><p>慢：4步呼吸</p></li></ul><h4 id="呼吸方式"><a href="#呼吸方式" class="headerlink" title="呼吸方式"></a>呼吸方式</h4><ol><li><p>鼻吸鼻呼</p><p>适合于有氧慢跑，可以让整个身体更容易放松下来</p></li><li><p>鼻吸口呼</p></li><li><p>口吸口呼</p><p>适用于1000米，可以让呼吸效率最大化</p></li></ol><p>以上三种方式，适用的速度是递增的</p><h3 id="摆臂"><a href="#摆臂" class="headerlink" title="摆臂"></a>摆臂</h3><ol><li><p>肩部放松打开</p></li><li><p>慢跑：前不漏肘，后不漏手；</p><p>拳头前摆到胸线，后摆到腰间</p><p>肘尽量向后摆，但是双拳不要超过身体的中心线</p><p>不要与身体产生过多摩擦，肩膀不要大幅晃动</p></li><li><p>手臂弯曲大约90度，始终保持不变</p></li><li><p>手呈半握状态，不要握紧</p></li><li><p>摆臂幅度大，上臂是前后运动，<strong>发力是向后的，向前是自然的</strong>；即发力向后，自然回落向前；可以在跑步的时候更轻松</p><blockquote><p>人体后侧链是交叉的；右手向后摆，左腿向后蹬；可以形成一个交叉的协同发力</p></blockquote></li><li><p>身体直立</p><blockquote><p>送髋及身体扭转幅度会更大；利于屈髋，提高速度</p></blockquote></li><li></li></ol><h3 id="送髋"><a href="#送髋" class="headerlink" title="送髋"></a>送髋</h3><blockquote><p>参考视频：<a href="https://www.bilibili.com/video/BV15D4y1D7QY?spm_id_from=333.788.b_765f64657363.1">https://www.bilibili.com/video/BV15D4y1D7QY?spm_id_from=333.788.b_765f64657363.1</a></p></blockquote><p>骨盆连接在大腿和躯干之间，因为骨盆，所以大腿根，也就是髋关节那里才可以额外获得一个向前扭转5度、侧倾5度的微小活动范围。微小的活动范围，由于下肢链放大效应，被下肢放大，那么每一步就可以多跨10厘米</p><h4 id="送髋与扭胯的区别"><a href="#送髋与扭胯的区别" class="headerlink" title="送髋与扭胯的区别"></a>送髋与扭胯的区别</h4><p>扭胯：用力的支点是在<strong>后腿的腰上</strong></p><img src="http://cdn.upeveryday.cn/img/image-20211029223155011.png" alt="image-20211029223155011" style="zoom: 40%;" /><p>送髋：用力的支点是在<strong>后腿的脚上</strong></p><img src="http://cdn.upeveryday.cn/img/image-20211029223231461.png" alt="image-20211029223231461" style="zoom:40%;" /><h4 id="送髋在跑步中的动作"><a href="#送髋在跑步中的动作" class="headerlink" title="送髋在跑步中的动作"></a>送髋在跑步中的动作</h4><p>跑步分为四个阶段：<strong>缓冲、支撑、蹬伸、腾空</strong>。</p><p>送髋主要发生在蹬伸这个阶段，充分的伸髋（后蹬）的同时把重心向前送；充分的屈髋（前抬），把抬高的那条腿向前送；抬高一侧的骨盆有一个轻微的向前扭转</p><img src="http://cdn.upeveryday.cn/img/image-20211029224022097.png" alt="image-20211029224022097" style="zoom: 50%;" /><h4 id="训练动作"><a href="#训练动作" class="headerlink" title="训练动作"></a>训练动作</h4><h5 id="支撑提膝"><a href="#支撑提膝" class="headerlink" title="支撑提膝"></a>支撑提膝</h5><img src="http://cdn.upeveryday.cn/img/image-20211029224814990.png" alt="image-20211029224814990" style="zoom:50%;" /><h4 id="送髋的终极奥义"><a href="#送髋的终极奥义" class="headerlink" title="送髋的终极奥义"></a>送髋的终极奥义</h4><p>送髋是为了让我们的重心更有效的前移——找<strong>用腿把身体的重心向前送</strong>的感觉</p><p>同是把重心向前送：</p><p>长跑时，后蹬的成分会多</p><p>短跑时，扒地的成分会多</p><h3 id="慢跑、长跑、冲刺跑"><a href="#慢跑、长跑、冲刺跑" class="headerlink" title="慢跑、长跑、冲刺跑"></a>慢跑、长跑、冲刺跑</h3><h4 id="慢跑（轻松跑）"><a href="#慢跑（轻松跑）" class="headerlink" title="慢跑（轻松跑）"></a>慢跑（轻松跑）</h4><ol><li>代谢：有氧代谢</li><li>燃料：脂肪、糖（碳水化合物）</li><li>心率：60%最大心率</li><li>效果：燃烧卡路里（减肥），提升心肺功能</li><li>持续时间长</li><li>感受：轻松（跑再远都不累），不轻松说明不够慢</li><li>呼吸：鼻吸鼻呼</li></ol><h4 id="快跑"><a href="#快跑" class="headerlink" title="快跑"></a>快跑</h4><ol><li><p>代谢：无氧+有氧（混合供能）</p></li><li><p>燃料：糖（糖酵解）</p></li><li><p>心率：70%-80%最大心率</p></li><li><p>效果：提升中距离跑步成绩（800/1000/1500米）；提升运动能动能（打球时的体能）</p></li><li><p>持续时间短</p></li><li><p>感受：煎熬，不煎熬说明不够快</p><p>无氧呼吸会积累乳酸</p></li><li><p>呼吸：鼻吸口呼</p></li></ol><h4 id="冲刺跑"><a href="#冲刺跑" class="headerlink" title="冲刺跑"></a>冲刺跑</h4><ol><li><p>代谢：无氧</p></li><li><p>燃料：ATP-CP系统</p></li><li><p>心率：提升至100%</p></li><li><p>效果：提升爆发力和最快速度；提升短跑</p></li><li><p>感受：热血</p></li><li><p>呼吸：呼吸急促</p><p>呼吸并不会对速度产生非常明显的影响，冲刺跑主要使用无氧供能，可以在摒气的状况下去跑完50米的</p></li><li><p>冲刺后会感觉非常疲劳，不仅有身体上的疲劳，还有神经系统的疲劳</p></li></ol><img src="http://cdn.upeveryday.cn/img/image-20211030084026012.png" alt="image-20211030084026012" style="zoom: 50%;" /><h3 id="配速"><a href="#配速" class="headerlink" title="配速"></a>配速</h3><p><strong>半马是21.0975公里，而全马为42.195公里</strong></p><p>配速，是描述马拉松运动中<strong>跑完一公里所耗用的时间（分钟/公里）</strong>，通常用分秒来衡量。 比如，一个小时跑完十公里，那么你的配速就是六分配速。 它是一个时间╱距离的概念。 在完成一场全马中如果用平均配速来给跑者分类的话，五分以下配速的跑者是精英跑者，就是我们平常所说的跑神;五分~八分配速的跑者是跑屌;八分以上的配速跑者那就是我们常说的跑渣</p><h3 id="前倾"><a href="#前倾" class="headerlink" title="前倾"></a>前倾</h3><p>谨慎前倾，建议配速到5分以内再去考虑通过主动的前倾去提升自己的速度</p>]]></content>
<categories>
<category> run </category>
</categories>
<tags>
<tag> improveOneself </tag>
</tags>
</entry>
<entry>
<title>维生素相关知识</title>
<link href="/2021/10/17/ImproveOneself/diet/"/>
<url>/2021/10/17/ImproveOneself/diet/</url>
<content type="html"><![CDATA[<h2 id="Vegetables"><a href="#Vegetables" class="headerlink" title="Vegetables"></a>Vegetables</h2><h3 id="Tomato"><a href="#Tomato" class="headerlink" title="Tomato"></a>Tomato</h3><h2 id="Vitamin"><a href="#Vitamin" class="headerlink" title="Vitamin"></a>Vitamin</h2><h3 id="vitaminD"><a href="#vitaminD" class="headerlink" title="vitaminD"></a>vitaminD</h3><h4 id="overview"><a href="#overview" class="headerlink" title="overview"></a>overview</h4><p>维生素 D 是一种脂溶性激素，<strong>参与肠道对钙的吸收和血钙调节活动</strong>。对于<strong>生成并保持强健的骨骼</strong>具有关键作用。</p><p>VitD（Vitamin D）可以分为2大类：VitD2（麦角钙化醇）和VitD3（胆钙化醇）。</p><ol><li>VitD2（麦角钙化醇）主要来源于植物性食物，人体自身无法合成；</li><li>VitD3（胆钙化醇）主要由人体皮肤经紫外线照射合成，少量源于动物性食物。</li></ol><h4 id="measure"><a href="#measure" class="headerlink" title="measure"></a>measure</h4><ol><li>日光照射：避开正午时分</li><li>膳食摄入</li><li>补充维生素D2或维生素D3，需要监测25OH总VD水平，防止中毒</li></ol>]]></content>
<categories>
<category> diet </category>
</categories>
<tags>
<tag> improveOneself </tag>
</tags>
</entry>
<entry>
<title>眼部操</title>
<link href="/2021/10/17/ImproveOneself/eye/"/>
<url>/2021/10/17/ImproveOneself/eye/</url>
<content type="html"><![CDATA[<p>``<a href="https://mp.weixin.qq.com/s/JeD_O04kgj7Akot-EevL2g">https://mp.weixin.qq.com/s/JeD_O04kgj7Akot-EevL2g</a></p><blockquote><p>眼框：眼轮匝肌：功能是闭眼</p><p>眼睑：功能是眨眼</p></blockquote><h4 id="动作一-发际线检测者-10次"><a href="#动作一-发际线检测者-10次" class="headerlink" title="动作一 发际线检测者 10次"></a>动作一 发际线检测者 10次</h4><p><strong>step 1</strong></p><p>四指并列放在眉毛上面，这是额肌的起点。</p><p>而**<strong style="color:#ff0000;">额肌</strong>的主要功能，就在于提起眉毛**。</p><p>按压状态要下上下揉动，不要劲儿太大，容易搓出灰。</p><p>当然了，如果你额头有油，先去洗个脸。</p><p>重复搓揉 5~8 个深呼吸，往上走。</p><p><strong>step 2</strong> </p><p>四指继续向上挪动，一点点试探发际线的边缘。</p><p>试探的同时，要继续保持按压状态下的上下揉动。</p><p><strong>step 3</strong></p><p>终于你到达了发际线的位置。</p><p>一路揉动下来 ，这就是第一个动作的重点。</p><p>当然如果你的发际线非常优秀，这个动作你可以一直干到后脑勺。</p><h4 id="动作二-假装扣眼珠子-10次"><a href="#动作二-假装扣眼珠子-10次" class="headerlink" title="动作二 假装扣眼珠子 10次"></a>动作二 假装扣眼珠子 10次</h4><p>把手四指并拢放在<strong>眉毛下方，上眼皮的地方</strong>。</p><p>这里的肌肉叫做**<strong style="color:#ff0000;">眼轮匝肌</strong>，它可以单独活跃使眼轻柔、快速闭合眨眼**。</p><p>手部要上推，不要太大劲儿往里扣，容易把眼珠子抠出来。</p><p>这个技巧跟平时被动拉伸原理一样，你只需要推 5 个深呼吸，重复 10 次就行。</p><h4 id="动作三-火眼金睛孙悟空-10秒-12次"><a href="#动作三-火眼金睛孙悟空-10秒-12次" class="headerlink" title="动作三 火眼金睛孙悟空 10秒 12次"></a>动作三 火眼金睛孙悟空 10秒 12次</h4><p>左手放在颧骨上，右手放在眼皮上方的上睑提肌上（有点绕口）。</p><p>轻轻地把眼睛扒开以后，注意啦！</p><p>你要在扒开的情况下去瞪眼，此时你的形象就是齐天大圣孙悟空。</p><p>这个动作主要是为了强化**<strong style="color:#ff0000;">上睑提肌</strong>**，让你的眼皮眨巴都闪光。</p><p>保持这种扒拉的状态，然后想象自己在瞪眼，维持 3 个深呼吸，重复 12 次。</p>]]></content>
<categories>
<category> eye </category>
</categories>
<tags>
<tag> improveOneself </tag>
</tags>
</entry>
<entry>
<title>肌肉拉伸</title>
<link href="/2021/10/17/ImproveOneself/Stretch%20the%20Muscles/"/>
<url>/2021/10/17/ImproveOneself/Stretch%20the%20Muscles/</url>
<content type="html"><![CDATA[<h3 id="收下巴运动"><a href="#收下巴运动" class="headerlink" title="收下巴运动"></a>收下巴运动</h3><blockquote><p>可以将椎间盘归位，又能拉伸到颈部小肌肉的简单运动</p></blockquote><p>(1) 预备动作：身体挺直不驼背、眼睛直视前方。</p><p>(2) 像是挤双下巴一样，做收下巴的动作，轻点头、头部往后平移，若是觉得后颈的肌肉有被拉紧的感觉就是对的。</p><p>(3) 收下巴时停留1秒，就放松回原来的位置，建议每天做50下，能多做就多做。</p><h3 id="拉伸肩胛提肌"><a href="#拉伸肩胛提肌" class="headerlink" title="拉伸肩胛提肌"></a>拉伸肩胛提肌</h3><p>右手放在身后，抓着椅子边缘，保持上身笔直向左侧倾斜；此时会感觉脖子或肩膀有拉伸感，维持这个感觉，头向左侧扭转45度，左手放在后脑勺往膝盖方向拉。保持3个深呼吸，重复5次。结束后换边继续</p><h3 id="放松斜方肌"><a href="#放松斜方肌" class="headerlink" title="放松斜方肌"></a>放松斜方肌</h3><p>把一只手的手肘和前臂放在足够高的支撑面上，接着另一只手捏住斜方肌的上部；注意：<strong>要保持按压肌肉</strong></p><h3 id="胸小肌松解"><a href="#胸小肌松解" class="headerlink" title="胸小肌松解"></a>胸小肌松解</h3><p>我们首先需要让<strong>胸小肌膨出</strong>，就是手背后，然后<strong>用背后的手去推椅子背</strong>；此时胸部会有一个地方在每次发力的时候，突出来。用大拇指<strong>沿着突出位置去按压</strong>，此时背后的手是完全放松的，会按到一个让你觉得不得劲的点，手指<strong>非常用力的去按压，同时做小幅度碾压来剥离放松</strong>。也可以用手机角来回碾压。按压5s停一下，重复15次，换边继续</p><h3 id="三角肌前束松解"><a href="#三角肌前束松解" class="headerlink" title="三角肌前束松解"></a>三角肌前束松解</h3><p>自然坐直，沿着<strong>肩膀和胳膊的交界处的肌肉</strong>，这里的肌肉是竖条状的，用三根手指的指腹按压，并且保持力度再做左右拨动；应该有一个位置精准的疼，然后用大拇指用力去尅，会觉得有肌肉黏在一起，一棱一棱的，维持5s，缓一会，重复15次；同样可以使用手机。松解10s，换边继续</p><h3 id="是谁送你来到我身边"><a href="#是谁送你来到我身边" class="headerlink" title="是谁送你来到我身边"></a>是谁送你来到我身边</h3><p>自然站直，或者坐在椅子上，左手叉腰，右手掌心向下，手肘高于手掌划出一个弧度；在动作顶端，小拇指向外发力，让手肘做一个外旋，有一种肌肉收缩的感觉。</p><ol><li>注意整个过程，是肘窝主动转动，不要光手腕假模假样转动；</li><li>在动作顶端，肋骨不要挺起来</li></ol><p><img src="http://cdn.upeveryday.cn/img/image-20210922103248414.png" alt="image-20210922103248414"></p><h3 id="放松胸锁乳突肌"><a href="#放松胸锁乳突肌" class="headerlink" title="放松胸锁乳突肌"></a>放松胸锁乳突肌</h3><h3 id="骨盆前倾睡前调整"><a href="#骨盆前倾睡前调整" class="headerlink" title="骨盆前倾睡前调整"></a>骨盆前倾睡前调整</h3><p>首先自然躺在瑜伽垫上，脚尖、大腿分别呈 90 度。</p><p>做轻微的骨盆后倾，让臀部稍微起来一点。</p><img src="https://mmbiz.qpic.cn/mmbiz_gif/HlXCVMYbzs9p48tNN9iawyY9OqwsNJEsKMBequGEAJ6uia5vggd5tSsibE6mYic1E6JIQ8TRsnmbBnIkYAhP5jK3Bg/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1" alt="img" style="zoom:50%;" /><p>在动作顶端，吸气吸气肚子鼓起，吐气肚子凹陷。</p><img src="https://mmbiz.qpic.cn/mmbiz_gif/HlXCVMYbzs9p48tNN9iawyY9OqwsNJEsKmzSrIf2YFxg8ecG4icMRhrQNrRNotJAic46bkiaFgIOrImLeGB66IqWHw/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1" alt="img" style="zoom:50%;" />]]></content>
<categories>
<category> muscle </category>
</categories>
<tags>
<tag> improveOneself </tag>
</tags>
</entry>
<entry>
<title>体育测试</title>
<link href="/2021/10/16/ImproveOneself/physical%20fitness%20test/"/>
<url>/2021/10/16/ImproveOneself/physical%20fitness%20test/</url>
<content type="html"><![CDATA[<h3 id="1000米"><a href="#1000米" class="headerlink" title="1000米"></a>1000米</h3><h4 id="考前准备"><a href="#考前准备" class="headerlink" title="考前准备"></a>考前准备</h4><ol><li><p>提前两周训练</p></li><li><p>跑前两天避免高强度运动</p><p>肌肉需要时间来恢复</p></li><li><p>穿跑鞋</p></li><li><p>宽松的衣服</p></li><li><p>多吃碳水化合物（考试前三天</p><p>每顿饭多吃一碗米饭，为体育考试存储能量</p></li><li><p>熟悉考试场地</p></li></ol><h4 id="考试当天"><a href="#考试当天" class="headerlink" title="考试当天"></a>考试当天</h4><ol><li><p>提前两小时吃完饭</p><p>吃容易消化的食物，不要太油腻</p></li><li><p>考前30分钟可以喝运动饮料，100-200毫升</p><p>比如红牛，但有点甜，喝完100毫升红牛后，再喝一小口清水，顺一顺嗓子</p><p>运动饮料中的糖类和咖啡因，适量的可以帮助我们在体育考试中帮助我们提升那么一丢丢的成绩</p></li><li><p>提前到达场地</p></li><li><p>一定要热身</p></li></ol><h4 id="跑步前半程"><a href="#跑步前半程" class="headerlink" title="跑步前半程"></a>跑步前半程</h4><ol><li><p>起跑</p></li><li><p>跑步速度</p><p>接近90%全力的速度</p></li><li><p>呼吸</p><p>采用口吸口呼，用舌尖抵住上牙龈，通过舌头对空气的湿润作用，降低空气对于嗓子的刺激；更晚的产生喉咙发干、充满血腥味的情况</p><p>采用两步一吸，两步一呼，（一一二二）</p></li><li><p>弯道</p><p>弯道尽量不要超人，非常危险；弯道适当向内倾斜获得向心力</p></li></ol><h4 id="跑步后半程"><a href="#跑步后半程" class="headerlink" title="跑步后半程"></a>跑步后半程</h4><blockquote><p>400米之后，所有的难题都会出现</p></blockquote><ol><li><p>呼吸</p><p>嗓子会感觉喘不过气，要从两步一吸，两步一呼，去切换成</p><ul><li>一步吸，一步呼：一一</li><li>两步吸，一步呼：二一</li><li>一步吸，两步呼：一二</li></ul></li><li><p>速度</p><p>用100%的速度向前冲，不需要再保存体力</p></li><li><p>后半程摆臂</p></li></ol><h4 id="岔气怎么办"><a href="#岔气怎么办" class="headerlink" title="岔气怎么办"></a>岔气怎么办</h4><p>岔气是因为内脏暂时缺血的一种疼痛的现象，因为身体还没有做好运动的准备，就产生了内脏的暂时性缺血</p><p>如果跑步中岔气，可以用手压住痛点，同时收缩腹部，可以帮助疼痛减轻，基本一分钟左右疼痛就会消退</p><p><img src="http://cdn.upeveryday.cn/img/image-20211030134219013.png" alt="image-20211030134219013"></p><h4 id="5分钟考前突击"><a href="#5分钟考前突击" class="headerlink" title="5分钟考前突击"></a>5分钟考前突击</h4><blockquote><p>来源：<a href="https://www.bilibili.com/video/BV1dh411U7CC?from=articleDetail">https://www.bilibili.com/video/BV1dh411U7CC?from=articleDetail</a></p></blockquote><h5 id="正确起跑"><a href="#正确起跑" class="headerlink" title="正确起跑"></a>正确起跑</h5><blockquote><p>一个好的起跑，不仅能让你抢出一秒钟的速度，而且可以让你全程跑的更安心</p></blockquote><p>推荐站立式的起跑</p><ol><li><p>确定哪只脚是你的有利脚，一般大部分人的有利脚是右脚</p></li><li><p>先让有利脚（右脚）贴近左脚的脚后跟，然后向外平行张开和自己的髋关节一样宽；重心60%~70%是放在左脚上的</p></li><li><p>挺直腰背下蹲，让自己前面左腿的膝盖尽可能的接近脚尖，身体重心前移；注意不要让膝盖太靠后，不然发力时会向上跳起来</p><img src="http://cdn.upeveryday.cn/img/image-20211030214952247.png" alt="image-20211030214952247" style="zoom: 67%;" /></li><li><p>第一步后腿上提下压（不要迈太大的步子）：蹬直左腿的同时，右腿的大腿向上向前提，然后下压；并不是向前迈，而是上提下压</p></li></ol><h5 id="摆臂"><a href="#摆臂" class="headerlink" title="摆臂"></a>摆臂</h5><blockquote><p>当后半程腿不听使唤的时候，手就非常的重要，后半程摆臂可增加蹬地的力量</p></blockquote><p>肘关节90度摆臂去进行20秒的摆臂</p><p>考试当天练习20秒×2组（练多了容易没力）</p><p>摆臂会给身体提供额外的上下的动力，如果摆臂的速度非常快，那么身体也会弹跳起来</p><h5 id="平板支撑"><a href="#平板支撑" class="headerlink" title="平板支撑"></a>平板支撑</h5><blockquote><p>稳定腰腹核心</p></blockquote><p>后半程如果核心不稳，那么跑起来肯定会东倒西歪的，跑步姿势也没有办法维持</p><ul><li>考前3天，每天30秒×3组</li><li>考试当天，可练习20秒，让腹肌提前进入状态</li></ul><p>双手趴在地上，挺直身体，收紧我们的腹部，夹紧臀部，去体会核心收紧的感觉</p><img src="http://cdn.upeveryday.cn/img/image-20211031114941724.png" alt="image-20211031114941724" style="zoom: 67%;" />]]></content>
<categories>
<category> test </category>
</categories>
<tags>
<tag> improveOneself </tag>
</tags>
</entry>
<entry>
<title>关于口部操以及发音的技巧</title>
<link href="/2021/10/16/ImproveOneself/voice/"/>
<url>/2021/10/16/ImproveOneself/voice/</url>
<content type="html"><![CDATA[<h3 id="唇部练习"><a href="#唇部练习" class="headerlink" title="唇部练习"></a>唇部练习</h3><p><strong>撅唇</strong>：上下左右10次</p><p><strong>绕唇</strong>：顺逆各5次</p><p><strong>撅唇咧嘴</strong>：慢速交替，</p><p>五一五一五一五一（不发出声音）；</p><p>咬唇噘嘴快速交替，20次</p><p>发花发花发花发花（熟练之后可以改为花凤凰）。</p><p><strong>双唇唇颤</strong>：噗<del>波波，噗</del>波波。10次</p><h3 id="舌部练习"><a href="#舌部练习" class="headerlink" title="舌部练习"></a>舌部练习</h3><p><strong>顶舌</strong>：舌尖顶在口腔四壁上，10次</p><p><strong>饶舌</strong>：同上连成整去体，顺逆各10次</p><p><strong>刮舌</strong>：张嘴舌头抵下牙前伸刮上牙（改善尖音，增强舌面音）,20次</p><p><strong>弹舌</strong>：放松舌头</p><h3 id="提打挺松"><a href="#提打挺松" class="headerlink" title="提打挺松"></a>提打挺松</h3><p>提颧肌：（脸蛋那个地方肌肉，提起来说话状态会积极很多）</p><p>打牙关：（想象咬苹果，满满一大口那种）</p><p>挺软腭：（打哈欠的时候内口腔挺起来的那块肉）</p><p>松下巴：（左右晃动下巴）</p><h3 id="字音饱满度"><a href="#字音饱满度" class="headerlink" title="字音饱满度"></a>字音饱满度</h3><blockquote><p>发音土是因为口腔开合度不够大，韵母没有完全展开，那么练习口腔开合度</p></blockquote><p>例如韵母a：<br>1、舌位下压至最低点<br>2、打开上下颌（适合的开口度）<br>3、挺软腭<br>4、提颧肌<br>5、轻咧唇（稍露牙齿）</p><blockquote><p>旮旯、打靶、拉萨、腊八</p></blockquote><h3 id="练习、"><a href="#练习、" class="headerlink" title="练习、"></a>练习、</h3><p>1.八百标兵奔北坡，北坡炮兵并排跑，炮兵怕把标兵碰，标兵怕碰炮兵炮。—唇 </p><p>2.四是四，十是十，十四是十四，四十是四十，谁能说准四十、十四、四十四，谁来试一试，谁说十四是四十，就打谁十四，谁说四十是细席，就打谁四十。—齿</p><p>3.哥挎瓜筐过宽沟，赶快过沟看怪狗，光看怪狗瓜筐扣，瓜滚筐空哥怪狗。–舌</p><h3 id="平翘舌"><a href="#平翘舌" class="headerlink" title="平翘舌"></a>平翘舌</h3><p>平舌：z c s 舌头尽量抵住上齿背或下齿背</p><p>翘舌：zh ch sh 舌头尽量不要碰到上齿背或下齿背，舌尖尽量的抵到上颚的前部</p><h3 id="l和n"><a href="#l和n" class="headerlink" title="l和n"></a>l和n</h3><p>l：舌尖抵住上齿龈根部，舌前向硬腭抬起，形成气流阻碍，气流从舌的两侧通过，所以叫做舌侧音</p><h3 id="打开口腔"><a href="#打开口腔" class="headerlink" title="打开口腔"></a>打开口腔</h3><h4 id="1、体会胸腔共鸣"><a href="#1、体会胸腔共鸣" class="headerlink" title="1、体会胸腔共鸣"></a>1、体会胸腔共鸣</h4><blockquote><p>讲话时要体会到胸腔的振动</p></blockquote><ol><li><p>嘴巴微闭；</p></li><li><p>右手放在胸腔的位置；</p><blockquote><p>胸腔的范围是脖子下面，肚子上面的部分</p></blockquote></li><li><p>下巴微收,低声哼唱</p></li></ol><h4 id="2、降低喉头位置"><a href="#2、降低喉头位置" class="headerlink" title="2、降低喉头位置"></a>2、降低喉头位置</h4><blockquote><p>让喉部放松；比如打哈欠，可以让喉部和声带都放松</p></blockquote><p>闭上眼睛，面带微笑，连续打两个哈欠，把你的意念集中在你的喉部，喉部就会很放松</p><h4 id="3、打开上下牙槽"><a href="#3、打开上下牙槽" class="headerlink" title="3、打开上下牙槽"></a>3、打开上下牙槽</h4><blockquote><p>给口腔共鸣留出更大的空间，声音更温厚圆润</p></blockquote><p>用右手去摸右耳根前大牙的位置；当口腔打开时,这个位置是凹陷的<br>发音:a、ai、ang</p><h4 id="4、挺软腭"><a href="#4、挺软腭" class="headerlink" title="4、挺软腭"></a>4、挺软腭</h4><p>1、找到软腭位置；2、发音“哟”、“好”；倒吸一口冷气</p><h4 id="5、提笑肌"><a href="#5、提笑肌" class="headerlink" title="5、提笑肌"></a>5、提笑肌</h4><p>1、找到笑肌的位置；2、提笑肌练习</p><h4 id="绕口令"><a href="#绕口令" class="headerlink" title="绕口令"></a>绕口令</h4><p>白石塔<br>白石塔,白石搭，<br>白石搭石塔,白塔白石搭。<br>搭好白石塔，白塔白又大</p><p>炖冻豆腐<br>你会炖我的炖冻豆腐,<br>你来炖我的炖冻豆腐，<br>你不会炖我的炖冻豆腐,<br>就别胡炖乱炖炖坏了我的炖冻豆腐</p><p>声sheng：翘舌音</p><p>四si：平舌音</p><p>十shi</p><p>学好声韵辨四声<br>学好声韵辨四声,阴阳上去要分明<br>部位方法须找准,开齐合撮属口形<br>双唇班报必百波,抵舌当地斗点丁<br>舌根高狗功耕故,舌面积结教坚精<br>翘舌主争真知照，平舌资则早在增<br>擦音发番飞分复,送气查柴产彻称<br>合口呼午枯胡古,开口河坡歌安争<br>嘴撮虛学寻徐剧,齐齿衣优摇业英<br>前鼻恩因烟弯稳,穿鼻昂迎中拥声<br>咬紧字头归字尾,不难达到纯和清</p><h2 id="发声乐器"><a href="#发声乐器" class="headerlink" title="发声乐器"></a>发声乐器</h2><img src="http://cdn.upeveryday.cn/img/image-20211004223529395.png" alt="image-20211004223529395" style="zoom:80%;" /><p>发声乐器由三大部分组成：</p><ul><li>能量：肺、躯干、气息</li><li>发声源：甲/环状软骨、真/假声带、杓会厌括约肌（AES）</li><li>滤波器：嘴唇、下颌骨（下巴）、舌头、软腭、头颈</li></ul><h3 id="软腭"><a href="#软腭" class="headerlink" title="软腭"></a>软腭</h3><img src="http://cdn.upeveryday.cn/img/软腭.jpg" style="zoom:80%;" /><p>软腭位于口腔中的上口盖处，前半部分为硬腭，后半部分则为软腭。<strong>软腭由肌肉组织构成的，能拱起或放下，在呼吸、吞咽食物、语言、歌唱中起着重要的调节作用</strong>。所以软腭位置的高低和与后咽壁形成距离的大小，在歌唱中就会产生不同的声音效果。<br>通常情况下，歌唱处于近似说话的自然状态下，软腭是松弛下垂的。<strong>当软腭贴在后咽壁时（软腭挺起来的时候），歌唱者发出的声音多为口腔音，头声相对的较少</strong>。当<strong>软腭与后咽壁的距离较大（软腭松弛下垂）时又往往会出现鼻音</strong>。我们所讲的<strong>鼻音与鼻腔共鸣是有区别的，两者同为气流冲击鼻腔，产生声音共振</strong>。当鼻腔对气流有一种阻碍作用时，有碰击感时为鼻腔共鸣，反之当鼻腔对气流没有阻碍作用时，那就为鼻音了。出现了鼻音往往是声音发暗无力，没有光彩，歌唱感染力也就相对减少了。</p><p>我们知道，当我们演唱一首声乐作品时，<strong>对高音区的演唱，往往是把软腭抬起的</strong>，这是因为<strong>抬起的软腭能帮助声带拉紧，加之两侧咽部肌肉的收缩，能有效地使咽部形成共鸣管</strong>，高音也就好唱了。</p><p>好的声音也可以说是好的头声，它是建立在软腭上提而又适当离开后咽壁一点距离的基础上的。这样歌唱者发出的声音会高亢、明亮、极富有表现力。我们常讲的要把声音竖起来，也就是指的是这种歌唱状态了。</p><p>在声乐训练中，歌唱者声音的喊叫，往往也是建立在软腭上提的基础上的，但由于软腭贴紧了后咽壁，也就封住了声音进入鼻腔的通道，头腔得不到气流的共振，发出的声音也就是喊叫了。</p><p>在训练中，软腭在歌唱中起到了第二声带的作用。我们可以对着镜子来观察我们软腭（小舌）的振动状态。当软腭贴在后咽壁上时，颤音无，声音直；当软腭离开后咽壁一点距离时，颤音自然，声音自然丰满。就象我们平时打锣时，声音是丰满的，当用手捂住振动的锣面时，声音就不一样了，那么软腭的振动也是如此。</p><img src="http://cdn.upeveryday.cn/img/image-20211003220111145.png" alt="image-20211003220111145" style="zoom: 80%;" /><p>软腭一般会随着音越来越高而抬起<br>高软腭会帮助更容易唱上高音<br>而中软腭上高音其实是一种修行</p><h4 id="软腭的锻炼"><a href="#软腭的锻炼" class="headerlink" title="软腭的锻炼"></a>软腭的锻炼</h4><blockquote><p><a href="https://www.bilibili.com/video/BV1mh41167F2">https://www.bilibili.com/video/BV1mh41167F2</a></p><p>搭配卡祖笛进行练习</p></blockquote><p>相同元音，相同音高，舌头和喉位稳定；熟练的做出三种不同的位置的软腭i元音</p><p>选择元音：i(一) e(哎) a(啊) o u </p><p>软腭：低 中 高 中 低</p><h3 id="声带"><a href="#声带" class="headerlink" title="声带"></a>声带</h3><img src="http://5b0988e595225.cdn.sohucs.com/images/20190416/ccf36d0897924f698bc0ca8a2301aaf7.jpeg" alt="img" style="zoom:150%;" /><p>咽喉：</p><ol><li>“咽”为食道通称，后人又称作“胃系”</li><li>喉为气管的通称又称“肺系”</li></ol><img src="https://pic1.zhimg.com/80/v2-afe2bd91b6df120fc2882c9b7399e6f0_1440w.jpg" alt="img" style="zoom: 33%;" /><p>声带是发声器官的主要组成部分。位于喉腔中部，由<strong>声带肌、声带韧带和粘膜</strong>三部分组成，左右对称。声带的固有膜是致密结缔组织，在皱襞的边缘有强韧的弹性纤维和横纹肌，弹性大。两声带间的矢状裂隙为声门裂。</p><h4 id="真声带与假声带"><a href="#真声带与假声带" class="headerlink" title="真声带与假声带"></a>真声带与假声带</h4><p>真声带(TVF)位于喉内。</p><p>声带的前端附着在甲状软骨的内部，在甲状切口后面和下面。脖子前面的这个肿块通常被称为亚当的苹果（喉结/喉头）。</p><p>真声带的后端附着在杓状软骨上。在本书中使用的示意图图像中，真声带用加粗的红线表示。</p><p><img src="https://pic1.zhimg.com/v2-6b5fdd9c2b1bf02880e8c59c5862bcf0_b.jpg" alt="img"></p><p><img src="https://pic4.zhimg.com/v2-37765b8dec1b25e848aae5ebea04e17b_b.jpg" alt=" "></p><p><img src="https://pic1.zhimg.com/v2-92cb5aac6a6c312a6473f24301793fe4_b.jpg" alt="img"></p><p>呼吸时，真声带形成一个“V”字形后方打开，在前方闭合在一起。屏气时，真声带紧完全封闭，当说话时，真声带闭合刚好在可以振动的位置，将呼吸转化为声音。如上面的练习所示，声带可以在不同的位置，因为它们与呼吸流动协调，从而启动声音。当说“oh！”(/u/)时，真声带从一个封闭的位置开始，给音调的开始提供了一个尖锐的边缘。在“who？”中，它们被打开，产生呼吸“h”的声音，然后他们在/u/。在“you”中，真声带到平滑的位置，在单词的开头产生一个干净、清晰的音调。这些声带运动模式也可以在没有“h”或“y”的帮助下产生，并应用于元音的开头和结尾。</p><p>你什么时候使用声带不同程度的闭合？闭合程度与不同的声音模式和不同的艺术目标联系在一起。它们还有助于理解呼吸是如何参与闭合的，并随着每一种模式的变化而变化。</p><p>声带有三种状态：<strong>紧闭、平衡、漏气</strong>。在艾斯蒂尔声音训练中，每个状态都是非常具体的；然而，所投入的气压可能有所不同。表演者、声音教练和临床医生使用了 不同的术语来描述与每个状态相关的声音或感觉。</p><img src="https://pic4.zhimg.com/v2-444aa9d16cbdb1e1b66c41284a5d2a47_b.jpg" alt="img" style="zoom:80%;" /><p>喉或声道是一个复杂的结构，包括<strong>九个软骨和附着在它们上的肌肉和结缔组织</strong>。喉部悬吊在舌骨上，舌骨是身体中唯一可以自由移动的骨头。</p><p>真声带是配对结构，附着在前面的甲状软骨和后面的杓状软骨。</p><p><img src="https://pic3.zhimg.com/v2-fff20303013c8a185cdf465cfb0434a6_b.jpg" alt="img"></p><h4 id="声带上的肌肉"><a href="#声带上的肌肉" class="headerlink" title="声带上的肌肉"></a>声带上的肌肉</h4><p>TA肌肉（甲杓肌）和LCA肌肉（环杓外侧肌）在发声中的分别作用</p><p>在控制声带内收和特征频率中，TA肌肉和LCA肌肉的相互作用</p><h3 id="会厌"><a href="#会厌" class="headerlink" title="会厌"></a>会厌</h3><p>会厌：由会厌软骨和黏膜组成的喉头上前部的树叶状的结构。<strong>说话或呼吸时，会厌向上</strong>，使喉腔开放**;咽东西时，会厌则向下，盖住气管**，使食物或水不至于进气管之内。舌根后部软骨的树叶状皮片，吞咽食物和液体时能防止它们进入气管。咽食时，会厌下降，盖住喉头(气管的顶部)，喉头又同时产生向上的反射性运动，从而有效地封闭气管的入口。</p><img src="https://i01piccdn.sogoucdn.com/e5463c73b18c53c8" alt="img" style="zoom: 67%;" /><h2 id="口腔疼痛"><a href="#口腔疼痛" class="headerlink" title="口腔疼痛"></a>口腔疼痛</h2><h3 id="舌系带疼痛"><a href="#舌系带疼痛" class="headerlink" title="舌系带疼痛"></a>舌系带疼痛</h3><blockquote><p>根本原因：口部操做过了，每天的舌部锻炼不宜做太多</p></blockquote><p>翘舌头底下的筋，专业称之为<strong>舌系（xi）带</strong>。舌系带因为牵涉到舌腹和口底两个不同解剖区域，<strong>在舌头运动时经常受到摩擦</strong>，<strong>可能来自于下前牙，也可能来自于食物摩擦</strong>。若摩擦损伤，<strong>可能造成一定溃疡或者糜烂</strong>，<strong>一翘舌头自然就会出现疼痛症状</strong>。这种疼痛从几方面分析原因和着手治疗。</p><h4 id="解决办法"><a href="#解决办法" class="headerlink" title="解决办法"></a>解决办法</h4><p>勤喝水：建议**<strong style="color:#ff0000;">多喝温水</strong><strong>。</strong>舌头发炎时喝温度过高的水，后果严重。<strong>在这时期，</strong>舌头和喉咙等发炎部位十分敏感，用热水来刺激是非常难以忍受的<strong>。建议用温水，在闲暇之余多用温水浸润口腔和喉咙，舒适解渴，可缓解喉咙以及舌头发炎的不适感觉。</strong>冷水也不好，冷热温度都是极端**，不适合在这时期引用。</p><p><strong>若明显有溃疡</strong>，一是<strong>减少抬舌、伸舌动作</strong>，避免造成进一步损害，局部可用一些溃疡治疗药物，如口腔溃疡膏、口腔溃疡散、口腔溃疡贴膜促进愈合。<strong>注意避免吃刺激性食物，尤其是特别硬、带骨头、带刺、特别刺激的食物</strong>，通过减少对局部的刺激，能更好更快愈合。只要注意这些方面，恢复或者愈合会很快，也会减少反复。舌系带损伤造成的疼痛，<strong>恢复时间完全取决于保护措施</strong>。<strong>注意不过分伸舌翘舌</strong>，维护好口腔卫生，局部用药或者局部用一些保护措施，3-4天就能得到很好恢复。若不注意改变不良习惯，恢复时间可能更长，或者恢复起来更困难</p>]]></content>
<categories>
<category> voice </category>
</categories>
<tags>
<tag> improveOneself </tag>
</tags>
</entry>
</search>