search.xml

<?xml version="1.0" encoding="utf-8"?>
<search>
  <entry>
    <title>ES6之Promise、async和await</title>
    <url>/2017/07/08/ES6%E4%B9%8BPromise%E3%80%81async%E5%92%8Cawait/</url>
    <content><![CDATA[<h2 id="单线程和异步"><a href="#单线程和异步" class="headerlink" title="单线程和异步"></a>单线程和异步</h2><p><strong>单线程</strong></p>
<p>JavaScript 这门编程语言从诞生之初有一个特性就是单线程，这个特性随着 JavaScript 以后不断的发展也不会改变。</p>
<p>单线程就是只有一个线程，同一时间只做一件事，两段 JS 不能同时执行。</p>
<span id="more"></span>
<p>浏览器在加载一个页面时，需要根据服务器返回数据，渲染 DOM。而 JS 是可以操作、修改 DOM 的，JS 执行期间会阻塞浏览器的 DOM 渲染，这也就是为什么我们提倡将页面引入的 JS 文件放到 body 底部的原因。JS 必须是单线程的，因为如果两段 JS 代码同时操作一个 DOM 节点，浏览器无法判断应该如何执行，JS 单线程的目的就是避免 DOM 操作的冲突。HTML5 中提供了 Web Worker 的特性，可以开启多个线程，但在 Web Worker 中不能访问 DOM，目的当然也是为了避免 DOM 操作冲突，Web Worker 的出现也没有改变 JS 单线程的本质。</p>
<pre><code class="js">    // 循环执行执行期间，JS 执行和 DOM 渲染暂时卡顿
    var i, sum=0;
    for(i=0;i&lt;1000000000;i++)&#123;
        sum+=i;
    &#125;
    console.log(sum);


    // alert 不处理，JS 执行和 DOM 渲染暂时卡顿
    console.log(1);
    alert(&quot;hello&quot;);
    console.log(2);
</code></pre>
<p><strong>异步</strong></p>
<p>单线程的解决方案就是异步。浏览器发起一个请求之后，总不能一直等待有了响应才去执行下边的代码，而是请求之后继续执行下面代码，等服务器返回相应执行相应的回调。异步解决了 JS 单线程的问题，但是通过回调函数的这种方式也有自己的缺点，比如没有按照代码书写的顺序执行，可读性差等。</p>
<pre><code class="js">    console.log(100);
    setTimeout(function()&#123;
        console.log(200); // 直接跳过，继续执行后边代码
    &#125;,1000);              
    console.log(300);
    console.log(400);
</code></pre>
<pre><code class="js">    console.log(100);
    $.ajax(&#123;
        url:&quot;xxx&quot;,
        success: function(result)&#123; // 请求成功才会执行回调，不影响后面代码执行
            console.log(result); 
        &#125;
    &#125;);
    console.log(300);
    console.log(400);
</code></pre>
<p><strong>Event Loop</strong></p>
<p>Event Loop 通常被称为事件轮询、事件循环，是异步的具体实现方式。浏览器在执行 JS 代码时，首先会立刻执行所有的同步代码，异步函数会放入异步队列中，等待所有的同步代码执行完毕后，才会轮询执行异步队列中的代码</p>
<pre><code class="js">    setTimeout(function()&#123; // 异步函数先放异步队列中
        console.log(100);
    &#125;, 1000);
    console.log(200); // 同步函数在主进程中，立刻执行 
</code></pre>
<pre><code class="js">    setTimeout(function()&#123; // 100ms 后放到异步队列中
        console.log(1); 
    &#125;, 100);
    setTimeout(function()&#123; // 立刻放到异步队列中（定时器有个最短时间限制，实际为 4ms）
        console.log(2);
    &#125;);
    console.log(3); // 主进程
    // 按顺序输出 3 2 1
</code></pre>
<h2 id="jQuery-中的-Deferred-函数和-Promise"><a href="#jQuery-中的-Deferred-函数和-Promise" class="headerlink" title="jQuery 中的 Deferred 函数和 Promise"></a>jQuery 中的 Deferred 函数和 Promise</h2><p>Deferred 是 jQuery 1.5 版本中出现的一个构造函数，可以创建一个延迟执行的对象实例，该实例有两类方法：</p>
<ul>
<li>resolve、reject（主动触发的方法）</li>
<li>done、fail、then（监听的方法，可传入回调函数）</li>
</ul>
<p>done 方法中传入成功回调，执行成功后会执行，代码内部对应的是 resolve 方法，fail 中传入失败回调，对应 reject 方法。done 和 fail 方法可以 then 方法代替，then 方法中传入成功、失败函数两个参数</p>
<pre><code class="js">    var wait=function()&#123;
        var task=function()&#123;
            console.log(&quot;执行完成&quot;);
        &#125;
        setTimeout(task, 2000);
    &#125;
    wait();
</code></pre>
<p>上面代码使用 Deferred 后，代码更加容易扩展：</p>
<pre><code class="js">    function waitHandle()&#123;
        var dtd=$.Deferred(); // 创建一个 deferred 对象

        var wait = function (dtd) &#123;
            var task=function()&#123;
                console.log(&quot;执行完成&quot;);
                dtd.resolve(); // 表示异步任务已经完成
                // dtd.reject(); // 表示异步任务失败或出错
            &#125;
            setTimeout(task, 2000);
            return dtd;
        &#125;

        return wait(dtd);
    &#125;

    var result = waitHandle();
    // result.reject(); // 执行这个不报错，会导致后边都走 error 的回调，影响结果 
    result.then(function()&#123;
        console.log(&quot;ok 1&quot;);
    &#125;, function()&#123;
        console.log(&quot;error 1&quot;);
    &#125;)
    result.then(function()&#123;
        console.log(&quot;ok 2&quot;);
    &#125;, function()&#123;
        console.log(&quot;error 2&quot;);
    &#125;)
</code></pre>
<p>但由于 Deferred 有两类方法，在 then/done/fail 这种监听方法前主动 resolve/reject 方法，代码不会报错，会直接影响回调执行的结果，可以调用实例对象的 promise 方法，该方法返回一个 promise 对象，promise 对象中没有 resolve/reject 这类方法，所以不会出现这个问题：</p>
<pre><code class="js">    function waitHandle()&#123;
        var dtd=$.Deferred();

        var wait = function (dtd) &#123; 
            var task=function()&#123;
                console.log(&quot;执行完成&quot;);
                dtd.resolve();
                // dtd.reject();
            &#125;
            setTimeout(task, 2000);
            return dtd.promise(); // 这里返回的是 promise 对象而不是直接返回 deferred 对象
        &#125;

        return wait(dtd); 
    &#125;

    var result = waitHandle(); // promise 对象（没有 resolve/reject 方法）
    // result.resolve(); // Uncaught TypeError: result.resolve is not a function
    $.when(result).then(function () &#123;
        console.log(&quot;ok 1&quot;);
    &#125;, function()&#123;
        console.log(&quot;error 1&quot;);
    &#125;) 
    $.when(result).then(function()&#123;
        console.log(&quot;ok 2&quot;);
    &#125;, function()&#123;
        console.log(&quot;error 2&quot;);
    &#125;)
</code></pre>
<h2 id="ES6-中的-Promise"><a href="#ES6-中的-Promise" class="headerlink" title="ES6 中的 Promise"></a>ES6 中的 Promise</h2><p>使用 Promise 构造函数创建实例对象，构造函数中传入一个函数，函数有两个参数：resolve 和 reject，分别作为执行成功、失败时要调用的方法，使用 then 方法监听结果</p>
<pre><code class="js">    // ES5
    function loadImg(src, callback, fail)&#123;
        var img=document.createElement(&quot;img&quot;);
        img.onload=function()&#123;
            callback(img);
        &#125;
        img.onerror=function()&#123;
            fail();
        &#125;
        img.src=src;
    &#125;
    var src=&quot;http://www.imooc.com/static/img/index/logo_new.png&quot;;
    loadImg(src, function(img)&#123;
        console.log(img.width);
    &#125;,function() &#123;
        console.log(&quot;failed&quot;);
    &#125;);
</code></pre>
<p>使用 Promise 语法：</p>
<pre><code class="js">    function loadImg(src)&#123; 
        const promise=new Promise(function(resolve, reject)&#123;
            var img=document.createElement(&quot;img&quot;);
            img.onload=function()&#123;
                resolve(img); // 成功时执行的函数
            &#125;
            img.onerror=function()&#123;
                reject(); // 失败时执行的函数
            &#125;
            img.src=src;
        &#125;);
        return promise;
    &#125;
    var src=&quot;http://www.imooc.com/static/img/index/logo_new.png&quot;;
    var result=loadImg(src);
    result.then((img)=&gt;&#123; // 成功回调
        console.log(img.width);
    &#125;, function()&#123; // 失败回调
        console.log(&quot;error&quot;);
    &#125;);
</code></pre>
<p><strong>Promise 中的异常捕获</strong></p>
<p>Promise 实例可以使用 catch 方法统一捕获异常，then 相应只需要传入一个成功回调方法</p>
<pre><code class="js">    function loadImg(src) &#123;
        const promise = new Promise(function (resolve, reject) &#123;
            var img = document.createElement(&quot;img&quot;);
            throw new Error(&quot;自定义错误&quot;);
            img.onload = function () &#123;
                resolve(img);
            &#125;
            img.onerror = function () &#123;
                reject(); 
            &#125;
            img.src = src;
        &#125;);
        return promise;
    &#125;

    var src = &quot;http://www.imooc.com/static/img/index/logo_new.png&quot;;

    var result = loadImg(src);

    result.then((img) =&gt; &#123;
        console.log(&quot;width&quot;,img.width);
        return img;
    &#125;).then(function(img)&#123;
        console.log(&quot;height&quot;,img.height);
    &#125;).catch(function(ex)&#123;
        // 最后统一用 catch 捕获异常
        console.log(ex);
    &#125;);
</code></pre>
<pre><code class="js">    function loadImg(src) &#123;
        const promise = new Promise(function (resolve, reject) &#123;
            var img = document.createElement(&quot;img&quot;);
            img.onload = function () &#123;
                resolve(img);
            &#125;
            img.onerror = function () &#123;
                reject(&quot;图片加载失败&quot;);
            &#125;
            img.src = src;
        &#125;);
        return promise;
    &#125;

    var src = &quot;http://www.imooc.com/static/img/index/logo_new1.png&quot;;

    var result = loadImg(src);

    result.then((img) =&gt; &#123;
        console.log(&quot;width&quot;,img.width);
        return img; 
    &#125;).then(function(img)&#123;
        console.log(&quot;height&quot;,img.height);
    &#125;).catch(function(ex)&#123;
        console.log(ex); // 图片加载失败
    &#125;);
</code></pre>
<p><strong>顺序执行多个回调</strong></p>
<pre><code class="js">    function loadImg(src) &#123;
        const promise = new Promise(function (resolve, reject) &#123;
            var img = document.createElement(&quot;img&quot;);
            img.onload = function () &#123;
                resolve(img);
            &#125;
            img.onerror = function () &#123;
                reject(&quot;图片加载失败&quot;);
            &#125;
            img.src = src;
        &#125;);
        return promise;
    &#125;
    var src1 = &quot;http://www.imooc.com/static/img/index/logo_new.png&quot;;
    var result1 = loadImg(src1);
    var src2 = &quot;https://www.baidu.com/img/bd_logo1.png?where=super&quot;;
    var result2 = loadImg(src2);

    result1.then((img) =&gt; &#123;
        console.log(&quot;第一个图片加载完成&quot;, img); 
        return result2; // 返回 result2 后，下一个 then 中监听的是 result2
    &#125;).then(function (img) &#123;
        console.log(&quot;第二个图片加载完成&quot;, img);
    &#125;).catch(function (ex) &#123;
        console.log(ex);
    &#125;);
</code></pre>
<p><strong>Promise.all 和 Promise.race 方法</strong></p>
<p>Promise.all 接收一个包含多个 promise 对象的数组，所有的 promise 对象执行成功回调后，才会 then 中的方法</p>
<p>Promise.race 接收一个包含多个 promise 对象的数组，只要有一个 promise 对象执行成功回调，就会执行 then 中方法</p>
<pre><code class="js">    function loadImg(src) &#123;
        const promise = new Promise(function (resolve, reject) &#123;
            var img = document.createElement(&quot;img&quot;);
            img.onload = function () &#123;
                resolve(img);
            &#125;
            img.onerror = function () &#123;
                reject(&quot;图片加载失败&quot;);
            &#125;
            img.src = src;
        &#125;);
        return promise;
    &#125;

    var src1 = &quot;http://www.imooc.com/static/img/index/logo_new.png&quot;;
    var result1 = loadImg(src1);
    var src2 = &quot;https://www.baidu.com/img/bd_logo1.png?where=super&quot;;
    var result2 = loadImg(src2);

    Promise.all([result1, result2]).then(datas=&gt;&#123;
        console.log(datas); // [img, img]
        console.log(datas[0]); // &lt;img src=&quot;http://www.imooc.com/static/img/index/logo_new.png&quot;&gt;
        console.log(datas[1]); // &lt;img src=&quot;https://www.baidu.com/img/bd_logo1.png?where=super&quot;&gt;
    &#125;);

    Promise.race([result1, result2]).then(data=&gt;&#123;
        // data 即最先执行完成的 promise 的返回值
        console.log(data);
    &#125;);
</code></pre>
<h2 id="Async-和-Await"><a href="#Async-和-Await" class="headerlink" title="Async 和 Await"></a>Async 和 Await</h2><p>async/await 对 Promise 进行了封装，可以使用同步的写法代替之前必须要传入回调的写法</p>
<pre><code class="js">    function loadImg(src) &#123;
        const promise = new Promise(function (resolve, reject) &#123;
            var img = document.createElement(&quot;img&quot;);
            img.onload = function () &#123;
                resolve(img);
            &#125;
            img.onerror = function () &#123;
                reject(&quot;图片加载失败&quot;);
            &#125;
            img.src = src;
        &#125;);
        return promise;
    &#125;
    var src1 = &quot;http://www.imooc.com/static/img/index/logo_new.png&quot;;
    var src2 = &quot;https://www.baidu.com/img/bd_logo1.png?where=super&quot;;

    const load=async function()&#123;
        const result1 = await loadImg(src1);
        console.log(result1);
        const result2=await loadImg(src2);
        console.log(result2);
    &#125;
    load();
</code></pre>
]]></content>
      <categories>
        <category>Web前端</category>
      </categories>
      <tags>
        <tag>ES6</tag>
      </tags>
  </entry>
  <entry>
    <title>ES6之let、const和块级作用域</title>
    <url>/2017/07/01/ES6%E4%B9%8Blet%E3%80%81const%E5%92%8C%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/</url>
    <content><![CDATA[<ul>
<li>let命令</li>
<li>块级作用域</li>
<li>const命令</li>
<li>跨模块常量</li>
<li>全局对象属性</li>
</ul>
<h2 id="let命令"><a href="#let命令" class="headerlink" title="let命令"></a>let命令</h2><p><strong>let基本用法</strong></p>
<p>ES5中使用<code>var</code>声明变量，ES6中声明变量新增了<code>let</code>命令，用法类似于<code>var</code>，但是<code>let</code>声明的变量其所在的代码块内有效，即<code>let</code>定义的是“局部变量”</p>
<span id="more"></span>
<pre><code class="js">    &#123;
        var a=1;
        let b=2;
    &#125;
    console.log(a); // 1
    console.log(b); // Uncaught ReferenceError: b is not defined（只在所在代码块内有效）
</code></pre>
<p><strong>不存在变量提升</strong></p>
<p><code>let</code>不像<code>var</code>一样会发生变量提升现象</p>
<pre><code class="js">    // ES5
    var arr1=[];
    for(var i=0;i&lt;10;i++)&#123;
        var c=i;
        arr1[i]=function()&#123;
            console.log(c);
        &#125;
    &#125;
    // console.log(c); // 9
    arr1[5](); // 9

    // ES6
    let arr2=[];
    for(var j=0;j&lt;10;j++)&#123;
        let k=j;
        arr2[j]=function()&#123;
            console.log(k);
        &#125;
    &#125;
    // console.log(k); // Uncaught ReferenceError: k is not defined
    arr2[5]();
</code></pre>
<p><strong>暂时性死区</strong></p>
<p>只要块级作用域内存在<code>let</code>命令，它所声明的变量就“绑定”（binding）在这个区域，不再受外部影响。在当前作用域中，<code>let</code>声明变量之前的区域，叫做暂时性死区</p>
<pre><code class="js">    var a = 100;
    &#123;
        console.log(a); // Uncaught ReferenceError: a is not defined（暂时性死区）
        let a = 1; // 块级作用域中，let声明之前，都是暂时性死区
        // console.log(a); // 1
    &#125;
</code></pre>
<p><strong>不允许重复声明</strong></p>
<p><code>let</code>不允许在相同的作用域内，重复声明同一个变量</p>
<pre><code class="js">    var a=1;
    var a=2; 
    console.log(a); // 2
</code></pre>
<pre><code class="js">    let b=3;
    let b=4; // Uncaught TypeError: embedded: Line 6: Duplicate declaration &quot;b&quot;    
</code></pre>
<pre><code class="js">    var c=5;
    let c=6;
    console.log(c); // Uncaught TypeError: embedded: Line 5: Duplicate declaration &quot;c&quot;
</code></pre>
<h2 id="块级作用域"><a href="#块级作用域" class="headerlink" title="块级作用域"></a>块级作用域</h2><p><strong>为什么需要块级作用域</strong></p>
<p>ES5 只有全局作用域和函数作用域，没有块级作用域，这会带来很多不合理的场景，如：</p>
<ul>
<li>内层变量可能会覆盖外层变量</li>
<li>用来计数的循环变量泄露为全局变量</li>
</ul>
<pre><code class="js">    var str=&quot;123&quot;;
    function fn()&#123;
        console.log(str);
        if(false)&#123;
            var str=&quot;456&quot;; // 没有块级作用域，变量提升到函数作用域中
        &#125;
    &#125;
    fn(); // undefined
</code></pre>
<pre><code class="js">    var str=&quot;123&quot;;
    function fn()&#123;
        console.log(str);
        if(true)&#123;
            var str=&quot;456&quot;;
        &#125;
    &#125;
    fn(); // undefined
</code></pre>
<pre><code class="js">    var str=&quot;123&quot;;
    function fn()&#123;
        console.log(str);
        var str=&quot;456&quot;;
    &#125;
    fn(); // undefined
</code></pre>
<pre><code class="js">    for(var i=0;i&lt;10;i++)&#123;
        console.log(&quot;abc&quot;);
    &#125;
    console.log(i); // 全局能访问
</code></pre>
<p><strong>ES6的块级作用域</strong></p>
<p>使用<code>let</code>即为JavaScript增加了块级作用域</p>
<pre><code class="js">    for(let i=0;i&lt;10;i++)&#123;
        console.log(&quot;abc&quot;);
    &#125;
    console.log(i); // Uncaught ReferenceError: i is not defined
</code></pre>
<h2 id="const命令"><a href="#const命令" class="headerlink" title="const命令"></a>const命令</h2><p><code>const</code>用来声明常量，一旦声明，该常量的值（该变量的内存地址）就不可修改；和<code>let</code>类似，<code>const</code>声明的常量也会绑定到块级作用域，也有暂时性死区，也不能重复声明；<code>const</code>声明的对象和数组是可以修改的</p>
<pre><code class="js">    const Pi=3.14159;
    Pi=3.14; // Uncaught SyntaxError: embedded: Line 6: &quot;Pi&quot; is read-only
</code></pre>
<pre><code class="js">    const person=&#123;&#125;
    person.name=&quot;Tom&quot;; // 变量的内存地址没有变化，这是允许的
    person.age=18;
    console.log(person); // &#123;name: &quot;Tom&quot;, age: 18&#125;    
</code></pre>
<pre><code class="js">    const arr=[]
    arr.push(1); // 变量的内存地址没有变化
    console.log(arr); // [1]
</code></pre>
<p><strong>const对象冻结</strong></p>
<p><code>const</code>声明对象时属性仍然可修改，并不是真正意义上的“常量”，若要在声明对象后完全禁止修改，可以使用对象冻结的方法，禁止操作该对象的属性（只可读取）</p>
<pre><code class="js">    const person=Object.freeze(&#123; name:&quot;Tom&quot; &#125;); // Object.freeze方法冻结一个对象并返回
    console.log(person.name); // Tom
    person.name=&quot;Tony&quot;; // Uncaught TypeError: Cannot assign to read only property &#39;name&#39; of object &#39;#&lt;Object&gt;&#39; （无法分配给对象&#39;＃&lt;Object&gt;&#39;的只读属性&#39;name&#39;）
</code></pre>
<pre><code class="js">    const person=Object.freeze(&#123; name:&quot;Tom&quot; &#125;);
    person.age=18; // Uncaught TypeError: Cannot add property age, object is not extensible （无法添加属性age，对象不可扩展）    
</code></pre>
<p>使用上述方法定义的对象的属性也为对象时，不能被同时冻结：</p>
<pre><code class="js">    const person=Object.freeze(&#123;
        love:&#123;
            person:&quot;heqiqi&quot;,
            sport:&quot;run&quot;,
        &#125;
    &#125;);
    console.log(person.love.sport); // run 
    person.love.sport=&quot;football&quot;;
    console.log(person.love.sport); // football
</code></pre>
<p>使所有属性也全部被冻结：</p>
<pre><code class="js">    function deepFreeze(obj)&#123;
        Object.freeze(obj); // 冻结对象
        Object.keys(obj).forEach((item)=&gt;&#123;
            if(typeof obj[item] === &quot;object&quot;)&#123; // 该对象属性为对象时，继续冻结 递归调用
                deepFreeze(obj[item]);
            &#125;
        &#125;);
    &#125;
    const person=&#123;
        name:&quot;Tom&quot;,
        age:18,
        love:&#123;
            person:&quot;heqiqi&quot;,
            sport:&quot;run&quot;,
            movies:&#123;
                a:1,
                b:2,
            &#125;
        &#125;
    &#125;
    person.love.movies.a=3;
    console.log(person.love.movies.a); // 3
    deepFreeze(person); // 冻结
    person.love.movies.a=4; // Uncaught TypeError: Cannot assign to read only property &#39;a&#39; of object &#39;#&lt;Object&gt;&#39;
</code></pre>
<h2 id="跨模块常量"><a href="#跨模块常量" class="headerlink" title="跨模块常量"></a>跨模块常量</h2><p><code>const</code>声明的常量只在当前代码块中有效，设置跨模块的常量，即使用 export、import 导出导入模块的形式</p>
<pre><code class="js">    // module1.js
    export const str=&quot;123&quot;;
    export const num=123;
    export const bol=true;
</code></pre>
<pre><code class="js">    // module2.js
    import * as module1 from &quot;./module1.js&quot;; // 将 module1 的导出全部引入
    console.log(module1.str);
    console.log(module1.num);
    console.log(module1.bol);
</code></pre>
<pre><code class="js">    // module3.js
    import &#123; str,num &#125; as module1 from &quot;./module1.js&quot;; // 引入部分 module1 的导出
    console.log(module1.str);
    console.log(module1.num);
</code></pre>
<pre><code class="js">    // module4.js
    import &#123;str,num&#125; from &quot;./module1.js&quot;;
    console.log(str);
    console.log(num);
</code></pre>
<h2 id="全局对象属性"><a href="#全局对象属性" class="headerlink" title="全局对象属性"></a>全局对象属性</h2><p>全局对象是最顶层的对象，在浏览器环境中指 window 对象，在Node.js环境中指 global 对象。在JavaScript语言中，所有全局变量都是全局对象的属性。（Node 的环境比较特殊，这一条只对 REPL 环境适用，模块环境必须显式声明成 global 的属性）</p>
<p>ES6规定，<code>var</code>和<code>function</code>声明的全局变量，属于全局对象的属性；<code>let</code>、<code>const</code>和<code>class</code>声明的全局变量，不属于全局对象的属性</p>
<pre><code class="js">    let num1=123;
    const PI=3.14;
    console.log(window.num1); // undefined
    console.log(window.PI); // undefined
</code></pre>
]]></content>
      <categories>
        <category>Web前端</category>
      </categories>
      <tags>
        <tag>ES6</tag>
      </tags>
  </entry>
  <entry>
    <title>ES6之结构赋值</title>
    <url>/2017/07/02/ES6%E4%B9%8B%E7%BB%93%E6%9E%84%E8%B5%8B%E5%80%BC/</url>
    <content><![CDATA[<p>Destructuring：ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这叫做解构（Destructuring）</p>
<ul>
<li>数组的解构赋值</li>
<li>对象的解构赋值</li>
<li>字符串的解构赋值</li>
<li>函数参数的解构赋值</li>
<li>解构赋值的用途</li>
</ul>
<span id="more"></span>
<h2 id="数组的解构赋值"><a href="#数组的解构赋值" class="headerlink" title="数组的解构赋值"></a>数组的解构赋值</h2><pre><code class="js">    // ES5        
    var a=1;
    var b=2;
    var c=3;

    // ES6
    let [d,e,f]=[4,5,6];
    console.log(d); // 4
    console.log(e); // 5
    console.log(f); // 6
</code></pre>
<pre><code class="js">    let [a,[[b],c]]=[1,[[2],3]];
    console.log(a); // 1
    console.log(b); // 2
    console.log(c); // 3

    let [ , , third]=[&quot;first&quot;, &quot;second&quot;, &quot;third&quot;];
    console.log(third); // third

    let [one, , three]=[&quot;one&quot;,&quot;two&quot;,&quot;three&quot;];
    console.log(one); // one
    console.log(three); // three

    let [head, ...more]=[1,2,3,4,5,6];
    console.log(head); // 1
    console.log(more); // [2, 3, 4, 5, 6]
</code></pre>
<pre><code class="js">    // 未成功解构赋值，变量为undefined
    let [num]=[];
    console.log(num); // undefined
</code></pre>
<p>不完全解构：等号左边的模式，只匹配一部分的等号右边的数组</p>
<pre><code class="js">    let [x,y]=[1,2,3];
    console.log(x); // 1
    console.log(y); // 2

    let [a, [b], c]=[1, [2, 3], 4];
    console.log(a); // 1
    console.log(b); // 2
    console.log(c); // 4
</code></pre>
<p>指定默认值：ES6内部使用严格相等运算符（===）判断一个位置是否有值。所以如果一个数组成员不严格等于<code>undefined</code>，默认值是不会生效的</p>
<pre><code class="js">    // 未成功解构赋值的情况下，使用默认值
    let [num=3]=[];
    console.log(num); // 3

    let [str1=&quot;qwe&quot;, str2]=[&quot;asd&quot;, &quot;zxc&quot;];
    console.log(str1); // asd
    console.log(str2); // zxc

    let [p, q=&quot;bbb&quot;]=[&quot;aaa&quot;, undefined]; // 为undefined等同于为空
    console.log(p); // aaa
    console.log(q); // bbb    
</code></pre>
<p>let和const：只要某种数据结构具有<code>Iterator</code>（迭代器）接口（可遍历），都可以采用数组形式的解构赋值</p>
<pre><code class="js">    // 能被解构的数据结构必须可迭代
    let [num]=1; // Uncaught TypeError: Invalid attempt to destructure non-iterable instance
    console.log(num);
</code></pre>
<pre><code class="js">    let [a,b,c]=new Set([&quot;a&quot;,&quot;b&quot;,&quot;c&quot;]);
    console.log(a); // a
    console.log(b); // b
    console.log(c); // c
</code></pre>
<pre><code class="js">    // fibs有Iterator接口
    function* fibs()&#123; // 斐波那契数列
        let a=0;
        let b=1;
        while(true)&#123;
            yield a;
            [a,b]=[b,a+b];
        &#125;
    &#125;

    let [first, second, third, fourth, fifth, sixth]=fibs();
    console.log(first); // 0
    console.log(second); // 1
    console.log(third); // 1
    console.log(fourth); // 2
    console.log(fifth); // 3
    console.log(sixth); // 5
</code></pre>
<h2 id="对象的解构赋值"><a href="#对象的解构赋值" class="headerlink" title="对象的解构赋值"></a>对象的解构赋值</h2><p>数组解构赋值时遵循一一对应的关系，而对象的属性没有顺序，变量名与属性同名，即可取到正确的值</p>
<pre><code class="js">    let &#123;name, age&#125;=&#123;age:18, name:&quot;Tom&quot;&#125;
    console.log(name); // Tom
    console.log(age); // 18
</code></pre>
<pre><code class="js">    // 属性值和变量名不匹配
    let &#123;age&#125;=&#123;age1:18&#125;
    console.log(age); // undefined
</code></pre>
<pre><code class="js">    // 左边有变量属性值，赋值给这个变量属性值
    let &#123;name:myName, age:myAge, id&#125;=&#123;name:&quot;Tom&quot;, age:18, id:&quot;001&quot;&#125;
    console.log(myName); // Tom
    console.log(myAge); // 18
    console.log(id); // 001
</code></pre>
<p>指定默认值：默认值生效的条件是，对象的属性值严格等于<code>undefined</code></p>
<pre><code class="js">    let &#123;curX=3, curY=4&#125;=&#123;curY:5&#125;
    console.log(curX); // 3 （默认值）
    console.log(curY); // 5 （解构赋值后，覆盖默认值）
</code></pre>
<pre><code class="js">    let &#123;message:msg=&quot;Hello&quot;, data:d=123&#125;=&#123;message:&quot;hi&quot;&#125;
    console.log(msg); // hi 
    console.log(d); // 123
</code></pre>
<pre><code class="js">    let &#123;a=1, b=2&#125;=&#123;a:undefined, b:null&#125;
    console.log(a); // 1
    console.log(b); // null （赋的值严格等于 undefined 才会使用默认值）
</code></pre>
<pre><code class="js">    let x;
    (&#123;x&#125;=&#123;x:123&#125;);
    console.log(x); // 123
</code></pre>
<p>现有对象的方法：对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量</p>
<pre><code class="js">    let &#123;sin, cos, tan, PI&#125;=Math;
    console.log(typeof sin); // function
    console.log(typeof cos); // function
    console.log(typeof tan); // function
    console.log(PI); // 3.141592653589793
</code></pre>
<h2 id="字符串的解构赋值"><a href="#字符串的解构赋值" class="headerlink" title="字符串的解构赋值"></a>字符串的解构赋值</h2><p>JavaScript中字符串和数组有很多相似的特性，比如都可迭代，获取字符串中某个字符也可以使用类似数组下标的方法：<code>&quot;abcdefg&quot;[2]</code>，字符串可看作是一种特殊形式的数组，所以字符串可以像数组一样解构赋值</p>
<p>字符串被解构赋值时，被转换成了一个类数组对象</p>
<pre><code class="js">    let [a, b, c, d, e]=&quot;Hello&quot;;
    console.log(a); // H
    console.log(b); // e 
    console.log(c); // l
    console.log(d); // l
    console.log(e); // o

    // 相当于：
    let [a, b, c, d, e]=[&quot;H&quot;,&quot;e&quot;,&quot;l&quot;,&quot;l&quot;,&quot;o&quot;];
    console.log(a); // H
    console.log(b); // e 
    console.log(c); // l
    console.log(d); // l
    console.log(e); // o    
</code></pre>
<p>属性解构赋值：<br>类数组对象都有一个<code>length</code>属性，还可以对这个属性解构赋值</p>
<pre><code class="js">    let &#123;length&#125;=&quot;Hello&quot;;
    console.log(length); // 5
</code></pre>
<h2 id="函数参数的解构赋值"><a href="#函数参数的解构赋值" class="headerlink" title="函数参数的解构赋值"></a>函数参数的解构赋值</h2><p>函数的参数也可以使用解构，参数的解构也可以使用默认值</p>
<pre><code class="js">    function sum([x,y])&#123;
        return x+y;
    &#125;
    console.log(sum([1,2])); // 3
</code></pre>
<pre><code class="js">    function fnn(&#123;x=0,y=0&#125;=&#123;&#125;)&#123; // 后边赋值一个空对象 &#123;&#125;，能避免直接调用而不传任何参数时报错：fnn();
    return [x,y]
    &#125;
    console.log(fnn(&#123;x:100, y:200&#125;)); // [100, 200]
    console.log(fnn(&#123;x:100&#125;)); // [100,0]
    console.log(fnn(&#123;&#125;)); // [0,0]
    console.log(fnn()); // [0,0]
</code></pre>
<pre><code class="js">    function fnn(&#123;x,y&#125;=&#123;x:0,y:0&#125;)&#123;
    return [x,y]
    &#125;
    console.log(fnn(&#123;x:100, y:200&#125;)); // [100, 200]
    console.log(fnn(&#123;x:100&#125;)); // [100, undefined]
    console.log(fnn(&#123;&#125;)); // [undefined, undefined]
    console.log(fnn()); // [0,0] （&#123;x:0,y:0&#125;作为整体默认值，什么都不传才会取默认值中的，否则都会取传入的对象中的）
</code></pre>
<h2 id="解构赋值的应用总结"><a href="#解构赋值的应用总结" class="headerlink" title="解构赋值的应用总结"></a>解构赋值的应用总结</h2><p><strong>交换变量的值</strong></p>
<p>用解构赋值的方式交换变量的值，不需要再引入中间变量，并且代码更加直观易读</p>
<pre><code class="js">    // ES5
    var a=100;
    var b=200;

    var other=a;
    a=b;
    b=other;

    console.log(a); // 200
    console.log(b); // 100


    // ES6
    let c=300;
    let d=400;

    [c,d]=[d,c];

    console.log(c); // 400
    console.log(d); // 300    
</code></pre>
<p><strong>获取从函数返回多个值</strong></p>
<p>函数一般只能返回一个值，若要返回一组值，返回值应为数组或对象形式。可用解构赋值的形式接收函数返回值</p>
<pre><code class="js">    function fnn1()&#123;
        return [1,2,3];
    &#125;
    let [x,y,z]=fnn1();


    function fnn2()&#123;
        return &#123;a:1, b:2, c:3&#125;
    &#125;
    let &#123;a,b&#125;=fnn2();
</code></pre>
<p><strong>函数参数的定义</strong></p>
<pre><code class="js">    // 参数有顺序
    function fnn1([x,y,z])&#123;
    // 
    &#125;
    fnn1([1,2,3]);


    // 参数无顺序
    function fnn2(&#123;x,y,z&#125;)&#123;
    console.log(x,y,z); // 4 5 6
    &#125;
    fnn2(&#123;x:4,z:6,y:5&#125;);
</code></pre>
<p><strong>提取json数据</strong></p>
<pre><code class="js">    let jsonData=&#123;
    id:&quot;001&quot;,
    name:&quot;Tom&quot;,
    age:18,
    scores:&#123;
        math:123,
        english:120,
    &#125;
    &#125;
    let &#123;name, age, scores&#125;=jsonData;
    console.log(name, age, scores);
</code></pre>
<p><strong>函数参数的默认值</strong></p>
<pre><code class="js">    function fnn(&#123;a=0,b=0&#125;=&#123;&#125;)&#123;
    console.log(a+b)
    &#125;
    fnn(&#123;a:1&#125;);
</code></pre>
<p><strong>遍历Map结构</strong></p>
<pre><code class="js">    let map1=new Map();
    map1.set(&quot;id&quot;,&quot;001&quot;);
    map1.set(&quot;name&quot;,&quot;Tom&quot;);

    for(let [key, value] of map1)&#123;
        console.log(key, value);
    &#125;
</code></pre>
<p><strong>输入模块的指定方法</strong></p>
<pre><code class="js">    import &#123;str,num&#125; from &quot;./module1.js&quot;;
    console.log(str);
    console.log(num);
</code></pre>
]]></content>
      <categories>
        <category>Web前端</category>
      </categories>
      <tags>
        <tag>ES6</tag>
      </tags>
  </entry>
  <entry>
    <title>Node.js实现简单爬虫</title>
    <url>/2018/03/16/Node-js%E5%AE%9E%E7%8E%B0%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB/</url>
    <content><![CDATA[<h2 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h2><p>浏览器可以向服务器发起请求，从服务器获取资源，之后经过解析渲染，可以在页面显示文字和图片等内容，我们通过浏览器查看源代码可以看到网页的DOM结构，在控制台也可以通过选择DOM获取到相关的信息和资源。使用爬虫爬取网页信息就是这个原理，只不过爬虫没有浏览器的图形界面，所以请求到数据后不需要解析渲染，直接保存到本地就行了。</p>
<span id="more"></span>
<h2 id="工具"><a href="#工具" class="headerlink" title="工具"></a>工具</h2><p>这里我们使用Node.js相关的两个工具，来实现一个简单爬虫，爬取<a href="https://movie.douban.com/top250">豆瓣电影 Top 250</a>中的数据</p>
<ul>
<li><a href="https://github.com/request/request">request</a>：可以发起请求来获取网页内容</li>
<li><a href="https://github.com/cheeriojs/cheerio">cheerio</a>：可以分析获取到的网页内容，使用类似于jQuery的方法进行DOM操作</li>
</ul>
<h2 id="步骤"><a href="#步骤" class="headerlink" title="步骤"></a>步骤</h2><h3 id="安装request和cheerio"><a href="#安装request和cheerio" class="headerlink" title="安装request和cheerio"></a>安装request和cheerio</h3><pre><code>    npm init
    npm install --save request cheerio
</code></pre><h3 id="使用request根据url发起请求，获取数据"><a href="#使用request根据url发起请求，获取数据" class="headerlink" title="使用request根据url发起请求，获取数据"></a>使用request根据url发起请求，获取数据</h3><pre><code class="js">    var request = require(&quot;request&quot;);
    var cheerio = require(&quot;cheerio&quot;);

    var url =&quot;https://movie.douban.com/top250&quot;;
    function moviesFromUrl(url)&#123;
        request(url, function(error, response, body)&#123;
            if(error === null &amp;&amp; response.statusCode == 200)&#123;
                console.log(body)                  
            &#125;else&#123;
                console.log(&quot;请求失败：&quot;,error);                                 
            &#125;
        &#125;);
    &#125;
    moviesFromUrl(url);
</code></pre>
<h3 id="使用cheerio解析数据"><a href="#使用cheerio解析数据" class="headerlink" title="使用cheerio解析数据"></a>使用cheerio解析数据</h3><pre><code class="js">    function Movie()&#123;
        this.name=&quot;&quot;;
        this.score=0;
        this.quote=&quot;&quot;;
        this.ranking=0;
        this.coverUrl=&quot;&quot;;
    &#125;
    function movieFromDiv(div) &#123;
        var movie=new Movie();
        var $=cheerio.load(div);

        movie.name=$(&quot;.title&quot;).text();
        movie.score = $(&quot;.rating_num&quot;).text();
        movie.quote=$(&quot;.inq&quot;).text();

        var pic=$(&quot;.pic&quot;);
        movie.ranking=pic.find(&quot;em&quot;).text();
        movie.coverUrl=pic.find(&quot;img&quot;).attr(&quot;src&quot;);
        return movie;
    &#125;
    var $=cheerio.load(body);
    var movies=[];
    var movieDivs=$(&quot;.item&quot;);
    for(var i=0;i&lt;movieDivs.length;i++)&#123;
        var div = $(movieDivs[i]).html();
        var m = movieFromDiv(div);
        movies.push(m);
    &#125;
    console.log(movies);
</code></pre>
<h3 id="使用fs模块保存数据"><a href="#使用fs模块保存数据" class="headerlink" title="使用fs模块保存数据"></a>使用fs模块保存数据</h3><pre><code class="js">    var fs=require(&quot;fs&quot;);
    function saveMovies(movies)&#123;
        var path =&quot;douban.txt&quot;;
        var str=JSON.stringify(movies, null, 4);
        fs.writeFile(path, str, function(error)&#123;
            if(error)&#123;
                console.log(&quot;写入文件错误：&quot;, error);
            &#125;else&#123;
                console.log(&quot;保存成功！&quot;);
            &#125;
        &#125;)
    &#125;
    saveMovies(movies);
</code></pre>
<p>进行到这里，获取到了url为 <a href="https://movie.douban.com/top250">https://movie.douban.com/top250</a> 时也就是第一页的数据，只有25条，但总的数据共有250条，共10页，浏览器中依次点击第2页、第3页…，url为 <a href="https://movie.douban.com/top250?start=n&amp;filter=">https://movie.douban.com/top250?start=n&amp;filter=</a> （n为25、50、75…），所以每请求一次后必须改变url获取下一页的数据，并且每次请求都是异步的，最后获取到的数据不是按照页数顺序排列下来的，所以还需要对数据排序整理一下。另外还要保存图片资源，下边是完整的代码</p>
<pre><code class="js">    &quot;use strict&quot;;

    var request = require(&quot;request&quot;);
    var cheerio = require(&quot;cheerio&quot;);
    var fs = require(&quot;fs&quot;);

    var moviesAll = []; // 所有页的数据
    var isFail = false; // 当前页是否失败
    var completePage = 0; // 总共完成页数    

    // 电影信息
    function Movie() &#123;
        this.name = &quot;&quot;;
        this.score = 0;
        this.quote = &quot;&quot;;
        this.ranking = 0;
        this.coverUrl = &quot;&quot;;
    &#125;

    // 从一个电影div里读取电影信息
    function movieFromDiv(div) &#123;
        var movie = new Movie();
        var $ = cheerio.load(div);

        // text()方法获取文本信息
        movie.name = $(&quot;.title&quot;).text(); // 两个.title的文本合并
        // movie.name=$(&quot;.hd a .title&quot;).eq(0).text(); // 只获取第一个.title的文本
        movie.score = $(&quot;.rating_num&quot;).text();
        movie.quote = $(&quot;.inq&quot;).text();

        var pic = $(&quot;.pic&quot;);
        movie.ranking = pic.find(&quot;em&quot;).text();
        movie.coverUrl = pic.find(&quot;img&quot;).attr(&quot;src&quot;);
        return movie;
    &#125;

    // 保存数据
    function saveMovies(movies) &#123;
        var path = &quot;douban.txt&quot;;
        // 第三个参数为缩进层次4个空格
        var str = JSON.stringify(movies, null, 4);

        fs.writeFile(path, str, function (error) &#123;
            if (error) &#123;
                console.log(&quot;写入文件错误：&quot;, error);
            &#125; else &#123;
                console.log(&quot;保存成功！&quot;);
            &#125;
        &#125;)
    &#125;

    // 按电影排名顺序进行排序
    function sortMovies(movies) &#123;
        movies.sort(function (a, b) &#123;
            return a.ranking - b.ranking;
        &#125;)
    &#125;

    // 保存封面图片
    function downloadCovers(movies)&#123;
        for(var i=0;i&lt;movies.length;i++)&#123;
            var m=movies[i];
            var url=m.coverUrl;
            var path=m.ranking + &quot;-&quot; + m.name.split(&quot;/&quot;)[0] + &quot;.jpg&quot;;

            request(url).pipe(fs.createWriteStream(path));
        &#125;
    &#125;    

    // 根据url获取电影信息
    function moviesFromUrl(url, page) &#123;
        // request方法从url下载数据，并调用回调函数
        // 回调函数三个参数为错误、响应、响应数据（该网页的源码字符串，和浏览器中查看网页源代码看到的是一样的）
        request(url, function (error, response, body) &#123;
            if (error === null &amp;&amp; response.statusCode == 200) &#123;
                // cheerio.load()方法参数为字符串，将其转换为对象，类似于jQuery对象（$），可调用相关方法
                var $ = cheerio.load(body);
                var movies = [];

                // 每一条电影信息所在的div.item
                var movieDivs = $(&quot;.item&quot;);
                for (var i = 0; i &lt; movieDivs.length; i++) &#123;
                    // 获取到每个div的html字符串，并用movieFromDiv解析
                    var div = $(movieDivs[i]).html();
                    var m = movieFromDiv(div);
                    movies.push(m);
                &#125;

                console.log(`第$&#123;page&#125;页获取成功`);
                moviesAll = moviesAll.concat(movies);
                completePage++;
                console.log(&quot;成功总页数：---&quot;, completePage);
                if (completePage === 10) &#123;
                    sortMovies(moviesAll);
                    saveMovies(moviesAll);
                &#125;

            &#125; else &#123;
                console.log(&quot;请求失败：&quot;, page + &quot;页&quot;, error);
                isFail = true;
            &#125;
        &#125;);
    &#125;

    function __main() &#123;
        for(var page=1;page&lt;=10;page++)&#123;
            if (!isFail) &#123;
                var url = &quot;https://movie.douban.com/top250?start=&quot; + (page-1)*25 + &quot;&amp;filter=&quot;
                moviesFromUrl(url, page);
            &#125; else &#123;
                break;
            &#125;        
        &#125;
    &#125;

    __main();
</code></pre>
<p>爬取到的数据最后保存在了douban.txt中：</p>
<p><img src="http://images-of-blog.test.upcdn.net/images/2018-03-20_010051-Nodejs%E5%AE%9E%E7%8E%B0%E7%AE%80%E5%8D%95%E7%88%AC%E8%99%AB.png" alt="douban.txt"></p>
<h2 id="爬取需要登录才能获取到的内容"><a href="#爬取需要登录才能获取到的内容" class="headerlink" title="爬取需要登录才能获取到的内容"></a>爬取需要登录才能获取到的内容</h2><p>有些数据我们在浏览器中直接打开网页是查看不了的，比如知乎中关注的人的列表、论坛中收藏的文章等，这种情况必须输入用户名、密码登录以后才能查看，要爬取这些数据，可以在上面方法的基础上通过模拟Cookie和User-Agent伪装登陆来实现。</p>
<p>传入request方法中的第一个参数不再是url了，而是包含url和请求头信息的options参数：</p>
<pre><code class="js">    var request = require(&quot;request&quot;);

    var url=&quot;urlStr&quot;;
    var cookie=&quot;cookieStr&quot;;
    var userAgent=&quot;userAgentStr&quot;;

    var headers=&#123;
        &quot;Cookie&quot;:cookie,
        &quot;User-Agent&quot;:userAgent
    &#125;

    var options=&#123;
        url:url,
        headers:headers
    &#125;

    request(options, function(error, response, body)&#123;
        if(error === null &amp;&amp; response.statusCode == 200)&#123;
            console.log(body);
            // do something
        &#125;else&#123;
            console.log(&quot;请求失败：&quot;, error);
        &#125;
    &#125;);
</code></pre>
]]></content>
      <categories>
        <category>Web前端</category>
      </categories>
      <tags>
        <tag>Node.js</tag>
        <tag>爬虫</tag>
      </tags>
  </entry>
  <entry>
    <title>Hexo、GitHub Pages搭建个人博客总结</title>
    <url>/2017/06/28/Hexo%E5%92%8CGitHub-Pages%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E6%80%BB%E7%BB%93/</url>
    <content><![CDATA[<p>使用Hexo和GitHub Pages搭建个人博客整个过程的总结记录。</p>
<span id="more"></span>
<h2 id="使用Hexo初始化博客"><a href="#使用Hexo初始化博客" class="headerlink" title="使用Hexo初始化博客"></a>使用Hexo初始化博客</h2><ol>
<li>安装 <a href="https://git-scm.com/downloads">Git</a> 和 <a href="https://nodejs.org/en/download/">Node</a></li>
<li><code>npm install -g hexo-cli</code>（全局安装 <a href="https://github.com/hexojs/hexo">Hexo</a> ）</li>
<li><code>hexo init myblog</code>（创建并初始化myblog文件夹，不加名字myblog则将当前目录作为博客目录初始化）</li>
<li><code>cd myblog</code>（进入到博客目录）</li>
<li><code>npm install</code>（安装package.json中的依赖项）</li>
<li><code>hexo server</code>（启动本地服务器）</li>
<li>浏览器打开 <a href="http://localhost:4000/">http://localhost:4000/</a> 看最初效果<!-- more -->
</li>
</ol>
<h2 id="站点配置文件（-config-yml）"><a href="#站点配置文件（-config-yml）" class="headerlink" title="站点配置文件（/_config.yml）"></a>站点配置文件（/_config.yml）</h2><pre><code class="yml"># Site
title: 博客名称
subtitle: 博客副标题
description: 站点描述的关键词，主要用于SEO
author: 作者名字
language: 博客语言，中文简体是zh-Hans
timezone: 时区，留空即可

# URL
url: 博客地址
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Pagination
per_page: 每页显示的文章数量
pagination_dir: page

# Extensions
theme: 使用的hexo主题，默认landscape，我这里用的next
</code></pre>
<h2 id="安装主题"><a href="#安装主题" class="headerlink" title="安装主题"></a>安装主题</h2><ol>
<li><code>cd themes</code>（进入到博客主题目录）</li>
<li><code>git clone https://github.com/iissnan/hexo-theme-next.git</code>（安装Next主题）</li>
<li>安装完成后，/themes中的hexo-theme-next文件夹就是next主题所在目录，将该文件夹名改为next，因为在/_config.yml配置文件中theme项值为next，也可改成其他名字但两者要一致</li>
<li><code>hexo server</code>，浏览器打开 <a href="http://localhost:4000/">http://localhost:4000/</a> ，博客样式就变为所安装主题的样式</li>
<li>以后若要更新主题，在/themes/next中执行<code>git pull</code>即可</li>
</ol>
<h2 id="主题配置文件（-themes-next-config-yml）"><a href="#主题配置文件（-themes-next-config-yml）" class="headerlink" title="主题配置文件（/themes/next/_config.yml）"></a>主题配置文件（/themes/next/_config.yml）</h2><pre><code class="yml">favicon: /uploads/favicon.ico（头像地址，如不存在uploads目录，新建即可）

keywords: 站点描述

since: 站点创建时间

menu: # 设置菜单
  home: /
  categories: /categories
  tags: /tags
  archives: /archives
  about: /about
  #search: /search
  #sitemap: /sitemap.xml
  #commonweal: /404.html

menu_icons: # 设置菜单图标，图标名字为Awesome图标名称
  enable: true
  home: home
  categories: th
  tags: tags
  archives: archive
  about: user
  search: search
  sitemap: sitemap
  commonweal: heartbeat
  schedule: calendar

social: # 设置社交链接
  LinkLabel: 
  GitHub: 
  Twitter: 
  Weibo: 

social_icons: # 设置社交链接图标
  enable: true
  GitHub: github
  Twitter: twitter
  Weibo: weibo

avatar: /uploads/avatar.jpeg # 侧边栏头像

auto_excerpt: # 设置显示更多时自动截取，也可在文章中通过&lt;!-- more --&gt;手动截断
  enable: true
  length: 150

highlight_theme: night # 代码高亮主题
</code></pre>
<h2 id="设置GitHub-Pages"><a href="#设置GitHub-Pages" class="headerlink" title="设置GitHub Pages"></a>设置GitHub Pages</h2><ol>
<li>在GitHub上创建名为username.github.io的仓库（username是GitHub中的用户名）</li>
<li><code>npm install --save hexo-deployer-git</code>（安装deploy插件）</li>
<li>编辑站点配置文件（/_config.yml）：<pre><code class="yml">deploy:
type: git
repository: 刚刚创建的GitHub仓库的地址，如git@github.com:username/username.github.io.git
branch: master
message: Site updated at &#123;&#123; now("YYYY-MM-DD HH:mm:ss") &#125;&#125; # 每次提交代码的描述信息（非必需）
</code></pre>
</li>
<li>分别执行<code>hexo clean</code>（清除缓存文件db.json和之前生成的public中的静态文件），<code>hexo generate</code>（生成静态文件到public文件夹），<code>hexo deploy</code>（根据/_config.yml中deploy的配置信息，将静态文件上传到GitHub）</li>
<li>浏览器打开 <a href="https://username.github.io/">https://username.github.io/</a> 查看博客</li>
</ol>
<h2 id="博客绑定域名"><a href="#博客绑定域名" class="headerlink" title="博客绑定域名"></a>博客绑定域名</h2><p>绑定个人域名可以让自己的博客地址更加简单好记，同时也方便使用网易云跟帖（网易云跟帖只支持主域名）：</p>
<h3 id="个人域名解析设置"><a href="#个人域名解析设置" class="headerlink" title="个人域名解析设置"></a>个人域名解析设置</h3><p>给个人域名添加三条解析记录：</p>
<table>
<thead>
<tr>
<th>记录类型</th>
<th>主机记录</th>
<th>解析线路</th>
<th>记录值</th>
<th>TTL</th>
</tr>
</thead>
<tbody>
<tr>
<td>CNAME</td>
<td>www</td>
<td>默认</td>
<td>username.github.io<br />（GitHub博客的地址）</td>
<td>10分钟（默认）</td>
</tr>
<tr>
<td>A</td>
<td>@</td>
<td>默认</td>
<td>192.30.252.153<br />（GItHub Pages服务器地址）</td>
<td>10分钟（默认）</td>
</tr>
<tr>
<td>A</td>
<td>@</td>
<td>默认</td>
<td>192.30.252.154<br />（GItHub Pages服务器地址）</td>
<td>10分钟（默认）</td>
</tr>
</tbody>
</table>
<p>记录类型中，CNAME表示重命名、指向一个域名，A表示指向一个IP。<br>主机记录表示前缀，@表示根域名。<br>第一条记录就是表示把<a href="http://www.aaaaa.com解析到username.github.io，第二条表示把aaaaa.com解析到192.30.252.153">www.aaaaa.com解析到username.github.io，第二条表示把aaaaa.com解析到192.30.252.153</a><br>因为我的域名是在万网购买的，所以以上操作是在阿里云域名控制台进行的，其他服务商购买的域名操作也是一样</p>
<h3 id="GitHub中添加CNAME"><a href="#GitHub中添加CNAME" class="headerlink" title="GitHub中添加CNAME"></a>GitHub中添加CNAME</h3><p>在/themes/next/source/中创建名为CNAME（必须为大写）文件，内容设置为购买的域名如aaaaa.com。<br>然后执行<code>hexo  generate -d</code>，浏览器访问 <a href="https://username.github.io">https://username.github.io</a> 时地址栏变为 aaaaa.com 表示绑定成功了<br>若/themes/next/source/CNAME内容设置为<a href="http://www.aaa.net，访问">www.aaa.net，访问</a> <a href="https://username.github.io">https://username.github.io</a> 浏览器中显示则是二级域名<a href="http://www.aaaaa.com">www.aaaaa.com</a></p>
<h2 id="配置站点地图sitemap"><a href="#配置站点地图sitemap" class="headerlink" title="配置站点地图sitemap"></a>配置站点地图sitemap</h2><ol>
<li>配置站点地图有利于搜索引擎抓取网站，有利于SEO，首先要安装谷歌和百度sitemap插件：<br><code>npm install --save hexo-generator-sitemap</code><br><code>npm install --save hexo-generator-baidu-sitemap</code></li>
<li>在站点配置文件中（/_config.yml）中添加：<pre><code class="yml">sitemap: 
path: sitemap.xml # 提交给谷歌搜索引擎
baidusitemap:
path: baidusitemap.xml # 提交给百度搜索引擎
</code></pre>
</li>
<li>/themes/next/source/中添加robots.txt文件（网络爬虫排除标准），内容为：<pre><code class="yml">User-agent: *
Allow: /
Allow: /archives/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Sitemap: http://aaaaa.com/sitemap.xml
Sitemap: http://aaaaa.com/baidusitemap.xml
</code></pre>
这样每次执行<code>hexo generate</code>编译成页面静态文件时也会在public目录中生成sitemap.xml、baidusitemap.xml、和robots.txt</li>
</ol>
<h2 id="添加本地搜索功能"><a href="#添加本地搜索功能" class="headerlink" title="添加本地搜索功能"></a>添加本地搜索功能</h2><p><code>npm install --save hexo-generator-searchdb</code>（安装本地搜索插件）<br>站点配置文件（/_config.yml）：</p>
<pre><code class="yml">search:
  path: search.xml
  field: post
  format: html
  limit: 10000
</code></pre>
<p>主题配置文件（/themes/next/_config.yml）：</p>
<pre><code>local_search:
  enable: true
</code></pre><p>添加本地搜索功能后，主题配置文件中不需要配置搜索页（search: /search）</p>
<h2 id="Hexo常用命令"><a href="#Hexo常用命令" class="headerlink" title="Hexo常用命令"></a>Hexo常用命令</h2><ul>
<li><code>hexo new page pagename</code>（/source/中创建pagename文件夹，并在其中创建index.md）</li>
<li><code>hexo new articlename</code>（/source/中创建articlename.md）</li>
<li><code>hexo server --debug</code>（以调试模式开启静态服务器）</li>
<li><code>hexo clean</code>（清除缓存文件db.json和之前生成的public中的静态文件）</li>
<li><code>hexo generate</code>（或hexo g，生成静态文件到public目录中）</li>
<li><code>hexo deploy</code>（或hexo d，提交public中静态文件到GitHub）</li>
<li><code>hexo generate -deploy</code>（或hexo g -d，生成+部署）</li>
</ul>
<h2 id="将文章底部标签前的-替换为Awesome图标"><a href="#将文章底部标签前的-替换为Awesome图标" class="headerlink" title="将文章底部标签前的#替换为Awesome图标"></a>将文章底部标签前的#替换为Awesome图标</h2><p>将/themes/next/layout/_macro/post.swig中rel=”tag”&gt;后边的#替换为<code>&lt;i class=&quot;fa fa-tag&quot;&gt;&lt;/i&gt;</code>，保存即可变为<i class="fa fa-tag"></i></p>
<h2 id="禁止hexo渲染文件"><a href="#禁止hexo渲染文件" class="headerlink" title="禁止hexo渲染文件"></a>禁止hexo渲染文件</h2><p>默认情况下hexo会将source目录中的所有md文件解析渲染成html文件，有时我们保留md文件不被解析，可以设置_config.yml中的skip_render选项，skip_render设置的文件相对于source目录：</p>
<pre><code class="yml">skip_render: 
  - README.md
  - 404.html
  - robots.txt
  - aaa/*（source/aaa目录中的所有文件都不会被解析）
</code></pre>
<h2 id="Markdown主要语法"><a href="#Markdown主要语法" class="headerlink" title="Markdown主要语法"></a>Markdown主要语法</h2><p>Markdown是一种轻量级的标记语言，使用它撰写文章，我们只需要专注于内容的创作，不再需要担心排版的问题。它简单易学，掌握之后可以很大程度的提高效率、节约时间。下面是Markdown的主要语法：</p>
<h3 id="标题（h1-h6）"><a href="#标题（h1-h6）" class="headerlink" title="标题（h1-h6）"></a>标题（h1-h6）</h3><p># 一级标题名<br>## 二级标题名<br>…<br>###### 六级标题名</p>
<h3 id="无序列表（ul）"><a href="#无序列表（ul）" class="headerlink" title="无序列表（ul）"></a>无序列表（ul）</h3><p>- 项目名1<br>- 项目名2</p>
<h3 id="有序列表（ol）"><a href="#有序列表（ol）" class="headerlink" title="有序列表（ol）"></a>有序列表（ol）</h3><p>&nbsp;1. 项目名1<br>&nbsp;2. 项目名2</p>
<h3 id="分割线（hr）"><a href="#分割线（hr）" class="headerlink" title="分割线（hr）"></a>分割线（hr）</h3><p>***</p>
<h3 id="插入引用（blockquote）"><a href="#插入引用（blockquote）" class="headerlink" title="插入引用（blockquote）"></a>插入引用（blockquote）</h3><p>> 引用的句子<br>> 引用的句子<br>> 引用的句子</p>
<h3 id="插入链接（a）"><a href="#插入链接（a）" class="headerlink" title="插入链接（a）"></a>插入链接（a）</h3><p>[百度](<a href="https://www.baidu.com\">https://www.baidu.com\</a>)</p>
<p>渲染结果：</p>
<p><a href="https://www.baidu.com">百度</a></p>
<h3 id="插入图片（img）"><a href="#插入图片（img）" class="headerlink" title="插入图片（img）"></a>插入图片（img）</h3><p>语法和插入链接类似，只不过前边要加一个<code>!</code></p>
<p>![图片标签alt属性值](图片url)</p>
<h3 id="插入锚点链接"><a href="#插入锚点链接" class="headerlink" title="插入锚点链接"></a>插入锚点链接</h3><p>[点击跳到详情部分](#details)</p>
<p><code>详情部分&lt;a name=&quot;details&quot;&gt;&amp;nbsp;&lt;/a&gt;</code></p>
<p>渲染结果：</p>
<p><a href="#details">点击跳到详情部分</a></p>
<p>详情部分<a name="details">&nbsp;</a></p>
<h3 id="斜体（em）"><a href="#斜体（em）" class="headerlink" title="斜体（em）"></a>斜体（em）</h3><p>*文字*</p>
<p>渲染结果：<em>文字</em></p>
<h3 id="粗体（strong）"><a href="#粗体（strong）" class="headerlink" title="粗体（strong）"></a>粗体（strong）</h3><p>**文字**</p>
<p>渲染结果：<strong>粗体</strong></p>
<h3 id="粗斜体（strong中嵌套em）"><a href="#粗斜体（strong中嵌套em）" class="headerlink" title="粗斜体（strong中嵌套em）"></a>粗斜体（strong中嵌套em）</h3><p>***文字***</p>
<p>渲染结果：<strong><em>文字</em></strong></p>
<h3 id="设置行内代码格式（code）"><a href="#设置行内代码格式（code）" class="headerlink" title="设置行内代码格式（code）"></a>设置行内代码格式（code）</h3><p>`hexo clean`</p>
<p>渲染结果：<code>hexo clean</code></p>
<h3 id="设置整段代码格式（pre中嵌套code）"><a href="#设置整段代码格式（pre中嵌套code）" class="headerlink" title="设置整段代码格式（pre中嵌套code）"></a>设置整段代码格式（pre中嵌套code）</h3><p>```javascript<br>&nbsp;&nbsp;var a=1;<br>&nbsp;&nbsp;console.log(a);<br>```</p>
<p>渲染结果：</p>
<pre><code class="javascript">  var a=1;
  console.log(a);
</code></pre>
<h3 id="插入表格（table）："><a href="#插入表格（table）：" class="headerlink" title="插入表格（table）："></a>插入表格（table）：</h3><p>| 学生的姓名 | 学生的性别 | 学生的年龄 |<br>| ------ | :------: | ------: |<br>| 张三 | 男 | 16 |<br>| 李四 | 女 | 17 |</p>
<p>渲染结果：</p>
<table>
<thead>
<tr>
<th>学生的姓名</th>
<th style="text-align:center">学生的性别</th>
<th style="text-align:right">学生的年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td style="text-align:center">男</td>
<td style="text-align:right">16</td>
</tr>
<tr>
<td>李四</td>
<td style="text-align:center">女</td>
<td style="text-align:right">17</td>
</tr>
</tbody>
</table>
<p>注：两个竖线<code>|</code>之间的部分表示一个单元格。第一行是表头，第二行用多个<code>-</code>和<code>:</code>确定单元格中文字对齐方式，不加<code>:</code>或左边加<code>:</code>表示左对齐，两边加<code>:</code>表示居中对齐，右边加<code>:</code>表示右对齐。第二行每个单元格中不要只写一个<code>-</code>，有时可能不会正常解析，建议最少三个。</p>
<p>许多站点的在线Markdown编辑器支持直接编写html代码，如掘金、GitHub等，有些则不支持。</p>
<p>一款开源的在线Markdown编辑器：<a href="https://github.com/joemccann/dillinger">dillinger</a></p>
]]></content>
      <categories>
        <category>Web前端</category>
      </categories>
      <tags>
        <tag>Hexo</tag>
        <tag>GitHub</tag>
      </tags>
  </entry>
  <entry>
    <title>Vue.js常见用法</title>
    <url>/2017/11/26/Vue-js%E5%B8%B8%E8%A7%81%E7%94%A8%E6%B3%95/</url>
    <content><![CDATA[<p>本文按照Vue.js官方文档中的介绍顺序，结合具体的实例代码，对Vue.js的常见用法做一个简单的总结。</p>
<span id="more"></span>
<h2 id="数据绑定"><a href="#数据绑定" class="headerlink" title="数据绑定"></a>数据绑定</h2><p>vue通过v-bind指令将数据绑定给html元素的属性。<br>如：</p>
<pre><code class="html">
    &lt;style&gt;
        .redFont&#123;
            color: red;
        &#125;
        .blueFont&#123;
            color: blue;
        &#125;
        .yellowFont&#123;
            color: yellow;
        &#125;
    &lt;/style&gt; 
    &lt;div id=&quot;app&quot;&gt;
        &lt;div v-bind:class=&quot;red&quot;&gt;红字&lt;/div&gt;
        &lt;div v-bind:class=&quot;&#39;blueFont&#39;&quot;&gt;蓝字&lt;/div&gt;
        &lt;div class=&quot;yellowFont&quot;&gt;黄字&lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var app=new Vue(&#123;
            el:&quot;#app&quot;,
            data:&#123;
                red:&quot;redFont&quot;
            &#125;
        &#125;);
    &lt;/script&gt;

</code></pre>
<p>通过v-model指令进行view和model数据的双向绑定。<br>如：</p>
<pre><code class="html">    &lt;div id=&quot;app&quot;&gt;
        &lt;div&gt;&#123;&#123;title&#125;&#125;&lt;/div&gt;

        &lt;!-- 使用v-once指令data中的数据只会绑定一次到view中 --&gt;
        &lt;div v-once&gt;&#123;&#123;title&#125;&#125;&lt;/div&gt;

        &lt;!-- v-model指令将data中的数据绑定到input的value属性，input的value属性改变后数据又会更新到data中 --&gt;
        &lt;input type=&quot;text&quot; v-model=&quot;title&quot; v-on:input=&quot;iptChange&quot;&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var app=new Vue(&#123;
            el:&quot;#app&quot;,
            data:&#123;
                title:&quot;123&quot;
            &#125;,
            methods: &#123;
                iptChange:function()&#123;
                    console.log(123);
                &#125;
            &#125;
        &#125;);
    &lt;/script&gt;
</code></pre>
<p>使用v-text指令绑定数据的文本形式，使用v-html指令绑定数据的html形式：</p>
<pre><code class="html">    &lt;div id=&quot;app&quot;&gt;
        &lt;!-- div中为span的文本形式（默认） --&gt;
        &lt;div&gt;&#123;&#123;content&#125;&#125;&lt;/div&gt;

        &lt;!-- div中为span的文本形式（绑定数据的text形式） --&gt;
        &lt;div v-text=&quot;content&quot;&gt;&lt;/div&gt;

        &lt;!-- div中为span的html标签形式（绑定数据的html形式） --&gt;
        &lt;div v-html=&quot;content&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var app=new Vue(&#123;
            el:&quot;#app&quot;,
            data:&#123;
                content:&quot;&lt;span style=&#39;color:red;&#39;&gt;123123123&lt;/span&gt;&quot;
            &#125;
        &#125;);
    &lt;/script&gt;
</code></pre>
<p>vue数据绑定中支持javascript表达式：</p>
<pre><code class="html">    &lt;style&gt;
        .font1&#123;
            color: red;
        &#125;
        .font2&#123;
            color: blue;
        &#125;
    &lt;/style&gt; 
    &lt;div id=&quot;app&quot;&gt;
        &lt;!-- 红色 --&gt;
        &lt;div v-bind:class=&quot;&#39;font&#39;+num1&quot;&gt;123&lt;/div&gt;
        &lt;!-- 蓝色 --&gt;
        &lt;div v-bind:class=&quot;&#39;font&#39;+num2&quot;&gt;123&lt;/div&gt;

        &lt;div&gt;选中的radio的值为：&#123;&#123;radioVal&#125;&#125;&lt;/div&gt;
        &lt;input type=&quot;radio&quot; v-model=&quot;radioVal&quot; value=&quot;1&quot;/&gt;1
        &lt;input type=&quot;radio&quot; v-model=&quot;radioVal&quot; value=&quot;2&quot;/&gt;2
    &lt;/div&gt;
    &lt;script&gt;
        var app=new Vue(&#123;
            el:&quot;#app&quot;,
            data:&#123;
                num1:1,
                num2:2,
                radioVal:1
            &#125;
        &#125;);
    &lt;/script&gt;
</code></pre>
<h2 id="计算属性和观察者"><a href="#计算属性和观察者" class="headerlink" title="计算属性和观察者"></a>计算属性和观察者</h2><p>计算属性computed适合复杂逻辑的计算：</p>
<pre><code class="html">    &lt;div id=&quot;app&quot;&gt;
        &lt;input type=&quot;number&quot; v-model=&quot;num1&quot;&gt;+&lt;input type=&quot;number&quot; v-model=&quot;num2&quot;&gt;=&#123;&#123;sum&#125;&#125;
    &lt;/div&gt;
    &lt;script&gt;
        var app=new Vue(&#123;
            el:&quot;#app&quot;,
            data:&#123;
                num1:1,
                num2:2,
            &#125;,
            computed: &#123;
                sum () &#123;
                    return Number(this.num1)+Number(this.num2);
                &#125;
            &#125;
        &#125;);
    &lt;/script&gt;
</code></pre>
<p>计算属性和方法的区别：计算属性基于依赖进行缓存，依赖改变时才会重新求值。而方法调用时总会执行。</p>
<p>watch用来监听属性值的变化：</p>
<pre><code class="html">    &lt;script&gt;
        var app=new Vue(&#123;
            el:&quot;#app&quot;,
            data:&#123;
                title:&quot;&quot;
            &#125;,
            watch:&#123;
                title:_.debounce(function(newVal,oldVal)&#123;
                    console.log(&quot;newVal&quot;,newVal);
                    console.log(&quot;oldVal&quot;,oldVal);
                    // 根据newVal从后台请求数据，每次变化都会请求一次，请求次数过多，使用lodash中的debounce方法控制请求频率                  
                &#125;,2000)
            &#125;
        &#125;);
    &lt;/script&gt;
</code></pre>
<h2 id="Class与Style绑定"><a href="#Class与Style绑定" class="headerlink" title="Class与Style绑定"></a>Class与Style绑定</h2><p>可通过对象、数组、表达式的方式控制class属性：</p>
<pre><code class="html">    &lt;style&gt;
        .redFont&#123;
            color: red;
        &#125;
        .greenFont&#123;
            color: green;
        &#125;
        .boldFont&#123;
            font-weight: bold;
        &#125;
    &lt;/style&gt; 
    &lt;div id=&quot;app&quot;&gt;
        &lt;!-- object控制 --&gt;
        &lt;div v-bind:class=&quot;&#123;redFont:true&#125;&quot;&gt;红色&lt;/div&gt;
        &lt;div v-bind:class=&quot;&#123;redFont:false,boldFont:true&#125;&quot;&gt;黑色粗体&lt;/div&gt;
        &lt;div v-bind:class=&quot;classData1&quot;&gt;红色粗体&lt;/div&gt;

        &lt;!-- array控制 --&gt;
        &lt;div v-bind:class=&quot;[&#39;redFont&#39;,&#39;boldFont&#39;]&quot;&gt;红色粗体&lt;/div&gt;
        &lt;div v-bind:class=&quot;[redFont,boldFont]&quot;&gt;红色粗体&lt;/div&gt;

        &lt;!-- 表达式控制 --&gt;
        &lt;ul&gt;
            &lt;li v-for=&quot;(item,index) in listData&quot;&gt;
                &lt;span v-bind:class=&quot;item.status?&#39;greenFont&#39;:&#39;redFont&#39;&quot;&gt;&#123;&#123;index&#125;&#125;---&#123;&#123;item.name&#125;&#125;---&#123;&#123;item.status&#125;&#125;&lt;/span&gt;
                &lt;button v-on:click=&quot;item.status=false&quot; v-if=&quot;item.status&quot;&gt;变红&lt;/button&gt;
                &lt;button v-on:click=&quot;item.status=true&quot; v-if=&quot;!item.status&quot;&gt;变绿&lt;/button&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
</code></pre>
<p>使用v-bind绑定的class会叠加到html元素原来的class属性上。</p>
<p>style的控制和class类似：</p>
<pre><code class="html">    &lt;div id=&quot;app&quot;&gt;
        &lt;div v-bind:style=&quot;&#123;color:&#39;red&#39;,fontSize:fSize,&#39;font-weight&#39;:&#39;bold&#39;&#125;&quot;&gt;123123&lt;/div&gt;
        &lt;div v-bind:style=&quot;style&quot;&gt;123123&lt;/div&gt;
        &lt;div v-bind:style=&quot;[styleObj]&quot;&gt;123123&lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var app=new Vue(&#123;
            el:&quot;#app&quot;,
            data:&#123;
                fSize:&quot;20px&quot;,
                style:&#123;
                    &quot;font-size&quot;:&quot;16px&quot;,
                    &quot;color&quot;:&quot;blue&quot;
                &#125;,
                styleObj:&#123;
                    &quot;font-size&quot;:&quot;16px&quot;,
                    &quot;color&quot;:&quot;blue&quot;                    
                &#125;
            &#125;
        &#125;);
    &lt;/script&gt;
</code></pre>
<h2 id="条件渲染"><a href="#条件渲染" class="headerlink" title="条件渲染"></a>条件渲染</h2><p>使用v-if和v-show根据条件渲染，区别：v-if支持v-else-if、v-else一同书写。v-if是DOM元素的添加和移除，若一开始条件不满足v-if控制的元素不会渲染，适合条件不常改变时控制。v-show是控制元素的display属性，不管一开始是否满足条件元素都会被渲染，适合元素需要频繁切换显示隐藏的情况。</p>
<h2 id="列表渲染"><a href="#列表渲染" class="headerlink" title="列表渲染"></a>列表渲染</h2><p>使用v-for遍历对象和数组：</p>
<pre><code class="html">    &lt;div id=&quot;app&quot;&gt;
        &lt;ul&gt;
            &lt;li v-for=&quot;(item,index) in userList&quot;&gt;
                &#123;&#123;index&#125;&#125;--&#123;&#123;item.name&#125;&#125;--&#123;&#123;item.age&#125;&#125;
            &lt;/li&gt;
        &lt;/ul&gt;

        &lt;div v-for=&quot;(value,key,index) in objData&quot;&gt;
            &#123;&#123;index&#125;&#125;--&#123;&#123;key&#125;&#125;--&#123;&#123;value&#125;&#125;
        &lt;/div&gt;

        &lt;!-- 遍历出1-5 --&gt;
        &lt;div v-for=&quot;val in 5&quot;&gt;
            &#123;&#123;val&#125;&#125;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var app=new Vue(&#123;
            el:&quot;#app&quot;,
            data:&#123;
                userList:[
                    &#123;name:&quot;zhangsan&quot;,age:12&#125;,
                    &#123;name:&quot;lisi&quot;,age:15&#125;
                ],
                objData:&#123;
                    name:&quot;zhangsan&quot;,
                    age:18,
                    sex:&quot;man&quot;
                &#125;
            &#125;
        &#125;);
    &lt;/script&gt;
</code></pre>
<h2 id="事件处理"><a href="#事件处理" class="headerlink" title="事件处理"></a>事件处理</h2><pre><code class="html">    &lt;div id=&quot;app&quot;&gt;
        &lt;!-- 不传参可省略调用函数时的括号 --&gt;
        &lt;!-- 事件绑定使用较频繁，vue中事件绑定可简写为@事件名=&quot;eventHandler --&gt;
        &lt;button v-on:click=&quot;clickEvent&quot;&gt;单击事件&lt;/button&gt;
        &lt;button @dblclick=&quot;dblClickEvent&quot;&gt;双击事件&lt;/button&gt;
        &lt;hr /&gt;

        &lt;!-- 传入$event时，也可以传入其他参数 --&gt;
        &lt;form action=&quot;&quot; @submit=&quot;submitFn1(1,$event,2)&quot;&gt;
            &lt;button&gt;传入$event阻止默认行为&lt;/button&gt;
        &lt;/form&gt;
        &lt;!-- 也可以用prevent修饰符阻止默认事件（不需要再传$event） --&gt;
        &lt;form action=&quot;&quot; @submit.prevent=&quot;submitFn2()&quot;&gt;
            &lt;button&gt;使用prevent阻止默认行为&lt;/button&gt;
        &lt;/form&gt;
        &lt;hr /&gt;

        &lt;div v-on:click=&quot;aParentClick()&quot; v-bind:style=&quot;&#123;border:&#39;1px solid red&#39;,width:&#39;500px&#39;&#125;&quot;&gt;
            &lt;!-- 点击事件会冒泡到父元素 --&gt;
            &lt;a href=&quot;http://www.baidu.com&quot; v-on:click.prevent=&quot;aClick()&quot;&gt;没阻止冒泡&lt;/a&gt;

            &lt;!-- stop修饰符阻止事件冒泡 --&gt;
            &lt;a href=&quot;http://www.baidu.com&quot; v-on:click.prevent.stop=&quot;aClick()&quot;&gt;stop修饰符阻止冒泡&lt;/a&gt;
        &lt;/div&gt;

        &lt;div v-on:click.self=&quot;aParentClick()&quot; v-bind:style=&quot;&#123;border:&#39;1px solid red&#39;,width:&#39;500px&#39;&#125;&quot;&gt;
            &lt;!-- 使用了self，只有自身才会触发，a没有阻止冒泡也不会触发父元素事件 --&gt;
            &lt;a href=&quot;http://www.baidu.com&quot; v-on:click.prevent=&quot;aClick()&quot;&gt;父元素使用self&lt;/a&gt;
        &lt;/div&gt;        

        &lt;div v-on:click.capture=&quot;aParentClick()&quot; v-bind:style=&quot;&#123;border:&#39;1px solid red&#39;,width:&#39;500px&#39;&#125;&quot;&gt;
            &lt;!-- capture修饰符：使用捕获事件 --&gt;
            &lt;a href=&quot;http://www.baidu.com&quot; v-on:click.prevent=&quot;aClick()&quot;&gt;父元素使用capture&lt;/a&gt;
        &lt;/div&gt;   
        &lt;hr /&gt;     

        &lt;button v-on:click.prevent.once=&quot;aClick()&quot;&gt;once修饰符只绑定一次事件&lt;/button&gt;


    &lt;/div&gt;
    &lt;script&gt;
        var app=new Vue(&#123;
            el:&quot;#app&quot;,
            data:&#123;

            &#125;,
            computed: &#123;

            &#125;,
            methods:&#123;
                clickEvent:function()&#123;
                    console.log(&quot;单击&quot;);
                &#125;,
                dblClickEvent:function()&#123;
                    console.log(&quot;双击&quot;);
                &#125;,
                submitFn1:function(otherParam1,event,otherParam2)&#123;
                    event.preventDefault();
                    console.log(123);
                &#125;,
                submitFn2:function()&#123;
                    console.log(456);
                &#125;,

                aClick:function()&#123;
                    console.log(&quot;点击a&quot;);
                &#125;,
                aParentClick:function()&#123;
                    console.log(&quot;点击a的父元素&quot;);
                &#125;

            &#125;
        &#125;);
    &lt;/script&gt;
</code></pre>
<p>鼠标修饰符：</p>
<pre><code class="html">    &lt;div id=&quot;app&quot;&gt;
        &lt;div v-bind:style=&quot;divStyle&quot; v-on:click.left=&quot;clickEvent&quot;&gt;左键&lt;/div&gt;
        &lt;div v-bind:style=&quot;divStyle&quot; v-on:contextmenu.prevent=&quot;clickEvent&quot;&gt;右键&lt;/div&gt;

    &lt;/div&gt;
    &lt;script&gt;
        var app=new Vue(&#123;
            el:&quot;#app&quot;,
            data:&#123;
                divStyle:&#123;border:&#39;1px solid red&#39;,width:&#39;300px&#39;,height:&#39;50px&#39;&#125;
            &#125;,
            computed: &#123;

            &#125;,
            methods:&#123;
                clickEvent:function()&#123;
                    console.log(123);
                &#125;
            &#125;
        &#125;);
    &lt;/script&gt;
</code></pre>
<h2 id="表单输入绑定"><a href="#表单输入绑定" class="headerlink" title="表单输入绑定"></a>表单输入绑定</h2><pre><code class="html">    &lt;div id=&quot;app&quot;&gt;
        姓名：&lt;input type=&quot;text&quot; v-model=&quot;nameVal&quot; /&gt;&lt;br /&gt;
        邮箱：&lt;input type=&quot;text&quot; v-model=&quot;emailVal&quot; /&gt;&lt;br /&gt; 
        留言：&lt;textarea v-model=&quot;textareaVal&quot;&gt;&lt;/textarea&gt;&lt;br /&gt; 
        &lt;hr /&gt;


        &#123;&#123;ck1&#125;&#125;&lt;br /&gt;
        &lt;label for=&quot;ck1&quot;&gt;&lt;input type=&quot;checkbox&quot; v-model=&quot;ck1&quot; id=&quot;ck1&quot; /&gt;checkbox&lt;/label&gt;&lt;br /&gt; 
        &lt;hr /&gt;


        爱好：&#123;&#123;likeData&#125;&#125;&lt;br /&gt;
        &lt;input type=&quot;checkbox&quot; name=&quot;like&quot; v-model=&quot;likeData&quot; value=&quot;读书&quot;&gt;读书
        &lt;input type=&quot;checkbox&quot; name=&quot;like&quot; v-model=&quot;likeData&quot; value=&quot;打球&quot;&gt;打球
        &lt;input type=&quot;checkbox&quot; name=&quot;like&quot; v-model=&quot;likeData&quot; value=&quot;看电影&quot;&gt;看电影
        &lt;hr /&gt;


        爱好（动态绑定）：&#123;&#123;likeData1&#125;&#125;&lt;br /&gt;
        &lt;!-- 单选款动态绑定和此类似 --&gt;
        &lt;div v-for=&quot;(item,index) in lData&quot;&gt;
            &lt;input type=&quot;checkbox&quot; name=&quot;like1&quot; v-model=&quot;likeData1&quot; v-bind:value=&quot;item.val&quot;&gt;&#123;&#123;item.title&#125;&#125;
        &lt;/div&gt;
        &lt;hr /&gt;        


        性别：&#123;&#123;sex&#125;&#125;&lt;br /&gt;
        &lt;input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;male&quot; v-model=&quot;sex&quot; /&gt;男
        &lt;input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;female&quot; v-model=&quot;sex&quot; /&gt;女
        &lt;hr /&gt;

        城市：&#123;&#123;city&#125;&#125;&lt;br /&gt;
        &lt;select v-model=&quot;city&quot;&gt;
            &lt;option value=&quot;&quot; selected=&quot;selected&quot;&gt;---选择城市---&lt;/option&gt;
            &lt;option v-for=&quot;(item,index) in cityData&quot; v-bind:value=&quot;item.key&quot;&gt;&#123;&#123;item.name&#125;&#125;&lt;/option&gt;
        &lt;/select&gt;

        &lt;select multiple size=&quot;3&quot;&gt;
            &lt;option value=&quot;&quot; selected=&quot;selected&quot;&gt;---select---&lt;/option&gt;
            &lt;option value=&quot;1&quot;&gt;a&lt;/option&gt;
            &lt;option value=&quot;2&quot;&gt;b&lt;/option&gt;
            &lt;option value=&quot;3&quot;&gt;c&lt;/option&gt;
            &lt;option value=&quot;4&quot;&gt;d&lt;/option&gt;
        &lt;/select&gt;


    &lt;/div&gt;
    &lt;script&gt;
        var app = new Vue(&#123;
            el: &quot;#app&quot;,
            data: &#123;
                emailVal: &quot;123@123.com&quot;,
                nameVal: &quot;zhangsan&quot;,
                textareaVal: &quot;留言内容&quot;,
                ck1: true,
                likeData: [],

                likeData1:[],
                lData:[
                    &#123;val:&quot;读书&quot;,title:&quot;读书&quot;&#125;,
                    &#123;val:&quot;打球&quot;,title:&quot;打球&quot;&#125;,
                    &#123;val:&quot;看电影&quot;,title:&quot;看电影&quot;&#125;
                ],

                sex:&quot;&quot;,
                city:&quot;&quot;,
                cityData:[
                    &#123;key:&quot;bj&quot;,name:&quot;北京&quot;&#125;,
                    &#123;key:&quot;sh&quot;,name:&quot;上海&quot;&#125;,
                    &#123;key:&quot;gz&quot;,name:&quot;广州&quot;&#125;
                ]
            &#125;,
            computed: &#123;

            &#125;,
            methods: &#123;
                clickEvent: function () &#123;
                    console.log(123);
                &#125;
            &#125;
        &#125;);
    &lt;/script&gt;
</code></pre>
<p>表单修饰符：number修饰符绑定Number类型、 trim修饰符去空格、lazy修饰符让失去焦点后view中的值才会更新到model</p>
<h2 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h2><p>组件定义方法：</p>
<pre><code class="html">    &lt;div id=&quot;app&quot;&gt;
            &lt;div-component&gt;&lt;/div-component&gt;
            &lt;div-component&gt;&lt;/div-component&gt;

            &lt;p-component&gt;&lt;/p-component&gt;

            &lt;a-component&gt;&lt;/a-component&gt;
    &lt;/div&gt;
    &lt;script&gt;
        // 定义全局组件：
        Vue.component(&quot;divComponent&quot;,&#123;
            template:&quot;&lt;div&gt;div内容&lt;/div&gt;&quot;
        &#125;);

        // 定义局部组件：
        var aComponent=&#123;
            template:&quot;&lt;a href=&#39;#1&#39;&gt;a内容&lt;/a&gt;&quot;
        &#125;
        var app = new Vue(&#123;
            el: &quot;#app&quot;,
            components:&#123;
                aComponent:aComponent,

                // 定义局部组件：
                pComponent:&#123;
                    template:&quot;&lt;p&gt;p内容&lt;/p&gt;&quot;
                &#125;
            &#125;
        &#125;);
    &lt;/script&gt;
</code></pre>
<p>子组件使用props声明要接收的数据：</p>
<pre><code class="html">    &lt;div id=&quot;app&quot;&gt;
        &lt;user-info-component name-data=&quot;张三&quot; age=&quot;12+1&quot; otherdata=&quot;fromParCompData&quot;&gt;&lt;/user-info-component&gt;
        &lt;!-- 
            渲染结果为：
            姓名：张三
            年龄：12+1
            其他：fromParCompData            
         --&gt;
        &lt;user-info-component name-data=&quot;李四&quot; v-bind:age=&quot;14+1&quot; v-bind:otherdata=&quot;fromParCompData&quot;&gt;&lt;/user-info-component&gt;
        &lt;!-- 
            渲染结果为：
            姓名：李四
            年龄：15
            其他：来自父组件的数据      
         --&gt;        
    &lt;/div&gt;

    &lt;script type=&quot;text/x-template&quot; id=&quot;userInfoCompTemplate&quot;&gt;
        &lt;div&gt;
            &lt;p&gt;姓名：&#123;&#123;nameData&#125;&#125;&lt;/p&gt;
            &lt;p&gt;年龄：&#123;&#123;age&#125;&#125;&lt;/p&gt;
            &lt;p&gt;其他：&#123;&#123;otherdata&#125;&#125;&lt;/p&gt;
        &lt;/div&gt;
    &lt;/script&gt;

    &lt;script&gt;
        var userInfoComponent=&#123;
            template:&quot;#userInfoCompTemplate&quot;,
            data:function()&#123;
                return &#123;

                &#125;
            &#125;,
            props:[&quot;nameData&quot;,&quot;age&quot;,&quot;otherdata&quot;]
        &#125;

        var app = new Vue(&#123;
            el: &quot;#app&quot;,
            data: &#123;
                fromParCompData:&quot;来自父组件的数据&quot;
            &#125;,
            components:&#123;
                userInfoComponent:userInfoComponent
            &#125;
        &#125;);
    &lt;/script&gt;
</code></pre>
<p>子组件定义时使用props属性声明要接收的数据，子组件作为html标签调用时可直接将父组件的数据绑定给它的属性，数据作为字符串处理，也可通过v-bind绑定，数据作为表达式。</p>
<p>组件使用props接收参数时，可对传来的参数进行验证：</p>
<pre><code class="html">    // 不进行验证用数组形式
    // props:[&quot;nameData&quot;,&quot;age&quot;,&quot;otherdata&quot;] 
    props:&#123;
        nameData:&#123;
            type:String, // 必须为String类型
            required:true // 必要
        &#125;,
        age:&#123;
            type:Number,
            default:18 // 不传参默认值为18
        &#125;,
        // age:&#123; // 也可使用函数验证
        //     validator:function(val)&#123;
        //         return (typeof val===&quot;number&quot;); // 返回true时验证通过
        //     &#125;
        // &#125;,
        otherdata:&#123;
            type:[String,Number,Boolean,Object], // 可以为多个类型，用数组形式
            default:function()&#123; // 默认值也可使用函数返回的形式
                return &#123;msg:&quot;message&quot;&#125;
            &#125;
        &#125;
    &#125;
</code></pre>
<p>父子组件传参：</p>
<pre><code class="html">    &lt;div id=&quot;app&quot;&gt;
        &lt;shopping-cart-component 
            v-bind:g-data=&quot;goodsData&quot;
            v-on:getall=&quot;getTotalPrice&quot;
        &gt;&lt;/shopping-cart-component&gt;

        &lt;div&gt;总计：&#123;&#123;totalPrice&#125;&#125;&lt;/div&gt;
    &lt;/div&gt;

    &lt;script type=&quot;text/x-template&quot; id=&quot;SCartCompTemplate&quot;&gt;
        &lt;table border=&quot;1&quot; width=&quot;100%&quot;&gt;
            &lt;tr&gt;
                &lt;th&gt;商品名&lt;/th&gt;&lt;th&gt;价格&lt;/th&gt;&lt;th&gt;数量&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr v-for=&quot;(item,index) in gData&quot;&gt;
                &lt;td&gt;&#123;&#123;item.name&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;item.price&#125;&#125;&lt;/td&gt;
                &lt;td&gt;
                    &lt;input type=&quot;number&quot; min=&quot;1&quot;
                        v-model.number=&quot;item.num&quot;
                        v-on:input=&quot;iptChange&quot;&gt;
                &lt;/td&gt;
            &lt;/tr&gt;            
        &lt;/table&gt;
    &lt;/script&gt;

    &lt;script&gt;
        var shoppingCartComponent=&#123;
            template:&quot;#SCartCompTemplate&quot;,
            props:[&quot;gData&quot;],
            methods:&#123;
                iptChange:function()&#123;
                    var price=0;
                    this.gData.forEach(function(item,index,arr)&#123;
                        price+=item.price*item.num;
                    &#125;);
                    this.$emit(&quot;getall&quot;,price);
                &#125;
            &#125;,
            mounted:function()&#123;
                this.iptChange();
            &#125;
        &#125;

        var app = new Vue(&#123;
            el: &quot;#app&quot;,
            data: &#123;
                goodsData:[
                    &#123;name:&quot;A&quot;,price:20,num:1&#125;,
                    &#123;name:&quot;B&quot;,price:30,num:1&#125;
                ],
                totalPrice:0
            &#125;,
            components:&#123;
                shoppingCartComponent:shoppingCartComponent
            &#125;,            
            methods: &#123;
                getTotalPrice:function(val)&#123;
                    this.totalPrice=val;
                &#125;
            &#125;
        &#125;);
    &lt;/script&gt;
</code></pre>
<p>在这个例子中，首先定义了一个购物车组件shoppingCartComponent，这个shoppingCartComponent组件使用了id为SCartCompTemplate的模板，shoppingCartComponent组件期待接收gData参数，这个组件作为vue实例app的局部组件使用。子组件中通过v-bind将来自父组件的数据goodsData传递给它期待接收的gData，子组件模板中通过v-for遍历gData渲染出带有数据的表格。当input触发输入事件时调用iptChange方法，在iptChange方法中计算购物车总价格price，然后通过$emit主动触发getall事件，将价格price传递到父组件的getTotalPrice方法中。创建实例过程中子组件使用mounted钩子函数调用一次iptChange方法计算出初始价格。</p>
<p>组件中使用slot插槽：</p>
<pre><code class="html">
    &lt;div id=&quot;app&quot;&gt;
        &lt;div-component&gt;
            &lt;span&gt;123123123&lt;/span&gt;

            &lt;!-- 插入到name为cont1的插槽中 --&gt;
            &lt;p slot=&quot;cont1&quot;&gt;111111&lt;/p&gt;

            &lt;!-- 插入到name为cont2的插槽中 --&gt;
            &lt;div slot=&quot;cont2&quot;&gt;222222&lt;/div&gt;

            &lt;!-- 组件divComponent2插入到name为cont3的插槽中 --&gt;
            &lt;div-component2 title=&quot;传递给组件divComponent2的内容1&quot; slot=&quot;cont3&quot;&gt;&lt;/div-component2&gt;

            &lt;!-- 没有指明slot，会被插入到默认slot中，若没有默认slot则不显示这些内容 --&gt;
            456456456
        &lt;/div-component&gt;
        ------
        &lt;div-component2 title=&quot;传递给组件divComponent2的内容2&quot;&gt;&lt;/div-component2&gt;


        &lt;!--
            结果：
            111111
            222222
            传递给组件divComponent2的内容1
            123123123 456456456
            ------
            传递给组件divComponent2的内容2
         --&gt;

    &lt;/div&gt;

    &lt;script type=&quot;text/x-template&quot; id=&quot;divComponentTemplate&quot;&gt;
        &lt;div&gt;
            &lt;slot name=&quot;cont1&quot;&gt;没有传递内容时显示这个&lt;/slot&gt;
            &lt;slot name=&quot;cont2&quot;&gt;没有传递内容时显示这个&lt;/slot&gt;
            &lt;slot name=&quot;cont3&quot;&gt;没有传递内容时显示这个&lt;/slot&gt;
            &lt;div class=&quot;default&quot;&gt;
                &lt;!-- 没有定义name属性，为默认slot --&gt;
                &lt;slot&gt;没有传递内容时显示这个&lt;/slot&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/script&gt;

    &lt;script&gt;
        var divComponent=&#123;
            template:&quot;#divComponentTemplate&quot;
        &#125;
        var app = new Vue(&#123;
            el: &quot;#app&quot;,
            components:&#123;
                divComponent:divComponent,
                divComponent2:&#123;
                    template:&quot;&lt;div&gt;&#123;&#123;title&#125;&#125;&lt;/div&gt;&quot;,
                    props:[&quot;title&quot;]
                &#125;
            &#125;
        &#125;);
    &lt;/script&gt;
</code></pre>
<h2 id="过渡-amp-动画"><a href="#过渡-amp-动画" class="headerlink" title="过渡&amp;动画"></a>过渡&amp;动画</h2><p>使用vue提供的transition组件：</p>
<pre><code class="html">
    &lt;style&gt;
        /*
        v-enter：定义进入过渡的开始状态。
        v-enter-active：定义过渡的状态。
        v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。
        v-leave: 定义离开过渡的开始状态。
        v-leave-active：定义过渡的状态。
        v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。*/
        .test-enter,.test-leave-to&#123;
            opacity: 0;
        &#125;
        .test-enter-active,.test-leave-active&#123;
            transition: all 1s linear;
        &#125;
    &lt;/style&gt;
    &lt;div id=&quot;app&quot;&gt;
        &lt;button v-on:click=&quot;status=!status&quot;&gt;按钮&lt;/button&gt;
        &lt;transition name=&quot;test&quot;&gt;
            &lt;div v-show=&quot;status&quot;&gt;123123&lt;/div&gt;
        &lt;/transition&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var app = new Vue(&#123;
            el: &quot;#app&quot;,
            data: &#123;
                status:true
            &#125;
        &#125;);
    &lt;/script&gt;
</code></pre>
<p>结合animate.css使用transition：</p>
<pre><code class="html">    &lt;style&gt;
        /* 进入过程 */
        .test-enter-active&#123;
            animation: show-in 1s;
        &#125;
        /* 离开过程 */
        .test-leave-active&#123;
            animation: hide-out 1s;
        &#125;

        /* 进入过程动画 */
        @keyframes show-in&#123;
            0%&#123;
                transform: translate(100px,0);
                opacity: 0;
            &#125;
            100%&#123;
                transition: translate(0,0);
                opacity: 1;
            &#125;
        &#125;
        /* 离开过程动画 */
        @keyframes hide-out&#123;
            0%&#123;
                transform: translate(0,0);
                opacity: 1;
            &#125;
            100%&#123;
                transform: translate(100px,0);
                opacity: 0;
            &#125;
        &#125;
    &lt;/style&gt;

    &lt;div id=&quot;app&quot;&gt;
        &lt;button v-on:click=&quot;status=!status&quot;&gt;按钮&lt;/button&gt;
        &lt;transition name=&quot;test&quot;&gt;
            &lt;div v-show=&quot;status&quot;&gt;123123&lt;/div&gt;
        &lt;/transition&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var app = new Vue(&#123;
            el: &quot;#app&quot;,
            data: &#123;
                status:true
            &#125;
        &#125;);
    &lt;/script&gt;
</code></pre>
<p>使用JavaScript钩子函数：</p>
<pre><code class="html">    &lt;script src=&quot;https://cdn.bootcss.com/velocity/1.5.0/velocity.min.js&quot;&gt;&lt;/script&gt;

    &lt;div id=&quot;app&quot;&gt;
        &lt;button v-on:click=&quot;status=!status&quot;&gt;按钮&lt;/button&gt;

        &lt;transition @before-enter=&quot;boforeEnter&quot; @enter=&quot;enter&quot; @leave=&quot;leave&quot; :css=&quot;false&quot;&gt;
            &lt;div v-show=&quot;status&quot;&gt;123123&lt;/div&gt;
        &lt;/transition&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var app = new Vue(&#123;
            el: &quot;#app&quot;,
            data: &#123;
                status:true
            &#125;,
            methods: &#123;
                beforeEnter:function(el)&#123;
                    el.style.opacity=0;
                &#125;,
                enter:function(el,done)&#123;
                    Velocity(el,&#123;opacity:1&#125;,&#123;duration:2000, complete:done&#125;);
                &#125;,
                leave(el,done)&#123;
                    Velocity(el,&#123;opacity:0&#125;,&#123;duration:2000, complete:done&#125;);
                &#125;
            &#125;
        &#125;);
    &lt;/script&gt;
</code></pre>
<h2 id="可复用-amp-组合"><a href="#可复用-amp-组合" class="headerlink" title="可复用&amp;组合"></a>可复用&amp;组合</h2><p>自定义指令：</p>
<pre><code class="html">    &lt;div id=&quot;app&quot;&gt;
        &lt;div v-log.abc&gt;123123&lt;/div&gt;
        &lt;input type=&quot;text&quot; v-model=&quot;iptVal&quot; v-log3.def=&quot;iptVal&quot;&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // 自定义全局指令
        Vue.directive(&quot;log&quot;,&#123;
            bind:function(el,bind)&#123; // 绑定时触发
                console.log(el); // 绑定指令的元素
                console.log(bind); // 指令对象
            &#125;
        &#125;);

        Vue.directive(&quot;log2&quot;,&#123;
            update:function(el,bind)&#123; // 更新时触发

            &#125;
        &#125;);

        Vue.directive(&quot;log3&quot;,function(el,bind)&#123; // 绑定和更新

        &#125;);

        var app = new Vue(&#123;
            el: &quot;#app&quot;,
            data: &#123;
                iptVal:123
            &#125;,
            directives:&#123;
                log4:&#123;
                    bind: function () &#123;&#125;,
                    inserted: function () &#123;&#125;,
                    update: function () &#123;&#125;,
                    componentUpdated: function () &#123;&#125;,
                    unbind: function () &#123;&#125;
                &#125;
            &#125;
        &#125;);
    &lt;/script&gt;
</code></pre>
<h2 id="vue-router"><a href="#vue-router" class="headerlink" title="vue-router"></a>vue-router</h2><p>html中router-link相当于a元素，属性to相当于href，点击router-link后会跳转到对应组件，显示的组件在router-view中展示。new VueRouter中的routes中定义不同路径（location.hash）对应的相应组件。</p>
<pre><code class="html">    &lt;div id=&quot;app&quot;&gt;
        &lt;router-link to=&quot;/phoneComp&quot;&gt;手机&lt;/router-link&gt;
        &lt;router-link to=&quot;/computerComp&quot;&gt;电脑&lt;/router-link&gt;

        &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
    &lt;script&gt;
        // 定义组件
        var phoneComponent = &#123;
            template: &quot;&lt;div&gt;手机组件&lt;/div&gt;&quot;
        &#125;
        var computerComponent = &#123;
            template: &quot;&lt;div&gt;电脑组件&lt;/div&gt;&quot;
        &#125;

        // 定义路由
        var route = new VueRouter(&#123;
            routes: [
                &#123; path: &quot;/phoneComp&quot;, component: phoneComponent &#125;,
                &#123; path: &quot;/computerComp&quot;, component: computerComponent &#125;
            ]
        &#125;);

        var app = new Vue(&#123;
            el: &quot;#app&quot;,
            // 使用路由
            router: route
        &#125;);
    &lt;/script&gt;
</code></pre>
<p>上面的结果：</p>
<p><img src="https://ws1.sinaimg.cn/large/005yUB9Vly1fmaxqcjti3g30aj01un4e.gif" alt="vue-router结果"></p>
<p>path中定义参数，组件中可通过$route.params获取到url中的参数对象。path中可对参数进行验证：</p>
<pre><code class="html">    &lt;div id=&quot;app&quot;&gt;
        &lt;router-link to=&quot;/phoneComp&quot;&gt;手机&lt;/router-link&gt;
        &lt;router-link to=&quot;/computerComp&quot;&gt;电脑&lt;/router-link&gt;

        &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;

    &lt;script&gt;
        var phoneComponent = &#123;
            template: &quot;&lt;div&gt;手机组件&#123;&#123;$route.params&#125;&#125;&lt;/div&gt;&quot;
        &#125;    
        var computerComponent=&#123;
            template:`
                &lt;div&gt;
                    电脑组件&lt;br /&gt;
                    id:&#123;&#123;$route.params&#125;&#125;&lt;br /&gt;
                    &lt;button @click=&quot;getParam&quot;&gt;获取url参数&lt;/button&gt;
                &lt;/div&gt;           
            `,
            methods:&#123;
                getParam:function()&#123;
                    console.log(this.$route.params);
                &#125;
            &#125;
        &#125;

        var router=new VueRouter(&#123;
            routes:[
                // location.hash为#/computerComp/123时，可通过$route.params.id获取到123
                &#123;path:&quot;/phoneComp/:id&quot;,component: phoneComponent&#125;,

                // 参数验证：id必须为两位数字，否则进入不到相应组件
                // &#123;path:&quot;/phoneComp/:id(\\d&#123;2&#125;)&quot;,component: phoneComponent&#125;,  

                // 参数验证：参数id可有可无
                // &#123;path:&quot;/phoneComp/:id?&quot;,component: phoneComponent&#125;,


                // location.hash为#/computerComp/1/cont/2时，通过$route.params.id获取到1、$route.params.num获取到2
                &#123;path:&quot;/computerComp/:id/cont/:num&quot;,component: computerComponent&#125;

                // #/computerComp-1-cont-2（使用-分隔的形式）
                // &#123;path:&quot;/computerComp-:id-cont-:num&quot;,component: computerComponent&#125;
            ]
        &#125;);

        var app = new Vue(&#123;
            el: &quot;#app&quot;,
            router:router,
        &#125;);
    &lt;/script&gt;
</code></pre>
<p>定义路由时可以使用name命名路由，在router-link的to属性中通过name指向该路由、通过params指定参数对象:</p>
<pre><code class="html">    &lt;div id=&quot;app&quot;&gt;
        &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;

    &lt;script&gt;
        var listData = [ // 数据从后台获取
            &#123; id: 1, title: &quot;标题1&quot;, text: &quot;内容1&quot; &#125;,
            &#123; id: 2, title: &quot;标题2&quot;, text: &quot;内容2&quot; &#125;
        ]

        var homeComponent = &#123; // 主页组件
            template: `
                &lt;ul&gt;
                    &lt;li v-for=&quot;(item,index) in homeData&quot;&gt;

                        &lt;!-- 通过name指定路由、params指定参数对象 --&gt;
                        &lt;!-- router-link转化成a：&lt;a href=&quot;#/content/1&quot;&gt;标题1&lt;/a&gt; --&gt;

                        &lt;router-link v-bind:to=&quot;&#123;name:&#39;contCompt&#39;,params:&#123;id:item.id&#125;&#125;&quot;&gt;&#123;&#123;item.title&#125;&#125;&lt;/router-link&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;            
            `,
            data: function () &#123;
                return &#123;
                    homeData: listData
                &#125;
            &#125;
        &#125;
        var contComponent = &#123; // 内容组件
            // 为方便举例数据直接使用listData而不是传入组件
            template: `
                &lt;div&gt;
                    id：&#123;&#123;oneData.id&#125;&#125; &lt;br&gt;
                    title：&#123;&#123;oneData.title&#125;&#125; &lt;br&gt;
                    text：&#123;&#123;oneData.text&#125;&#125; &lt;br&gt;

                    &lt;router-link to=&quot;/&quot;&gt;主页&lt;/router-link&gt;
                &lt;/div&gt;            
            `,
            data: function () &#123;
                return &#123;
                    oneData: &#123;&#125;
                &#125;
            &#125;,
            mounted: function () &#123;
                var id = this.$route.params.id;
                for (var i = 0; i &lt; listData.length; i++) &#123;
                    if (listData[i].id == id) &#123;
                        this.oneData = listData[i];
                    &#125;
                &#125;
            &#125;
        &#125;

        var router = new VueRouter(&#123;
            routes: [
                // 默认显示主页组件
                &#123; path: &quot;/&quot;, component: homeComponent &#125;,

                // name给路由命名
                &#123; path: &quot;/content/:id&quot;, component: contComponent, name: &quot;contCompt&quot; &#125;,
            ]
        &#125;);

        var app = new Vue(&#123;
            el: &quot;#app&quot;,
            router: router
        &#125;);
    &lt;/script&gt;
</code></pre>
<p>上面的结果：</p>
<p><img src="https://ws1.sinaimg.cn/large/005yUB9Vgy1fmb0kez51rg309y02r425.gif" alt="vue-router结果"></p>
<p>路由的嵌套</p>
<p>上面的例子稍加修改就是路由嵌套的形式，使用children定义子路由：</p>
<pre><code class="html">    &lt;div id=&quot;app&quot;&gt;
        &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;

    &lt;script&gt;
        var listData = [
            &#123; id: 1, title: &quot;标题1&quot;, text: &quot;内容1&quot; &#125;,
            &#123; id: 2, title: &quot;标题2&quot;, text: &quot;内容2&quot; &#125;
        ]

        var homeComponent = &#123;
            template: `
                &lt;div&gt;
                    &lt;li v-for=&quot;(item,index) in homeData&quot;&gt;
                        &lt;router-link v-bind:to=&quot;&#123;name:&#39;cont1&#39;,params:&#123;id:item.id&#125;&#125;&quot;&gt;
                            &#123;&#123;item.title&#125;&#125;
                        &lt;/router-link&gt;
                    &lt;/li&gt;

                    &lt;router-view&gt;&lt;/router-view&gt;
                &lt;/div&gt;            
            `,
            data: function () &#123;
                return &#123;
                    homeData: listData
                &#125;
            &#125;
        &#125;
        var contComponent = &#123;
            template: `
                &lt;div&gt;
                    id：&#123;&#123;oneData.id&#125;&#125; &lt;br&gt;
                    title：&#123;&#123;oneData.title&#125;&#125; &lt;br&gt;
                    text：&#123;&#123;oneData.text&#125;&#125; &lt;br&gt;

                    &lt;router-link to=&quot;/&quot;&gt;主页&lt;/router-link&gt;
                &lt;/div&gt;            
            `,
            data: function () &#123;
                return &#123;
                    oneData: &#123;&#125;
                &#125;
            &#125;,
            mounted: function () &#123;
                console.log(&quot;mounted&quot;);
                this.loaded();
            &#125;,
            methods: &#123;
                loaded: function () &#123;
                    var id = this.$route.params.id;
                    for (var i = 0; i &lt; listData.length; i++) &#123;
                        if (listData[i].id == id) &#123;
                            console.log(listData);
                            this.oneData = listData[i];
                        &#125;
                    &#125;
                &#125;
            &#125;,
            watch: &#123;
                // 点击router-link时url改变，但mounted只执行一次，可通过监听url变化再次执行mounted中的方法
                &quot;$route&quot;(to, from) &#123;
                    console.log(&quot;to&quot;, to);
                    console.log(&quot;from&quot;, from);

                    this.loaded();
                &#125;
            &#125;
        &#125;

        var router = new VueRouter(&#123;
            routes: [
                // 根路由显示homeComponent组件，根路由的一个子路由显示contComponent组件，可多级嵌套
                &#123;
                    path: &quot;/&quot;,
                    component: homeComponent,
                    children: [ // 子路由
                        &#123; path: &quot;/content/:id&quot;, component: contComponent, name: &quot;cont1&quot; &#125;
                    ]
                &#125;
            ]
        &#125;);

        var app = new Vue(&#123;
            el: &quot;#app&quot;,
            router: router
        &#125;);
    &lt;/script&gt;
</code></pre>
<p>上面的结果：</p>
<p><img src="https://ws1.sinaimg.cn/large/005yUB9Vly1fmedjlc2c9g30ah03ediu.gif" alt="vue-router结果"></p>
<p>router-view嵌套transition可为路由添加动画：</p>
<pre><code class="html">    &lt;transition enter-active-class=&quot;animated zoomIn&quot;&gt;
        &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/transition&gt;
</code></pre>
<p>在路由中某组件的方法中可控制路由跳转：</p>
<pre><code class="javascript">var id=2;
this.$router.push(&quot;/content/&quot; + id); // 跳转到localhost:8080/index.html#/content/2

// 或：
// this.$router.push(&#123;name:&quot;cont1&quot;,params:&#123;id:id&#125;&#125;);
</code></pre>
<p>push方法类似于<code>window.history.pushState()</code>，将url添加到了浏览器历史记录中，可以用<code>this.$router.go(-1);</code>（类似于<code>window.history.go(-1)</code>）返回上一个页面。</p>
<p>除了push方法也可以用replace方法，但replace方法不会添加到历史记录，所以不能用上边方法返回。</p>
<p>路由中使用redirect和alias：</p>
<pre><code class="javascript">        var notFound = &#123;
            template: &quot;&lt;div&gt;请求的页面不存在&lt;/div&gt;&quot;
        &#125;

        var route = new VueRouter(&#123;
            routes: [
                &#123; path: &quot;/&quot;, component: component1 &#125;,
                &#123; path: &quot;/content/:id&quot;, component: component2, name: &quot;cont1&quot; &#125;,

                // 使用redirect重定向，url中为/about会重定向到/content/3（url中变为/content/3）
                &#123;path:&quot;/about&quot;,redirect: &#123;
                    name:&quot;cont1&quot;,
                    params:&#123;id:3&#125;
                &#125;&#125;,

                // 使用alias替换，url中为/about1或/about2...时，显示的为/content/3中内容
                &#123; path: &quot;/content/3&quot;, alias: [&quot;/about1&quot;, &quot;/about2&quot;] &#125;,

                // 配置404
                &#123; path: &quot;*&quot;, component: notFound &#125;
            ]
        &#125;);
</code></pre>
<h2 id="vuex"><a href="#vuex" class="headerlink" title="vuex"></a>vuex</h2><p>vue中可以使用vuex统一进行状态管理，非常合适大型应用中使用</p>
<pre><code class="html">    &lt;div id=&quot;app&quot;&gt;
        &lt;list&gt;&lt;/list&gt;
    &lt;/div&gt;

    &lt;script src=&quot;./vue.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;./vuex.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        var store = new Vuex.Store(&#123;
            state: &#123; // 存储数据
                title: &quot;来自vuex的数据&quot;
            &#125;
        &#125;);

        var list = &#123;
            template: `
                &lt;div&gt;
                    &#123;&#123;dataFromVuex&#125;&#125;
                &lt;/div&gt;            
            `,
            computed: &#123;
                dataFromVuex: function () &#123;
                    console.log(this.$store === store); // true
                    return this.$store.state.title
                &#125;
            &#125;
        &#125;

        var app = new Vue(&#123;
            el: &quot;#app&quot;,
            store: store,
            components: &#123;
                list: list
            &#125;
        &#125;);
    &lt;/script&gt;
</code></pre>
<p>vuex中使用state管理数据、使用getters和mutations管理方法。state相当于数据属性data、getters中的方法相当于计算属性中的get方法、mutations中的方法相当于计算属性中的set方法。</p>
<p>一个使用vuex进行购物车计算的例子：</p>
<pre><code class="json">// data.json模拟后台数据
[
    &#123;
        &quot;id&quot;: 1,
        &quot;title&quot;: &quot;qqq&quot;,
        &quot;price&quot;: 10,
        &quot;num&quot;: 1
    &#125;,
    &#123;
        &quot;id&quot;: 2,
        &quot;title&quot;: &quot;www&quot;,
        &quot;price&quot;: 20,
        &quot;num&quot;: 1
    &#125;,
    &#123;
        &quot;id&quot;: 3,
        &quot;title&quot;: &quot;eee&quot;,
        &quot;price&quot;: 30,
        &quot;num&quot;: 1
    &#125;
]
</code></pre>
<pre><code class="html">    &lt;div id=&quot;app&quot;&gt;
        &lt;list&gt;&lt;/list&gt;
    &lt;/div&gt;


    &lt;script src=&quot;./vue.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;./vuex.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;./axios.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        var store = new Vuex.Store(&#123;
            state: &#123; // state=&gt;data
                goods: []
            &#125;,
            getters: &#123; // getters=&gt;get
                totalPrice: function (state) &#123; // 计算出所有商品的总价
                    var totalPrice = 0;
                    state.goods.forEach(function (item, index, arr) &#123;
                        totalPrice += item.price * item.num;
                    &#125;);
                    return totalPrice;
                &#125;,
                newGoods: function (state) &#123; // 计算每件商品的总价
                    state.goods.forEach(function (item, index) &#123;
                        item.allPrice = item.price * item.num;
                    &#125;);
                    return state.goods;
                &#125;
            &#125;,
            mutations: &#123; // mutations=&gt;set
                del: function (state, params) &#123;
                    state.goods.forEach(function (item, index) &#123;
                        if (item.id == params.id) &#123;
                            state.goods.splice(index, 1);
                        &#125;
                    &#125;);
                &#125;,
                setData: function (state, params) &#123;
                    state.goods = params.goods;
                &#125;
            &#125;,
            actions: &#123; // 用来提交mutations
                loadGoods: function () &#123;
                    // 异步获取数据
                    axios.get(&quot;data.json&quot;)
                        .then(function (res) &#123;
                            // 调用setData方法
                            store.commit(&#39;setData&#39;, &#123; goods: res.data &#125;);
                        &#125;);
                &#125;
            &#125;
        &#125;);

        var list = &#123;
            template: `
                &lt;div&gt;
                    &lt;table border=&quot;1&quot; width=&quot;100%&quot;&gt;
                        &lt;tr&gt;&lt;th&gt;编号&lt;/th&gt;&lt;th&gt;名称&lt;/th&gt;&lt;th&gt;价格&lt;/th&gt;&lt;th&gt;数量&lt;/th&gt;&lt;th&gt;总价&lt;/th&gt;&lt;th&gt;操作&lt;/th&gt;&lt;/tr&gt;
                        &lt;tr v-for=&quot;item in goods&quot;&gt;
                            &lt;td&gt;&#123;&#123;item.id&#125;&#125;&lt;/td&gt;
                            &lt;td&gt;&#123;&#123;item.title&#125;&#125;&lt;/td&gt;
                            &lt;td&gt;&#123;&#123;item.price&#125;&#125;&lt;/td&gt;
                            &lt;!-- &lt;td&gt;&#123;&#123;item.num&#125;&#125;&lt;/td&gt; --&gt;
                            &lt;td&gt;&lt;input type=&quot;number&quot; v-model=&quot;item.num&quot; min=&quot;1&quot;&gt;&lt;/td&gt;
                            &lt;td&gt;&#123;&#123;item.allPrice&#125;&#125;&lt;/td&gt;
                            &lt;td&gt;&lt;button @click=&quot;clickDel(item.id)&quot;&gt;删除&lt;/button&gt;&lt;/td&gt;
                        &lt;/tr&gt;
                    &lt;/table&gt;
                    &lt;div&gt;总价：&#123;&#123;totalPrice&#125;&#125;&lt;/div&gt;
                &lt;/div&gt;            
            `,
            computed: &#123;
                totalPrice: function () &#123;
                    return this.$store.getters.totalPrice;
                &#125;,
                goods: function () &#123;
                    return this.$store.getters.newGoods;
                &#125;
            &#125;,
            methods: &#123;
                clickDel: function (id) &#123;
                    // 使用commit调用store._mutations里的方法
                    this.$store.commit(&quot;del&quot;, &#123; &quot;id&quot;: id &#125;);
                &#125;
            &#125;
        &#125;


        var app = new Vue(&#123;
            el: &quot;#app&quot;,
            store: store, // vuex
            components: &#123;
                list: list
            &#125;,
            mounted: function () &#123;
                console.log(this.$store===store); // true
                // 使用dispatch调用store._actions里的方法
                this.$store.dispatch(&quot;loadGoods&quot;);
            &#125;
        &#125;);
    &lt;/script&gt;    
</code></pre>
<p>上面的结果：</p>
<p><img src="https://ws1.sinaimg.cn/large/005yUB9Vly1fmiunxhl6rg308e02y7e7.gif" alt="vuex实例"></p>
<p>这个例子中在根组件的mounted钩子函数中用dispatch调用vuex中actions里的方法（获取数据）</p>
<p>actions里的方法使用commit调用mutations里的方法给state设定数据（初始化数据）</p>
<p>getters里的方法通过state中的数据得到其他数据（计算数据）</p>
<p>组件使用getters里的数据渲染页面</p>
<p>组件中的方法可通过commit调用mutations里的方法修改数据（修改数据）</p>
<p>修改每件商品的数量及删除商品都会触发store.state中数据的变化，state数据变化后又会触发getters中方法重新计算，页面也会跟着变化</p>
<p>vuex模块化：</p>
<p>大型应用中组件很多，数据若都用vuex管理并统一写在构造函数调用中，代码就会变得冗杂不易管理，可以在vuex中将数据分成模块管理。</p>
<p>在store中通过modules属性引用每一个模块，模块中默认state是局部的（属于该模块），getters、mutations、actions是全局的（属于this.$store），可在模块中通过namespaced声明命名空间将getters、mutations、actions也变为局部的，局部和全局时的调用方法也有不同。</p>
<pre><code class="html">    &lt;div id=&quot;app&quot;&gt;
        &lt;list&gt;&lt;/list&gt;
    &lt;/div&gt;

    &lt;script src=&quot;./vue.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;./vuex.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;./axios.js&quot;&gt;&lt;/script&gt;

    &lt;script&gt;
        var cartModule = &#123;
            namespaced: true, // namespaced声明命名空间
            state: &#123;
                goods: []
            &#125;,
            getters: &#123;
                totalPrice: function (state) &#123;
                    var totalPrice = 0;
                    state.goods.forEach(function (item, index, arr) &#123;
                        totalPrice += item.price * item.num;
                    &#125;);
                    return totalPrice;
                &#125;,
                newGoods: function (state) &#123;
                    state.goods.forEach(function (item, index) &#123;
                        item.allPrice = item.price * item.num;
                    &#125;);
                    return state.goods;
                &#125;
            &#125;,
            mutations: &#123;
                del: function (state, params) &#123;
                    state.goods.forEach(function (item, index) &#123;
                        if (item.id == params.id) &#123;
                            state.goods.splice(index, 1);
                        &#125;
                    &#125;);
                &#125;,
                setData: function (state, params) &#123;
                    state.goods = params.goods;
                &#125;
            &#125;,
            actions: &#123;
                loadGoods: function () &#123;
                    axios.get(&quot;data.json&quot;)
                        .then(function (res) &#123;
                            // store.commit(&#39;setData&#39;, &#123;goods:res.data&#125;);  // 全局时这样调用
                            store.commit(&#39;cart/setData&#39;, &#123; goods: res.data &#125;);  // 局部时这样调用
                        &#125;);
                &#125;
            &#125;
        &#125;

        var store = new Vuex.Store(&#123;
            modules: &#123; // 使用modules引用模块
                cart: cartModule
                // 其他模块...
            &#125;
        &#125;);

        var list = &#123;
            template: `
                &lt;div&gt;
                    &lt;table border=&quot;1&quot; width=&quot;100%&quot;&gt;
                        &lt;tr&gt;&lt;th&gt;编号&lt;/th&gt;&lt;th&gt;名称&lt;/th&gt;&lt;th&gt;价格&lt;/th&gt;&lt;th&gt;数量&lt;/th&gt;&lt;th&gt;总价&lt;/th&gt;&lt;th&gt;操作&lt;/th&gt;&lt;/tr&gt;
                        &lt;tr v-for=&quot;item in goods&quot;&gt;
                            &lt;td&gt;&#123;&#123;item.id&#125;&#125;&lt;/td&gt;
                            &lt;td&gt;&#123;&#123;item.title&#125;&#125;&lt;/td&gt;
                            &lt;td&gt;&#123;&#123;item.price&#125;&#125;&lt;/td&gt;
                            &lt;!-- &lt;td&gt;&#123;&#123;item.num&#125;&#125;&lt;/td&gt; --&gt;
                            &lt;td&gt;&lt;input type=&quot;number&quot; v-model=&quot;item.num&quot; min=&quot;1&quot;&gt;&lt;/td&gt;
                            &lt;td&gt;&#123;&#123;item.allPrice&#125;&#125;&lt;/td&gt;
                            &lt;td&gt;&lt;button @click=&quot;clickDel(item.id)&quot;&gt;删除&lt;/button&gt;&lt;/td&gt;
                        &lt;/tr&gt;
                    &lt;/table&gt;
                    &lt;div&gt;总价：&#123;&#123;totalPrice&#125;&#125;&lt;/div&gt;
                &lt;/div&gt;            
            `,
            computed: &#123;
                totalPrice: function () &#123;
                    // return this.$store.getters.totalPrice;  // 全局时这样调用
                    return this.$store.getters[&quot;cart/totalPrice&quot;];  // 局部时这样调用
                &#125;,
                goods: function () &#123;
                    // return this.$store.getters.newGoods;  // 全局时这样调用
                    return this.$store.getters[&quot;cart/newGoods&quot;];  // 局部时这样调用
                &#125;
            &#125;,
            methods: &#123;
                clickDel: function (id) &#123;
                    // this.$store.commit(&quot;del&quot;,&#123;&quot;id&quot;:id&#125;); // 全局时这样调用
                    this.$store.commit(&quot;cart/del&quot;, &#123; &quot;id&quot;: id &#125;); // 全局时这样调用
                &#125;
            &#125;
        &#125;

        var app = new Vue(&#123;
            el: &quot;#app&quot;,
            store: store,
            components: &#123;
                list: list
            &#125;,
            mounted() &#123;
                // this.$store.dispatch(&quot;loadGoods&quot;); // 全局时这样调用
                this.$store.dispatch(&quot;cart/loadGoods&quot;); // 局部时这样调用
            &#125;
        &#125;);
    &lt;/script&gt;
</code></pre>
]]></content>
      <categories>
        <category>Web前端</category>
      </categories>
      <tags>
        <tag>Vue</tag>
      </tags>
  </entry>
</search>