iFwu

<h2 id="引入-vuejs">引入 Vue.js</h2>

<hr>



<h3 id="起因">起因</h3>

<ul>
<li>jQuery 的DOM操作与异步回调有天生的冲突</li>

iFwu

<template>
  <div id="app">
    <form id="search">
      Search <input name="query" v-model="searchQuery">
    </form>
    <qrcode-table
      :data="gridData"
      :columns="gridColumns"
      :filter-key="searchQuery">
    </qrcode-table>

iFwu

<template>
  <div id="app">
    <form id="search">
      Search <input name="query" v-model="searchQuery">
    </form>
    <qrcode-table
      :data="gridData"
      :columns="gridColumns"
      :filter-key="searchQuery">
    </qrcode-table>

iFwu

<template>
  <table>
    <thead>
      <tr>
        <th
          v-for="key in columns"
          :key="key"
          @click="sortBy(key)"
          :class="{ active: sortKey == key }"
        >

iFwu

function validURL(str) {
  var pattern = new RegExp(
    '^(https?:\\/\\/)?' + // protocol
    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
    '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
    '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
      '(\\#[-a-z\\d_]*)?$',
    'i'
  ); // fragment locator

iFwu

const { promisifyAll, promisify } = require('bluebird');
const request = promisify(require('request'));
promisifyAll(request, { multiArgs: true });
const cheerio = require('cheerio');

module.exports.handler = async function(req, resp, context) {
  const articleTitle = req.queries.articleTitle;
  console.log(articleTitle);
  const commentId = req.queries.commentId;
  const commentAnchor = commentId ? `#comment-${commentId}` : '';

iFwu

iFwu

Todos&

  Filter State
    all -> Filter All
    active -> Filter Active
    completed -> Filter Completed

    Filter All*
    Filter Active
    Filter Completed

iFwu

Todo&
  State
    Active*
    Completed
  

iFwu

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions