Sam Xiao, Feb.18, 2019
約在 2015 年,主流的 Web 開發架構仍以後端 MVC 為主:
<template> | |
<div id="counter"> | |
<h1>{{ showCount }}</h1> | |
<button @click="addCount(1)">+</button> | |
</div> | |
</template> | |
<script> | |
import { mapMutations, mapState } from 'vuex'; |
<template> | |
<div> | |
<ul> | |
<li v-for="(item, index) in books$" :key="index"> | |
Title : {{ item.title }}, Price : {{ item.price }} | |
</li> | |
</ul> | |
</div> | |
</template> |
import { pipe, gt, any, not, either, propEq } from 'ramda'; | |
import { getGetter, renderState, getState } from '@/helpers/vuex'; | |
import { paymentEnum } from '@/constant/payment-info'; | |
/** 由 [取得運費 + 應付金額] API 取得 [分期門檻] */ | |
const installmentLimit = renderState('AmountDetail', 'installmentLimit'); | |
/** 小於 [信用卡分期門檻] */ | |
const lessThanInstallmentLimit = pipe( | |
getGetter('AmountDetail', 'realAmount'), |
import { pipe, gt, any, not, either, propEq } from 'ramda'; | |
import { getGetter, renderState, getState } from '@/helpers/vuex'; | |
import { paymentEnum } from '@/constant/payment-info'; | |
/** 由 [取得運費 + 應付金額] API 取得 [分期門檻] */ | |
const installmentLimit = renderState('AmountDetail', 'installmentLimit'); | |
/** 小於 [信用卡分期門檻] */ | |
const lessThanInstallmentLimit = pipe( | |
getGetter('AmountDetail', 'realAmount'), |
import { pipe, gt, any, not, either, propEq } from 'ramda'; | |
import { getGetter, renderState, getState } from '@/helpers/vuex'; | |
import { paymentEnum } from '@/constant/payment-info'; | |
/** 由 [取得運費 + 應付金額] API 取得 [分期門檻] */ | |
const installmentLimit = renderState('AmountDetail', 'installmentLimit'); | |
/** 小於 [信用卡分期門檻] */ | |
const lessThanInstallmentLimit = pipe( | |
getGetter('AmountDetail', 'realAmount'), |
<template> | |
<div class="table-pack spacing bottom"> | |
<div class="table-pack-head"> | |
<i class="icon icon-nav-cart"></i> | |
<span class="spacing left sm middle">購物車明細</span> | |
<span class="sub">共 | |
<b class="value">{{ cartDetail.length }}</b>項商品 | |
</span> | |
<a class="btn-switch" data-toggle="collapse" href="#cart-list" aria-expanded="false"> | |
<i class="icon icon-minus"></i> |
{ | |
"include": [ | |
"./src/**/*" | |
], | |
"compilerOptions": { | |
"baseUrl": ".", | |
"paths": { | |
"@/*": [ | |
"src/*" | |
] |
<template> | |
<div> | |
<section class="todoapp"> | |
<header class="header"> | |
<h1>todos</h1> | |
<input v-model="todo" @keyup.enter="addTodo" class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?"> | |
</header> | |
<section class="main" v-if="isShowTodos"> | |
<input v-model="allCompleted" id="toggle-all" class="toggle-all" type="checkbox"> | |
<label for="toggle-all">Mark all as complete</label> |