[{"data":1,"prerenderedAt":493},["ShallowReactive",2],{"blog-article-/blog/vue-directives":3,"blog-surround-/blog/vue-directives":484},{"id":4,"title":5,"body":6,"canonical":468,"date":469,"description":470,"extension":471,"featured":472,"image":473,"meta":474,"navigation":475,"ogImage":468,"path":476,"provider":477,"published":472,"seo":478,"stem":479,"tags":480,"url":468,"__hash__":483},"blog/blog/vue-directives.md","Vue Directives",{"type":7,"value":8,"toc":451},"minimark",[9,13,18,25,61,65,71,91,95,112,141,145,154,176,180,186,207,216,226,230,247,274,277,302,312,321,330,336,348,354,358,361,365,371,398,402,414,418,428,435,447],[10,11,12],"p",{},"This taken from Sara Drasner's course on Frontend Masters. I did the original one when I was just learning Vue for the first time. Since then I have worked with Vue for a good few years and there are still things I am learning. These are my notes from the first few lessons. Hope it helps someone else learn something they didn't already know.",[14,15,17],"h2",{"id":16},"lazy-models","Lazy Models",[10,19,20,24],{},[21,22,23],"code",{},"v-model.lazy"," for when you don't want to it to be always watching for changes and only modify the DOM when you click something for example when you type and then click and it appears on the page only when you click and not as you type.",[26,27,32],"pre",{"className":28,"code":29,"language":30,"meta":31,"style":31},"language-html shiki shiki-themes github-light github-dark","\u003Cinput v-model.lazy=\"msg\" />\n","html","",[21,33,34],{"__ignoreMap":31},[35,36,39,43,47,51,54,58],"span",{"class":37,"line":38},"line",1,[35,40,42],{"class":41},"sVt8B","\u003C",[35,44,46],{"class":45},"s9eBZ","input",[35,48,50],{"class":49},"sScJk"," v-model.lazy",[35,52,53],{"class":41},"=",[35,55,57],{"class":56},"sZZnC","\"msg\"",[35,59,60],{"class":41}," />\n",[14,62,64],{"id":63},"trimming-your-models","Trimming your Models",[10,66,67,70],{},[21,68,69],{},"v-modal-trim"," will automatically trim whitespace in your inputs.",[26,72,74],{"className":28,"code":73,"language":30,"meta":31,"style":31},"\u003Cinput v-model.trim=\"msg\" />\n",[21,75,76],{"__ignoreMap":31},[35,77,78,80,82,85,87,89],{"class":37,"line":38},[35,79,42],{"class":41},[35,81,46],{"class":45},[35,83,84],{"class":49}," v-model.trim",[35,86,53],{"class":41},[35,88,57],{"class":56},[35,90,60],{"class":41},[14,92,94],{"id":93},"making-your-models-a-number","Making your Models a Number",[10,96,97,100,101,104,105,107,108,111],{},[21,98,99],{},"v-model-number"," will convert any string to a number. We can use ",[21,102,103],{},"type=\"number\""," but the value of HTML input elements will always return a string and if it can't be parsed with parseFloat() the original value is returned. Therefore using ",[21,106,99],{}," ensures our input is of type ",[21,109,110],{},"Number",".",[26,113,115],{"className":28,"code":114,"language":30,"meta":31,"style":31},"\u003Cinput v-model.number=\"age\" type=\"number\" />\n",[21,116,117],{"__ignoreMap":31},[35,118,119,121,123,126,128,131,134,136,139],{"class":37,"line":38},[35,120,42],{"class":41},[35,122,46],{"class":45},[35,124,125],{"class":49}," v-model.number",[35,127,53],{"class":41},[35,129,130],{"class":56},"\"age\"",[35,132,133],{"class":49}," type",[35,135,53],{"class":41},[35,137,138],{"class":56},"\"number\"",[35,140,60],{"class":41},[14,142,144],{"id":143},"only-show-your-element-once","Only show your Element Once",[10,146,147,150,151,153],{},[21,148,149],{},"v-once"," is used to show things only once. If you modify the input text you will not see the results change. The ",[21,152,149],{}," will remain showing the same text. When the page re-renders, the element/component and all its children will be treated as static content and skipped.",[26,155,157],{"className":28,"code":156,"language":30,"meta":31,"style":31},"\u003Cspan v-once>This will never be updated: {{msg}}\u003C/span>\n",[21,158,159],{"__ignoreMap":31},[35,160,161,163,165,168,171,173],{"class":37,"line":38},[35,162,42],{"class":41},[35,164,35],{"class":45},[35,166,167],{"class":49}," v-once",[35,169,170],{"class":41},">This will never be updated: {{msg}}\u003C/",[35,172,35],{"class":45},[35,174,175],{"class":41},">\n",[14,177,179],{"id":178},"v-pre-for-documenting","V-pre for Documenting",[10,181,182,185],{},[21,183,184],{},"v-pre","will not evaluate any text that adds moustache syntax, for example, and will show it exactly as it is written.",[26,187,189],{"className":28,"code":188,"language":30,"meta":31,"style":31},"\u003Cspan v-pre>{{ this will not be compiled }}\u003C/span>\n",[21,190,191],{"__ignoreMap":31},[35,192,193,195,197,200,203,205],{"class":37,"line":38},[35,194,42],{"class":41},[35,196,35],{"class":45},[35,198,199],{"class":49}," v-pre",[35,201,202],{"class":41},">{{ this will not be compiled }}\u003C/",[35,204,35],{"class":45},[35,206,175],{"class":41},[14,208,210],{"id":209},"tag-with-data",[26,211,212,213],{}," tag with ",[21,214,215],{},"$data",[10,217,218,221,222,225],{},[21,219,220],{},"\u003Cpre>"," tag can be used with ",[21,223,224],{},"{{$data}}"," inside it and it will show you all the data you have in your data property of that file/component.",[14,227,229],{"id":228},"click-and-mouse-events","Click and Mouse Events",[10,231,232,235,236,239,240,243,244,111],{},[21,233,234],{},"v-on"," is the same as ",[21,237,238],{},"@"," symbol and is great for binding events like ",[21,241,242],{},"click"," and ",[21,245,246],{},"mouseenter",[26,248,250],{"className":28,"code":249,"language":30,"meta":31,"style":31},"\u003Cbutton v-on:click=\"counter += 1\">Add 1\u003C/button>\n",[21,251,252],{"__ignoreMap":31},[35,253,254,256,259,262,264,267,270,272],{"class":37,"line":38},[35,255,42],{"class":41},[35,257,258],{"class":45},"button",[35,260,261],{"class":49}," v-on:click",[35,263,53],{"class":41},[35,265,266],{"class":56},"\"counter += 1\"",[35,268,269],{"class":41},">Add 1\u003C/",[35,271,258],{"class":45},[35,273,175],{"class":41},[10,275,276],{},"You can use a ternary operator inside a click event which is good for showing making sure a counter doesn't go below 0, for example.",[26,278,280],{"className":28,"code":279,"language":30,"meta":31,"style":31},"\u003Cbutton @click=\"counter > 0 ? counter -=1 : 0\">Add 1\u003C/button>\n",[21,281,282],{"__ignoreMap":31},[35,283,284,286,288,291,293,296,298,300],{"class":37,"line":38},[35,285,42],{"class":41},[35,287,258],{"class":45},[35,289,290],{"class":49}," @click",[35,292,53],{"class":41},[35,294,295],{"class":56},"\"counter > 0 ? counter -=1 : 0\"",[35,297,269],{"class":41},[35,299,258],{"class":45},[35,301,175],{"class":41},[10,303,304,305,243,308,311],{},"You can do multiple bindings which are ideal for games such as ",[21,306,307],{},"mouseup",[21,309,310],{},"mousedown"," doing different things.",[10,313,314,317,318,111],{},[21,315,316],{},"@mousemove.stop"," is comparable to ",[21,319,320],{},"e.stopPropagation()",[10,322,323,326,327,111],{},[21,324,325],{},"@mousemove.prevent"," is like ",[21,328,329],{},"e.preventDefault()",[10,331,332,335],{},[21,333,334],{},"@submit.prevent"," will stop the page from refreshing when submitting.",[10,337,338,341,342,344,345,347],{},[21,339,340],{},"@click.once"," this click event will be triggered once not to be confused with ",[21,343,149],{},". The click event will only be triggered once as opposed to ",[21,346,149],{}," where the text will be only rendered once. Good for when you want to stop something from submitting multiple times or something to be clicked and then you don't want the user to be able to keep on clicking, they can but it doesn't keep submitting or doing what it has probably already done",[10,349,350,353],{},[21,351,352],{},"@click.native"," so you can listen to native events in the DOM.",[14,355,357],{"id":356},"key-codes","Key Codes",[10,359,360],{},"You can use key codes but this is changing in vue 3 to only use names same as html spec.",[14,362,364],{"id":363},"rendering-html","Rendering HTML",[10,366,367,370],{},[21,368,369],{},"v-html"," not recommended if coming from external source.",[26,372,374],{"className":28,"code":373,"language":30,"meta":31,"style":31},"\u003Cdiv v-html=\"html\">\u003C/div>\n",[21,375,376],{"__ignoreMap":31},[35,377,378,380,383,386,388,391,394,396],{"class":37,"line":38},[35,379,42],{"class":41},[35,381,382],{"class":45},"div",[35,384,385],{"class":49}," v-html",[35,387,53],{"class":41},[35,389,390],{"class":56},"\"html\"",[35,392,393],{"class":41},">\u003C/",[35,395,382],{"class":45},[35,397,175],{"class":41},[14,399,401],{"id":400},"rendering-text","Rendering Text",[10,403,404,407,408,411,412],{},[21,405,406],{},"v-text"," is the same as using the moustache templates, ",[21,409,410],{},"{{}}",", and if you want to dynamically update then it is recommended to use moustache templates and not ",[21,413,406],{},[14,415,417],{"id":416},"example","Example",[10,419,420,421],{},"Example using Directives on ",[422,423,427],"a",{"href":424,"rel":425},"https://codepen.io/debs-obrien/pen/PoNMGLJ",[426],"nofollow","CodePen",[14,429,431,432],{"id":430},"unique-ids-for-v-for","Unique IDs for ",[21,433,434],{},"v-for",[10,436,437,438,443,444,446],{},"Use a library to generate unique ids - ",[422,439,442],{"href":440,"rel":441},"https://www.npmjs.com/package/uuid",[426],"uuid",", then for ",[21,445,434],{}," you will always get a unique id.",[448,449,450],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":31,"searchDepth":452,"depth":452,"links":453},2,[454,455,456,457,458,459,461,462,463,464,465,466],{"id":16,"depth":452,"text":17},{"id":63,"depth":452,"text":64},{"id":93,"depth":452,"text":94},{"id":143,"depth":452,"text":144},{"id":178,"depth":452,"text":179},{"id":209,"depth":452,"text":460}," tag with $data",{"id":228,"depth":452,"text":229},{"id":356,"depth":452,"text":357},{"id":363,"depth":452,"text":364},{"id":400,"depth":452,"text":401},{"id":416,"depth":452,"text":417},{"id":430,"depth":452,"text":467},"Unique IDs for v-for",null,"2020-10-16","Vue Directives are a great way of doing things like trimming your models or only showing something once. So many cool directives to make your life easier when coding in Vue.","md",false,"photo-1503437313881-503a91226402?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3578&q=80",{},true,"/blog/vue-directives","imgix",{"title":5,"description":470},"blog/vue-directives",[481,482],"vue","nuxt","f4xPGyzRzaF3KqCTUAbF5E55ya1FNSCmBWUhk98tqdU",[485,489],{"title":486,"path":487,"stem":488,"children":-1},"How we use Nuxt at The NuxtJS Company","/blog/how-we-use-nuxt-at-the-nuxtjs-company","blog/how-we-use-nuxt-at-the-nuxtjs-company",{"title":490,"path":491,"stem":492,"children":-1},"Formatting a date in JavaScript","/blog/date-formatting","blog/date-formatting",1790839748109]