├── docs
    ├── .vuepress
    │   ├── enhanceApp.js
    │   ├── styles
    │   │   └── palette.styl
    │   ├── dist
    │   │   ├── assets
    │   │   │   ├── img
    │   │   │   │   └── search.83621669.svg
    │   │   │   ├── js
    │   │   │   │   ├── 11.94599de8.js
    │   │   │   │   ├── 5.3ab36c99.js
    │   │   │   │   ├── 6.51011e20.js
    │   │   │   │   ├── 12.c46d5855.js
    │   │   │   │   ├── 8.fbe7a625.js
    │   │   │   │   ├── 3.e022e063.js
    │   │   │   │   ├── 9.04c51810.js
    │   │   │   │   ├── 4.434204b0.js
    │   │   │   │   ├── 10.1613abf4.js
    │   │   │   │   ├── 13.2ac8831a.js
    │   │   │   │   ├── 7.19ce3efb.js
    │   │   │   │   └── 2.746b8ddb.js
    │   │   │   └── css
    │   │   │   │   └── 0.styles.54c90da9.css
    │   │   ├── 404.html
    │   │   └── index.html
    │   ├── components
    │   │   ├── VHtml.vue
    │   │   ├── VModel.vue
    │   │   ├── EventKeyModifier.vue
    │   │   ├── BasicHTMLJS.vue
    │   │   ├── VOutput.vue
    │   │   ├── ListRendering.vue
    │   │   ├── CondRenderIf.vue
    │   │   └── CondRenderShow.vue
    │   ├── style.styl
    │   └── config.js
    ├── README.md
    └── guide
    │   └── README.md
├── static.json
├── .gitignore
├── readme.md
└── package.json


/docs/.vuepress/enhanceApp.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/static.json:
--------------------------------------------------------------------------------
1 | {
2 |     "root": "./docs/.vuepress/dist"
3 | }


--------------------------------------------------------------------------------
/docs/.vuepress/styles/palette.styl:
--------------------------------------------------------------------------------
1 | $accentColor = #7700ff
2 | $textColor = #2c3e50
3 | $borderColor = #eaecef
4 | $codeBgColor = #1f0246


--------------------------------------------------------------------------------
/docs/.vuepress/dist/assets/img/search.83621669.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>
2 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/VHtml.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-html="html"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 | data() {
 8 |     return {
 9 |         html:'<h3>Hello there !</h3>'
10 |     }
11 | },
12 | }
13 | </script>
14 | 
15 | <style>
16 | 
17 | </style>
18 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/VModel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |     <input v-model="name" type="text" />
 4 |     <p>My name is: {{name}}</p>
 5 |     </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 | data(){
11 | 	return{
12 |     name: ""
13 |   }
14 | }
15 | }
16 | </script>
17 | 
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | 
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/docs/.vuepress/dist/assets/js/11.94599de8.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[11],{361:function(t,n,e){"use strict";e.r(n);var l={data:function(){return{html:"<h3>Hello there !</h3>"}}},r=e(41),s=Object(r.a)(l,(function(){var t=this.$createElement;return(this._self._c||t)("div",{domProps:{innerHTML:this._s(this.html)}})}),[],!1,null,null,null);n.default=s.exports}}]);


--------------------------------------------------------------------------------
/docs/.vuepress/dist/assets/js/5.3ab36c99.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{317:function(t,n,s){},352:function(t,n,s){"use strict";var u=s(317);s.n(u).a},363:function(t,n,s){"use strict";s.r(n);var u={name:"v-output"},e=(s(352),s(41)),i=Object(e.a)(u,(function(){var t=this.$createElement,n=this._self._c||t;return n("div",{staticClass:"output"},[n("div",{staticClass:"inner"},[this._t("default")],2)])}),[],!1,null,null,null);n.default=i.exports}}]);


--------------------------------------------------------------------------------
/docs/.vuepress/components/EventKeyModifier.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div>
 3 | <p>Focus on this input and press alt+enter</p>
 4 |     <input v-on:keyup.alt.enter="method1" />
 5 | </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 | methods: {
11 |     method1(){
12 |         alert('This event is fired when you press alt+enter !')
13 |         console.log('This event is fired when you press alt+enter !')
14 |     }
15 |     
16 | },
17 | }
18 | </script>
19 | 
20 | <style>
21 | 
22 | </style>
23 | 


--------------------------------------------------------------------------------
/docs/.vuepress/dist/assets/js/6.51011e20.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[6],{318:function(t,e,n){},353:function(t,e,n){"use strict";var i=n(318);n.n(i).a},366:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,i=e.slots;return t("span",{class:["badge",n.type],style:{verticalAlign:n.vertical}},n.text||i().default)}},r=(n(353),n(41)),a=Object(r.a)(i,void 0,void 0,!1,null,"15b7b770",null);e.default=a.exports}}]);


--------------------------------------------------------------------------------
/docs/.vuepress/components/BasicHTMLJS.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="vue-app">
 3 |     <p>{{ hello() }}</p>
 4 |     <p>{{ name }}</p>
 5 |     <p>{{ age + 1 }}</p>
 6 |     <p>{{ age < 18 ? "Youngster" : "Adult"}}</p>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   data() {
13 |     return {
14 |       name: "Matej",
15 |       age: 27,
16 |       sleepy: true
17 |     };
18 |   },
19 | 
20 |   methods: {
21 |     hello: function() {
22 |       return "Hello";
23 |     }
24 |   }
25 | };
26 | </script>
27 | 
28 | <style>
29 | </style>
30 | 


--------------------------------------------------------------------------------
/docs/.vuepress/dist/assets/js/12.c46d5855.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[12],{362:function(e,n,t){"use strict";t.r(n);var a={data:function(){return{name:""}}},o=t(41),r=Object(o.a)(a,(function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",[t("input",{directives:[{name:"model",rawName:"v-model",value:e.name,expression:"name"}],attrs:{type:"text"},domProps:{value:e.name},on:{input:function(n){n.target.composing||(e.name=n.target.value)}}}),e._v(" "),t("p",[e._v("My name is: "+e._s(e.name))])])}),[],!1,null,null,null);n.default=r.exports}}]);


--------------------------------------------------------------------------------
/docs/.vuepress/dist/assets/js/8.fbe7a625.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[8],{356:function(e,n,t){"use strict";t.r(n);var a={data:function(){return{name:"Matej",age:27,sleepy:!0}},methods:{hello:function(){return"Hello"}}},l=t(41),s=Object(l.a)(a,(function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{attrs:{id:"vue-app"}},[t("p",[e._v(e._s(e.hello()))]),e._v(" "),t("p",[e._v(e._s(e.name))]),e._v(" "),t("p",[e._v(e._s(e.age+1))]),e._v(" "),t("p",[e._v(e._s(e.age<18?"Youngster":"Adult"))])])}),[],!1,null,null,null);n.default=s.exports}}]);


--------------------------------------------------------------------------------
/docs/.vuepress/dist/assets/js/3.e022e063.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[3],{315:function(n,t,e){},350:function(n,t,e){"use strict";var o=e(315);e.n(o).a},357:function(n,t,e){"use strict";e.r(t);var o={data:function(){return{toggle:!1}}},l=(e(350),e(41)),c=Object(l.a)(o,(function(){var n=this,t=n.$createElement,e=n._self._c||t;return e("div",[e("button",{staticClass:"btn",on:{click:function(t){n.toggle=!n.toggle}}},[n._v("\n  Toggle\n  ")]),n._v(" "),n.toggle?e("h4",[n._v("Content rendered conditionally")]):n._e()])}),[],!1,null,null,null);t.default=c.exports}}]);


--------------------------------------------------------------------------------
/docs/.vuepress/dist/assets/js/9.04c51810.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[9],{359:function(e,n,t){"use strict";t.r(n);var s={methods:{method1:function(){alert("This event is fired when you press alt+enter !"),console.log("This event is fired when you press alt+enter !")}}},o=t(41),r=Object(o.a)(s,(function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",[t("p",[e._v("Focus on this input and press alt+enter")]),e._v(" "),t("input",{on:{keyup:function(n){return!n.type.indexOf("key")&&e._k(n.keyCode,"enter",13,n.key,"Enter")?null:n.altKey?e.method1(n):null}}})])}),[],!1,null,null,null);n.default=r.exports}}]);


--------------------------------------------------------------------------------
/docs/.vuepress/dist/assets/js/4.434204b0.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[4],{316:function(n,t,e){},351:function(n,t,e){"use strict";var o=e(316);e.n(o).a},358:function(n,t,e){"use strict";e.r(t);var o={data:function(){return{toggle:!1}}},l=(e(351),e(41)),i=Object(l.a)(o,(function(){var n=this,t=n.$createElement,e=n._self._c||t;return e("div",[e("button",{staticClass:"btn",on:{click:function(t){n.toggle=!n.toggle}}},[n._v("\n  Toggle\n  ")]),n._v(" "),e("h4",{directives:[{name:"show",rawName:"v-show",value:n.toggle,expression:"toggle"}]},[n._v("Content rendered conditionally")])])}),[],!1,null,null,null);t.default=i.exports}}]);


--------------------------------------------------------------------------------
/docs/.vuepress/components/VOutput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="output">
 3 |     <div class="inner">
 4 |       <slot></slot>
 5 |     </div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: "v-output"
12 | };
13 | </script>
14 | 
15 | <style>
16 | .output {
17 |   padding: 27px;
18 |   box-shadow: inset 0px 2px 11px -1px rgba(0, 0, 0, 0.2),
19 |     0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
20 |   border: thin solid #aaa;
21 |   border-radius: 10px;
22 | }
23 | 
24 | .inner {
25 |   padding: 10px;
26 |   border: thin solid #aaa;
27 |   border-radius: 10px;
28 | }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/docs/.vuepress/style.styl:
--------------------------------------------------------------------------------
 1 | .search-box input
 2 |     color  #635e5e
 3 |     display  block
 4 |     height  32px
 5 |     padding  4px 10px
 6 |     font-weight  400
 7 |     line-height  1.5
 8 |     background-clip  padding-box
 9 |     border-radius  6px
10 |     border  thin solid #b8b6b6
11 |     -webkit-transition  border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out
12 |     transition  border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out
13 |     transition  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
14 |     transition  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out


--------------------------------------------------------------------------------
/docs/.vuepress/dist/assets/js/10.1613abf4.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[10],{360:function(e,n,t){"use strict";t.r(n);var s={data:function(){return{bars:["foo","bar","test"],user:{firstName:"John",lastName:"Doe",age:28,email:"john_doe@gmail.com"}}},methods:{}},r=t(41),o=Object(r.a)(s,(function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",[t("h5",[e._v("Foos :")]),e._v(" "),t("ul",e._l(e.bars,(function(n,s){return t("li",{key:n},[e._v(e._s(n)+" - "+e._s(s))])})),0),e._v(" "),t("h5",[e._v("user details")]),e._v(" "),t("ul",e._l(e.user,(function(n,s,r){return t("li",{key:r},[e._v(e._s(s)+" : "+e._s(n))])})),0)])}),[],!1,null,null,null);n.default=o.exports}}]);


--------------------------------------------------------------------------------
/docs/.vuepress/dist/assets/js/13.2ac8831a.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[13],{355:function(t,e,s){"use strict";s.r(e);var n=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],o={methods:{getMsg:function(){return n[Math.floor(Math.random()*n.length)]}}},i=s(41),h=Object(i.a)(o,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("RouterLink",{attrs:{to:"/"}},[this._v("\n      Take me home.\n    ")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | home: true
 3 | actionText: TAKE A L👀K
 4 | actionLink: /guide/
 5 | footer: Vue cheat sheet 2020 - BOUSSADJRA BRAHIM
 6 | ---
 7 | 
 8 |  > Thanks to [Matej](https://dekadentno.github.io/) 💪 for this [rich content](https://github.com/dekadentno/vue-cheat-sheet) 💡 that he provided to the community
 9 | 
10 | 
11 | 
12 | <style>
13 | .home #main-title{
14 |   color:#650ace;
15 |   text-transform: uppercase;
16 | }
17 |     .home  .action-button{
18 |       background-color:#7700ff!important;
19 |       border-radius:46px;
20 | 
21 |     }
22 |     .home .feature{
23 |           box-shadow: 0 0 10px #ddd;
24 |     padding: 10px;
25 |     border-radius: 5px;
26 |     min-height: 148px;
27 |     }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/ListRendering.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h5>Foos :</h5>
 4 |     <ul>
 5 |       <li v-for="(bar,index) in bars" :key="bar">{{bar}} - {{index}}</li>
 6 |     </ul>
 7 |     <h5>user details</h5>
 8 |     <ul>
 9 |       <li v-for="(val,key, index) in user" :key="index">{{key}} : {{val}}</li>
10 |     </ul>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   data() {
17 |     return {
18 |       bars: ["foo", "bar", "test"],
19 |       user: {
20 |         firstName: "John",
21 |         lastName: "Doe",
22 |         age: 28,
23 |         email: "john_doe@gmail.com"
24 |       }
25 |     };
26 |   },
27 | 
28 |   methods: {}
29 | };
30 | </script>
31 | 
32 | <style>
33 | </style>
34 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # [vue-cheat-sheet](https://boussadjra.github.io/vue-cheat-sheet/)
 2 | 
 3 | It\'s a Vue stuff based on [this repository](https://github.com/dekadentno/vue-cheat-sheet') which tried to make it available as website with easy navigation, some running code, updated content and pretty style
 4 | 
 5 | > Thanks to [Matej](https://dekadentno.github.io/) 💪 for this [rich content](https://github.com/dekadentno/vue-cheat-sheet) 💡 that he provided to the community
 6 | 
 7 | 
 8 | **[website](https://boussadjra.github.io/vue-cheat-sheet/)**
 9 | 
10 | ## Contributions
11 | 
12 |     git clone https://github.com/boussadjra/vue-cheat-sheet.git vue-cheat-sheet
13 | 
14 |     cd vue-cheat-sheet
15 | 
16 |     npm i
17 | 
18 |     npm run docs:dev
19 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/CondRenderIf.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |       <button class="btn" v-on:click="toggle=!toggle">
 4 |       Toggle
 5 |       </button>
 6 |       <h4 v-if="toggle">Content rendered conditionally</h4>
 7 |     </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 | data() {
13 |     return {
14 |         toggle:false
15 |     }
16 | },
17 | }
18 | </script>
19 | 
20 | <style>
21 | .btn{
22 |     padding: 6px 16px;
23 |     font-size: 0.875rem;
24 |     min-width: 64px;
25 |     box-sizing: border-box;
26 |     font-weight: 500;
27 |     line-height: 1.75;
28 |     border-radius: 4px;
29 |     letter-spacing: 0.02857em;
30 |     text-transform: uppercase;
31 |     outline: none;
32 |     cursor: pointer;
33 | }
34 | </style>
35 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/CondRenderShow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |       <button class="btn" v-on:click="toggle=!toggle">
 4 |       Toggle
 5 |       </button>
 6 |       <h4 v-show="toggle">Content rendered conditionally</h4>
 7 |     </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 | data() {
13 |     return {
14 |         toggle:false
15 |     }
16 | },
17 | }
18 | </script>
19 | 
20 | <style>
21 | .btn{
22 |     padding: 6px 16px;
23 |     font-size: 0.875rem;
24 |     min-width: 64px;
25 |     box-sizing: border-box;
26 |     font-weight: 500;
27 |     line-height: 1.75;
28 |     border-radius: 4px;
29 |     letter-spacing: 0.02857em;
30 |     text-transform: uppercase;
31 |     outline: none;
32 |     cursor: pointer;
33 | }
34 | </style>
35 | 


--------------------------------------------------------------------------------
/docs/.vuepress/dist/assets/js/7.19ce3efb.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[7],{314:function(t,e,n){},349:function(t,e,n){"use strict";var r=n(314);n.n(r).a},365:function(t,e,n){"use strict";n.r(e);n(349);var r=n(41),o=Object(r.a)({},(function(){var t=this.$createElement,e=this._self._c||t;return e("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("blockquote",[e("p",[this._v("Thanks to "),e("a",{attrs:{href:"https://dekadentno.github.io/",target:"_blank",rel:"noopener noreferrer"}},[this._v("Matej"),e("OutboundLink")],1),this._v(" 💪 for this "),e("a",{attrs:{href:"https://github.com/dekadentno/vue-cheat-sheet",target:"_blank",rel:"noopener noreferrer"}},[this._v("rich content"),e("OutboundLink")],1),this._v(" 💡 that he provided to the community")])])])}),[],!1,null,null,null);e.default=o.exports}}]);


--------------------------------------------------------------------------------
/docs/.vuepress/config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	title: 'Vue cheat sheet',
 3 |     description: 'It\'s a Vue stuff based on this repository https://github.com/dekadentno/vue-cheat-sheet',
 4 |     base:'/vue-cheat-sheet/',
 5 |     markdown: {
 6 |         config: md => {
 7 |           md.set({ breaks: true })
 8 |       },
 9 |     },
10 |     themeConfig:{
11 |         nav: [
12 |             { text: 'Home', link: '/' },
13 |             { text: 'Guide', link: '/guide/' },
14 |             { text: 'Github', link: 'https://github.com/boussadjra/vue-cheat-sheet' },
15 |           
16 |         ],
17 |         sidebar:  'auto'/*[
18 |             {
19 |                 title: 'Guide',
20 |                 collapsable: true,
21 |                 children: [
22 |             {text: 'Installation',link: '/guide/Installation'}
23 |                 ]
24 |             }
25 |             ]*/
26 |     }
27 | }
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "vue-cheat-sheet",
 3 |     "version": "1.1.0",
 4 |     "description": "It's a Vue stuff based on https://github.com/dekadentno/vue-cheat-sheet",
 5 |     "main": "index.js",
 6 |     "scripts": {
 7 |         "docs:dev": "vuepress dev docs --host localhost",
 8 |         "docs:build": "vuepress build docs",
 9 |         "test": "echo \"Error: no test specified\" && exit 1"
10 |     },
11 |     "devDependencies": {
12 |         "vuepress": "^1.5.0"
13 |     },
14 |     "repository": {
15 |         "type": "git",
16 |         "url": "git+https://github.com/boussadjra/vue-cheat-sheet.git"
17 |     },
18 |     "keywords": [
19 |         "vue",
20 |         "docs",
21 |         "vue-cheat-sheet"
22 |     ],
23 |     "author": "BRAHIM BOUSSADJRA",
24 |     "license": "MIT",
25 |     "bugs": {
26 |         "url": "https://github.com/boussadjra/vue-cheat-sheet/issues"
27 |     },
28 |     "homepage": "https://github.com/boussadjra/vue-cheat-sheet#readme"
29 | }
30 | 


--------------------------------------------------------------------------------
/docs/.vuepress/dist/404.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1">
 6 |     <title>Vue cheat sheet</title>
 7 |     <meta name="generator" content="VuePress 1.5.0">
 8 |     
 9 |     <meta name="description" content="It's a Vue stuff based on this repository https://github.com/dekadentno/vue-cheat-sheet">
10 |     <link rel="preload" href="/vue-cheat-sheet/assets/css/0.styles.54c90da9.css" as="style"><link rel="preload" href="/vue-cheat-sheet/assets/js/app.b76308d2.js" as="script"><link rel="preload" href="/vue-cheat-sheet/assets/js/13.2ac8831a.js" as="script"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/10.1613abf4.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/11.94599de8.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/12.c46d5855.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/14.bef821b7.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/2.746b8ddb.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/3.e022e063.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/4.434204b0.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/5.3ab36c99.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/6.51011e20.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/7.19ce3efb.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/8.fbe7a625.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/9.04c51810.js">
11 |     <link rel="stylesheet" href="/vue-cheat-sheet/assets/css/0.styles.54c90da9.css">
12 |   </head>
13 |   <body>
14 |     <div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>How did we get here?</blockquote> <a href="/vue-cheat-sheet/" class="router-link-active">
15 |       Take me home.
16 |     </a></div></div><div class="global-ui"></div></div>
17 |     <script src="/vue-cheat-sheet/assets/js/app.b76308d2.js" defer></script><script src="/vue-cheat-sheet/assets/js/13.2ac8831a.js" defer></script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/docs/.vuepress/dist/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1">
 6 |     <title>Vue cheat sheet</title>
 7 |     <meta name="generator" content="VuePress 1.5.0">
 8 |     
 9 |     <meta name="description" content="It's a Vue stuff based on this repository https://github.com/dekadentno/vue-cheat-sheet">
10 |     <link rel="preload" href="/vue-cheat-sheet/assets/css/0.styles.54c90da9.css" as="style"><link rel="preload" href="/vue-cheat-sheet/assets/js/app.b76308d2.js" as="script"><link rel="preload" href="/vue-cheat-sheet/assets/js/2.746b8ddb.js" as="script"><link rel="preload" href="/vue-cheat-sheet/assets/js/7.19ce3efb.js" as="script"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/10.1613abf4.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/11.94599de8.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/12.c46d5855.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/13.2ac8831a.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/14.bef821b7.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/3.e022e063.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/4.434204b0.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/5.3ab36c99.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/6.51011e20.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/8.fbe7a625.js"><link rel="prefetch" href="/vue-cheat-sheet/assets/js/9.04c51810.js">
11 |     <link rel="stylesheet" href="/vue-cheat-sheet/assets/css/0.styles.54c90da9.css">
12 |   </head>
13 |   <body>
14 |     <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-cheat-sheet/" class="home-link router-link-exact-active router-link-active"><!----> <span class="site-name">Vue cheat sheet</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-cheat-sheet/" class="nav-link router-link-exact-active router-link-active">
15 |   Home
16 | </a></div><div class="nav-item"><a href="/vue-cheat-sheet/guide/" class="nav-link">
17 |   Guide
18 | </a></div><div class="nav-item"><a href="https://github.com/boussadjra/vue-cheat-sheet" target="_blank" rel="noopener noreferrer" class="nav-link external">
19 |   Github
20 |   <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-cheat-sheet/" class="nav-link router-link-exact-active router-link-active">
21 |   Home
22 | </a></div><div class="nav-item"><a href="/vue-cheat-sheet/guide/" class="nav-link">
23 |   Guide
24 | </a></div><div class="nav-item"><a href="https://github.com/boussadjra/vue-cheat-sheet" target="_blank" rel="noopener noreferrer" class="nav-link external">
25 |   Github
26 |   <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Home</span> <!----></p> <!----></section></li></ul> </aside> <main aria-labelledby="main-title" class="home"><header class="hero"><!----> <h1 id="main-title">
27 |       Vue cheat sheet
28 |     </h1> <p class="description">
29 |       It's a Vue stuff based on this repository https://github.com/dekadentno/vue-cheat-sheet
30 |     </p> <p class="action"><a href="/vue-cheat-sheet/guide/" class="nav-link action-button">
31 |   TAKE A L👀K
32 | </a></p></header> <!----> <div class="theme-default-content custom content__default"><blockquote><p>Thanks to <a href="https://dekadentno.github.io/" target="_blank" rel="noopener noreferrer">Matej<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 💪 for this <a href="https://github.com/dekadentno/vue-cheat-sheet" target="_blank" rel="noopener noreferrer">rich content<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 💡 that he provided to the community</p></blockquote></div> <div class="footer">
33 |     Vue cheat sheet 2020 - BOUSSADJRA BRAHIM
34 |   </div></main></div><div class="global-ui"></div></div>
35 |     <script src="/vue-cheat-sheet/assets/js/app.b76308d2.js" defer></script><script src="/vue-cheat-sheet/assets/js/2.746b8ddb.js" defer></script><script src="/vue-cheat-sheet/assets/js/7.19ce3efb.js" defer></script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/docs/.vuepress/dist/assets/css/0.styles.54c90da9.css:
--------------------------------------------------------------------------------
1 | code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.theme-default-content code{color:#476582;padding:.25rem .5rem;margin:0;font-size:.85em;background-color:rgba(27,31,35,.05);border-radius:3px}.theme-default-content code .token.deleted{color:#ec5975}.theme-default-content code .token.inserted{color:#70f}.theme-default-content pre,.theme-default-content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;background-color:#1f0246;border-radius:6px;overflow:auto}.theme-default-content pre[class*=language-] code,.theme-default-content pre code{color:#fff;padding:0;background-color:transparent;border-radius:0}div[class*=language-]{position:relative;background-color:#1f0246;border-radius:6px}div[class*=language-] .highlight-lines{-webkit-user-select:none;-ms-user-select:none;user-select:none;padding-top:1.3rem;position:absolute;top:0;left:0;width:100%;line-height:1.4}div[class*=language-] .highlight-lines .highlighted{background-color:rgba(0,0,0,.66)}div[class*=language-] pre,div[class*=language-] pre[class*=language-]{background:transparent;position:relative;z-index:1}div[class*=language-]:before{position:absolute;z-index:3;top:.8em;right:1em;font-size:.75rem;color:hsla(0,0%,100%,.4)}div[class*=language-]:not(.line-numbers-mode) .line-numbers-wrapper{display:none}div[class*=language-].line-numbers-mode .highlight-lines .highlighted{position:relative}div[class*=language-].line-numbers-mode .highlight-lines .highlighted:before{content:" ";position:absolute;z-index:3;left:0;top:0;display:block;width:3.5rem;height:100%;background-color:rgba(0,0,0,.66)}div[class*=language-].line-numbers-mode pre{padding-left:4.5rem;vertical-align:middle}div[class*=language-].line-numbers-mode .line-numbers-wrapper{position:absolute;top:0;width:3.5rem;text-align:center;color:hsla(0,0%,100%,.3);padding:1.25rem 0;line-height:1.4}div[class*=language-].line-numbers-mode .line-numbers-wrapper br{-webkit-user-select:none;-ms-user-select:none;user-select:none}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number{position:relative;z-index:4;-webkit-user-select:none;-ms-user-select:none;user-select:none;font-size:.85em}div[class*=language-].line-numbers-mode:after{content:"";position:absolute;z-index:2;top:0;left:0;width:3.5rem;height:100%;border-radius:6px 0 0 6px;border-right:1px solid rgba(0,0,0,.66);background-color:#1f0246}div[class~=language-js]:before{content:"js"}div[class~=language-ts]:before{content:"ts"}div[class~=language-html]:before{content:"html"}div[class~=language-md]:before{content:"md"}div[class~=language-vue]:before{content:"vue"}div[class~=language-css]:before{content:"css"}div[class~=language-sass]:before{content:"sass"}div[class~=language-scss]:before{content:"scss"}div[class~=language-less]:before{content:"less"}div[class~=language-stylus]:before{content:"stylus"}div[class~=language-go]:before{content:"go"}div[class~=language-java]:before{content:"java"}div[class~=language-c]:before{content:"c"}div[class~=language-sh]:before{content:"sh"}div[class~=language-yaml]:before{content:"yaml"}div[class~=language-py]:before{content:"py"}div[class~=language-docker]:before{content:"docker"}div[class~=language-dockerfile]:before{content:"dockerfile"}div[class~=language-makefile]:before{content:"makefile"}div[class~=language-javascript]:before{content:"js"}div[class~=language-typescript]:before{content:"ts"}div[class~=language-markup]:before{content:"html"}div[class~=language-markdown]:before{content:"md"}div[class~=language-json]:before{content:"json"}div[class~=language-ruby]:before{content:"rb"}div[class~=language-python]:before{content:"py"}div[class~=language-bash]:before{content:"sh"}div[class~=language-php]:before{content:"php"}.custom-block .custom-block-title{font-weight:600;margin-bottom:-.4rem}.custom-block.danger,.custom-block.tip,.custom-block.warning{padding:.1rem 1.5rem;border-left-width:.5rem;border-left-style:solid;margin:1rem 0}.custom-block.tip{background-color:#f3f5f7;border-color:#42b983}.custom-block.warning{background-color:rgba(255,229,100,.3);border-color:#e7c000;color:#6b5900}.custom-block.warning .custom-block-title{color:#b29400}.custom-block.warning a{color:#2c3e50}.custom-block.danger{background-color:#ffe6e6;border-color:#c00;color:#4d0000}.custom-block.danger .custom-block-title{color:#900}.custom-block.danger a{color:#2c3e50}.custom-block.details{display:block;position:relative;border-radius:2px;margin:1.6em 0;padding:1.6em;background-color:#eee}.custom-block.details h4{margin-top:0}.custom-block.details figure:last-child,.custom-block.details p:last-child{margin-bottom:0;padding-bottom:0}.custom-block.details summary{outline:none;cursor:pointer}.arrow{display:inline-block;width:0;height:0}.arrow.up{border-bottom:6px solid #ccc}.arrow.down,.arrow.up{border-left:4px solid transparent;border-right:4px solid transparent}.arrow.down{border-top:6px solid #ccc}.arrow.right{border-left:6px solid #ccc}.arrow.left,.arrow.right{border-top:4px solid transparent;border-bottom:4px solid transparent}.arrow.left{border-right:6px solid #ccc}.theme-default-content:not(.custom){max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.theme-default-content:not(.custom){padding:2rem}}@media (max-width:419px){.theme-default-content:not(.custom){padding:1.5rem}}.table-of-contents .badge{vertical-align:middle}body,html{padding:0;margin:0;background-color:#fff}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;color:#2c3e50}.page{padding-left:20rem}.navbar{z-index:20;right:0;height:3.6rem;background-color:#fff;box-sizing:border-box;border-bottom:1px solid #eaecef}.navbar,.sidebar-mask{position:fixed;top:0;left:0}.sidebar-mask{z-index:9;width:100vw;height:100vh;display:none}.sidebar{font-size:16px;background-color:#fff;width:20rem;position:fixed;z-index:10;margin:0;top:3.6rem;left:0;bottom:0;box-sizing:border-box;border-right:1px solid #eaecef;overflow-y:auto}.theme-default-content:not(.custom)>:first-child{margin-top:3.6rem}.theme-default-content:not(.custom) a:hover{text-decoration:underline}.theme-default-content:not(.custom) p.demo{padding:1rem 1.5rem;border:1px solid #ddd;border-radius:4px}.theme-default-content:not(.custom) img{max-width:100%}.theme-default-content.custom{padding:0;margin:0}.theme-default-content.custom img{max-width:100%}a{font-weight:500;color:#70f;text-decoration:none}p a code{font-weight:400;color:#70f}kbd{background:#eee;border:.15rem solid #ddd;border-bottom:.25rem solid #ddd;border-radius:.15rem;padding:0 .15em}blockquote{font-size:1rem;color:#999;border-left:.2rem solid #dfe2e5;margin:1rem 0;padding:.25rem 0 .25rem 1rem}blockquote>p{margin:0}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}.theme-default-content:not(.custom)>h1,.theme-default-content:not(.custom)>h2,.theme-default-content:not(.custom)>h3,.theme-default-content:not(.custom)>h4,.theme-default-content:not(.custom)>h5,.theme-default-content:not(.custom)>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.theme-default-content:not(.custom)>h1:first-child,.theme-default-content:not(.custom)>h2:first-child,.theme-default-content:not(.custom)>h3:first-child,.theme-default-content:not(.custom)>h4:first-child,.theme-default-content:not(.custom)>h5:first-child,.theme-default-content:not(.custom)>h6:first-child{margin-top:-1.5rem;margin-bottom:1rem}.theme-default-content:not(.custom)>h1:first-child+.custom-block,.theme-default-content:not(.custom)>h1:first-child+p,.theme-default-content:not(.custom)>h1:first-child+pre,.theme-default-content:not(.custom)>h2:first-child+.custom-block,.theme-default-content:not(.custom)>h2:first-child+p,.theme-default-content:not(.custom)>h2:first-child+pre,.theme-default-content:not(.custom)>h3:first-child+.custom-block,.theme-default-content:not(.custom)>h3:first-child+p,.theme-default-content:not(.custom)>h3:first-child+pre,.theme-default-content:not(.custom)>h4:first-child+.custom-block,.theme-default-content:not(.custom)>h4:first-child+p,.theme-default-content:not(.custom)>h4:first-child+pre,.theme-default-content:not(.custom)>h5:first-child+.custom-block,.theme-default-content:not(.custom)>h5:first-child+p,.theme-default-content:not(.custom)>h5:first-child+pre,.theme-default-content:not(.custom)>h6:first-child+.custom-block,.theme-default-content:not(.custom)>h6:first-child+p,.theme-default-content:not(.custom)>h6:first-child+pre{margin-top:2rem}h1:hover .header-anchor,h2:hover .header-anchor,h3:hover .header-anchor,h4:hover .header-anchor,h5:hover .header-anchor,h6:hover .header-anchor{opacity:1}h1{font-size:2.2rem}h2{font-size:1.65rem;padding-bottom:.3rem;border-bottom:1px solid #eaecef}h3{font-size:1.35rem}a.header-anchor{font-size:.85em;float:left;margin-left:-.87em;padding-right:.23em;margin-top:.125em;opacity:0}a.header-anchor:hover{text-decoration:none}.line-number,code,kbd{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ol,p,ul{line-height:1.7}hr{border:0;border-top:1px solid #eaecef}table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}tr{border-top:1px solid #dfe2e5}tr:nth-child(2n){background-color:#f6f8fa}td,th{border:1px solid #dfe2e5;padding:.6em 1em}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .theme-default-content:not(.custom)>h1,.theme-container.no-navbar h2,.theme-container.no-navbar h3,.theme-container.no-navbar h4,.theme-container.no-navbar h5,.theme-container.no-navbar h6{margin-top:1.5rem;padding-top:0}.theme-container.no-navbar .sidebar{top:0}@media (min-width:720px){.theme-container.no-sidebar .sidebar{display:none}.theme-container.no-sidebar .page{padding-left:0}}@media (max-width:959px){.sidebar{font-size:15px;width:16.4rem}.page{padding-left:16.4rem}}@media (max-width:719px){.sidebar{top:0;padding-top:3.6rem;transform:translateX(-100%);transition:transform .2s ease}.page{padding-left:0}.theme-container.sidebar-open .sidebar{transform:translateX(0)}.theme-container.no-navbar .sidebar{padding-top:0}}@media (max-width:419px){h1{font-size:1.9rem}.theme-default-content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}#nprogress{pointer-events:none}#nprogress .bar{background:#70f;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #70f,0 0 5px #70f;opacity:1;transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border-color:#70f transparent transparent #70f;border-style:solid;border-width:2px;border-radius:50%;-webkit-animation:nprogress-spinner .4s linear infinite;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.icon.outbound{color:#aaa;display:inline-block;vertical-align:middle;position:relative;top:-1px}.home{padding:3.6rem 2rem 0;max-width:960px;margin:0 auto;display:block}.home .hero{text-align:center}.home .hero img{max-width:100%;max-height:280px;display:block;margin:3rem auto 1.5rem}.home .hero h1{font-size:3rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.8rem auto}.home .hero .description{max-width:35rem;font-size:1.6rem;line-height:1.3;color:#6a8bad}.home .hero .action-button{display:inline-block;font-size:1.2rem;color:#fff;background-color:#70f;padding:.8rem 1.6rem;border-radius:4px;transition:background-color .1s ease;box-sizing:border-box;border-bottom:1px solid #6b00e6}.home .hero .action-button:hover{background-color:#851aff}.home .features{border-top:1px solid #eaecef;padding:1.2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.home .feature{flex-grow:1;flex-basis:30%;max-width:30%}.home .feature h2{font-size:1.4rem;font-weight:500;border-bottom:none;padding-bottom:0;color:#3a5169}.home .feature p{color:#4e6e8e}.home .footer{padding:2.5rem;border-top:1px solid #eaecef;text-align:center;color:#4e6e8e}@media (max-width:719px){.home .features{flex-direction:column}.home .feature{max-width:100%;padding:0 2.5rem}}@media (max-width:419px){.home{padding-left:1.5rem;padding-right:1.5rem}.home .hero img{max-height:210px;margin:2rem auto 1.2rem}.home .hero h1{font-size:2rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.2rem auto}.home .hero .description{font-size:1.2rem}.home .hero .action-button{font-size:1rem;padding:.6rem 1.2rem}.home .feature h2{font-size:1.25rem}}.search-box{display:inline-block;position:relative;margin-right:1rem}.search-box input{cursor:text;width:10rem;height:2rem;color:#4e6e8e;display:inline-block;border:1px solid #cfd4db;border-radius:2rem;font-size:.9rem;line-height:2rem;padding:0 .5rem 0 2rem;outline:none;transition:all .2s ease;background:#fff url(/vue-cheat-sheet/assets/img/search.83621669.svg) .6rem .5rem no-repeat;background-size:1rem}.search-box input:focus{cursor:auto;border-color:#70f}.search-box .suggestions{background:#fff;width:20rem;position:absolute;top:2rem;border:1px solid #cfd4db;border-radius:6px;padding:.4rem;list-style-type:none}.search-box .suggestions.align-right{right:0}.search-box .suggestion{line-height:1.4;padding:.4rem .6rem;border-radius:4px;cursor:pointer}.search-box .suggestion a{white-space:normal;color:#5d82a6}.search-box .suggestion a .page-title{font-weight:600}.search-box .suggestion a .header{font-size:.9em;margin-left:.25em}.search-box .suggestion.focused{background-color:#f3f4f5}.search-box .suggestion.focused a{color:#70f}@media (max-width:959px){.search-box input{cursor:pointer;width:0;border-color:transparent;position:relative}.search-box input:focus{cursor:text;left:0;width:10rem}}@media (-ms-high-contrast:none){.search-box input{height:2rem}}@media (max-width:959px) and (min-width:719px){.search-box .suggestions{left:0}}@media (max-width:719px){.search-box{margin-right:0}.search-box input{left:1rem}.search-box .suggestions{right:0}}@media (max-width:419px){.search-box .suggestions{width:calc(100vw - 4rem)}.search-box input:focus{width:8rem}}.sidebar-button{cursor:pointer;display:none;width:1.25rem;height:1.25rem;position:absolute;padding:.6rem;top:.6rem;left:1rem}.sidebar-button .icon{display:block;width:1.25rem;height:1.25rem}@media (max-width:719px){.sidebar-button{display:block}}.dropdown-enter,.dropdown-leave-to{height:0!important}.dropdown-wrapper{cursor:pointer}.dropdown-wrapper .dropdown-title{display:block;font-size:.9rem;font-family:inherit;cursor:inherit;padding:inherit;line-height:1.4rem;background:transparent;border:none;font-weight:500;color:#2c3e50}.dropdown-wrapper .dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.dropdown-wrapper .nav-dropdown .dropdown-item{color:inherit;line-height:1.7rem}.dropdown-wrapper .nav-dropdown .dropdown-item h4{margin:.45rem 0 0;border-top:1px solid #eee;padding:.45rem 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper{padding:0;list-style:none}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem{font-size:.9em}.dropdown-wrapper .nav-dropdown .dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active,.dropdown-wrapper .nav-dropdown .dropdown-item a:hover{color:#70f}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{content:"";width:0;height:0;border-left:5px solid #70f;border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 2px);left:9px}.dropdown-wrapper .nav-dropdown .dropdown-item:first-child h4{margin-top:0;padding-top:0;border-top:0}@media (max-width:719px){.dropdown-wrapper.open .dropdown-title{margin-bottom:.5rem}.dropdown-wrapper .dropdown-title{font-weight:600;font-size:inherit}.dropdown-wrapper .dropdown-title:hover{color:#70f}.dropdown-wrapper .nav-dropdown{transition:height .1s ease-out;overflow:hidden}.dropdown-wrapper .nav-dropdown .dropdown-item h4{border-top:0;margin-top:0;padding-top:0}.dropdown-wrapper .nav-dropdown .dropdown-item>a,.dropdown-wrapper .nav-dropdown .dropdown-item h4{font-size:15px;line-height:2rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem{font-size:14px;padding-left:1rem}}@media (min-width:719px){.dropdown-wrapper{height:1.8rem}.dropdown-wrapper.open .nav-dropdown,.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper.open:blur{display:none}.dropdown-wrapper .dropdown-title .arrow{border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #ccc;border-bottom:0}.dropdown-wrapper .nav-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:#fff;padding:.6rem 0;border:1px solid;border-color:#ddd #ddd #ccc;text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}}.nav-links{display:inline-block}.nav-links a{line-height:1.4rem;color:inherit}.nav-links a.router-link-active,.nav-links a:hover{color:#70f}.nav-links .nav-item{position:relative;display:inline-block;margin-left:1.5rem;line-height:2rem}.nav-links .nav-item:first-child{margin-left:0}.nav-links .repo-link{margin-left:1.5rem}@media (max-width:719px){.nav-links .nav-item,.nav-links .repo-link{margin-left:0}}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#2c3e50}.nav-item>a:not(.external).router-link-active,.nav-item>a:not(.external):hover{margin-bottom:-2px;border-bottom:2px solid #8214ff}}.navbar{padding:.7rem 1.5rem;line-height:2.2rem}.navbar a,.navbar img,.navbar span{display:inline-block}.navbar .logo{height:2.2rem;min-width:2.2rem;margin-right:.8rem;vertical-align:top}.navbar .site-name{font-size:1.3rem;font-weight:600;color:#2c3e50;position:relative}.navbar .links{padding-left:1.5rem;box-sizing:border-box;background-color:#fff;white-space:nowrap;font-size:.9rem;position:absolute;right:1.5rem;top:.7rem;display:flex}.navbar .links .search-box{flex:0 0 auto;vertical-align:top}@media (max-width:719px){.navbar{padding-left:4rem}.navbar .can-hide{display:none}.navbar .links{padding-left:1.5rem}.navbar .site-name{width:calc(100vw - 9.4rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.page-edit{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-edit{padding:2rem}}@media (max-width:419px){.page-edit{padding:1.5rem}}.page-edit{padding-top:1rem;padding-bottom:1rem;overflow:auto}.page-edit .edit-link{display:inline-block}.page-edit .edit-link a{color:#4e6e8e;margin-right:.25rem}.page-edit .last-updated{float:right;font-size:.9em}.page-edit .last-updated .prefix{font-weight:500;color:#4e6e8e}.page-edit .last-updated .time{font-weight:400;color:#aaa}@media (max-width:719px){.page-edit .edit-link{margin-bottom:.5rem}.page-edit .last-updated{font-size:.8em;float:none;text-align:left}}.page-nav{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-nav{padding:2rem}}@media (max-width:419px){.page-nav{padding:1.5rem}}.page-nav{padding-top:1rem;padding-bottom:0}.page-nav .inner{min-height:2rem;margin-top:0;border-top:1px solid #eaecef;padding-top:1rem;overflow:auto}.page-nav .next{float:right}.page{padding-bottom:2rem;display:block}.sidebar-group .sidebar-group{padding-left:.5em}.sidebar-group:not(.collapsable) .sidebar-heading:not(.clickable){cursor:auto;color:inherit}.sidebar-group.is-sub-group{padding-left:0}.sidebar-group.is-sub-group>.sidebar-heading{font-size:.95em;line-height:1.4;font-weight:400;padding-left:2rem}.sidebar-group.is-sub-group>.sidebar-heading:not(.clickable){opacity:.5}.sidebar-group.is-sub-group>.sidebar-group-items{padding-left:1rem}.sidebar-group.is-sub-group>.sidebar-group-items>li>.sidebar-link{font-size:.95em;border-left:none}.sidebar-group.depth-2>.sidebar-heading{border-left:none}.sidebar-heading{color:#2c3e50;transition:color .15s ease;cursor:pointer;font-size:1.1em;font-weight:700;padding:.35rem 1.5rem .35rem 1.25rem;width:100%;box-sizing:border-box;margin:0;border-left:.25rem solid transparent}.sidebar-heading.open,.sidebar-heading:hover{color:inherit}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-heading.clickable.active{font-weight:600;color:#70f;border-left-color:#70f}.sidebar-heading.clickable:hover{color:#70f}.sidebar-group-items{transition:height .1s ease-out;font-size:.95em;overflow:hidden}.sidebar .sidebar-sub-headers{padding-left:1rem;font-size:.95em}a.sidebar-link{font-size:1em;font-weight:400;display:inline-block;color:#2c3e50;border-left:.25rem solid transparent;padding:.35rem 1rem .35rem 1.25rem;line-height:1.4;width:100%;box-sizing:border-box}a.sidebar-link:hover{color:#70f}a.sidebar-link.active{font-weight:600;color:#70f;border-left-color:#70f}.sidebar-group a.sidebar-link{padding-left:2rem}.sidebar-sub-headers a.sidebar-link{padding-top:.25rem;padding-bottom:.25rem;border-left:none}.sidebar-sub-headers a.sidebar-link.active{font-weight:500}.sidebar ul{padding:0;margin:0;list-style-type:none}.sidebar a{display:inline-block}.sidebar .nav-links{display:none;border-bottom:1px solid #eaecef;padding:.5rem 0 .75rem}.sidebar .nav-links a{font-weight:600}.sidebar .nav-links .nav-item,.sidebar .nav-links .repo-link{display:block;line-height:1.25rem;font-size:1.1em;padding:.5rem 0 .5rem 1.5rem}.sidebar>.sidebar-links{padding:1.5rem 0}.sidebar>.sidebar-links>li>a.sidebar-link{font-size:1.1em;line-height:1.7;font-weight:700}.sidebar>.sidebar-links>li:not(:first-child){margin-top:.75rem}@media (max-width:719px){.sidebar .nav-links{display:block}.sidebar .nav-links .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{top:calc(1rem - 2px)}.sidebar>.sidebar-links{padding:1rem 0}}.home #main-title{color:#650ace;text-transform:uppercase}.home .action-button{background-color:#70f!important;border-radius:46px}.home .feature{box-shadow:0 0 10px #ddd;padding:10px;border-radius:5px;min-height:148px}.btn{padding:6px 16px;font-size:.875rem;min-width:64px;box-sizing:border-box;font-weight:500;line-height:1.75;border-radius:4px;letter-spacing:.02857em;text-transform:uppercase;outline:none;cursor:pointer}.output{padding:27px;box-shadow:inset 0 2px 11px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.inner,.output{border:thin solid #aaa;border-radius:10px}.inner{padding:10px}.badge[data-v-15b7b770]{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:#fff}.badge.green[data-v-15b7b770],.badge.tip[data-v-15b7b770],.badge[data-v-15b7b770]{background-color:#42b983}.badge.error[data-v-15b7b770]{background-color:#da5961}.badge.warn[data-v-15b7b770],.badge.warning[data-v-15b7b770],.badge.yellow[data-v-15b7b770]{background-color:#e7c000}.badge+.badge[data-v-15b7b770]{margin-left:5px}


--------------------------------------------------------------------------------
/docs/guide/README.md:
--------------------------------------------------------------------------------
   1 | # vue-cheat-sheet
   2 | My cheat sheet for vue.js most basic stuff. The goal wasn't to make another [Vue documentation](https://vuejs.org/v2/guide/), because the official one is already badass.
   3 | 
   4 | Contributions and PRs are very welcome.
   5 | 
   6 | _"You must type each of these exercises in, manually. If you copy and paste, you might as well not even do them. The point of these exercises is to train your hands, your brain, and your mind in how to read, write, and see code. If you copy-paste, you are cheating yourself out of the effectiveness of the lessons."_ - Zed A.
   7 | 
   8 | Sources:
   9 | * [iamshaunjp](https://github.com/iamshaunjp/vuejs-playlist)
  10 | * [Vue.js official guide](https://vuejs.org/v2/guide/)
  11 | 
  12 | Useful Chrome extensions:
  13 | * [Vue Devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en)
  14 | * [JSON Formatter](https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=en)
  15 | 
  16 | Stuff that might get handy in almost every Vue.js project:
  17 | * [Auth restrictions](http://www.eddyella.com/2017/04/24/vue-2-spa-restricting-components-for-logged-in-users-only/)
  18 | * [Vue reactivity](https://vuejs.org/v2/guide/reactivity.html)
  19 | * [Improve Vuex performance](https://medium.com/@jiihu/how-to-improve-performance-of-vuex-store-c9e3cfb01f72)
  20 | 
  21 | ---
  22 | ## Basic HTML and JS
  23 | 
  24 | <<< @/docs/.vuepress/components/BasicHTMLJS.vue
  25 | 
  26 | <VOutput>
  27 | <BasicHTMLJS />
  28 | </VOutput>
  29 | 
  30 | ## Anatomy of Vue component
  31 | ![](https://cdn-images-1.medium.com/max/2000/1*C4A0g1KYpa_olbSJcxAEBA.png)
  32 | 
  33 | ## HTML directives  
  34 | ##### Show / hide div
  35 | ##### Hides the element (display none), doesn't delete it
  36 | where _`available`_ is a boolean variable in the js script
  37 | ```html
  38 | <div v-show="available">Stuff</div>
  39 | ```
  40 | <<< @/docs/.vuepress/components/CondRenderShow.vue
  41 | 
  42 | <VOutput>
  43 | <CondRenderShow />
  44 | </VOutput>
  45 | 
  46 | 
  47 | #### Conditional rendering
  48 |  it deletes the element from the DOM tree
  49 | ```html
  50 | <div v-if="available">Stuff</div>
  51 | <div v-else>Smth else</div>
  52 | ```
  53 | <<< @/docs/.vuepress/components/CondRenderIf.vue
  54 | 
  55 | <VOutput>
  56 | <CondRenderIf />
  57 | </VOutput>
  58 | 
  59 | #### Looping
  60 | ##### array of strings
  61 | Remember to check if the element exists with v-if before looping over it
  62 | ```html
  63 | <ul>
  64 |     <li v-for="(element, index) in elements">{{index}} {{element}}</li>
  65 | </ul>
  66 | ```
  67 | ##### array of objects 
  68 | 
  69 | ::: warning
  70 | Don't use `v-if` and `v-for` in the same element for more details check this [article](https://www.codechief.org/article/dont-use-v-if-with-v-for-elements)
  71 | 
  72 | :::
  73 | ```html
  74 | <ul v-if="employee">
  75 |     <li  v-for="employee in employees">{{employee.name}} - {{employee.age}}</li>
  76 | </ul>
  77 | ```
  78 | 
  79 | ##### nested arrays
  80 | ```html
  81 | <table>
  82 |     <tr>
  83 |       <th>Amount</th>
  84 |       <th>Asset</th>
  85 |       <th>Created</th>
  86 |     </tr>
  87 |     <template v-for="u in users">
  88 |       <tr v-for="t in u.transfers">>
  89 |         	<td>{{ t.amount }}</td>
  90 | 	        <td>{{ t.asset }}</td>
  91 | 	        <td>{{ t.timestamp }}</td>>
  92 |       </tr>
  93 |     </template>
  94 | </table>
  95 | ```
  96 | 
  97 | ##### variables in v-for
  98 | ```html
  99 | <li v-for="id in users" :key="id" :set="item = getUserData(id)">
 100 |     <img :src="item.avatar" /><br />
 101 |     {{ item.name }}<br />
 102 |     {{ item.homepage }}
 103 | </li>
 104 | ```
 105 | 
 106 | <<< @/docs/.vuepress/components/ListRendering.vue
 107 | 
 108 | <VOutput>
 109 | <ListRendering />
 110 | </VOutput>
 111 | 
 112 | 
 113 |  Set html for element from a variable _name_
 114 | ```html
 115 | <span v-html="name"></span>
 116 | ```
 117 | The `v-html` directive outputs the real html rendered content not a plain text
 118 | 
 119 | <<< @/docs/.vuepress/components/VHtml.vue
 120 | 
 121 | <VOutput>
 122 | <VHtml />
 123 | </VOutput>
 124 | 
 125 | 
 126 | ## Two way data binding
 127 | 
 128 | `v-model` directive allows you to bind a data object property with a form input :
 129 | 
 130 | ```html
 131 | <input v-model="name" type="text" />
 132 | <p>My name is: {{name}}</p>
 133 | ```
 134 | ```javascript
 135 | ...
 136 | data(){
 137 | 	return{
 138 |     name: ""
 139 |   }
 140 | }
 141 | ...
 142 | ```
 143 | 
 144 | <VOutput>
 145 | <VModel />
 146 | </VOutput>
 147 | 
 148 | ## Computed properties
 149 | > Computed properties are cached, and only re-computed on reactive dependency changes. Note that if a certain dependency is out of the instance’s scope (i.e. not reactive), the computed property will not be updated. In other words, imagine a computed property as a method (but it's not really a method) in the ```data()``` that always returns a value. That "method" will be called whenever a property (variable from ```data()```) used in that method is changed.
 150 | 
 151 | ```html
 152 | <html>
 153 | <head>
 154 |     <meta charset="utf8">
 155 |     <title>VueJS example</title>
 156 |     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 157 | </head>
 158 | 
 159 | <body>
 160 | <div id="vue-app">
 161 |     <button v-on:click="a++">Counter 1++</button>
 162 |     <button v-on:click="a--">Counter 1--</button>
 163 |     <button v-on:click="b++">Counter 2++</button>
 164 |     <p>Counter 1: {{ a }}</p>
 165 |     <p>Counter 2: {{ b }}</p>
 166 |     <!--The result() method is invoked whenever the Counter 1 button is clicker or the Counter 2 button is clicked-->
 167 |     <!--The output() method is invoked only when the Counter 2 button is clicked-->
 168 |     <p>Result: {{ result() }} | {{ output }}</p>
 169 | 
 170 | </div>
 171 | 
 172 | <script src="main.js"></script>
 173 | </body>
 174 | </html>
 175 | ```
 176 | 
 177 | ```javascript
 178 | new Vue({
 179 |     el: '#vue-app',
 180 |     data: {
 181 |         a: 0,
 182 |         b: 0
 183 |     },
 184 |     methods: {
 185 |         result: function () {
 186 |             // this function is not interested in the "b" variable, yet it runs every time when the result needs to be changed
 187 |             console.log("methods");
 188 |             return this.a < 0 ? "Negative" : "Positive";
 189 |         }
 190 |     },
 191 |     computed: {
 192 |         // these methods are invoked like attributes, without ()
 193 |         // this method runs only when the "a" variable is changed
 194 |         output: function () {
 195 |             console.log("computed");
 196 |             return this.a < 0 ? "Negative" : "Positive";
 197 |         }
 198 |     }
 199 | });
 200 | ```
 201 | ##### Computed property methods can also have getters and setters
 202 | ```javascript
 203 | var vm = new Vue({
 204 |   data: { a: 1 },
 205 |   computed: {
 206 |     // get only
 207 |     aDouble: function () {
 208 |       return this.a * 2
 209 |     },
 210 |     // both get and set
 211 |     aPlus: {
 212 |       get: function () {
 213 |         return this.a + 1
 214 |       },
 215 |       set: function (v) {
 216 |         this.a = v - 1
 217 |       }
 218 |     }
 219 |   }
 220 | })
 221 | vm.aPlus   // => 2
 222 | vm.aPlus = 3
 223 | vm.a       // => 2
 224 | vm.aDouble // => 4
 225 | ```
 226 | 
 227 | ## HTML properties and classes
 228 | ```html
 229 | <p v-bind:style="{ property: value }">...</p>
 230 | ```
 231 | this div will have the _red_ class if the _userFound_ variable is set to _true_
 232 | ```html
 233 | <div v-bind:class="{ red: userFound }">...</div>
 234 | ```
 235 | this div will have the _red_ class if the _isAdmin_ variable is set to _true_
 236 | ```html
 237 | <div :class="[isAdmin ? 'red' : 'blue']">...</div>
 238 | ```
 239 | 
 240 | ## Events
 241 | ##### Call _method_ on click event
 242 | where _method_ is a custom method in the js
 243 | ```html
 244 | <button v-on:click="method">Add</button>
 245 | ```
 246 | ##### or shorthand
 247 | where _method_ is a custom method in the js
 248 | ```html
 249 | <button @click="method">Add</button>
 250 | ```
 251 | _method_ is called when ALT+ENTER is pressed
 252 | ```html
 253 | <input ref="name" v-on:keyup.alt.enter="method" type="text" />
 254 | ```
 255 | <<< @/docs/.vuepress/components/EventKeyModifier.vue
 256 | 
 257 | <VOutput>
 258 | <EventKeyModifier />
 259 | </VOutput>
 260 | 
 261 | ##### Conditional event binding (as of Vue 2.6)
 262 | The method ```sendModey``` will be called only if the condition ``` amount > 0 ``` has been met.
 263 | ```vue
 264 | <button @click="amount > 0 && sendMoney()">Send money</button>
 265 | ```
 266 | 
 267 | ## Custom events
 268 | ```javascript
 269 | // fire custom event 
 270 | this.$emit("eventName", data);
 271 | ```
 272 | ```html
 273 | <!-- 
 274 | $event == event data
 275 | when _eventName_ event happens, call _functionName_ function
 276 | -->
 277 | <p v-on:eventName="functionName($event)"></p>
 278 | ```
 279 | 
 280 | ## Event bus
 281 | ##### communicate between child components without the parent component
 282 | ##### consider using Vuex instead
 283 | ```javascript
 284 | // main.js
 285 | // create new event bus
 286 | export const bus = new Vue();
 287 | ```
 288 | ```html
 289 | // Header.vue
 290 | import {bus} from "../main";
 291 | ```
 292 | ```html
 293 | // Footer.vue
 294 | import {bus} from "../main";
 295 | ```
 296 | ```javascript
 297 | // listen to bus event in first component
 298 | // usually in .created() function
 299 | bus.$on("eventName", (data) => {
 300 | 	// callback
 301 | 	// use data
 302 | })
 303 | 
 304 | // fire bus event in second component
 305 | bus.$emit("eventName", data);
 306 | ```
 307 | 
 308 | ## Components
 309 | ##### reusable inside the html
 310 | ```html
 311 | <div id="app">
 312 | 	<!-- <component is="signature"></component> -->
 313 | 	<signature></signature>
 314 | 	<signature></signature>
 315 | </div>
 316 | ```
 317 | ```javascript
 318 | // global registration 
 319 | Vue.component('signature', { 
 320 |      template: '<p>Regards. Matej.</p>'
 321 | });
 322 | ```
 323 | 
 324 | ## .vue components and props
 325 | ##### Props - passing data from parent component to child component
 326 | ```vue
 327 | <!--App.vue-->
 328 | <template>
 329 | 
 330 | <div>
 331 |   <app-header></app-header>
 332 |   <app-ninjas v-bind:ninjas="ninjas"></app-ninjas>
 333 |   <app-footer></app-footer>
 334 | </div>
 335 | 
 336 | </template>
 337 | 
 338 | <script>
 339 |   // import
 340 |   import Header from './components/Header.vue';
 341 |   import Footer from './components/Footer.vue';
 342 |   import Ninjas from './components/Ninjas.vue';
 343 |   export default {
 344 |   // register components
 345 |     components:{
 346 |       // added app- prefix
 347 |       // because header and footer tags already exist
 348 |       "app-header": Header,
 349 |       "app-footer": Footer,
 350 |       "app-ninjas": Ninjas
 351 |     },
 352 | 
 353 |     data () {
 354 |       return {
 355 |         ninjas:[
 356 |           {name: "ninja1", speciality: "vuejs", show: false},
 357 |           {name: "ninja2", speciality: "nodejs", show: false},
 358 |           {name: "ninja3", speciality: "react", show: false},
 359 |           {name: "ninja4", speciality: "js", show: false},
 360 |           {name: "ninja5", speciality: "css3", show: false},
 361 |           {name: "ninja6", speciality: "ps", show: false}
 362 |         ]
 363 |       }
 364 |     }
 365 | 
 366 |   }
 367 | 
 368 | </script>
 369 | ```
 370 | ```vue
 371 | <!--Ninjas.vue-->
 372 | <template>
 373 | <div id="ninjas">
 374 |   <ul>
 375 |     <li v-for="ninja in ninjas" v-on:click="ninja.show = !ninja.show">
 376 |       <h2>{{ninja.name}}</h2>
 377 |       <h3 v-show="ninja.show">{{ninja.speciality}}</h3>
 378 |     </li>
 379 |   </ul>
 380 | </div>
 381 | 
 382 | </template>
 383 | 
 384 | <script>
 385 | 
 386 |   export default {
 387 |     // what is it receiving
 388 |     props: ["ninjas"],
 389 | 
 390 |     data: function () {
 391 |       return {
 392 | 
 393 |       }
 394 |     }
 395 | 
 396 |   }
 397 | 
 398 | </script>
 399 | ```
 400 | ```vue
 401 | <!--Header.vue-->
 402 | <template>
 403 |   <header>
 404 |     <h1>{{title}}</h1>
 405 |   </header>
 406 | 
 407 | </template>
 408 | 
 409 | <script>
 410 | 
 411 |   export default {
 412 | 
 413 |     data: function () {
 414 |       return {
 415 |         title: "Welcome!"
 416 |       }
 417 |     }
 418 | 
 419 |   }
 420 | 
 421 | </script>
 422 | ```
 423 | ```vue
 424 | <!--Footer.vue-->
 425 | <template>
 426 | <footer>
 427 |   <p>{{copyright}}</p>
 428 | </footer>
 429 | 
 430 | </template>
 431 | 
 432 | <script>
 433 | 
 434 |   export default {
 435 | 
 436 | 
 437 |     data: function () {
 438 |       return {
 439 |         copyright: "Copyright 2017 "
 440 |       }
 441 |     }
 442 | 
 443 |   }
 444 | 
 445 | </script>
 446 | ```
 447 | 
 448 | ## Validate props
 449 | ```vue
 450 | export default {
 451 | 	props:{
 452 | 		ninjas:{
 453 | 			type: Array,
 454 | 			required: true
 455 | 		}
 456 | 	}
 457 | }
 458 | ```
 459 | 
 460 | ## Filters
 461 | ##### Change the output data to the browser. They do not change the data directly.
 462 | ```html
 463 | <h1>{{title | to-uppercase}}</h1>
 464 | ```
 465 | ```javascript
 466 | // main.js
 467 | Vue.filter("to-uppercase", function ( value ) {
 468 |     return value.toUpperCase();
 469 | });
 470 | ```
 471 | 
 472 | ## Mixins
 473 | ##### Reuse some piece if code (or function) so that it doesn't need to be written in more separate files.
 474 | 
 475 | 
 476 | ## References
 477 | ##### An object of DOM elements and component instances
 478 | ```html
 479 | <input ref="name" type="text" />
 480 | ```
 481 | ```javascript
 482 | var name = this.$refs.name;
 483 | 
 484 | ```
 485 | 
 486 | ## Dynamic components
 487 | dynamically change component based on variable _component_ value
 488 | rememberto use _keep-alive_ tag to remember data from the destroyed component
 489 | ```vue
 490 | <template>
 491 | 
 492 | <div>
 493 |   <component> v-bind:is="componentName"></component>
 494 | </div>
 495 | 
 496 | </template>
 497 | 
 498 | import formOne from "./components/formOne.vue";
 499 | import formTwo from "./components/formTwo.vue";
 500 | 
 501 | ...
 502 | data: function() {
 503 | 	return {
 504 | 		component: "form-two"
 505 | 	}
 506 | }
 507 | ```
 508 | 
 509 | ## Vue CLI
 510 | ##### make new project
 511 | ```
 512 | $ vue init webpack-simple my-project
 513 | $ cd project-name
 514 | ```
 515 | ##### install dependencies and start local server
 516 | ```
 517 | $ npm install
 518 | $ npm run dev
 519 | ```
 520 | ##### build app for production
 521 | this will make a dist folder with minified js
 522 | ```
 523 | $ npm run build
 524 | ```
 525 | 
 526 | ## Vue CLI 3
 527 | ##### make new project
 528 | ```
 529 | $ vue create my-project
 530 | $ cd project-name
 531 | ```
 532 | ##### install dependencies and start local server
 533 | ```
 534 | $ npm install
 535 | $ npm run serve
 536 | ```
 537 | ##### build app for production
 538 | this will make a dist folder with minified js
 539 | ```
 540 | $ npm run build
 541 | ```
 542 | 
 543 | 
 544 | ## Vue lifecycle
 545 | 
 546 | * new Vue();
 547 | * .beforeCreate();
 548 | * .created();
 549 | * .beforeMount();
 550 | * .updated();
 551 | * .beforeUpdate();
 552 | * .beforeDestroy();
 553 | * .destroyed();
 554 | ![](https://vuejs.org/images/lifecycle.png)
 555 | 
 556 | ## Checkboxes
 557 | ##### with v-model, the _categories_ array will be appended with the values
 558 | ```html
 559 | <div>
 560 | 	<label for="">Newsletters</label>
 561 | 	<input type="checkbox" value="newsletter" v-model="categories">
 562 | 	<label for="">New posts</label>
 563 | 	<input type="checkbox" value="post" v-model="categories">
 564 | 	<label for="">New DMs</label>
 565 | 	<input type="checkbox" value="dm" v-model="categories">
 566 | 	<label for="">New pokes</label>
 567 | 	<input type="checkbox" value="pokes" v-model="categories">
 568 | </div>
 569 | ```
 570 | ```javascript
 571 | data: function () {
 572 | 	categories: []
 573 | }
 574 | ```
 575 | 
 576 | ## Select box binding
 577 | ##### hardcoded and looped select
 578 | ```html
 579 | <div>
 580 | 	<select v-model="town">
 581 | 	  <option value="osijek">Osijek</option>
 582 | 	  <option value="zagreb">Zagreb</option>
 583 | 	  <option value="varazdin">Varazdin</option>
 584 | 	</select>
 585 | 
 586 | 	<select v-model="town">
 587 | 	  <option v-for="t in towns">{{ t }}</option>
 588 | 	</select>
 589 | </div>
 590 | ```
 591 | ```javascript
 592 | data: function () {
 593 | 	town: "",
 594 |         towns: ["Zagreb", "Algiers","Aflou","Aleppo","Osijek", "Varazdin", "Split", "Rijeka", "Dubrovnik",]
 595 | }
 596 | ```
 597 | ## Vue resource
 598 | ### POST requests with vue-resource
 599 | __Important: if sending nested objects, be sure to JSON.stringify first!__
 600 | #### Register it in main.js
 601 | ```javascript
 602 | import VueResource from 'vue-resource'
 603 | 
 604 | Vue.use(VueResource);
 605 | ```
 606 | #### Usage in custom function 
 607 | ```javascript
 608 | post: function () {
 609 | 	this.$http.post("http://localhost:3000/users", {
 610 | 		title: this.blog.title,
 611 | 		body: this.blog.body,
 612 | 		userId: 1
 613 | 	}).then( res => {
 614 | 	// promise
 615 | 		console.log("Response: ", res);
 616 | 	}, error => {
 617 | 		console.log("Error: ", error);
 618 | 	});
 619 | }
 620 | ```
 621 | 
 622 | ### GET requests
 623 | ##### Usage in custom function
 624 | ```javascript
 625 | post: function () {
 626 | 	this.$http.get("http://localhost:3000/users").then( function ( res ){
 627 | 		// promise
 628 | 		console.log("Response: ", res)
 629 | 	});
 630 | }
 631 | ```
 632 | ## Vue with axios
 633 | 
 634 | ### installation
 635 | 
 636 |        npm install axios vue-axios --save 
 637 | 
 638 | ### Registration in `app.js` or `main.js`
 639 | 
 640 | ```js
 641 | import axios from 'axios';
 642 | import VueAxios from 'vue-axios';
 643 | Vue.use(VueAxios, axios);
 644 | ```
 645 | 
 646 | then you could get access to `this.axios` in any child component :
 647 | 
 648 | ```js
 649 |  this.axios.get(URL).then((result) => {
 650 |      //handle the result in case if the request is successfully processed  
 651 |  }).catch((err) => {
 652 |    //handle the error 
 653 |  });
 654 |  ...
 655 | 
 656 |   this.axios.post(URL,{
 657 |     //request body
 658 |   }).then((result) => {
 659 |      //handle the result in case if the request is successfully processed  
 660 |  }).catch((err) => {
 661 |    //handle the error 
 662 |  });
 663 | 
 664 | ```
 665 | 
 666 | 
 667 | ## Routes with vue-router
 668 | ```javascript
 669 | // router.js
 670 | import login from "./components/login.vue";
 671 | import registration from "./components/Registration.vue";
 672 | import user from "./components/user.vue";
 673 | ```
 674 | ```javascript
 675 | // main.js
 676 | import VueRouter from 'vue-router';
 677 | import { routes } from "./routes";
 678 | Vue.use(VueRouter);
 679 | 
 680 | const router = new VueRouter({
 681 |   routes
 682 | });
 683 | 
 684 | new Vue({
 685 |   el: '#app',
 686 |   router: router,
 687 |   render: h => h(App)  
 688 | })
 689 | ```
 690 | ```javascript
 691 | // routes.js
 692 | import Login from "./components/Login.vue";
 693 | import Registration from "./components/Registration.vue";
 694 | import User from "./components/User.vue";
 695 | 
 696 | export const routes = [
 697 |   { path: "", component: Login },
 698 |   { path: "/registration", component: Registration },
 699 |   { path: "/users/", component: Users, children: [
 700 |   	{ path: "", component: UserStart },
 701 | 	{ path: ":id", component: UserDetail },
 702 | 	{ path: ":id/edit", component: UserEdit }
 703 |   ] },
 704 |     {path: "*", redirect: "/"} // handle all uncovered routes 
 705 |   
 706 | ]
 707 | ```
 708 | ##### mark the place with router-view where the component of the currently active route will be loaded
 709 | ```html
 710 | <template>
 711 |     <router-view></router-view>
 712 | </template>
 713 | ```
 714 | ##### handling route parameters
 715 | ```vue
 716 | <!-- user.vue -->
 717 | <template>
 718 |     <div id="user">
 719 |       <h1></h1>
 720 |       <div></div>
 721 |     </div>
 722 | </template>
 723 | <script>
 724 | 
 725 |   export default {
 726 |     data: function () {
 727 |       return {
 728 |         id: this.$route.params.id,
 729 |         user: {}
 730 |       }
 731 |     },
 732 | 
 733 |     created(){
 734 |       this.$http.get("http://url/user/" + this.id).then(function(res){
 735 |         this.user = res.body;
 736 |       });
 737 |     }
 738 | 
 739 |   }
 740 | </script>
 741 | ```
 742 | ##### navigating around
 743 | ```html
 744 | <ul class="nav">
 745 | 	<router-link to="/" tag="li" active-class="active" exact><a>Home</a></router-link>
 746 | 	<router-link to="/users" tag="li" active-class="active" ><a>Users</a></router-link>
 747 | </ul>
 748 | ```
 749 | ##### dynamically route over user details
 750 | ```vue
 751 | <router-link v-bind:to='"/user/" + user.id' tag="li" v-for="(user, index) in users"> {{ user.username }}</router-link>
 752 | ```
 753 | ##### navigate home 
 754 | ```javascript
 755 | this.$router.push({ path: "/home"});
 756 | ```
 757 | 
 758 | ##### watch for route changes 
 759 | ```javascript
 760 | watch: {
 761 |       "$route": function (to, form){
 762 |         this.id = to.params.id
 763 |       }
 764 | }
 765 | ```
 766 | 
 767 | ##### watch if object is changed
 768 | ```javascript
 769 |     watch: {
 770 |       picked: {
 771 |         handler(val, oldVal) {
 772 |           console.log('changed: ', oldVal);
 773 |           console.log('new: ', val);
 774 |         },
 775 |         deep: true,
 776 |         immediate: true
 777 |       }
 778 |     }
 779 | ```
 780 | ## auth restrictions
 781 | To not let someone access e.g. /dashboard if the user is not logged in.
 782 | ```javascript
 783 | // add requiresAuth to certain components
 784 | export const routes = [
 785 |   { path: "", component: Login },
 786 |   { path: "/dashboard", component: Dashboard, meta: {requiresAuth: true} }
 787 | ];
 788 | ```
 789 | 
 790 | ```javascript
 791 | // configure vue-router
 792 | // important: do not turn on history mode
 793 | const router = new VueRouter({
 794 |   routes,
 795 |   // mode: "history"
 796 | })
 797 | 
 798 | router.beforeEach((to, from, next) => {
 799 |   if (to.matched.some(record => record.meta.requiresAuth)) {
 800 |     if ( CHECK_FOR_USER_IN_LOCALSTORAGE_ETC ) {
 801 |       // handle restricted access
 802 |       next({
 803 |         path: '/login',
 804 |       });
 805 |     } else {
 806 |       next();
 807 |     }
 808 |   } else {
 809 |     // do nothing with components without meta: {requiresAuth: true}
 810 |     next();
 811 |   }
 812 | })
 813 | ```
 814 | 
 815 | ## table search + sort
 816 | #### multiple column search
 817 | ```html
 818 | <!--input field for search query-->
 819 | <input type="text" v-model="searchQuery" placeholder="Search...">
 820 | <!--loop like this, instead of classic for user in users-->
 821 | <tr v-for="user in filterUsers">
 822 | ```
 823 | ```javascript
 824 | // users array and search query variable
 825 | 	data: function () {
 826 | 		return {
 827 | 			searchQuery: "",
 828 | 			users: []
 829 | 	};
 830 | },
 831 | 
 832 | ...
 833 | // computed method for filtering users by 
 834 | // email, last name and first name
 835 | computed: {
 836 | 	filterUsers () {
 837 | 		return this.users.filter(user => {
 838 | 		  return (user.email.toLowerCase().indexOf(this.searchQuery.toLowerCase()) > -1 ||
 839 | 		    user.lastName.toLowerCase().indexOf(this.searchQuery.toLowerCase()) > -1 ||
 840 | 		    user.firstName.toLowerCase().indexOf(this.searchQuery.toLowerCase()) > -1)
 841 | 		})
 842 | 	}
 843 | }
 844 | ```
 845 | 
 846 | #### sort columns asc and desc
 847 | ```javascript
 848 | // add needed variables
 849 |     data: function () {
 850 |       return {
 851 |         ascending: false,
 852 |         sortColumn: '',
 853 |         users: [],
 854 |       };
 855 |     },
 856 | methods: {
 857 |       // sort method
 858 |       "sortTable": function sortTable ( col ) {
 859 |         if ( this.sortColumn === col ) {
 860 |           this.ascending = !this.ascending;
 861 |         } else {
 862 |           this.ascending = true;
 863 |           this.sortColumn = col;
 864 |         }
 865 | 
 866 |         let ascending = this.ascending;
 867 | 
 868 |         this.users.sort(function ( a, b ) {
 869 |           if ( a[col] >= b[col] ) {
 870 |             return ascending ? 1 : -1
 871 |           } else if ( a[col] < b[col] ) {
 872 |             return ascending ? -1 : 1
 873 |           }
 874 |           return 0;
 875 |         })
 876 |       }
 877 | }
 878 | ```
 879 | ```html
 880 | <!--call sortTable method on column with corresponding property in users object-->
 881 | <tr>
 882 |   <th @click="sortTable('email')">Username</th>
 883 |   <th @click="sortTable('firstName')">First Name</th>
 884 |   <th @click="sortTable('lastName')">Last Name</th>
 885 |   <th @click="sortTable('address')">Address</th>
 886 |   <th>Phone number</th>
 887 | </tr>
 888 | ```
 889 | ## Search + filters + sort
 890 | ```javascript
 891 |     searchVideos() {
 892 |       let filtered = this.videos;
 893 |       // search by keyword
 894 |       if (this.filters.searchQuery) {
 895 |         filtered = this.videos.filter(
 896 |           v => v.title.toLowerCase().indexOf(this.filters.searchQuery) > -1
 897 |         );
 898 |       }
 899 |       // filter by date range
 900 |       if (this.filters.startDate && this.filters.endDate) {
 901 |         filtered = filtered.filter(v => {
 902 |           var time = new Date(v.created_at).getTime();
 903 |           return (new Date(this.filters.startDate).getTime() < time && time < new Date(this.filters.endDate).getTime());
 904 |         });
 905 |       }
 906 |       // filter by property value
 907 |       if (this.filters.filterVal) {
 908 |         if (this.filters.filterVal === 'female') {
 909 |           filtered = filtered.filter(
 910 |             v => v.gender === this.filters.filterVal
 911 |           );
 912 |         }
 913 | 	// sort by property
 914 |         if (this.filters.sortValue === 'most_popular') {
 915 |           filtered.sort(function(a, b) { return a.views - b.views; });
 916 |         }
 917 |       }
 918 |       return filtered;
 919 |     }
 920 | ```
 921 | ## async await
 922 | An ```async``` function returns a promise. When you want to call this function you prepend ```await```, and the calling code will stop until the promise is resolved or rejected.
 923 | ```javascript
 924 | // example
 925 | const doSomethingAsync = () => {
 926 |     return new Promise((resolve) => {
 927 |         setTimeout(() => resolve('I did something'), 3000)
 928 |     })
 929 | }
 930 | 
 931 | const doSomething = async () => {
 932 |     console.log(await doSomethingAsync())
 933 |     console.log('I did something again!')
 934 | }
 935 | 
 936 | doSomething()
 937 | // result:
 938 | // I did something!
 939 | // I did something again!
 940 | ```
 941 | 
 942 | ## async await with fetch in vuex
 943 | ```javascript
 944 | // example
 945 | import Vue from 'vue'
 946 | import Vuex from 'vuex'
 947 | 
 948 | Vue.use(Vuex)
 949 | 
 950 | export default new Vuex.Store({
 951 |   state: {
 952 |     data: null
 953 |   },
 954 |   mutations: {
 955 |     setData: (state, payload) => {
 956 |       state.resource = payload
 957 |     }
 958 |   },
 959 |   actions: {
 960 |     async getData({ commit }) {
 961 |       let res = null
 962 |       try {
 963 |         res = await fetch(
 964 |           'https://api.coindesk.com/v1/bpi/currentprice.json'
 965 |         )
 966 |       } catch (err) {
 967 |         console.log('err: ', err)
 968 |         return
 969 |       }
 970 | 
 971 |       // Handle success
 972 |       console.log('waiting for data...');
 973 |       const data = await res.json()
 974 |       console.log('data: ', data)
 975 |       commit('setData', data)
 976 |     }
 977 |   }
 978 | })
 979 | 
 980 | ```
 981 | ## import config file
 982 | ```javascript
 983 | // config.js
 984 | // example config file
 985 | var apiPort = 5566;
 986 | var currHost = window.location.protocol + '//' + window.location.hostname + ':' + apiPort + '/api/v1';
 987 | var url = window.location.host !== 'localhost:8080' ? 'http://PROD-URL/' : currHost;
 988 | 
 989 | export var cfg = {
 990 |   version: "0.1.0",
 991 |   api: {
 992 |     endpoint: url
 993 |   }
 994 | };
 995 | ```
 996 | ```javascript
 997 | // main.js
 998 | import * as config from './config'
 999 | window._cfg = config.cfg
1000 | ```
1001 | ## Focus on a field
1002 | ```javascript
1003 | mounted() {
1004 | 	this.$refs.myInput.focus();
1005 | }
1006 | ```
1007 | 
1008 | 
1009 | ## Stuff that might get handy
1010 | * _v-once_ - render the element and component only once
1011 | * _v-if_ - conditionally render the element
1012 | * [Difference between computed and methods](https://github.com/dekadentno/vue-cheat-sheet/blob/master/computed-properties.md)
1013 | * watch - specify what property to listen for changes and then execute some code without returning values
1014 | * v-model modifiers
1015 | 	* .lazy - fire event when user lefts the field
1016 | 	* .number - force the value to be converted to a integer
1017 | 	* .trim - delete whitespace
1018 | 


--------------------------------------------------------------------------------
/docs/.vuepress/dist/assets/js/2.746b8ddb.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[2],{298:function(t,e,n){"use strict";n.d(e,"d",(function(){return i})),n.d(e,"a",(function(){return a})),n.d(e,"i",(function(){return s})),n.d(e,"f",(function(){return u})),n.d(e,"g",(function(){return l})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return h})),n.d(e,"e",(function(){return f})),n.d(e,"k",(function(){return p})),n.d(e,"l",(function(){return d})),n.d(e,"c",(function(){return g})),n.d(e,"j",(function(){return v}));n(23),n(96),n(162),n(90),n(167),n(62),n(42),n(299),n(63),n(319),n(99);var i=/#.*$/,r=/\.(md|html)$/,a=/\/$/,s=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(i,"").replace(r,"")}function u(t){return s.test(t)}function l(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function h(t){if(u(t))return t;var e=t.match(i),n=e?e[0]:"",r=o(t);return a.test(r)?t:r+".html"+n}function f(t,e){var n=decodeURIComponent(t.hash),r=function(t){var e=t.match(i);if(e)return e[0]}(e);return(!r||n===r)&&o(t.path)===o(e)}function p(t,e,n){if(u(e))return{type:"external",path:e};n&&(e=function(t,e,n){var i=t.charAt(0);if("/"===i)return t;if("?"===i||"#"===i)return e+t;var r=e.split("/");n&&r[r.length-1]||r.pop();for(var a=t.replace(/^\//,"").split("/"),s=0;s<a.length;s++){var o=a[s];".."===o?r.pop():"."!==o&&r.push(o)}""!==r[0]&&r.unshift("");return r.join("/")}(e,n));for(var i=o(e),r=0;r<t.length;r++)if(o(t[r].regularPath)===i)return Object.assign({},t[r],{type:"page",path:h(t[r].path)});return console.error('[vuepress] No matching page found for sidebar item "'.concat(e,'"')),{}}function d(t,e,n,i){var r=n.pages,a=n.themeConfig,s=i&&a.locales&&a.locales[i]||a;if("auto"===(t.frontmatter.sidebar||s.sidebar||a.sidebar))return function(t){var e=g(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map((function(e){return{type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}}))}]}(t);var o=s.sidebar||a.sidebar;if(o){var u=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(var n in e)if(0===(i=t,/(\.html|\/)$/.test(i)?i:i+"/").indexOf(encodeURI(n)))return{base:n,config:e[n]};var i;return{}}(e,o),l=u.base,c=u.config;return c?c.map((function(t){return function t(e,n,i){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1;if("string"==typeof e)return p(n,e,i);if(Array.isArray(e))return Object.assign(p(n,e[0],i),{title:e[1]});var a=e.children||[];return 0===a.length&&e.path?Object.assign(p(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:a.map((function(e){return t(e,n,i,r+1)})),collapsable:!1!==e.collapsable}}(t,r,l)})):[]}return[]}function g(t){var e;return(t=t.map((function(t){return Object.assign({},t)}))).forEach((function(t){2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)})),t.filter((function(t){return 2===t.level}))}function v(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},299:function(t,e,n){"use strict";var i=n(164),r=n(7),a=n(12),s=n(22),o=n(165),u=n(166);i("match",1,(function(t,e,n){return[function(e){var n=s(this),i=null==e?void 0:e[t];return void 0!==i?i.call(e,n):new RegExp(e)[t](String(n))},function(t){var i=n(e,t,this);if(i.done)return i.value;var s=r(t),l=String(this);if(!s.global)return u(s,l);var c=s.unicode;s.lastIndex=0;for(var h,f=[],p=0;null!==(h=u(s,l));){var d=String(h[0]);f[p]=d,""===d&&(s.lastIndex=o(l,a(s.lastIndex),c)),p++}return 0===p?null:f}]}))},300:function(t,e,n){},301:function(t,e){t.exports="\t\n\v\f\r                　\u2028\u2029\ufeff"},302:function(t,e,n){},303:function(t,e,n){},304:function(t,e,n){},305:function(t,e,n){},306:function(t,e,n){},307:function(t,e,n){},308:function(t,e,n){},309:function(t,e,n){},310:function(t,e,n){},311:function(t,e,n){},312:function(t,e,n){},313:function(t,e,n){},319:function(t,e,n){"use strict";var i=n(164),r=n(163),a=n(7),s=n(22),o=n(95),u=n(165),l=n(12),c=n(166),h=n(65),f=n(2),p=[].push,d=Math.min,g=!f((function(){return!RegExp(4294967295,"y")}));i("split",2,(function(t,e,n){var i;return i="c"=="abbc".split(/(b)*/)[1]||4!="test".split(/(?:)/,-1).length||2!="ab".split(/(?:ab)*/).length||4!=".".split(/(.?)(.?)/).length||".".split(/()()/).length>1||"".split(/.?/).length?function(t,n){var i=String(s(this)),a=void 0===n?4294967295:n>>>0;if(0===a)return[];if(void 0===t)return[i];if(!r(t))return e.call(i,t,a);for(var o,u,l,c=[],f=(t.ignoreCase?"i":"")+(t.multiline?"m":"")+(t.unicode?"u":"")+(t.sticky?"y":""),d=0,g=new RegExp(t.source,f+"g");(o=h.call(g,i))&&!((u=g.lastIndex)>d&&(c.push(i.slice(d,o.index)),o.length>1&&o.index<i.length&&p.apply(c,o.slice(1)),l=o[0].length,d=u,c.length>=a));)g.lastIndex===o.index&&g.lastIndex++;return d===i.length?!l&&g.test("")||c.push(""):c.push(i.slice(d)),c.length>a?c.slice(0,a):c}:"0".split(void 0,0).length?function(t,n){return void 0===t&&0===n?[]:e.call(this,t,n)}:e,[function(e,n){var r=s(this),a=null==e?void 0:e[t];return void 0!==a?a.call(e,r,n):i.call(String(r),e,n)},function(t,r){var s=n(i,t,this,r,i!==e);if(s.done)return s.value;var h=a(t),f=String(this),p=o(h,RegExp),v=h.unicode,m=(h.ignoreCase?"i":"")+(h.multiline?"m":"")+(h.unicode?"u":"")+(g?"y":"g"),b=new p(g?h:"^(?:"+h.source+")",m),k=void 0===r?4294967295:r>>>0;if(0===k)return[];if(0===f.length)return null===c(b,f)?[f]:[];for(var _=0,x=0,C=[];x<f.length;){b.lastIndex=g?x:0;var $,y=c(b,g?f:f.slice(x));if(null===y||($=d(l(b.lastIndex+(g?0:x)),f.length))===_)x=u(f,x,v);else{if(C.push(f.slice(_,x)),C.length===k)return C;for(var L=1;L<=y.length-1;L++)if(C.push(y[L]),C.length===k)return C;x=_=$}}return C.push(f.slice(_)),C}]}),!g)},320:function(t,e,n){var i=n(22),r="["+n(301)+"]",a=RegExp("^"+r+r+"*"),s=RegExp(r+r+"*$"),o=function(t){return function(e){var n=String(i(e));return 1&t&&(n=n.replace(a,"")),2&t&&(n=n.replace(s,"")),n}};t.exports={start:o(1),end:o(2),trim:o(3)}},321:function(t,e,n){"use strict";var i=n(0),r=n(320).trim;i({target:"String",proto:!0,forced:n(332)("trim")},{trim:function(){return r(this)}})},322:function(t,e,n){var i=n(5),r=n(3),a=n(93),s=n(333),o=n(8).f,u=n(64).f,l=n(163),c=n(100),h=n(170),f=n(9),p=n(2),d=n(26).set,g=n(168),v=n(1)("match"),m=r.RegExp,b=m.prototype,k=/a/g,_=/a/g,x=new m(k)!==k,C=h.UNSUPPORTED_Y;if(i&&a("RegExp",!x||C||p((function(){return _[v]=!1,m(k)!=k||m(_)==_||"/a/i"!=m(k,"i")})))){for(var $=function(t,e){var n,i=this instanceof $,r=l(t),a=void 0===e;if(!i&&r&&t.constructor===$&&a)return t;x?r&&!a&&(t=t.source):t instanceof $&&(a&&(e=c.call(t)),t=t.source),C&&(n=!!e&&e.indexOf("y")>-1)&&(e=e.replace(/y/g,""));var o=s(x?new m(t,e):m(t,e),i?this:b,$);return C&&n&&d(o,{sticky:n}),o},y=function(t){t in $||o($,t,{configurable:!0,get:function(){return m[t]},set:function(e){m[t]=e}})},L=u(m),w=0;L.length>w;)y(L[w++]);b.constructor=$,$.prototype=b,f(r,"RegExp",$)}g("RegExp")},323:function(t,e){t.exports=function(t){return null==t}},324:function(t,e,n){"use strict";n.r(e);n(161);var i=n(298),r={name:"SidebarGroup",components:{DropdownTransition:n(325).a},props:["item","open","collapsable","depth"],beforeCreate:function(){this.$options.components.SidebarLinks=n(324).default},methods:{isActive:i.e}},a=(n(345),n(41)),s=Object(a.a)(r,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"sidebar-group",class:[{collapsable:t.collapsable,"is-sub-group":0!==t.depth},"depth-"+t.depth]},[t.item.path?n("RouterLink",{staticClass:"sidebar-heading clickable",class:{open:t.open,active:t.isActive(t.$route,t.item.path)},attrs:{to:t.item.path},nativeOn:{click:function(e){return t.$emit("toggle")}}},[n("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?n("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]):n("p",{staticClass:"sidebar-heading",class:{open:t.open},on:{click:function(e){return t.$emit("toggle")}}},[n("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?n("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]),t._v(" "),n("DropdownTransition",[t.open||!t.collapsable?n("SidebarLinks",{staticClass:"sidebar-group-items",attrs:{items:t.item.children,"sidebar-depth":t.item.sidebarDepth,depth:t.depth+1}}):t._e()],1)],1)}),[],!1,null,null,null).exports;n(346),n(62);function o(t,e,n,i,r){var a={props:{to:e,activeClass:"",exactActiveClass:""},class:{active:i,"sidebar-link":!0}};return r>2&&(a.style={"padding-left":r+"rem"}),t("RouterLink",a,n)}function u(t,e,n,r,a){var s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1;return!e||s>a?null:t("ul",{class:"sidebar-sub-headers"},e.map((function(e){var l=Object(i.e)(r,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[o(t,n+"#"+e.slug,e.title,l,e.level-1),u(t,e.children,n,r,a,s+1)])})))}var l={functional:!0,props:["item","sidebarDepth"],render:function(t,e){var n=e.parent,r=n.$page,a=(n.$site,n.$route),s=n.$themeConfig,l=n.$themeLocaleConfig,c=e.props,h=c.item,f=c.sidebarDepth,p=Object(i.e)(a,h.path),d="auto"===h.type?p||h.children.some((function(t){return Object(i.e)(a,h.basePath+"#"+t.slug)})):p,g="external"===h.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,h.path,h.title||h.path):o(t,h.path,h.title||h.path,d),v=[r.frontmatter.sidebarDepth,f,l.sidebarDepth,s.sidebarDepth,1].find((function(t){return void 0!==t})),m=l.displayAllHeaders||s.displayAllHeaders;return"auto"===h.type?[g,u(t,h.children,h.basePath,a,v)]:(d||m)&&h.headers&&!i.d.test(h.path)?[g,u(t,Object(i.c)(h.headers),h.path,a,v)]:g}};n(347);function c(t,e){return"group"===e.type&&e.children.some((function(e){return"group"===e.type?c(t,e):"page"===e.type&&Object(i.e)(t,e.path)}))}var h={name:"SidebarLinks",components:{SidebarGroup:s,SidebarLink:Object(a.a)(l,void 0,void 0,!1,null,null,null).exports},props:["items","depth","sidebarDepth"],data:function(){return{openGroupIndex:0}},watch:{$route:function(){this.refreshIndex()}},created:function(){this.refreshIndex()},methods:{refreshIndex:function(){var t=function(t,e){for(var n=0;n<e.length;n++){var i=e[n];if(c(t,i))return n}return-1}(this.$route,this.items);t>-1&&(this.openGroupIndex=t)},toggleGroup:function(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive:function(t){return Object(i.e)(this.$route,t.regularPath)}}},f=Object(a.a)(h,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.items.length?n("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(e,i){return n("li",{key:i},["group"===e.type?n("SidebarGroup",{attrs:{item:e,open:i===t.openGroupIndex,collapsable:e.collapsable||e.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(i)}}}):n("SidebarLink",{attrs:{"sidebar-depth":t.sidebarDepth,item:e}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=f.exports},325:function(t,e,n){"use strict";var i={name:"DropdownTransition",methods:{setHeight:function(t){t.style.height=t.scrollHeight+"px"},unsetHeight:function(t){t.style.height=""}}},r=(n(337),n(41)),a=Object(r.a)(i,(function(){var t=this.$createElement;return(this._self._c||t)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.a=a.exports},326:function(t,e,n){"use strict";var i=n(0),r=n(327);i({target:"String",proto:!0,forced:n(328)("link")},{link:function(t){return r(this,"a","href",t)}})},327:function(t,e,n){var i=n(22),r=/"/g;t.exports=function(t,e,n,a){var s=String(i(t)),o="<"+e;return""!==n&&(o+=" "+n+'="'+String(a).replace(r,"&quot;")+'"'),o+">"+s+"</"+e+">"}},328:function(t,e,n){var i=n(2);t.exports=function(t){return i((function(){var e=""[t]('"');return e!==e.toLowerCase()||e.split('"').length>3}))}},329:function(t,e,n){"use strict";var i=n(300);n.n(i).a},330:function(t,e,n){var i=n(0),r=n(331);i({global:!0,forced:parseInt!=r},{parseInt:r})},331:function(t,e,n){var i=n(3),r=n(320).trim,a=n(301),s=i.parseInt,o=/^[+-]?0[Xx]/,u=8!==s(a+"08")||22!==s(a+"0x16");t.exports=u?function(t,e){var n=r(String(t));return s(n,e>>>0||(o.test(n)?16:10))}:s},332:function(t,e,n){var i=n(2),r=n(301);t.exports=function(t){return i((function(){return!!r[t]()||"​…᠎"!="​…᠎"[t]()||r[t].name!==t}))}},333:function(t,e,n){var i=n(4),r=n(94);t.exports=function(t,e,n){var a,s;return r&&"function"==typeof(a=e.constructor)&&a!==n&&i(s=a.prototype)&&s!==n.prototype&&r(t,s),t}},334:function(t,e,n){"use strict";var i,r=n(0),a=n(24).f,s=n(12),o=n(97),u=n(22),l=n(98),c=n(19),h="".endsWith,f=Math.min,p=l("endsWith");r({target:"String",proto:!0,forced:!!(c||p||(i=a(String.prototype,"endsWith"),!i||i.writable))&&!p},{endsWith:function(t){var e=String(u(this));o(t);var n=arguments.length>1?arguments[1]:void 0,i=s(e.length),r=void 0===n?i:f(s(n),i),a=String(t);return h?h.call(e,a,r):e.slice(r-a.length,r)===a}})},335:function(t,e,n){"use strict";var i=n(302);n.n(i).a},336:function(t,e,n){"use strict";var i=n(303);n.n(i).a},337:function(t,e,n){"use strict";var i=n(304);n.n(i).a},338:function(t,e,n){"use strict";var i=n(305);n.n(i).a},339:function(t,e,n){"use strict";var i=n(306);n.n(i).a},340:function(t,e,n){"use strict";var i=n(307);n.n(i).a},341:function(t,e,n){"use strict";var i=n(308);n.n(i).a},342:function(t,e,n){var i=n(28),r=n(13),a=n(25);t.exports=function(t){return"string"==typeof t||!r(t)&&a(t)&&"[object String]"==i(t)}},343:function(t,e,n){"use strict";var i=n(309);n.n(i).a},344:function(t,e,n){"use strict";var i=n(310);n.n(i).a},345:function(t,e,n){"use strict";var i=n(311);n.n(i).a},346:function(t,e,n){"use strict";var i=n(0),r=n(27).find,a=n(92),s=n(17),o=!0,u=s("find");"find"in[]&&Array(1).find((function(){o=!1})),i({target:"Array",proto:!0,forced:o||!u},{find:function(t){return r(this,t,arguments.length>1?arguments[1]:void 0)}}),a("find")},347:function(t,e,n){"use strict";var i=n(312);n.n(i).a},348:function(t,e,n){"use strict";var i=n(313);n.n(i).a},354:function(t,e,n){"use strict";n.r(e);n(161),n(89),n(326);var i=n(298),r={name:"NavLink",props:{item:{required:!0}},computed:{link:function(){return Object(i.b)(this.item.link)},exact:function(){var t=this;return this.$site.locales?Object.keys(this.$site.locales).some((function(e){return e===t.link})):"/"===this.link},isNonHttpURI:function(){return Object(i.g)(this.link)||Object(i.h)(this.link)},isBlankTarget:function(){return"_blank"===this.target},isInternal:function(){return!Object(i.f)(this.link)&&!this.isBlankTarget},target:function(){return this.isNonHttpURI?null:this.item.target?this.item.target:Object(i.f)(this.link)?"_blank":""},rel:function(){return this.isNonHttpURI?null:this.item.rel?this.item.rel:this.isBlankTarget?"noopener noreferrer":""}},methods:{focusoutAction:function(){this.$emit("focusout")}}},a=n(41),s=Object(a.a)(r,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.isInternal?n("RouterLink",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact},nativeOn:{focusout:function(e){return t.focusoutAction(e)}}},[t._v("\n  "+t._s(t.item.text)+"\n")]):n("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.target,rel:t.rel},on:{focusout:t.focusoutAction}},[t._v("\n  "+t._s(t.item.text)+"\n  "),t.isBlankTarget?n("OutboundLink"):t._e()],1)}),[],!1,null,null,null).exports,o={name:"Home",components:{NavLink:s},computed:{data:function(){return this.$page.frontmatter},actionLink:function(){return{link:this.data.actionLink,text:this.data.actionText}}}},u=(n(329),Object(a.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("main",{staticClass:"home",attrs:{"aria-labelledby":"main-title"}},[n("header",{staticClass:"hero"},[t.data.heroImage?n("img",{attrs:{src:t.$withBase(t.data.heroImage),alt:t.data.heroAlt||"hero"}}):t._e(),t._v(" "),null!==t.data.heroText?n("h1",{attrs:{id:"main-title"}},[t._v("\n      "+t._s(t.data.heroText||t.$title||"Hello")+"\n    ")]):t._e(),t._v(" "),null!==t.data.tagline?n("p",{staticClass:"description"},[t._v("\n      "+t._s(t.data.tagline||t.$description||"Welcome to your VuePress site")+"\n    ")]):t._e(),t._v(" "),t.data.actionText&&t.data.actionLink?n("p",{staticClass:"action"},[n("NavLink",{staticClass:"action-button",attrs:{item:t.actionLink}})],1):t._e()]),t._v(" "),t.data.features&&t.data.features.length?n("div",{staticClass:"features"},t._l(t.data.features,(function(e,i){return n("div",{key:i,staticClass:"feature"},[n("h2",[t._v(t._s(e.title))]),t._v(" "),n("p",[t._v(t._s(e.details))])])})),0):t._e(),t._v(" "),n("Content",{staticClass:"theme-default-content custom"}),t._v(" "),t.data.footer?n("div",{staticClass:"footer"},[t._v("\n    "+t._s(t.data.footer)+"\n  ")]):t._e()],1)}),[],!1,null,null,null).exports),l=(n(330),n(23),n(169),n(162),n(90),n(42),n(171),n(299),n(321),n(167),n(62),n(322),n(91),n(334),n(63),n(319),n(173)),c=n.n(l),h=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,i=c()(e,"title","");return c()(e,"frontmatter.tags")&&(i+=" ".concat(e.frontmatter.tags.join(" "))),n&&(i+=" ".concat(n)),f(t,i)},f=function(t,e){var n=function(t){return t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")},i=new RegExp("[^\0-]"),r=t.split(/\s+/g).map((function(t){return t.trim()})).filter((function(t){return!!t}));if(i.test(t))return r.some((function(t){return e.toLowerCase().indexOf(t)>-1}));var a=t.endsWith(" ");return new RegExp(r.map((function(t,e){return r.length!==e+1||a?"(?=.*\\b".concat(n(t),"\\b)"):"(?=.*\\b".concat(n(t),")")})).join("")+".+","gi").test(e)},p={name:"SearchBox",data:function(){return{query:"",focused:!1,focusIndex:0,placeholder:void 0}},computed:{showSuggestions:function(){return this.focused&&this.suggestions&&this.suggestions.length},suggestions:function(){var t=this.query.trim().toLowerCase();if(t){for(var e=this.$site.pages,n=this.$site.themeConfig.searchMaxSuggestions||5,i=this.$localePath,r=[],a=0;a<e.length&&!(r.length>=n);a++){var s=e[a];if(this.getPageLocalePath(s)===i&&this.isSearchable(s))if(h(t,s))r.push(s);else if(s.headers)for(var o=0;o<s.headers.length&&!(r.length>=n);o++){var u=s.headers[o];u.title&&h(t,s,u.title)&&r.push(Object.assign({},s,{path:s.path+"#"+u.slug,header:u}))}}return r}},alignRight:function(){return(this.$site.themeConfig.nav||[]).length+(this.$site.repo?1:0)<=2}},mounted:function(){this.placeholder=this.$site.themeConfig.searchPlaceholder||"",document.addEventListener("keydown",this.onHotkey)},beforeDestroy:function(){document.removeEventListener("keydown",this.onHotkey)},methods:{getPageLocalePath:function(t){for(var e in this.$site.locales||{})if("/"!==e&&0===t.path.indexOf(e))return e;return"/"},isSearchable:function(t){var e=null;return null===e||(e=Array.isArray(e)?e:new Array(e)).filter((function(e){return t.path.match(e)})).length>0},onHotkey:function(t){t.srcElement===document.body&&["s","/"].includes(t.key)&&(this.$refs.input.focus(),t.preventDefault())},onUp:function(){this.showSuggestions&&(this.focusIndex>0?this.focusIndex--:this.focusIndex=this.suggestions.length-1)},onDown:function(){this.showSuggestions&&(this.focusIndex<this.suggestions.length-1?this.focusIndex++:this.focusIndex=0)},go:function(t){this.showSuggestions&&(this.$router.push(this.suggestions[t].path),this.query="",this.focusIndex=0)},focus:function(t){this.focusIndex=t},unfocus:function(){this.focusIndex=-1}}},d=(n(335),Object(a.a)(p,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"search-box"},[n("input",{ref:"input",class:{focused:t.focused},attrs:{"aria-label":"Search",placeholder:t.placeholder,autocomplete:"off",spellcheck:"false"},domProps:{value:t.query},on:{input:function(e){t.query=e.target.value},focus:function(e){t.focused=!0},blur:function(e){t.focused=!1},keyup:[function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"enter",13,e.key,"Enter")?null:t.go(t.focusIndex)},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?null:t.onUp(e)},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?null:t.onDown(e)}]}}),t._v(" "),t.showSuggestions?n("ul",{staticClass:"suggestions",class:{"align-right":t.alignRight},on:{mouseleave:t.unfocus}},t._l(t.suggestions,(function(e,i){return n("li",{key:i,staticClass:"suggestion",class:{focused:i===t.focusIndex},on:{mousedown:function(e){return t.go(i)},mouseenter:function(e){return t.focus(i)}}},[n("a",{attrs:{href:e.path},on:{click:function(t){t.preventDefault()}}},[n("span",{staticClass:"page-title"},[t._v(t._s(e.title||e.path))]),t._v(" "),e.header?n("span",{staticClass:"header"},[t._v("> "+t._s(e.header.title))]):t._e()])])})),0):t._e()])}),[],!1,null,null,null).exports),g=(n(336),Object(a.a)({},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"sidebar-button",on:{click:function(e){return t.$emit("toggle-sidebar")}}},[n("svg",{staticClass:"icon",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",viewBox:"0 0 448 512"}},[n("path",{attrs:{fill:"currentColor",d:"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"}})])])}),[],!1,null,null,null).exports),v=(n(172),n(40)),m=n(325),b=n(174),k=n.n(b),_={name:"DropdownLink",components:{NavLink:s,DropdownTransition:m.a},props:{item:{required:!0}},data:function(){return{open:!1}},computed:{dropdownAriaLabel:function(){return this.item.ariaLabel||this.item.text}},watch:{$route:function(){this.open=!1}},methods:{setOpen:function(t){this.open=t},isLastItemOfArray:function(t,e){return k()(e)===t}}},x=(n(338),{name:"NavLinks",components:{NavLink:s,DropdownLink:Object(a.a)(_,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[n("button",{staticClass:"dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:function(e){return t.setOpen(!t.open)}}},[n("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),n("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),n("DropdownTransition",[n("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(e,i){return n("li",{key:e.link||i,staticClass:"dropdown-item"},["links"===e.type?n("h4",[t._v("\n          "+t._s(e.text)+"\n        ")]):t._e(),t._v(" "),"links"===e.type?n("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(e.items,(function(i){return n("li",{key:i.link,staticClass:"dropdown-subitem"},[n("NavLink",{attrs:{item:i},on:{focusout:function(n){t.isLastItemOfArray(i,e.items)&&t.isLastItemOfArray(e,t.item.items)&&t.setOpen(!1)}}})],1)})),0):n("NavLink",{attrs:{item:e},on:{focusout:function(n){t.isLastItemOfArray(e,t.item.items)&&t.setOpen(!1)}}})],1)})),0)])],1)}),[],!1,null,null,null).exports},computed:{userNav:function(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav:function(){var t=this,e=this.$site.locales;if(e&&Object.keys(e).length>1){var n=this.$page.path,i=this.$router.options.routes,r=this.$site.themeConfig.locales||{},a={text:this.$themeLocaleConfig.selectText||"Languages",ariaLabel:this.$themeLocaleConfig.ariaLabel||"Select language",items:Object.keys(e).map((function(a){var s,o=e[a],u=r[a]&&r[a].label||o.lang;return o.lang===t.$lang?s=n:(s=n.replace(t.$localeConfig.path,a),i.some((function(t){return t.path===s}))||(s=a)),{text:u,link:s}}))};return[].concat(Object(v.a)(this.userNav),[a])}return this.userNav},userLinks:function(){return(this.nav||[]).map((function(t){return Object.assign(Object(i.j)(t),{items:(t.items||[]).map(i.j)})}))},repoLink:function(){var t=this.$site.themeConfig.repo;return t?/^https?:/.test(t)?t:"https://github.com/".concat(t):null},repoLabel:function(){if(this.repoLink){if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;for(var t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"],n=0;n<e.length;n++){var i=e[n];if(new RegExp(i,"i").test(t))return i}return"Source"}}}}),C=(n(339),Object(a.a)(x,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.userLinks.length||t.repoLink?n("nav",{staticClass:"nav-links"},[t._l(t.userLinks,(function(t){return n("div",{key:t.link,staticClass:"nav-item"},["links"===t.type?n("DropdownLink",{attrs:{item:t}}):n("NavLink",{attrs:{item:t}})],1)})),t._v(" "),t.repoLink?n("a",{staticClass:"repo-link",attrs:{href:t.repoLink,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n    "+t._s(t.repoLabel)+"\n    "),n("OutboundLink")],1):t._e()],2):t._e()}),[],!1,null,null,null).exports);function $(t,e){return t.ownerDocument.defaultView.getComputedStyle(t,null)[e]}var y={name:"Navbar",components:{SidebarButton:g,NavLinks:C,SearchBox:d,AlgoliaSearchBox:{}},data:function(){return{linksWrapMaxWidth:null}},computed:{algolia:function(){return this.$themeLocaleConfig.algolia||this.$site.themeConfig.algolia||{}},isAlgoliaSearch:function(){return this.algolia&&this.algolia.apiKey&&this.algolia.indexName}},mounted:function(){var t=this,e=parseInt($(this.$el,"paddingLeft"))+parseInt($(this.$el,"paddingRight")),n=function(){document.documentElement.clientWidth<719?t.linksWrapMaxWidth=null:t.linksWrapMaxWidth=t.$el.offsetWidth-e-(t.$refs.siteName&&t.$refs.siteName.offsetWidth||0)};n(),window.addEventListener("resize",n,!1)}},L=(n(340),Object(a.a)(y,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("header",{staticClass:"navbar"},[n("SidebarButton",{on:{"toggle-sidebar":function(e){return t.$emit("toggle-sidebar")}}}),t._v(" "),n("RouterLink",{staticClass:"home-link",attrs:{to:t.$localePath}},[t.$site.themeConfig.logo?n("img",{staticClass:"logo",attrs:{src:t.$withBase(t.$site.themeConfig.logo),alt:t.$siteTitle}}):t._e(),t._v(" "),t.$siteTitle?n("span",{ref:"siteName",staticClass:"site-name",class:{"can-hide":t.$site.themeConfig.logo}},[t._v(t._s(t.$siteTitle))]):t._e()]),t._v(" "),n("div",{staticClass:"links",style:t.linksWrapMaxWidth?{"max-width":t.linksWrapMaxWidth+"px"}:{}},[t.isAlgoliaSearch?n("AlgoliaSearchBox",{attrs:{options:t.algolia}}):!1!==t.$site.themeConfig.search&&!1!==t.$page.frontmatter.search?n("SearchBox"):t._e(),t._v(" "),n("NavLinks",{staticClass:"can-hide"})],1)],1)}),[],!1,null,null,null).exports),w=n(323),S=n.n(w),O={name:"PageEdit",computed:{lastUpdated:function(){return this.$page.lastUpdated},lastUpdatedText:function(){return"string"==typeof this.$themeLocaleConfig.lastUpdated?this.$themeLocaleConfig.lastUpdated:"string"==typeof this.$site.themeConfig.lastUpdated?this.$site.themeConfig.lastUpdated:"Last Updated"},editLink:function(){var t=S()(this.$page.frontmatter.editLink)?this.$site.themeConfig.editLinks:this.$page.frontmatter.editLink,e=this.$site.themeConfig,n=e.repo,i=e.docsDir,r=void 0===i?"":i,a=e.docsBranch,s=void 0===a?"master":a,o=e.docsRepo,u=void 0===o?n:o;return t&&u&&this.$page.relativePath?this.createEditLink(n,u,r,s,this.$page.relativePath):null},editLinkText:function(){return this.$themeLocaleConfig.editLinkText||this.$site.themeConfig.editLinkText||"Edit this page"}},methods:{createEditLink:function(t,e,n,r,a){return/bitbucket.org/.test(t)?(i.i.test(e)?e:t).replace(i.a,"")+"/src"+"/".concat(r,"/")+(n?n.replace(i.a,"")+"/":"")+a+"?mode=edit&spa=0&at=".concat(r,"&fileviewer=file-view-default"):(i.i.test(e)?e:"https://github.com/".concat(e)).replace(i.a,"")+"/edit"+"/".concat(r,"/")+(n?n.replace(i.a,"")+"/":"")+a}}},I=(n(341),Object(a.a)(O,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("footer",{staticClass:"page-edit"},[t.editLink?n("div",{staticClass:"edit-link"},[n("a",{attrs:{href:t.editLink,target:"_blank",rel:"noopener noreferrer"}},[t._v(t._s(t.editLinkText))]),t._v(" "),n("OutboundLink")],1):t._e(),t._v(" "),t.lastUpdated?n("div",{staticClass:"last-updated"},[n("span",{staticClass:"prefix"},[t._v(t._s(t.lastUpdatedText)+":")]),t._v(" "),n("span",{staticClass:"time"},[t._v(t._s(t.lastUpdated))])]):t._e()])}),[],!1,null,null,null).exports),E=n(342),j=n.n(E),N={name:"PageNav",props:["sidebarItems"],computed:{prev:function(){return P(T.PREV,this)},next:function(){return P(T.NEXT,this)}}};var T={NEXT:{resolveLink:function(t,e){return R(t,e,1)},getThemeLinkConfig:function(t){return t.nextLinks},getPageLinkConfig:function(t){return t.frontmatter.next}},PREV:{resolveLink:function(t,e){return R(t,e,-1)},getThemeLinkConfig:function(t){return t.prevLinks},getPageLinkConfig:function(t){return t.frontmatter.prev}}};function P(t,e){var n=e.$themeConfig,r=e.$page,a=e.$route,s=e.$site,o=e.sidebarItems,u=t.resolveLink,l=t.getThemeLinkConfig,c=t.getPageLinkConfig,h=l(n),f=c(r),p=S()(f)?h:f;return!1===p?void 0:j()(p)?Object(i.k)(s.pages,p,a.path):u(r,o)}function R(t,e,n){var i=[];!function t(e,n){for(var i=0,r=e.length;i<r;i++)"group"===e[i].type?t(e[i].children||[],n):n.push(e[i])}(e,i);for(var r=0;r<i.length;r++){var a=i[r];if("page"===a.type&&a.path===decodeURIComponent(t.path))return i[r+n]}}var A=N,D=(n(343),{components:{PageEdit:I,PageNav:Object(a.a)(A,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.prev||t.next?n("div",{staticClass:"page-nav"},[n("p",{staticClass:"inner"},[t.prev?n("span",{staticClass:"prev"},[t._v("\n      ←\n      "),"external"===t.prev.type?n("a",{staticClass:"prev",attrs:{href:t.prev.path,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n        "+t._s(t.prev.title||t.prev.path)+"\n\n        "),n("OutboundLink")],1):n("RouterLink",{staticClass:"prev",attrs:{to:t.prev.path}},[t._v("\n        "+t._s(t.prev.title||t.prev.path)+"\n      ")])],1):t._e(),t._v(" "),t.next?n("span",{staticClass:"next"},["external"===t.next.type?n("a",{attrs:{href:t.next.path,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n        "+t._s(t.next.title||t.next.path)+"\n\n        "),n("OutboundLink")],1):n("RouterLink",{attrs:{to:t.next.path}},[t._v("\n        "+t._s(t.next.title||t.next.path)+"\n      ")]),t._v("\n      →\n    ")],1):t._e()])]):t._e()}),[],!1,null,null,null).exports},props:["sidebarItems"]}),U=(n(344),Object(a.a)(D,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("main",{staticClass:"page"},[t._t("top"),t._v(" "),n("Content",{staticClass:"theme-default-content"}),t._v(" "),n("PageEdit"),t._v(" "),n("PageNav",t._b({},"PageNav",{sidebarItems:t.sidebarItems},!1)),t._v(" "),t._t("bottom")],2)}),[],!1,null,null,null).exports),H={name:"Sidebar",components:{SidebarLinks:n(324).default,NavLinks:C},props:["items"]},W=(n(348),{name:"Layout",components:{Home:u,Page:U,Sidebar:Object(a.a)(H,(function(){var t=this.$createElement,e=this._self._c||t;return e("aside",{staticClass:"sidebar"},[e("NavLinks"),this._v(" "),this._t("top"),this._v(" "),e("SidebarLinks",{attrs:{depth:0,items:this.items}}),this._v(" "),this._t("bottom")],2)}),[],!1,null,null,null).exports,Navbar:L},data:function(){return{isSidebarOpen:!1}},computed:{shouldShowNavbar:function(){var t=this.$site.themeConfig;return!1!==this.$page.frontmatter.navbar&&!1!==t.navbar&&(this.$title||t.logo||t.repo||t.nav||this.$themeLocaleConfig.nav)},shouldShowSidebar:function(){var t=this.$page.frontmatter;return!t.home&&!1!==t.sidebar&&this.sidebarItems.length},sidebarItems:function(){return Object(i.l)(this.$page,this.$page.regularPath,this.$site,this.$localePath)},pageClasses:function(){var t=this.$page.frontmatter.pageClass;return[{"no-navbar":!this.shouldShowNavbar,"sidebar-open":this.isSidebarOpen,"no-sidebar":!this.shouldShowSidebar},t]}},mounted:function(){var t=this;this.$router.afterEach((function(){t.isSidebarOpen=!1}))},methods:{toggleSidebar:function(t){this.isSidebarOpen="boolean"==typeof t?t:!this.isSidebarOpen,this.$emit("toggle-sidebar",this.isSidebarOpen)},onTouchStart:function(t){this.touchStart={x:t.changedTouches[0].clientX,y:t.changedTouches[0].clientY}},onTouchEnd:function(t){var e=t.changedTouches[0].clientX-this.touchStart.x,n=t.changedTouches[0].clientY-this.touchStart.y;Math.abs(e)>Math.abs(n)&&Math.abs(e)>40&&(e>0&&this.touchStart.x<=80?this.toggleSidebar(!0):this.toggleSidebar(!1))}}}),B=Object(a.a)(W,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"theme-container",class:t.pageClasses,on:{touchstart:t.onTouchStart,touchend:t.onTouchEnd}},[t.shouldShowNavbar?n("Navbar",{on:{"toggle-sidebar":t.toggleSidebar}}):t._e(),t._v(" "),n("div",{staticClass:"sidebar-mask",on:{click:function(e){return t.toggleSidebar(!1)}}}),t._v(" "),n("Sidebar",{attrs:{items:t.sidebarItems},on:{"toggle-sidebar":t.toggleSidebar},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("sidebar-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("sidebar-bottom")]},proxy:!0}],null,!0)}),t._v(" "),t.$page.frontmatter.home?n("Home"):n("Page",{attrs:{"sidebar-items":t.sidebarItems},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("page-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("page-bottom")]},proxy:!0}],null,!0)})],1)}),[],!1,null,null,null);e.default=B.exports}}]);


--------------------------------------------------------------------------------