美文网首页
考研英语词汇卡应用 - Vue SPA

考研英语词汇卡应用 - Vue SPA

作者: 坚果jimbowhy | 来源:发表于2020-09-22 12:08 被阅读0次
VocTest
Color Set

在线演示:
https://jimbowhy.gitee.io/etest.html#/test

<!doctype html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <meta name="Generator" content="EditPlus®">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>VocTest by Jimbowhy</title>
        <script>
    var schemes = [
        {name:'现代与经典',description:'红与黑是一种经典的搭配,常常用于表现一些艺术性较强的主题,但在红黑组合中加入黄色却让画面中多了不少变化,黄色与黑色形成了极大的明暗差,和红色也形成了很强的色相对比,而其他色彩更是作为调剂色而产生作用。',
        colors:{'热血红':'#e93c07', '金秋黄':'#E7C951', '低调灰':'#e7e7e7', "日落黄":'#efa97a', '稳重黒':'#151515'}},
        {name:'波普画风',description:'浓郁的酒红色在大部分搭配中都会显得特立独行,而整个搭配以橙红和酒红色作为主题色基本已经把画面的基调确定了,这两种色彩大多用于现代感和艺术感的设计中,用于表现时尚,前卫的主题。',
        colors:{ '酒红色':'#4f161d', '橙红':'#D3532D', '暗红':'#340d00', '米黄':'#e5e8b1', '蜡黄':'#d9c274'}},
        {name:'成长至成熟',description:'第一张图的色彩代表懵懂的小孩步入青春期,第二张图代表的黄色寓意为充满活力的少年,第三张图代表火热的青春,第四张图代表走出青春步入人生之间的磨砺。第五张图代表经历过磨练变的成熟。',
        colors:{'青涩':'#71FF5E', '熟黄':'#FFF175', '火红':'#FF0000', '滇红':'#750202', '纯黒':'#000000', }},
        {name:'玫瑰金',description:'在整个搭配中一般红色都是非常具有亮点的,但在这里,黄色却是画面中的主体,在和其他色彩的具有特别高的亮度,而红色和青色作为辅助色,和黄色之间形成了较大的明暗对比。',
        colors:{'米黄':'#FFEBCC', '成熟黄':'#FFB86C', '嫣红':'#F01B2D', '草绿':'#869B74'}},
        {name:'粉黛红颜',description:'虽然作为男生,但不能否认浓烈的洋红色的确吸引眼球,这个特别出彩的颜色搭配上纯度不高的灰绿产生了极大的对比,这里我们要特别说明下这种灰绿在服装设计上使用十分广泛,常常用于一些休闲,家用的相关设计上,在和洋红的搭配中很好的起到了一个陪衬的作用。',
        colors:{'灰绿':'#AAB8A3', '哑白':'#EBEDF4', '洋红':'#FF5983', '深红':'#C1194E', '酒红':'#7A023C'}},
        {name:'艺术之旅',description:'这个配色类型日本传统搭配中较为鲜艳的风格,但实际其更多的用于现代艺术品的着色中。一些画作,图案设计中较为多见,洋红色和黑色的搭配具有十分明显的现代风格,加上现代感十足的湖蓝,整个搭配使用的色彩纯度极高而明度也很高。',
        colors:{'棕黄':'#DB9019', '湖蓝':'#5ED5D1', '现代黒':'#1A2D27', '洋红':'#FF6E97', '亚光红':'#F1AAA6'}},
        {name:'洋葱花',description:'绿色和黄色是一对常见的色彩,这两种色彩组成的黄绿色不但在自然界常见,在人类生活中也十分常用,在这里和这两种色彩进行搭配的是红紫色,这种色彩常用于象征女性,纯度不高是为了让绿色和红色这两种对比较强色彩之间形成平衡。',
        colors:{'明黄':'#EACF02', '草绿':'#6C890B', '嫩绿':'#ABC327', '淡红':'#DFB5B7', '紫色':'#7F1874'}},
        {name:'森林之光',description:'阳光下,蓝天白云,草木茂盛。',
        colors:{'天空蓝':'#82A6F5', '花黄':'#EAF048', '浅绿':'#9FF048', '暗绿':'#2A5200', '浅粉':'#F6D6FF'}},
        {name:'午后奶茶',description:'悠闲的午休',
        colors:{'哑黄':'#EDE387', '哑白':'#EDEDED', '现代黒':'#3B200C', '浅棕色':'#DE8100', '明黄':'#CCFC62'}},
        {name:'美好时代的回忆',description:'橘红色在设计中十分突出,但很少大面积使用,这种色彩用于表现激烈的主题稍显力度不足,没有近亲橙色或红色来的直接,但是在和湖蓝搭配中却很好的发挥了它这种特点,作为暖色大量使用却并不喧宾夺主,很好突出了湖蓝的的特点',
        colors:{'橘红色':'#E03636', '暗黄':'#EDD0BE', '绯红':'#FF534D', '暗黄':'#EDD0BE', '湖蓝':'#25C6FC'}},
        //{name:'',description:'', colors:{'':''}},
    ]; 
        </script>
        <script src="../md-code/C-DayStep/assets/vue.js"></script>
        <script src="../md-code/C-DayStep/assets/vue-router.js"></script>
        <style type="text/css">
    html, body {width: 100%; height: 100%; margin: 0; background: #282828;}
    #app { margin: auto; width: 98%; height: 100%; box-sizing: border-box; }
    .c1a { color: #e93c07 !important; } 
    .c1b { color: #E7C951 !important; } 
    .c1c { color: #e7e7e7 !important; } 
    .c1d { color: #efa97a !important; } 
    .c1e { color: #151515 !important; }
    .b1a { background-color: #e93c07 !important; } 
    .b1b { background-color: #E7C951 !important; } 
    .b1c { background-color: #e7e7e7 !important; } 
    .b1d { background-color: #efa97a !important; } 
    .b1e { background-color: #151515 !important; }

    .flex { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
    .fley { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}

    .slang { text-shadow: 0px 0px 14px #eec84e; text-align: center; padding: 4px; border-radius: 12px; box-shadow: inset 0px 0px 14px 0px #b97303; }
    .box { width: auto; margin: 16px auto; background: #e7e7e7; color: #252525; padding: 16px; border: 1px solid #ffefef; box-shadow: 0px 0px 3px 0px #cbcaca; border-radius: 8px; }
    .box { position: relative; transition: all 2s; }
    .color { width:19%; float:left; padding:10% 0; text-align: center; border-radius: 8px; border: 1px solid #e7e7e7; }
    .color span {background: #e7e7e7; padding: 2px 4px; color: #151515; opacity: 0.1; border-radius: 5px;}
    .info { margin-left: 8px; width: 100%; clear:both; }
    .caption { clear:both; font-weight: bold; font-size:1.5em;}
    .description { }
    .text { clear:both; }
    .button { white-space: nowrap; border-radius: 16px; min-width: 48px; display: inline-block; text-align: center; cursor: pointer; 
        padding: 2px 8px; margin: 2px; text-decoration: none; background:#00CAFF; border:1px solid #cccccc;}
    .button:hover { color:#fff; }
    .puzzle { flex-wrap: nowrap; }
    .puzzle .button { width: 64px; height: 32px; }
    .puzzle .buttons { text-align: right; }
    .router-link-active { background:#FfBb00; }

    @media screen and (max-width: 800px) {
        .box { width: auto; }
    }
        </style>
    </head>
    <body>

<div id="app">
  <h2 class="slang c1b b1e">坚果词会</h2>
  <p>
    <!-- 使用 router-link 组件来导航,它会被渲染成一个 `<a>` 标签,`to` 属性指定链接 -->
    <!-- IE天生天然残缺,不支持反引号,`/user/${id}/${name}`这样的 ES6 模板字符串就不能使用了 -->
    <!-- <router-link class="button" to="/foo">Go Foo</router-link> -->
    <!-- <router-link class="button" to="/bar">Go Bar</router-link> -->
    <router-link class="button" to="/test">Test</router-link>
    <router-link class="button" to="/colors">Colors</router-link>
    <router-link class="button" :to="'/user/'+id+'/'+name">User1</router-link>
    <router-link class="button" :to="'/user/112/Jimbo'">User2</router-link>
    <a class="button" @click="goBack">Go Back</a>
  </p>
  <!-- 路由视图 路由出口 路由匹配到的组件将渲染在这里 -->
  <keep-alive>
  <router-view></router-view>
  </keep-alive>
  <!-- 命名视图 -->
  <router-view name="secondary"></router-view>
</div>

        <script id="words" src="pride-and-prejudice.md" type="text/plaint">
## 1 a-

1 表示“在…,…的”
aboard      [əˈbɔːd] prep.ad.在船上,上船(a + board 甲板→在船上)
abroad      [əˈbrɔːd] a. 在国外的,海外〔一般作表语〕(a + broad 宽广的→在宽广的地方→在国外) ad. 到国外;广为流传
afloat      [əˈfləʊt] a. 漂浮的(a + float 漂浮)
ahead       [əˈhed] ad. 在前(a + head 前端)
akin        [əˈkɪn] a. 同族的,类似的(a + kin 亲属)
alive       [əˈlaɪv] a. 活的(a + live 活)
aloft       [əˈlɒft] ad. 在高空中(a + loft 天空)
ashore      [əˈʃɔː(r)] ad. 在岸上(a + shore 岸)
aside       [əˈsaɪd] ad. 在旁边(a + side 旁边)
asleep      [əˈsliːp] a. 睡着的(a + sleep 睡觉)
away        [əˈweɪ] ad. 离去(a + way 路→在路上→离去)
afield      [əˈfi:ld] adv. 偏离
alight      [əˈlʌɪt] a. 烧着 v.下车 下马 ﹙鸟﹚飞落

2 表加强
against     [əˈɡenst] prep. 反对(a + gainst 反对)
alike       [əˈlaɪk] a./ad. 同样的(地),相似的(地)(a + like 相似的)
alone       [əˈləʊn] a. 孤单的(a + lone 单个的)
aloud       [əˈlaʊd] ad. 高声地(a + loud 高声的)
amass       [əˈmæs] v. 积聚(a + mass 聚集)
amaze       [əˈmeɪz] v. 惊奇,震惊(a + maze 迷惑)
amend       [əˈmend] v. 修改(a +mend 修改)
amount      [əˈmaʊnt] n. 数量,总额 v.总计,等于(a + mount 登上→达到→总计)
arise       [əˈraɪz] v. 出现(a + rise 出现)
await       [əˈweɪt] v. 等候(a + wait 等候)
awake       [əˈweɪk] v. 唤醒(a + wake 醒)
afresh      [əˈfreʃ] adv. 从新, 再
abase       [əˈbeis] vt. 贬, 降低(地位, 价值, 身分); 自卑, 自贬; 下降 abasement abaser
aware       [əˈwɛə] adj. [用作表语]知道的; 意识到的

3 表示“不,无,非”
ahistorical [ˌāhiˈstôrikəl, -ˈstär-]   a. 非历史的 与历史无关的
amoral      [eiˈmɔrəl] a. 不属于道德范畴的 没有道德原则的 → amoralism amoralist amorality
apathy      [ˈæpəθi] n. 漠然, 冷淡; 无兴趣; 无动于衷 → apathic apathia apathism apathetic apathetically
aperiodic   [ˌeipiriˈɔdik] a. 非周期性的; 不定期的 → aperiodically aperiodicity
aphasia     [əˈfeiziə] n. 失语症 → aphasic
apolitical  [ˌæpəˈlitikəl] a. 非政治的, 与政治无关的 apolitically
asexual     [æˈseksjuəl] a. 【生】无性的; 无性生殖的 asexually asexuality
asocial     [eiˈsəuʃəl] a. 不善社交的 利已的 不顾别人的; 以自我为中心的
asymmetry   [eɪˈsɪmɪtri] n. 不对称;不对等  
atypical    [eiˈtipikəl] adj. 非典型的 非典型的


## ab-,abs-

1 表示“相反”
abnormal    [æbˈnɔːml] a. 反常的(ab + normal 正常的) abnormally abnormalism
absent      [ˈæbsənt] a. 心不在焉 恍惚 缺席的(abs + ent 存在→不在→缺席的) absentation absenter absentness absently 
abuse       [əˈbjuːz] v. 滥用(ab + use 用→不〔正常〕使用→滥用)    [əˈbjuːs] n.滥用
abject      [ˈæbdʒekt] adj. 不幸的, 可怜的, 难堪的, 凄惨的 无耻的, 卑鄙的 abjectly abjectness
abstruse    [æbˈstru:s] adj. 难解的; 深奥的 abstrusely abstruseness

2 表示“去掉,离去”
abdicate    [ˈæbdikeit] vt. 放弃(权利) 让位, 辞职;【律】废嫡
abduct      [æbˈdʌkt] vt. 绑架, 拐走
abortion    [əˈbɔːʃn] n. 流产;堕胎(ab + or 生长+ tion 表名词→不再生长→流产)
absence     [ˈæbsəns] n. 缺席(abs + ence 表状态→不在的状态→缺席)
absorb      [əbˈzɔːb] v. assimilate 吸收(ab + sorb 吸收→吸收掉→吸收)
abstract    [ˈæbstrækt] a.抽象的(abs + tract 拉→将〔具体意义〕抽走→抽象的)
abundant    [əˈbʌndənt] a.丰富的(ab + und 溢出+ ant →〔多得〕溢出来→丰富的)
abjure      [əbˈdʒuə] vt. 发誓弃绝(信仰等); 公开放弃(国籍、权利等) abjuration
abrade      [əˈbreid] vt. vi. 擦伤 磨损 刮擦 擦去 研磨 切除 清除 清理 abraded abrading abrader
abrupt      [əˈbrʌpt] adj. 唐突的, 没礼貌的 (态度)生硬的 【地质】断裂的; 【植】裂状的
abrogate    [ˈæbrəuɡeit] vt. rescind 废除(法令等) 取消 abrogable abrogative abrogation abrogator
abscise     [æbˈsaiz] vt. 切除, 割断 n. 【植】自然脱落
abstain     [əbˈstein] vi. 戒掉(from) 弃权 abstainer abstaining
abstinence  [ˈæbstinəns] n. 禁欲; 节制; 戒酒或其它嗜好 【经济】节约 【宗】禁食 abstinent abstinently

## ab-, ac-, af-, ag-, ap-, ar-, as-, at- 等加在同辅音字母的词根前,表加强

accelerate  [əkˈseləreɪt] v. 加速(ac + celer 速度+ ate 使…→加快速度→加速)
accent      [ˈæksent] n. 口音;重音(ac + cent 唱→着重唱→重音)
accident    [ˈæksɪdənt] n.事故,意外的事(ac + cid 落下+ ent →意外掉下→意外的事)
accompany   [əˈkʌmpəni] v. 陪伴(ac + company 伙伴→陪伴)
accomplish  [əˈkʌmplɪʃ] v.完成(ac + com 共同+ pl〔= ple 填满〕+ ish 使…→使共同填满→完成)
account     [əˈkaʊnt] n.账目(ac + count 计数→不断算账→账目) v.报账;把…视为
accumulate  [əˈkjuːmjəleɪt] v. 积累(ac + cumul 堆积+ ate →不断堆积→积累)
accurate    [ˈækjərət] a.准确的,精确的(ac + cur 关心+ ate …的→一再关心使之正确的→精确的)
accuse      [əˈkjuːz] v. 责备,控告(ac + cuse 诉讼→控告)
accustomed  [əˈkʌstəmd] a.习惯的(ac + custom 风俗+ ed …的→尽快适应风俗的→习惯的)
acknowledge [əkˈnɒlɪdʒ] v. 答谢;承认(ac + knowledge 知道→承认)
affection   [əˈfekʃn] n.友爱(af + fect 做+ ion 表状态→强烈表现出来的状态→友爱)
affirm      [əˈfɜːm] v. 肯定(af + firm 坚定→非常坚定→肯定)
affix       [əˈfɪks] v. 附加;贴上(af + fix 固定→固定上去)
afford      [əˈfɔːd] v. 买得起(af + ford 拿出→一再拿出→买得起)
aggressive  [əˈɡresɪv] a.侵略性的(ag + gress 行走+ ive →一直走,走过界的→侵略性的)
appeal      [əˈpiːl] n.恳求,上诉v.诉请,呼吁;有吸引力(ap + peal 呼吁)
appease     [əˈpiːz] v.抚慰(ap + peas 平和+ e →使〔人〕心态平和→抚慰)
applause    [əˈplɔːz] v. 鼓掌(ap + plaus 鼓掌+ e)
applicant   [ˈæplɪkənt] n.申请人(ap + plic 满足+ ant 从事某事的人→满足从事某事的人→申请者)
application [ˌæplɪˈkeɪʃn] n.申请;申请书(ap + plic 满足+ ation 表行为、结果→为了满足…行为→申请)
apply       [əˈplaɪ] v.申请;应用(ap + ply 重叠→多次重叠,反复使用→应用)
appreciate  [əˈpriːʃieɪt] v.欣赏(ap + preci 价值+ ate →一再指出价值→欣赏)
appreciation    [əˌpriːʃiˈeɪʃn] n.欣赏;感激;增值(ap + preci 价值+ ation 表名词→增加价值,使某物价值增加→增值)
appropriate [əˈprəʊpriət] a.适当的(ap + propri 适合的+ ate 使…→使适合→适当的)
approximately   [əˈprɒksɪmətli] ad.近似地,大约(ap + proxim 接近+ ate 使…+ ly…地→使加强接近地→近似地)
arrest      [əˈrest] v./n. 逮捕(ar + rest 休息→强制休息→逮捕)
assault     [əˈsɔːlt] v./n. 进攻(as + sault 跳→跳起来〔争球〕→进攻)
attach      [əˈtætʃ] v. 附上;依恋(at + tach 钉→牢牢钉上→附上)
        </script>


<script>
    // 1. 定义组件。组件也可以通过 Vue.extend() 创建或者是一个组件配置对象
    const Foo  = { template: '<div class="box">FOO VIEW</div>' }
    const Bar  = { template: '<div class="box">BAR VIEW</div>' }
    const User = { 
        template:'<div>' + // 因为组件模板只能有一个顶级元素所以这里要使用div包裹两个子元素
                '   <div class="box">Hello {{ $route.params.id }}</div>' +
                '   <router-view></router-view>' + // 组件中使用路由视图用于渲染子路由匹配到的组件
                '</div>',
        watch: {  // 添加 watch 方法对路由变化作出响应...
            $route:function (to, from) { 
                console.log("route change ",to," <= ",from);
                this.name = to+" <= "+from;
            }
        },
        beforeRouteEnter:function (to, from, next) { // to, from 都是 $route 实例
            console.log("before route enter ", to, " <= ", from);
            next();
        },
        beforeRouteUpdate:function (to, from, next) { // 2.2 中引入的导航守卫
            // react to route changes...
            // don't forget to call next()
            console.log("before route update ", to, " <= ", from);
            next();
        }
    }

    const ColorPan = {
        props:['name', 'color'],
        template:
            '<div class="color" v-bind:style="{background: color}">'+
            '   <span class="text">{{name}}</span>' +
            '   <span class="value">{{color}}</span>' +
            '</div>'
    }

    const ColorSchemes = { 
        data: function(){ return {schemes}; },
        template:'<div>' + // 因为组件模板只能有一个顶级元素所以这里要使用div包裹两个子元素
                // '    <div>Colors {{ schemes }}</div>' +
                '   <div v-if="$route.params.id">params {{ $route.params }}</div>' +
                '   <div v-for="(scheme, idx0) in schemes" v-bind:key="idx0" class="box">' +
                '       <div class="flex">' +
                '       <ColorPan v-for="(item, key, idx) in scheme.colors" v-bind:key="idx" v-bind:name="key" v-bind:color="item" />' +
                '       </div>' +
                '       <div class="info">' +
                '           <span class="caption">{{scheme.name}}</span>' +
                '           <span class="description">{{scheme.description}}</span>' +
                '       </div>' +
                '   </div>' +
                '   <router-view></router-view>' + // 组件中使用路由视图用于渲染子路由匹配到的组件
                '</div>'
    }
    Vue.component('ColorPan', ColorPan); // 手动注册组件

    const TestCard = {
        methods: {
        onGrabit: function(e){ if(this.grabit) this.grabit(this.puzzle);},
        onPeekit: function(e){ this.peek = !this.peek; },
        onGotit: function(e){ if(this.gotit) this.gotit(this.puzzle);},
        },
        data: function(){ return {peek:false}; },
        props:['puzzle', 'grabit', 'gotit'],
        template: '<div class="box puzzle flex">' +
        '   <div>' +
        '   <p>{{puzzle.phoneme}} {{peek? puzzle.word: ""}}</p>' +
        '   <p>{{puzzle.text}}</p>' +
        '   </div>' +
        '   <div class="buttons fley">' +
        '   <button class="button b1a c1b" v-on:click="onGrabit">Grab it</button>' +
        '   <button v-bind:class="{\'button b1b\':peek, \'button b1d\':!peek}" v-on:click="onPeekit">Peek it</button>' +
        '   <button class="button b1d" v-on:click="onGotit">Got it</button>' +
        '   </div>' +
        '</div>'
    }

    const VocTest = {
        template: 
            '<div class="">' +
            '   <TestCard v-for="(puzzle, idx) in puzzles" v-bind:key="puzzle.word" '+ 
            '   v-bind:puzzle="puzzle" v-bind:grabit="onGrabit" v-bind:gotit="onGotit" />' +
            '</div>',
        methods: 
        {
        onGrabit: function(e){ console.log("onGrabit", e); e.quotiety += 0.1; this.resolvePuzzle(e);/* this.nextPuzzle(e);*/},
        onGotit: function(e){ console.log("onGotit", e); e.quotiety -= 0.1; this.resolvePuzzle(e);/* this.nextPuzzle(e);*/},
        resolvePuzzle: function(e)
        {
            var np = [];
            for(var p in this.puzzles){
                var item = this.puzzles[p];
                if(item.id != e.id) np.push(item);
            }
            this.puzzles = np;
        },
        nextPuzzle: function(e)
        {
            // if(e) console.log("nextPuzzle", e);
            if( this.puzzles.length > 15 ) return;
            var id = parseInt(Math.random()*this.wordlist.length);
            this.puzzles = this.puzzles.concat(this.wordlist[id]);
        },
        },
        data: function(){ return {msg:"test", puzzles:[]}; },

        errorCaptured: function(e){ console.log('onErrorCaptured:', e);},

        beforeCreate    :function(e){console.log('beforeCreate', e);},  // 创建前,data和el都还未初始化
        create          :function(e){console.log('create', e);},            // 完成创建,完成了data数据初始化,el还未初始化
        beforeMount     :function(e){console.log('beforeMount', e);},   // 载入前,完成了data和el数据初始化,模板内容还未替换
        mounted         :function(e){console.log('mounted', e);},       // 载入后,载入后html已经渲染,ajax请求可以放在这个函数中
        beforeUpdate    :function(e){console.log('beforeUpdate', e);},  // 更新前,view层的数据变化前,不是data中的数据改变前
        updated         :function(e){console.log('updated', e);},           // 更新后
        activated       :function(e){console.log('activated', e);},         // keep-alive 组件激活时调用
        deactivated     :function(e){console.log('deactivated', e);},   // keep-alive 组件停用时调用
        beforeDestroy   :function(e){console.log('beforeDestroy', e);},     // 销毁前
        destroy         :function(e){console.log('destroy', e);},       // 销毁后,Dom元素存在但不受vue控

        mounted: function(e)
        {
            this.raw = document.getElementById("words").text;
            this.wordlist = [];
            this.wordmap = {};
            var words = this.raw.split(/\n/g);
            for(var p in words){
                if(!/^[a-zA-Z]/.test(words[p])) continue;
                var match = /^([a-zA-Z]+) +(\[.+?\]) ?(.+)/.exec(words[p]);
                if(!match) continue;
                var item = {id: this.wordlist.length, word: match[1], phoneme: match[2], text:match[3], quotiety:1};
                this.wordlist.push(item);
                this.wordmap[match[1]] = item;
                // console.log(item);
            }
            this.nextPuzzle(item);
            this.ticker = setInterval(this.nextPuzzle, 2000, item);
        },
        watch: {
            $route:function (to, from) { 
                console.log("route change ",to," <= ",from);
                this.name = to+" <= "+from;
            }
        }
    }
    Vue.component('TestCard', TestCard); // 手动注册组件

    // 2. 配置组件的路由,每个路由应该映射一个组件
    const routes = [
        { path: '/test/:id?', component: VocTest },
        { path: '/colors/:id?', component: ColorSchemes },
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar, name:"toBar" }, // 设置 name 属性来配置一个命名路由
        { path: '/user/:id', component: User,  // 动态路径参数 以冒号开头
            children:[ // 嵌套路由 子视图内容会渲染到 User 组件中的 <router-view></router-view>
                { path:'', component:User }, // 子路由空路径时匹配上一级路由 /user/:id
                { path:'jeango', component:Foo }, // 匹配 /user/:id/jeango
                { path:'jimbo',  component:Bar }
            ]
        }
    ]

    // 3. 以 `routes` 配置创建 router 实例,{ routes } 是ES6缩写,相当于 {routes: routes}
    const router = new VueRouter({ routes:routes })

    // 4. 创建vue实例和挂载根实例。启动应用!
    const app = new Vue({
        router:router,
        data:{name:"Jeango", id:110, stamp: + new Date()},
        watch: { // 监视参数变化
            stamp:function () {
                console.log('watching', this.$route);
                return this.$route.params.name
            }
        },
        methods: {
            goBack:function () {
                this.stamp = +new Date(); // 更新相间数据触发watch事件
                window.history.length > 1
                ? this.$router.go(-1)
                : this.$router.push('/')
            }
        }
    }).$mount('#app')

</script>
    </body>
</html>

相关文章

  • 考研英语词汇卡应用 - Vue SPA

    在线演示:https://jimbowhy.gitee.io/etest.html#/test

  • vue路由

    vue路由--- SPA应用,单页面应用vue-resouce 交互vue-router 路由根据不同url地址...

  • 6 VUE路由

    vue-> SPA应用,单页面应用(引入vue-router.js) 路由嵌套(多层路由): 路由其他信息:

  • vue学习笔记(四)

    一、vue-router 1、简介 我们经常使用vue开发单页面应用程序(SPA)。开发SPA过程中,路由必不可少...

  • 前端路由与Vue Router

    Vue Router 是Vue.js的官方插件,用来快速实现单页应用 单页应用 SPA(Single Page A...

  • SPA及其优缺点

    SPA:单页面web应用,一般整个应用只有一个html页面,通过前端路由实现无刷新跳转。 Vue就是SPA应用的典...

  • SPA及其优缺点

    SPA:单页面web应用,一般整个应用只有一个html页面,通过前端路由实现无刷新跳转。 Vue就是SPA应用的典...

  • Vue-cli和Vue-router

    vue-cli脚手架 构建spa应用步骤 npm install -g vue-cli vue init webp...

  • 第二天_vue环境搭建以及vue-cli使用_Vue.js2.0

    vue 多页面应用文件引用 直接链接引用 npm安装 vue-cli 构建SPA应用 npm install -g...

  • Vue.js 2.0记录02

    深入扩展[我的备忘录]SPA应用 1、重构前台页面 Vue2.0+Vuex+Vue-router+Webpack ...

网友评论

      本文标题:考研英语词汇卡应用 - Vue SPA

      本文链接:https://www.haomeiwen.com/subject/vbhwyktx.html