atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>ZhangWeijie&#39;s blog</title>
  
  <subtitle>这里是Weijie的个人博客</subtitle>
  <link href="http://vijay.top/atom.xml" rel="self"/>
  
  <link href="http://vijay.top/"/>
  <updated>2022-04-13T02:21:48.402Z</updated>
  <id>http://vijay.top/</id>
  
  <author>
    <name>ZhangWeijie</name>
    
  </author>
  
  <generator uri="https://hexo.io/">Hexo</generator>
  
  <entry>
    <title>Pinia教程</title>
    <link href="http://vijay.top/2022/04/12/05_pinia%E6%95%99%E7%A8%8B/"/>
    <id>http://vijay.top/2022/04/12/05_pinia%E6%95%99%E7%A8%8B/</id>
    <published>2022-04-12T13:20:57.000Z</published>
    <updated>2022-04-13T02:21:48.402Z</updated>
    
    <content type="html"><![CDATA[<h2 id="一-Pinia-介绍"><a href="#一-Pinia-介绍" class="headerlink" title="一. Pinia 介绍"></a>一. Pinia 介绍</h2><h3 id="1-官方文档Pinia"><a href="#1-官方文档Pinia" class="headerlink" title="1. 官方文档Pinia"></a>1. 官方文档<a href="https://pinia.vuejs.org/">Pinia</a></h3><h3 id="2-GitHub地址"><a href="#2-GitHub地址" class="headerlink" title="2. GitHub地址"></a>2. <a href="https://github.com/vuejs/pinia">GitHub地址</a></h3><h3 id="3-Pinia-有如下特点"><a href="#3-Pinia-有如下特点" class="headerlink" title="3. Pinia 有如下特点:"></a>3. Pinia 有如下特点:</h3><ul><li><strong>完全支持TS</strong></li><li>足够轻量,压缩后的体积只有<strong>1kb</strong>左右</li><li>去除<strong>mutations</strong>,<strong>只有state,getters,actions</strong></li><li><strong>actions支持同步和异步</strong><span id="more"></span></li><li>代码扁平化没有模板嵌套,<strong>只有store概念</strong>,store之间可以自由使用,<strong>每个store都是独立的</strong></li><li><strong>无需手动添加store</strong>,store一旦创建便会自动添加</li><li><strong>支持Vue3与Vue2</strong></li></ul><h2 id="二-Pinia-起步"><a href="#二-Pinia-起步" class="headerlink" title="二. Pinia 起步"></a>二. Pinia 起步</h2><h3 id="1-安装"><a href="#1-安装" class="headerlink" title="1. 安装"></a>1. 安装</h3><p><code>npm install pinia -S</code></p><p><code>yarn install pinia -S</code></p><h3 id="2-引用"><a href="#2-引用" class="headerlink" title="2. 引用"></a>2. 引用</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// main.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; createPinia &#125; <span class="keyword">from</span> <span class="string">&#x27;pinia&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> store = createPinia()</span><br><span class="line"></span><br><span class="line">app.use(store)</span><br><span class="line"></span><br></pre></td></tr></table></figure><h2 id="三-初始化仓库-Store"><a href="#三-初始化仓库-Store" class="headerlink" title="三. 初始化仓库(Store)"></a>三. 初始化仓库(Store)</h2><ol><li><p>src目录下新建文件夹store</p></li><li><p>新建文件[name].ts</p></li><li><p>定义仓库store</p></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// [name].ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; defineStore &#125; <span class="keyword">from</span> <span class="string">&#x27;pinia&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; Names &#125; <span class="keyword">from</span> <span class="string">&#x27;./store-name&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> useTestStore = defineStore(Names.TEST, &#123;</span><br><span class="line">  <span class="attr">state</span>: <span class="function">() =&gt;</span> (&#123;</span><br><span class="line">    <span class="attr">current</span>: <span class="number">1</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;小张&#x27;</span>,</span><br><span class="line">  &#125;),</span><br><span class="line">  <span class="comment">// computed 修饰参数</span></span><br><span class="line">  <span class="attr">getters</span>: &#123;&#125;,</span><br><span class="line">  <span class="comment">// methods 可以做同步异步 提交state</span></span><br><span class="line">  <span class="attr">actions</span>: &#123;&#125;,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// store-name.ts</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> enum Names &#123;</span><br><span class="line">  TEST = <span class="string">&#x27;TEST&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="四-调用store"><a href="#四-调用store" class="headerlink" title="四. 调用store"></a>四. 调用store</h2><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// &lt;template&gt;</span></span><br><span class="line">&lt;h1&gt;pinia:&#123;&#123; Test.current &#125;&#125;--&#123;&#123; Test.name &#125;&#125;&lt;/h1&gt;</span><br><span class="line"><span class="comment">// &lt;/template&gt;</span></span><br></pre></td></tr></table></figure><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 class="comment">// &lt;script setup lang=&quot;ts&quot;&gt;</span></span><br><span class="line"><span class="keyword">import</span> &#123; useTestStore &#125; <span class="keyword">from</span> <span class="string">&#x27;./store&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Test = useTestStore()</span><br><span class="line"><span class="comment">// &lt;/script&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure><h2 id="五-State"><a href="#五-State" class="headerlink" title="五. State"></a>五. State</h2><h3 id="修改state的值"><a href="#修改state的值" class="headerlink" title="修改state的值"></a>修改state的值</h3><ol><li>直接修改 <strong>name.value++</strong></li></ol><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// template</span></span><br><span class="line">&lt;h1&gt;pinia:&#123;&#123; Test.current &#125;&#125;--&#123;&#123; Test.name &#125;&#125;&lt;/h1&gt;</span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;change&quot;</span>&gt;</span>changeSTATE<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br></pre></td></tr></table></figure><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// setup</span></span><br><span class="line"><span class="keyword">const</span> change = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  Test.current++</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li><strong>$patch对象</strong>批量修改</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// setup</span></span><br><span class="line"><span class="keyword">const</span> change = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  Test.$patch(&#123;</span><br><span class="line">    <span class="attr">current</span>: <span class="number">999</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;小王&#x27;</span>,</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="3"><li><strong>$patch函数</strong>批量修改(<strong>推荐,因为里面可以写表达式</strong>)</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// setup</span></span><br><span class="line"><span class="keyword">const</span> change = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  Test.$patch(<span class="function">(<span class="params">state</span>) =&gt;</span> &#123;</span><br><span class="line">    state.current = <span class="number">999</span></span><br><span class="line">    state.name = <span class="string">&#x27;小王&#x27;</span></span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="4"><li>$state修改(<strong>不常用</strong>,因为必须修改整个state的值才行，不然报错)</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// setup</span></span><br><span class="line"><span class="keyword">const</span> change = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  Test.$state = &#123;</span><br><span class="line">    <span class="attr">current</span>: <span class="number">1000</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;小王&#x27;</span>,</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="5"><li><strong>actions</strong> 修改</li></ol><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 class="comment">// store/index.ts</span></span><br><span class="line"><span class="attr">actions</span>: &#123;</span><br><span class="line">  <span class="function"><span class="title">setCurrent</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">this</span>.current = <span class="number">999</span></span><br><span class="line">  &#125;,</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 调用</span></span><br><span class="line"><span class="keyword">const</span> change = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  Test.setCurrent()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="解构state"><a href="#解构state" class="headerlink" title="解构state"></a>解构state</h3><ol><li>pinia 解构 不具有响应式</li></ol><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="comment">// template</span></span><br><span class="line">  &lt;h1&gt;pinia:&#123;&#123; Test.current &#125;&#125;&lt;/h1&gt;</span><br><span class="line">  <span class="comment">// 不会变化</span></span><br><span class="line">  <span class="xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>&gt;pinia解构:&#123;&#123; current &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">  <span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;change&quot;</span>&gt;</span>changeSTATE<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// setup</span></span><br><span class="line"><span class="comment">// pinia 解构 不具有响应式</span></span><br><span class="line"><span class="keyword">const</span> &#123; current, name &#125; = Test</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> change = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(current, name)</span><br><span class="line">  <span class="comment">// 1 &#x27;小张&#x27;</span></span><br><span class="line">  Test.current++</span><br><span class="line">  <span class="comment">// current++</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><strong>解决办法</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><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">// setup</span></span><br><span class="line"><span class="keyword">import</span> &#123; storeToRefs &#125; <span class="keyword">from</span> <span class="string">&#x27;pinia&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 解构的时候包裹一层 storeToRefs</span></span><br><span class="line"><span class="keyword">const</span> &#123; current, name &#125; = storeToRefs(Test)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> change = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  Test.current++</span><br><span class="line">  <span class="comment">// current.value++</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="六-Actions-支持同步异步"><a href="#六-Actions-支持同步异步" class="headerlink" title="六. Actions(支持同步异步)"></a>六. Actions(支持同步异步)</h2><ol><li><strong>同步</strong></li></ol><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="comment">// template</span></span><br><span class="line">&lt;p&gt;actions-user:&#123;&#123; Test.user &#125;&#125;&lt;/p&gt;</span><br><span class="line"></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;change&quot;</span>&gt;</span>change<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// setup</span></span><br><span class="line"><span class="keyword">import</span> &#123; useTestStore &#125; <span class="keyword">from</span> <span class="string">&#x27;./store&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Test = useTestStore()</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> change = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  Test.setUser()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// store/index.ts</span></span><br><span class="line"><span class="attr">state</span>:<span class="function">()=&gt;</span>&#123;</span><br><span class="line">  <span class="attr">user</span>:&#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="attr">actions</span>:&#123;</span><br><span class="line">  <span class="function"><span class="title">setUser</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.user = &#123;<span class="attr">name</span>:<span class="string">&#x27;小张&#x27;</span>,<span class="attr">age</span>:<span class="number">19</span>&#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li><strong>异步(方法前面加上async 请求返回加上await,请求内部可以调用其它actions方法)</strong></li></ol><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="comment">// template</span></span><br><span class="line">&lt;p&gt;actions-<span class="keyword">async</span>-user:&#123;&#123; Test.user &#125;&#125;&lt;/p&gt;</span><br><span class="line"></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;change&quot;</span>&gt;</span>change<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// setup</span></span><br><span class="line"><span class="keyword">import</span> &#123; useTestStore &#125; <span class="keyword">from</span> <span class="string">&#x27;./store&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Test = useTestStore()</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> change = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  Test.setAsyncUser()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// store/index.ts</span></span><br><span class="line"><span class="attr">state</span>:<span class="function">()=&gt;</span>&#123;</span><br><span class="line">  <span class="attr">user</span>:&#123;&#125;</span><br><span class="line">  <span class="attr">name</span>:<span class="string">&#x27;not change!.&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="attr">actions</span>:&#123;</span><br><span class="line">  <span class="keyword">async</span> <span class="function"><span class="title">setUser</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> 请求()</span><br><span class="line">    <span class="built_in">this</span>.user = result</span><br><span class="line">    <span class="built_in">this</span>.setName(<span class="string">&#x27;change!&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="title">setName</span>(<span class="params">val: string</span>)</span> &#123;</span><br><span class="line">      <span class="built_in">this</span>.name = val</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="七-Getters"><a href="#七-Getters" class="headerlink" title="七. Getters"></a>七. Getters</h2><p>直接[STORENAME].[GETTERSNAME]调用</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 class="comment">// template</span></span><br><span class="line">&lt;p&gt;getters:&#123;&#123; Test.newName &#125;&#125;&lt;/p&gt;</span><br><span class="line"><span class="comment">// result: 123-&#x27;小飞机&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;change&quot;</span>&gt;</span>change<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// store/index.ts</span></span><br><span class="line"><span class="attr">state</span>: <span class="function">() =&gt;</span> (&#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;小飞机&#x27;</span>,</span><br><span class="line">&#125;),</span><br><span class="line"></span><br><span class="line"><span class="attr">getters</span>: &#123;</span><br><span class="line">  newName(): string &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`123-<span class="subst">$&#123;<span class="built_in">this</span>.name&#125;</span>`</span></span><br><span class="line">  &#125;,</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><h2 id="八-API"><a href="#八-API" class="headerlink" title="八. API"></a>八. API</h2><h3 id="1-reset"><a href="#1-reset" class="headerlink" title="1. $reset"></a>1. $reset</h3><p><strong>重置store到初始状态</strong></p><figure class="highlight javascript"><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="comment">// template</span></span><br><span class="line">&lt;button @click=<span class="string">&quot;reset&quot;</span>&gt;reset store&lt;/button&gt;</span><br></pre></td></tr></table></figure><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// setup</span></span><br><span class="line"><span class="keyword">const</span> reset = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  Test.$reset()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="2-subscribe"><a href="#2-subscribe" class="headerlink" title="2. $subscribe"></a>2. $subscribe</h3><p><strong>state有变化就会触发,可以监听state</strong><br><strong>detached:true 为组件销毁后,是否继续监听</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><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="comment">// setup</span></span><br><span class="line">Test.$subscribe(<span class="function">(<span class="params">args, state</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(args)</span><br><span class="line">  <span class="built_in">console</span>.log(state)</span><br><span class="line">&#125;,&#123;</span><br><span class="line">  <span class="attr">detached</span>:<span class="literal">true</span>,</span><br><span class="line">  <span class="attr">deep</span>:<span class="literal">true</span>,</span><br><span class="line">  <span class="attr">flush</span>:<span class="string">&quot;post&quot;</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h3 id="3-onActions"><a href="#3-onActions" class="headerlink" title="3. $onActions"></a>3. $onActions</h3><p><strong>监听actions</strong><br><strong>true 为组件销毁后,是否继续监听</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></pre></td><td class="code"><pre><span class="line"><span class="comment">// setup</span></span><br><span class="line">Test.$onActions(<span class="function">(<span class="params">args</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(args)</span><br><span class="line">&#125;,<span class="literal">true</span>)</span><br></pre></td></tr></table></figure><h2 id="九-结束"><a href="#九-结束" class="headerlink" title="九. 结束"></a>九. 结束</h2><p><strong>本文是本人学习Pinia时制作的笔记,原片地址在<a href="https://www.bilibili.com/video/BV1dS4y1y7vd">这里</a></strong></p><p>共勉！</p>]]></content>
    
    
    <summary type="html">&lt;h2 id=&quot;一-Pinia-介绍&quot;&gt;&lt;a href=&quot;#一-Pinia-介绍&quot; class=&quot;headerlink&quot; title=&quot;一. Pinia 介绍&quot;&gt;&lt;/a&gt;一. Pinia 介绍&lt;/h2&gt;&lt;h3 id=&quot;1-官方文档Pinia&quot;&gt;&lt;a href=&quot;#1-官方文档Pinia&quot; class=&quot;headerlink&quot; title=&quot;1. 官方文档Pinia&quot;&gt;&lt;/a&gt;1. 官方文档&lt;a href=&quot;https://pinia.vuejs.org/&quot;&gt;Pinia&lt;/a&gt;&lt;/h3&gt;&lt;h3 id=&quot;2-GitHub地址&quot;&gt;&lt;a href=&quot;#2-GitHub地址&quot; class=&quot;headerlink&quot; title=&quot;2. GitHub地址&quot;&gt;&lt;/a&gt;2. &lt;a href=&quot;https://github.com/vuejs/pinia&quot;&gt;GitHub地址&lt;/a&gt;&lt;/h3&gt;&lt;h3 id=&quot;3-Pinia-有如下特点&quot;&gt;&lt;a href=&quot;#3-Pinia-有如下特点&quot; class=&quot;headerlink&quot; title=&quot;3. Pinia 有如下特点:&quot;&gt;&lt;/a&gt;3. Pinia 有如下特点:&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;完全支持TS&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;足够轻量,压缩后的体积只有&lt;strong&gt;1kb&lt;/strong&gt;左右&lt;/li&gt;
&lt;li&gt;去除&lt;strong&gt;mutations&lt;/strong&gt;,&lt;strong&gt;只有state,getters,actions&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;actions支持同步和异步&lt;/strong&gt;</summary>
    
    
    
    <category term="学习" scheme="http://vijay.top/categories/%E5%AD%A6%E4%B9%A0/"/>
    
    
    <category term="Pinia" scheme="http://vijay.top/tags/Pinia/"/>
    
  </entry>
  
  <entry>
    <title>前端import自动引入插件</title>
    <link href="http://vijay.top/2021/07/01/04_%E8%87%AA%E5%8A%A8%E5%BC%95%E5%85%A5%E6%8F%92%E4%BB%B6/"/>
    <id>http://vijay.top/2021/07/01/04_%E8%87%AA%E5%8A%A8%E5%BC%95%E5%85%A5%E6%8F%92%E4%BB%B6/</id>
    <published>2021-07-01T01:14:26.000Z</published>
    <updated>2022-04-12T07:32:34.683Z</updated>
    
    <content type="html"><![CDATA[<h2 id="插件地址"><a href="#插件地址" class="headerlink" title="插件地址"></a>插件地址</h2><p><code>https://github.com/antfu/unplugin-auto-import</code></p><p><strong>该插件是fu大神制作，知名度可想而知</strong></p><h2 id="下载插件"><a href="#下载插件" class="headerlink" title="下载插件"></a>下载插件</h2><span id="more"></span><p><code>npm i -D unplugin-auto-import</code></p><h2 id="引入"><a href="#引入" class="headerlink" title="引入"></a>引入</h2><h3 id="Vite"><a href="#Vite" class="headerlink" title="Vite"></a>Vite</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vite.config.ts</span></span><br><span class="line"><span class="keyword">import</span> AutoImport <span class="keyword">from</span> <span class="string">&#x27;unplugin-auto-import/vite&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> defineConfig(&#123;</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    AutoImport(&#123; </span><br><span class="line">      <span class="attr">imports</span>: [<span class="string">&#x27;vue&#x27;</span>],</span><br><span class="line">      <span class="attr">dts</span>: <span class="string">&#x27;src/auto-import.d.ts&#x27;</span>,</span><br><span class="line">    &#125;),</span><br><span class="line">  ],</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h3 id="Webpack"><a href="#Webpack" class="headerlink" title="Webpack"></a>Webpack</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">/* ... */</span></span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="built_in">require</span>(<span class="string">&#x27;unplugin-auto-import/webpack&#x27;</span>)(&#123; <span class="comment">/* options */</span> &#125;),</span><br><span class="line">  ],</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="Nuxt"><a href="#Nuxt" class="headerlink" title="Nuxt"></a>Nuxt</h3><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 class="comment">// nuxt.config.js</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">buildModules</span>: [</span><br><span class="line">    [<span class="string">&#x27;unplugin-auto-import/nuxt&#x27;</span>, &#123; <span class="comment">/* options */</span> &#125;],</span><br><span class="line">  ],</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="Vue-CLi"><a href="#Vue-CLi" class="headerlink" title="Vue CLi"></a>Vue CLi</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vue.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">configureWebpack</span>: &#123;</span><br><span class="line">    <span class="attr">plugins</span>: [</span><br><span class="line">      <span class="built_in">require</span>(<span class="string">&#x27;unplugin-auto-import/webpack&#x27;</span>)(&#123; <span class="comment">/* options */</span> &#125;),</span><br><span class="line">    ],</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
    
    
    <summary type="html">&lt;h2 id=&quot;插件地址&quot;&gt;&lt;a href=&quot;#插件地址&quot; class=&quot;headerlink&quot; title=&quot;插件地址&quot;&gt;&lt;/a&gt;插件地址&lt;/h2&gt;&lt;p&gt;&lt;code&gt;https://github.com/antfu/unplugin-auto-import&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;该插件是fu大神制作，知名度可想而知&lt;/strong&gt;&lt;/p&gt;
&lt;h2 id=&quot;下载插件&quot;&gt;&lt;a href=&quot;#下载插件&quot; class=&quot;headerlink&quot; title=&quot;下载插件&quot;&gt;&lt;/a&gt;下载插件&lt;/h2&gt;</summary>
    
    
    
    <category term="学习" scheme="http://vijay.top/categories/%E5%AD%A6%E4%B9%A0/"/>
    
    
    <category term="Vue3" scheme="http://vijay.top/tags/Vue3/"/>
    
  </entry>
  
  <entry>
    <title>ssh远程连接服务器</title>
    <link href="http://vijay.top/2021/06/22/03_ssh%E8%BF%9C%E7%A8%8B%E8%BF%9E%E6%8E%A5%E6%9C%8D%E5%8A%A1%E5%99%A8/"/>
    <id>http://vijay.top/2021/06/22/03_ssh%E8%BF%9C%E7%A8%8B%E8%BF%9E%E6%8E%A5%E6%9C%8D%E5%8A%A1%E5%99%A8/</id>
    <published>2021-06-22T06:22:03.000Z</published>
    <updated>2022-03-16T12:08:51.067Z</updated>
    
    <content type="html"><![CDATA[<h2 id="打开本地终端-输入"><a href="#打开本地终端-输入" class="headerlink" title="打开本地终端 输入"></a>打开本地终端 输入</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh root@你的ip</span><br></pre></td></tr></table></figure><h2 id="指定ip连接"><a href="#指定ip连接" class="headerlink" title="指定ip连接"></a>指定ip连接</h2><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></pre></td><td class="code"><pre><span class="line">cd .ssh</span><br><span class="line"></span><br><span class="line">ssh -i .\myKye(密钥地址) root@你的ip</span><br></pre></td></tr></table></figure>]]></content>
    
    
      
      
    <summary type="html">&lt;h2 id=&quot;打开本地终端-输入&quot;&gt;&lt;a href=&quot;#打开本地终端-输入&quot; class=&quot;headerlink&quot; title=&quot;打开本地终端 输入&quot;&gt;&lt;/a&gt;打开本地终端 输入&lt;/h2&gt;&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;</summary>
      
    
    
    
    <category term="学习" scheme="http://vijay.top/categories/%E5%AD%A6%E4%B9%A0/"/>
    
    
    <category term="ssh" scheme="http://vijay.top/tags/ssh/"/>
    
  </entry>
  
  <entry>
    <title>Linux基本命令</title>
    <link href="http://vijay.top/2021/06/14/02_Linux%E5%9F%BA%E6%9C%AC%E5%91%BD%E4%BB%A4/"/>
    <id>http://vijay.top/2021/06/14/02_Linux%E5%9F%BA%E6%9C%AC%E5%91%BD%E4%BB%A4/</id>
    <published>2021-06-14T05:20:15.000Z</published>
    <updated>2022-03-16T07:32:17.351Z</updated>
    
    <content type="html"><![CDATA[<h1 id="常用命令"><a href="#常用命令" class="headerlink" title="常用命令"></a>常用命令</h1><h2 id="1-cd-进入目录"><a href="#1-cd-进入目录" class="headerlink" title="1. cd 进入目录"></a>1. cd 进入目录</h2><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></pre></td><td class="code"><pre><span class="line">cd /root/Docements # 切换到目录/root/Docements</span><br><span class="line">cd ./path          # 切换到当前目录下的path目录中，“.”表示当前目录  </span><br><span class="line">cd ../path         # 切换到上层目录中的path目录中，“..”表示上一层目录</span><br></pre></td></tr></table></figure><h2 id="2-ls-展示文件夹内容"><a href="#2-ls-展示文件夹内容" class="headerlink" title="2. ls 展示文件夹内容"></a>2. ls 展示文件夹内容</h2><span id="more"></span><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">-a ：全部的档案，连同隐藏档( 开头为 . 的档案) 一起列出来～ </span><br><span class="line">-A ：全部的档案，连同隐藏档，但不包括 . 与 .. 这两个目录，一起列出来～ </span><br><span class="line">-d ：仅列出目录本身，而不是列出目录内的档案数据 </span><br><span class="line">-f ：直接列出结果，而不进行排序 (ls 预设会以档名排序！) </span><br><span class="line">-F ：根据档案、目录等信息，给予附加数据结构，例如： </span><br><span class="line">*：代表可执行档； /：代表目录； =：代表 socket 档案； |：代表 FIFO 档案； </span><br><span class="line">-h ：将档案容量以人类较易读的方式(例如 GB, KB 等等)列出来； </span><br><span class="line">-i ：列出 inode 位置，而非列出档案属性； </span><br><span class="line">-l ：长数据串行出，包含档案的属性等等数据； </span><br><span class="line">-n ：列出 UID 与 GID 而非使用者与群组的名称 (UID与GID会在账号管理提到！) </span><br><span class="line">-r ：将排序结果反向输出，例如：原本档名由小到大，反向则为由大到小； </span><br><span class="line">-R ：连同子目录内容一起列出来； </span><br><span class="line">-S ：以档案容量大小排序！ </span><br><span class="line">-t ：依时间排序 </span><br><span class="line">--color=never ：不要依据档案特性给予颜色显示； </span><br><span class="line">--color=always ：显示颜色 </span><br><span class="line">--color=auto ：让系统自行依据设定来判断是否给予颜色 </span><br><span class="line">--full-time ：以完整时间模式 (包含年、月、日、时、分) 输出 </span><br><span class="line">--time=&#123;atime,ctime&#125; ：输出 access 时间或 改变权限属性时间 (ctime) </span><br><span class="line">而非内容变更时间 (modification time)     例如：ls [-aAdfFhilRS] 目录名称 ls [--color=&#123;none,auto,always&#125;] 目录名称 ls [--full-time] 目录名称</span><br></pre></td></tr></table></figure><h2 id="3-cp-复制目录"><a href="#3-cp-复制目录" class="headerlink" title="3. cp 复制目录"></a>3. cp 复制目录</h2><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">-a ：将文件的特性一起复制</span><br><span class="line">-p ：连同文件的属性一起复制，而非使用默认方式，与-a相似，常用于备份</span><br><span class="line">-i ：若目标文件已经存在时，在覆盖时会先询问操作的进行</span><br><span class="line">-r ：递归持续复制，用于目录的复制行为</span><br><span class="line">-u ：目标文件与源文件有差异时才会复制</span><br></pre></td></tr></table></figure><h2 id="4-rm-删除"><a href="#4-rm-删除" class="headerlink" title="4. rm 删除"></a>4. rm 删除</h2><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></pre></td><td class="code"><pre><span class="line">-f ：就是force的意思，忽略不存在的文件，不会出现警告消息</span><br><span class="line">-i ：互动模式，在删除前会询问用户是否操作</span><br><span class="line">-r ：递归删除，最常用于目录删除，它是一个非常危险的参数</span><br></pre></td></tr></table></figure><h2 id="5-mv-移动文件"><a href="#5-mv-移动文件" class="headerlink" title="5. mv 移动文件"></a>5. mv 移动文件</h2><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></pre></td><td class="code"><pre><span class="line">-f ：force强制的意思，如果目标文件已经存在，不会询问而直接覆盖</span><br><span class="line">-i ：若目标文件已经存在，就会询问是否覆盖</span><br><span class="line">-u ：若目标文件已经存在，且比目标文件新，才会更新</span><br></pre></td></tr></table></figure><h2 id="6-mkdir-创建目录"><a href="#6-mkdir-创建目录" class="headerlink" title="6. mkdir 创建目录"></a>6. mkdir 创建目录</h2><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></pre></td><td class="code"><pre><span class="line">mkdir [选项]... 目录... </span><br><span class="line"> -m, --mode=模式，设定权限&lt;模式&gt; (类似 chmod)，而不是 rwxrwxrwx 减 umask</span><br><span class="line"> -p, --parents  可以是一个路径名称。此时若路径中的某些目录尚不存在,加上此选项后,系统将自动建立好那些尚不存在的目录,即一次可以建立多个目录; </span><br><span class="line"> -v, --verbose  每次创建新目录都显示信息</span><br></pre></td></tr></table></figure><h2 id="7-rmdir-删除目录"><a href="#7-rmdir-删除目录" class="headerlink" title="7. rmdir 删除目录"></a>7. rmdir 删除目录</h2><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></pre></td><td class="code"><pre><span class="line">rmdir [选项]... 目录...</span><br><span class="line">-p 递归删除目录dirname，当子目录删除后其父目录为空时，也一同被删除。如果整个路径被删除或者由于某种原因保留部分路径，则系统在标准输出上显示相应的信息。 </span><br><span class="line">-v --verbose  显示指令执行过程 </span><br></pre></td></tr></table></figure><h1 id="进程相关命令"><a href="#进程相关命令" class="headerlink" title="进程相关命令"></a>进程相关命令</h1><h2 id="8-ps-显示进程"><a href="#8-ps-显示进程" class="headerlink" title="8. ps 显示进程"></a>8. ps 显示进程</h2><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">-A ：所有的进程均显示出来</span><br><span class="line">-a ：不与terminal有关的所有进程</span><br><span class="line">-u ：有效用户的相关进程</span><br><span class="line">-x ：一般与a参数一起使用，可列出较完整的信息</span><br><span class="line">-l ：较长，较详细地将PID的信息列出</span><br></pre></td></tr></table></figure><h2 id="9-kill-结束进程"><a href="#9-kill-结束进程" class="headerlink" title="9. kill 结束进程"></a>9. kill 结束进程</h2><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">kill -signal PID</span><br><span class="line"><span class="number">1</span>：SIGHUP，启动被终止的进程</span><br><span class="line"><span class="number">2</span>：SIGINT，相当于输入ctrl+c，中断一个程序的进行</span><br><span class="line"><span class="number">9</span>：SIGKILL，强制中断一个进程的进行</span><br><span class="line"><span class="number">15</span>：SIGTERM，以正常的结束进程方式来终止进程</span><br><span class="line"><span class="number">17</span>：SIGSTOP，相当于输入ctrl+z，暂停一个进程的进行</span><br></pre></td></tr></table></figure><h2 id="10-free-显示Linux系统中空闲的、已用的物理内存及swap内存-及被内核使用的buffer"><a href="#10-free-显示Linux系统中空闲的、已用的物理内存及swap内存-及被内核使用的buffer" class="headerlink" title="10. free 显示Linux系统中空闲的、已用的物理内存及swap内存,及被内核使用的buffer"></a>10. free 显示Linux系统中空闲的、已用的物理内存及swap内存,及被内核使用的buffer</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">free [参数]</span><br><span class="line">-b 　以Byte为单位显示内存使用情况。 </span><br><span class="line">-k 　以KB为单位显示内存使用情况。 </span><br><span class="line">-m 　以MB为单位显示内存使用情况。</span><br><span class="line">-g   以GB为单位显示内存使用情况。 </span><br><span class="line">-o 　不显示缓冲区调节列。 </span><br><span class="line">-s&lt;间隔秒数&gt; 　持续观察内存使用状况。 </span><br><span class="line">-t 　显示内存总和列。 </span><br><span class="line">-V 　显示版本信息。</span><br></pre></td></tr></table></figure>]]></content>
    
    
    <summary type="html">&lt;h1 id=&quot;常用命令&quot;&gt;&lt;a href=&quot;#常用命令&quot; class=&quot;headerlink&quot; title=&quot;常用命令&quot;&gt;&lt;/a&gt;常用命令&lt;/h1&gt;&lt;h2 id=&quot;1-cd-进入目录&quot;&gt;&lt;a href=&quot;#1-cd-进入目录&quot; class=&quot;headerlink&quot; title=&quot;1. cd 进入目录&quot;&gt;&lt;/a&gt;1. cd 进入目录&lt;/h2&gt;&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;cd /root/Docements # 切换到目录/root/Docements&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;cd ./path          # 切换到当前目录下的path目录中，“.”表示当前目录  &lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;cd ../path         # 切换到上层目录中的path目录中，“..”表示上一层目录&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;h2 id=&quot;2-ls-展示文件夹内容&quot;&gt;&lt;a href=&quot;#2-ls-展示文件夹内容&quot; class=&quot;headerlink&quot; title=&quot;2. ls 展示文件夹内容&quot;&gt;&lt;/a&gt;2. ls 展示文件夹内容&lt;/h2&gt;</summary>
    
    
    
    <category term="学习" scheme="http://vijay.top/categories/%E5%AD%A6%E4%B9%A0/"/>
    
    
    <category term="Linux" scheme="http://vijay.top/tags/Linux/"/>
    
  </entry>
  
  <entry>
    <title>github获取git密钥</title>
    <link href="http://vijay.top/2021/06/10/01_github%E8%8E%B7%E5%8F%96%E5%AF%86%E9%92%A5/"/>
    <id>http://vijay.top/2021/06/10/01_github%E8%8E%B7%E5%8F%96%E5%AF%86%E9%92%A5/</id>
    <published>2021-06-10T01:42:13.000Z</published>
    <updated>2022-03-16T07:21:43.091Z</updated>
    
    <content type="html"><![CDATA[<h2 id="bash里输入命令"><a href="#bash里输入命令" class="headerlink" title="bash里输入命令"></a>bash里输入命令</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t ed25519 -C <span class="string">&quot;你的邮箱&quot;</span></span><br></pre></td></tr></table></figure><p>一直回车</p><p>再输入</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cat ~<span class="regexp">/.ssh/i</span>d_ed25519.pub</span><br></pre></td></tr></table></figure><p><strong>会生成一段key,就可以放在github密钥管理上</strong></p>]]></content>
    
    
      
      
    <summary type="html">&lt;h2 id=&quot;bash里输入命令&quot;&gt;&lt;a href=&quot;#bash里输入命令&quot; class=&quot;headerlink&quot; title=&quot;bash里输入命令&quot;&gt;&lt;/a&gt;bash里输入命令&lt;/h2&gt;&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;</summary>
      
    
    
    
    <category term="学习" scheme="http://vijay.top/categories/%E5%AD%A6%E4%B9%A0/"/>
    
    <category term="前端" scheme="http://vijay.top/categories/%E5%AD%A6%E4%B9%A0/%E5%89%8D%E7%AB%AF/"/>
    
    
    <category term="github" scheme="http://vijay.top/tags/github/"/>
    
  </entry>
  
  <entry>
    <title>Vue2.0基础</title>
    <link href="http://vijay.top/2021/05/12/vue2-0%E5%AD%A6%E4%B9%A0/"/>
    <id>http://vijay.top/2021/05/12/vue2-0%E5%AD%A6%E4%B9%A0/</id>
    <published>2021-05-12T07:11:58.000Z</published>
    <updated>2022-03-16T07:17:07.283Z</updated>
    
    <content type="html"><![CDATA[<h2 id="1-Vue-js-是什么"><a href="#1-Vue-js-是什么" class="headerlink" title="1.Vue.js 是什么"></a>1.Vue.js 是什么</h2><p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的<strong>渐进式框架</strong>,Vue 被设计为可以<strong>自底向上逐层应用</strong>。Vue 的核心库只关注<strong>视图层</strong>，不仅易于上手，还便于与第三方库或既有项目整合。</p><p>言简意赅，Vue 是<strong>JavaScript</strong>的框架，Vue 可以简化<strong>Dom</strong>操作，可以<strong>响应式</strong>数据驱动</p><h2 id="2-Vue-基础语法"><a href="#2-Vue-基础语法" class="headerlink" title="2.Vue 基础语法"></a>2.Vue 基础语法</h2><h3 id="1-引入标签"><a href="#1-引入标签" class="headerlink" title="1.引入标签"></a>1.引入标签</h3><p>初学时建议先学习<strong>语法</strong>，不推荐直接使用<code>vue-cli</code><br>学习的时候建议引用<em>开发环境版本</em></p><span id="more"></span><figure class="highlight javascript"><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">&lt;!-- 开发环境版本，包含了有帮助的命令行警告 --&gt;</span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><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">&lt;!-- 生产环境版本，优化了尺寸和速度 --&gt;</span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure><h3 id="2-模板语法"><a href="#2-模板语法" class="headerlink" title="2.模板语法"></a>2.模板语法</h3><p>演示代码:</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">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 使用模板语法把数据渲染到页面上 --&gt;</span></span><br><span class="line">    &#123;&#123; message &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建 Vue 实例对象</span></span><br><span class="line"><span class="keyword">let</span> app = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="comment">// 设置 el 属性 和 data 属性</span></span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">        <span class="attr">message</span>: <span class="string">&#x27;Hello Vue!&#x27;</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>查看页面，并且实时修改 app.message 的值，页面上的数据也会做出相应的变化</p><h3 id="3-el-挂载点"><a href="#3-el-挂载点" class="headerlink" title="3.el 挂载点"></a>3.el 挂载点</h3><p>演示代码:</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">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span> <span class="attr">class</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    &#123;&#123; message &#125;&#125;</span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123; message &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> app = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="comment">// 推荐使用 id选择器 因为默认 id选择器不会重复</span></span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="comment">// el:&#x27;.app&#x27;,</span></span><br><span class="line">    <span class="comment">// el:&#x27;div&#x27;,</span></span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">        <span class="attr">message</span>: <span class="string">&#x27;Hello Vue!&#x27;</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><ul><li>  Vue 会管理 el 选项<strong>命中的元素</strong>及其内部的<strong>后代元素</strong></li><li>  可以使用其他的选择器，但建议使用<em>ID 选择器</em></li><li>  可以使用其它的<strong>双标签</strong>，但不能使用*<strong>*HTML 和 body 标签</strong></li></ul><h3 id="4-data-数据对象"><a href="#4-data-数据对象" class="headerlink" title="4.data 数据对象"></a>4.data 数据对象</h3><p>演示代码:</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></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    &#123;&#123; message &#125;&#125;</span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; school.name &#125;&#125; &#123;&#123; school.age &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>&#123;&#123; campus[0] &#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>&#123;&#123; campus[1] &#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>&#123;&#123; campus[2] &#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>&#123;&#123; campus[3] &#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> app = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">        <span class="attr">message</span>: <span class="string">&#x27;Hello Vue!&#x27;</span>,</span><br><span class="line">        <span class="attr">school</span>: &#123;</span><br><span class="line">            <span class="attr">name</span>: <span class="string">&#x27;小张&#x27;</span>,</span><br><span class="line">            <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">campus</span>: [<span class="string">&#x27;1&#x27;</span>, <span class="string">&#x27;2&#x27;</span>, <span class="string">&#x27;3&#x27;</span>, <span class="string">&#x27;4&#x27;</span>],</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p><img src="/images/vue2/data1.png"></p><ul><li>  Vue 中用到的数据定义在<em>data</em>中</li><li>  data 中可以写<strong>复杂类型</strong>的数据</li><li>  渲染复杂类型数据时，遵循<em>js 语法</em>即可</li></ul><h2 id="3-Vue-指令"><a href="#3-Vue-指令" class="headerlink" title="3.Vue 指令"></a>3.Vue 指令</h2><ul><li>  通过<strong>Vue</strong>来实现常见的网页效果</li><li>  <strong>Vue 指令</strong>指的是以 <strong>v-</strong> 开头的一组特殊语法</li></ul><h3 id="1-v-text"><a href="#1-v-text" class="headerlink" title="1.v-text"></a>1.v-text</h3><p>演示代码:</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">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-text</span>=<span class="string">&quot;message+&#x27;!&#x27;&quot;</span>&gt;</span>1<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-text</span>=<span class="string">&quot;demo+&#x27;!&#x27;&quot;</span>&gt;</span>2<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; demo+&#x27;!&#x27; &#125;&#125;3<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> app = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">        <span class="attr">message</span>: <span class="string">&#x27;Hello Vue!&#x27;</span>,</span><br><span class="line">        <span class="attr">demo</span>: <span class="string">&#x27;demo&#x27;</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p><img src="/images/vue2/v-text.png"></p><ul><li>  <strong>v-text</strong>指令作用是：设置标签的内容(textContent)</li><li>  默认写法会替换全部内容，使用 <strong>插值表达式<code>&#123;&#123;&#125;&#125;</code></strong> 可以替换指定内容</li></ul><h3 id="2-v-html"><a href="#2-v-html" class="headerlink" title="2.v-html"></a>2.v-html</h3><p>演示代码:</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">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-html</span>=<span class="string">&quot;content&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-text</span>=<span class="string">&quot;content&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><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 class="keyword">let</span> app = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">        <span class="attr">content</span>: <span class="string">&quot;&lt;a href=&#x27;https://github.com/ZhangWeijie-Z&#x27;&gt; 超链接 &lt;/a&gt;&quot;</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p><img src="/images/vue2/v-html.png"></p><ul><li>  <strong>v-html</strong>指令作用是：设置元素的<strong>innerHTML</strong></li><li>  内容中有<em>html</em>结构会被解析为标签</li><li>  <strong>v-text</strong>指令无论内容是什么，只会解析为文本</li></ul><h3 id="3-v-on"><a href="#3-v-on" class="headerlink" title="3.v-on"></a>3.v-on</h3><p>演示代码:</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></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;v-on指令&quot;</span> <span class="attr">v-on:click</span>=<span class="string">&quot;doIt&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;v-on简写&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;doIt&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;鼠标移入事件&quot;</span> <span class="attr">v-on:mouseenter</span>=<span class="string">&quot;doIt&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;鼠标双击事件&quot;</span> <span class="attr">v-on:dblclick</span>=<span class="string">&quot;doIt&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span> @<span class="attr">click</span>=<span class="string">&quot;changeFood&quot;</span>&gt;</span>&#123;&#123; food &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> app = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">        <span class="attr">food</span>: <span class="string">&#x27;西兰花炒蛋&#x27;</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;</span><br><span class="line">        <span class="attr">doIt</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            alert(<span class="string">&#x27;123&#x27;</span>)</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">changeFood</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="comment">// console.log(this.food)</span></span><br><span class="line">            <span class="built_in">this</span>.food += <span class="string">&#x27;蛋炒西兰花&#x27;</span></span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p><img src="/images/vue2/v-on.gif"></p><ul><li>  <strong>v-on</strong>指令作用是：为元素绑定<strong>事件</strong></li><li>  事件名不需要写 <strong>on</strong></li><li>  指令可以简写为 <strong>@</strong></li><li>  绑定方法可以定义在<strong>methods</strong>属性中</li></ul><h3 id="4-计数器练习"><a href="#4-计数器练习" class="headerlink" title="4.计数器练习"></a>4.计数器练习</h3><p>演示效果:<br><img src="/images/vue2/demo1.gif"></p><ol><li><strong>data</strong>中定义数据： <strong>num</strong></li><li><strong>methods</strong>中添加两个方法：<strong>add(递增)，sub(递减)</strong></li><li>使用<strong>v-text</strong>将<strong>num</strong>设置给<strong>span</strong>标签</li><li>使用<strong>v-on</strong>将<strong>add,sub</strong>分别绑定给 <strong>+</strong> ，**-** 按钮</li><li>递增的逻辑：小于<strong>10</strong>递增，否则提示</li><li>递减的逻辑：大于<strong>0</strong>递减，否则提示</li></ol><center>加油，你可以的!</center><h3 id="5-v-show"><a href="#5-v-show" class="headerlink" title="5.v-show"></a>5.v-show</h3><p>演示代码:</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="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;&quot;</span> <span class="attr">v-show</span>=<span class="string">&quot;isShow&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;&quot;</span> <span class="attr">v-show</span>=<span class="string">&quot;age&gt;=18&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;changeIsShow&quot;</span>&gt;</span>切换绑定状态<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;addAge&quot;</span>&gt;</span>添加年龄<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> app = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">        <span class="attr">isShow</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">age</span>: <span class="number">16</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;</span><br><span class="line">        <span class="attr">changeIsShow</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="built_in">this</span>.isShow = !<span class="built_in">this</span>.isShow</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">addAge</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="built_in">this</span>.age++</span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><ul><li>  <strong>v-show</strong>指令作用是：根据<strong>ture</strong>,<strong>false</strong>切换元素的显示状态</li><li>  原理是修改元素的<strong>display</strong>属性，实现显示隐藏</li><li>  指令后面的内容，最终都会解析为<strong>布尔值</strong></li><li>  值为<strong>true</strong>元素显示，值为<strong>false</strong>元素隐藏</li></ul><h3 id="6-v-if"><a href="#6-v-if" class="headerlink" title="6.v-if"></a>6.v-if</h3><p>演示代码:</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></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;toggleIsShow&quot;</span>&gt;</span>显示隐藏<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 操作 dom 直接移除 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-if</span>=<span class="string">&quot;isShow&quot;</span>&gt;</span>p标签<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 操作样式 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-show</span>=<span class="string">&quot;isShow&quot;</span>&gt;</span>p标签<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> app = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">        <span class="attr">isShow</span>: <span class="literal">false</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;</span><br><span class="line">        <span class="attr">toggleIsShow</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="built_in">this</span>.isShow = !<span class="built_in">this</span>.isShow</span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p><img src="/images/vue2/v-if.gif"></p><ul><li>  <strong>v-if</strong>指令作用是：根据<strong>ture</strong>,<strong>false</strong>切换元素的显示状态</li><li>  本质是通过操作 dom 元素来切换显示状态</li><li>  表达式为<strong>true</strong>元素存在 dom 数中，为<strong>false</strong>元素从 dom 树中移除</li></ul><h3 id="7-v-bind"><a href="#7-v-bind" class="headerlink" title="7.v-bind"></a>7.v-bind</h3><p>演示代码:</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></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">v-bind:src</span>=<span class="string">&quot;imgSrc&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">:src</span>=<span class="string">&quot;imgSrc&quot;</span> <span class="attr">:title</span>=<span class="string">&quot;imgTitle+&#x27;!&#x27;&quot;</span> <span class="attr">:class</span>=<span class="string">&quot;isActive? &#x27;active&#x27;:&#x27;&#x27; &quot;</span> @<span class="attr">click</span>=<span class="string">&quot;add&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">:src</span>=<span class="string">&quot;imgSrc&quot;</span> <span class="attr">:title</span>=<span class="string">&quot;imgTitle+&#x27;!&#x27;&quot;</span> <span class="attr">:class</span>=<span class="string">&quot;&#123;active:isActive&#125;&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;add&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> app = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">        <span class="attr">imgSrc</span>: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">        <span class="attr">imgTitle</span>: <span class="string">&#x27;demo&#x27;</span>,</span><br><span class="line">        <span class="attr">isActive</span>: <span class="literal">false</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;</span><br><span class="line">        <span class="attr">add</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="built_in">this</span>.isActive = !<span class="built_in">this</span>.isActive</span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><ul><li>  <strong>v-bind</strong>指令作用是：为元素绑定属性</li><li>  完整写法是<strong>v-bind:属性名</strong></li><li>  简洁的话可以直接省略 <strong>v-bind</strong>,只保留 <strong>:属性名</strong></li></ul><h3 id="8-图片切换练习"><a href="#8-图片切换练习" class="headerlink" title="8.图片切换练习"></a>8.图片切换练习</h3><p>演示效果:<br><img src="/images/vue2/demo2.gif"></p><ol><li>定义图片数组</li><li>添加图片索引</li><li>绑定 src 属性(<strong>v-bind</strong>)</li><li>图片切换逻辑(<strong>v-on</strong>)</li><li>显示状态切换(<strong>v-show</strong>)</li></ol><center>加油，再坚持一下!</center><h3 id="9-v-for"><a href="#9-v-for" class="headerlink" title="9.v-for"></a>9.v-for</h3><p>演示代码:</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></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;添加数据&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;add&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;移除数据&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;remove&quot;</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(item,index) in arr&quot;</span>&gt;</span>&#123;&#123; index+1 &#125;&#125; hello &#123;&#123; item &#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-for</span>=<span class="string">&quot;(item,index) in veg&quot;</span> <span class="attr">v-bind:title</span>=<span class="string">&quot;item.name&quot;</span>&gt;</span>&#123;&#123; item.name &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> app = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">        <span class="attr">arr</span>: [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>],</span><br><span class="line">        <span class="attr">veg</span>: [&#123; <span class="attr">name</span>: <span class="number">123</span> &#125;, &#123; <span class="attr">name</span>: <span class="number">456</span> &#125;],</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;</span><br><span class="line">        <span class="attr">add</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="built_in">this</span>.arr.push(<span class="number">1</span>)</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">remove</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="built_in">this</span>.arr.shift()</span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p><img src="/images/vue2/v-for.gif"></p><ul><li>  <strong>v-for</strong>指令作用是：根据数据生成列表结构</li><li>  数组经常和 <strong>v-for</strong> 结合使用</li><li>  语法是 <strong>(item,index) in 数据</strong></li><li>  <strong>item</strong> 和 <strong>index</strong> 可以结合其他指令一起使用</li></ul><h3 id="10-v-on-补充"><a href="#10-v-on-补充" class="headerlink" title="10.v-on 补充"></a>10.v-on 补充</h3><p>演示代码:</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">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;doIt(666,&#x27;string&#x27;)&quot;</span>&gt;</span>点击<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> @<span class="attr">keyup.enter</span>=<span class="string">&quot;sayHi&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> app = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;&#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;</span><br><span class="line">        <span class="attr">doIt</span>: <span class="function"><span class="keyword">function</span> (<span class="params">p1, p2</span>) </span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&#x27;do it&#x27;</span>)</span><br><span class="line">            <span class="built_in">console</span>.log(p1)</span><br><span class="line">            <span class="built_in">console</span>.log(p2)</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="function"><span class="title">sayHi</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&#x27;吃了没&#x27;</span>)</span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p><img src="/images/vue2/v-on2.gif"></p><ul><li>  事件绑定的方法写成 <strong>函数调用</strong> 的形式，可以传入自定义参数</li><li>  定义方法时需要定义 <strong>形参</strong> 来接收传入的实参</li><li>  事件的后面跟上 <strong>.修饰符</strong> 可以对事件进行限制</li><li>  <strong>.enter</strong> 可以限制触发的按键为回车</li><li>  事件修饰符有多种</li></ul><h3 id="11-v-model"><a href="#11-v-model" class="headerlink" title="11.v-model"></a>11.v-model</h3><p>演示代码:</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">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;change&quot;</span>&gt;</span>修改message<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;message&quot;</span> @<span class="attr">keyup.enter</span>=<span class="string">&quot;getM&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; message &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> app = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">        <span class="attr">message</span>: <span class="string">&#x27;123&#x27;</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;</span><br><span class="line">        <span class="attr">getM</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            alert(<span class="built_in">this</span>.message)</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">change</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="built_in">this</span>.message = <span class="string">&#x27;987&#x27;</span></span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p><img src="/images/vue2/v-model.gif"></p><ul><li><strong>v-model</strong> 指令作用是：便捷的设置和获取表单元素的值</li><li>绑定的数据会和表单元素 <strong>值</strong> 相关联</li><li>绑定的数据 <strong>双向绑定</strong> 表单元素的值</li></ul><h3 id="12-记事本练习"><a href="#12-记事本练习" class="headerlink" title="12.记事本练习"></a>12.记事本练习</h3><p>演示效果:</p><p><img src="/images/vue2/demo3.gif"></p><ol><li>新增</li></ol><ul><li>生成列表结构 <strong>(v-for数组)</strong></li><li>获取用户输入 <strong>(v-model)</strong></li><li>回车，新增数据</li></ul><ol start="2"><li>删除</li></ol><ul><li>点击删除指定的内容 <strong>(v-on splice 索引)</strong></li></ul><ol start="3"><li>统计</li></ol><ul><li>统计信息个数 <strong>(v-text arr.length)</strong></li></ul><ol start="4"><li>清空</li></ol><ul><li>点击清空所有信息 <strong>(v-on 清空数组)</strong></li></ul><ol start="5"><li>隐藏</li></ol><ul><li>没有数据时，隐藏元素 <strong>(v-show v-if 数组非空)</strong></li></ul><h2 id="4-结束"><a href="#4-结束" class="headerlink" title="4.结束"></a>4.结束</h2><p>此文为博主学习 Vue2.0 时看的视频，我把它写成博客，用大家参考~<br><a href="https://www.bilibili.com/video/BV12J411m7MG?p=1">原文地址</a></p>]]></content>
    
    
    <summary type="html">&lt;h2 id=&quot;1-Vue-js-是什么&quot;&gt;&lt;a href=&quot;#1-Vue-js-是什么&quot; class=&quot;headerlink&quot; title=&quot;1.Vue.js 是什么&quot;&gt;&lt;/a&gt;1.Vue.js 是什么&lt;/h2&gt;&lt;p&gt;Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的&lt;strong&gt;渐进式框架&lt;/strong&gt;,Vue 被设计为可以&lt;strong&gt;自底向上逐层应用&lt;/strong&gt;。Vue 的核心库只关注&lt;strong&gt;视图层&lt;/strong&gt;，不仅易于上手，还便于与第三方库或既有项目整合。&lt;/p&gt;
&lt;p&gt;言简意赅，Vue 是&lt;strong&gt;JavaScript&lt;/strong&gt;的框架，Vue 可以简化&lt;strong&gt;Dom&lt;/strong&gt;操作，可以&lt;strong&gt;响应式&lt;/strong&gt;数据驱动&lt;/p&gt;
&lt;h2 id=&quot;2-Vue-基础语法&quot;&gt;&lt;a href=&quot;#2-Vue-基础语法&quot; class=&quot;headerlink&quot; title=&quot;2.Vue 基础语法&quot;&gt;&lt;/a&gt;2.Vue 基础语法&lt;/h2&gt;&lt;h3 id=&quot;1-引入标签&quot;&gt;&lt;a href=&quot;#1-引入标签&quot; class=&quot;headerlink&quot; title=&quot;1.引入标签&quot;&gt;&lt;/a&gt;1.引入标签&lt;/h3&gt;&lt;p&gt;初学时建议先学习&lt;strong&gt;语法&lt;/strong&gt;，不推荐直接使用&lt;code&gt;vue-cli&lt;/code&gt;&lt;br&gt;学习的时候建议引用&lt;em&gt;开发环境版本&lt;/em&gt;&lt;/p&gt;</summary>
    
    
    
    <category term="学习" scheme="http://vijay.top/categories/%E5%AD%A6%E4%B9%A0/"/>
    
    <category term="前端" scheme="http://vijay.top/categories/%E5%AD%A6%E4%B9%A0/%E5%89%8D%E7%AB%AF/"/>
    
    
    <category term="Vue2" scheme="http://vijay.top/tags/Vue2/"/>
    
  </entry>
  
  <entry>
    <title>MarkDown语法</title>
    <link href="http://vijay.top/2021/05/11/MarkDown%E8%AF%AD%E6%B3%95/"/>
    <id>http://vijay.top/2021/05/11/MarkDown%E8%AF%AD%E6%B3%95/</id>
    <published>2021-05-11T12:12:27.000Z</published>
    <updated>2021-05-12T07:03:59.853Z</updated>
    
    <content type="html"><![CDATA[<h1 id="一级标题"><a href="#一级标题" class="headerlink" title="一级标题"></a>一级标题</h1><h2 id="二级标题"><a href="#二级标题" class="headerlink" title="二级标题"></a>二级标题</h2><h3 id="三级标题"><a href="#三级标题" class="headerlink" title="三级标题"></a>三级标题</h3><ul><li>列表<br>  子列表</li><li>列表</li></ul><span id="more"></span><p><em>斜线字体</em></p><p><strong>字体加粗</strong></p><blockquote><p>引用内容</p></blockquote><center>这一行需要居中</center><hr><hr><p><code>&lt;html&gt;代码块&lt;/html&gt;</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">&lt;html&gt;</span><br><span class="line">    <span class="xml"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span></span><br><span class="line">    <span class="xml"><span class="tag">&lt;<span class="name">body</span>&gt;</span><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span></span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure><ul><li><p>超链接文字<br><a href="https://github.com/ZhangWeijie-Z">我的github地址</a></p></li><li><p>插入图片<br><img src="http://img.doutula.com/production/uploads/image/2021/05/11/20210511698702_QRjahM.gif" alt="插入图片"></p></li></ul>]]></content>
    
    
    <summary type="html">&lt;h1 id=&quot;一级标题&quot;&gt;&lt;a href=&quot;#一级标题&quot; class=&quot;headerlink&quot; title=&quot;一级标题&quot;&gt;&lt;/a&gt;一级标题&lt;/h1&gt;&lt;h2 id=&quot;二级标题&quot;&gt;&lt;a href=&quot;#二级标题&quot; class=&quot;headerlink&quot; title=&quot;二级标题&quot;&gt;&lt;/a&gt;二级标题&lt;/h2&gt;&lt;h3 id=&quot;三级标题&quot;&gt;&lt;a href=&quot;#三级标题&quot; class=&quot;headerlink&quot; title=&quot;三级标题&quot;&gt;&lt;/a&gt;三级标题&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;列表&lt;br&gt;  子列表&lt;/li&gt;
&lt;li&gt;列表&lt;/li&gt;
&lt;/ul&gt;</summary>
    
    
    
    <category term="学习" scheme="http://vijay.top/categories/%E5%AD%A6%E4%B9%A0/"/>
    
    
    <category term="MarkDown" scheme="http://vijay.top/tags/MarkDown/"/>
    
  </entry>
  
  <entry>
    <title>使用Hexo搭建博客</title>
    <link href="http://vijay.top/2021/05/10/Hello-World-0/"/>
    <id>http://vijay.top/2021/05/10/Hello-World-0/</id>
    <published>2021-05-10T11:38:20.000Z</published>
    <updated>2022-03-16T07:16:40.085Z</updated>
    
    <content type="html"><![CDATA[<h2 id="使用Hexo搭建博客"><a href="#使用Hexo搭建博客" class="headerlink" title="使用Hexo搭建博客"></a>使用Hexo搭建博客</h2><ol><li><p>下载Hexo<br><code>npm i -g hexo-cli</code></p></li><li><p>创建文件夹<br><code>mkdir blog</code></p></li><li><p>初始化 hexo<br><code>hexo init</code></p></li><li><p>启动 hexo 预览<br><code>hexo s</code><br>然后输入<code>localhost:4000</code>访问</p></li></ol><span id="more"></span><ol start="5"><li>创建文字<br><code>hexo n 标题</code></li></ol><h2 id="部署到-github"><a href="#部署到-github" class="headerlink" title="部署到 github"></a>部署到 github</h2><ol><li><p>新建仓库</p><blockquote><p>注意 仓库名是 github名+github+io</p><blockquote><p>如：ZhangWeijie-Z.github.io</p></blockquote></blockquote></li><li><p>下载插件<br><code>npm i hexo-deployer-git --save</code></p></li><li><p>更改根目录下 _config.yml 文件</p></li></ol><ul><li>滑动到最下面 <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">type: git</span><br><span class="line">repo: 仓库地址</span><br><span class="line">branch: master</span><br></pre></td></tr></table></figure></li></ul><ol start="4"><li><p>生成github仓库<br><code>hexo d</code></p></li><li><p>访问 ZhangWeijie-Z.github.io</p></li></ol><h2 id="更改主题"><a href="#更改主题" class="headerlink" title="更改主题"></a>更改主题</h2><ol><li><p>克隆主题<br><code>git clone 地址 themes/文件夹名</code> </p></li><li><p>更改根目录下_config.yml 文件</p></li></ol><ul><li>找到 theme<br><code>theme: 跟上主题文件夹名</code></li></ul><ol start="3"><li><p>清理缓存<br><code>hexo clean</code></p></li><li><p>预览看看没问题就推上github</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 启动本地服务器 预览主题</span></span><br><span class="line">hexo s</span><br><span class="line"></span><br><span class="line"><span class="comment">// 生成网站静态文件到默认设置的 public 文件夹</span></span><br><span class="line">hexo g</span><br><span class="line"></span><br><span class="line"><span class="comment">// 自动生成网站静态文件，并部署到设定的仓库</span></span><br><span class="line">hexo d</span><br></pre></td></tr></table></figure></li></ol>]]></content>
    
    
    <summary type="html">&lt;h2 id=&quot;使用Hexo搭建博客&quot;&gt;&lt;a href=&quot;#使用Hexo搭建博客&quot; class=&quot;headerlink&quot; title=&quot;使用Hexo搭建博客&quot;&gt;&lt;/a&gt;使用Hexo搭建博客&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;&lt;p&gt;下载Hexo&lt;br&gt;&lt;code&gt;npm i -g hexo-cli&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;创建文件夹&lt;br&gt;&lt;code&gt;mkdir blog&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;初始化 hexo&lt;br&gt;&lt;code&gt;hexo init&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;启动 hexo 预览&lt;br&gt;&lt;code&gt;hexo s&lt;/code&gt;&lt;br&gt;然后输入&lt;code&gt;localhost:4000&lt;/code&gt;访问&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;</summary>
    
    
    
    <category term="学习" scheme="http://vijay.top/categories/%E5%AD%A6%E4%B9%A0/"/>
    
    <category term="前端" scheme="http://vijay.top/categories/%E5%AD%A6%E4%B9%A0/%E5%89%8D%E7%AB%AF/"/>
    
    
    <category term="Hexo" scheme="http://vijay.top/tags/Hexo/"/>
    
  </entry>
  
  <entry>
    <title>Hello World</title>
    <link href="http://vijay.top/2021/05/10/hello-world/"/>
    <id>http://vijay.top/2021/05/10/hello-world/</id>
    <published>2021-05-10T11:35:27.043Z</published>
    <updated>2021-05-11T23:47:43.881Z</updated>
    
    <content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p><h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><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">$ hexo new <span class="string">&quot;My New Post&quot;</span></span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/writing.html">Writing</a></p><span id="more"></span><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><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">$ hexo server</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/server.html">Server</a></p><h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><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">$ hexo generate</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/generating.html">Generating</a></p><h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><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">$ hexo deploy</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>]]></content>
    
    
    <summary type="html">&lt;p&gt;Welcome to &lt;a href=&quot;https://hexo.io/&quot;&gt;Hexo&lt;/a&gt;! This is your very first post. Check &lt;a href=&quot;https://hexo.io/docs/&quot;&gt;documentation&lt;/a&gt; for more info. If you get any problems when using Hexo, you can find the answer in &lt;a href=&quot;https://hexo.io/docs/troubleshooting.html&quot;&gt;troubleshooting&lt;/a&gt; or you can ask me on &lt;a href=&quot;https://github.com/hexojs/hexo/issues&quot;&gt;GitHub&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;Quick-Start&quot;&gt;&lt;a href=&quot;#Quick-Start&quot; class=&quot;headerlink&quot; title=&quot;Quick Start&quot;&gt;&lt;/a&gt;Quick Start&lt;/h2&gt;&lt;h3 id=&quot;Create-a-new-post&quot;&gt;&lt;a href=&quot;#Create-a-new-post&quot; class=&quot;headerlink&quot; title=&quot;Create a new post&quot;&gt;&lt;/a&gt;Create a new post&lt;/h3&gt;&lt;figure class=&quot;highlight bash&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;$ hexo new &lt;span class=&quot;string&quot;&gt;&amp;quot;My New Post&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;p&gt;More info: &lt;a href=&quot;https://hexo.io/docs/writing.html&quot;&gt;Writing&lt;/a&gt;&lt;/p&gt;</summary>
    
    
    
    
  </entry>
  
</feed>