[{"data":1,"prerenderedAt":3990},["ShallowReactive",2],{"article:running-vue-js-2-0-creating-simple-blog-application-709":3,"\u002Fblog\u002Frunning-vue-js-2-0-creating-simple-blog-application-709-surround":3979},{"id":4,"title":5,"author":6,"body":7,"date":3968,"description":3969,"extension":3970,"image":3971,"meta":3972,"minRead":202,"navigation":246,"path":3973,"published":246,"seo":3974,"stem":3975,"tags":3976,"__hash__":3978},"blog\u002Fblog\u002Frunning-vue-js-2-0-creating-simple-blog-application-709.md","Up & Running with Vue.js 2.0 by creating a simple blog application","Baljeet Singh",{"type":8,"value":9,"toc":3961},"minimark",[10,21,25,28,33,36,80,91,94,101,104,109,112,117,120,125,128,131,144,150,155,158,161,392,400,403,792,795,800,803,807,810,1142,1145,1148,1214,1217,1222,1225,1228,1274,1277,1629,1632,1637,1642,1646,1649,1741,1744,1792,1795,1800,1803,1806,1809,1895,1898,2090,2093,2097,2100,2103,2818,2821,3041,3044,3187,3190,3195,3200,3207,3212,3215,3220,3223,3315,3318,3439,3442,3448,3451,3454,3459,3462,3925,3928,3940,3943,3948,3952,3955,3958],[11,12,17],"pre",{"className":13,"code":15,"language":16},[14],"language-text","https:\u002F\u002Fgithub.com\u002Fmbaljeetsingh\u002Fvuejs-blog-app\n","text",[18,19,15],"code",{"__ignoreMap":20},"",[22,23,24],"p",{},"Vue.js is a javascript framework used for building user interfaces, Can be used for creating powerful single page applications if used with supporting libraries.",[22,26,27],{},"In this quick introduction, we will be creating simple blog application, while covering major Vue.js topics. So, let’s get started.",[29,30,32],"h2",{"id":31},"installation","Installation",[22,34,35],{},"We can download the vue.js script file or use the CDN version and include it in the script tag in the HTML. As of writing, the current version is 2.1.10",[11,37,41],{"className":38,"code":39,"language":40,"meta":20,"style":20},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fvue\u002F2.1.10\u002Fvue.js\">\u003C\u002Fscript>\n","js",[18,42,43],{"__ignoreMap":20},[44,45,48,52,56,60,63,66,70,72,75,77],"span",{"class":46,"line":47},"line",1,[44,49,51],{"class":50},"sMK4o","\u003C",[44,53,55],{"class":54},"swJcz","script",[44,57,59],{"class":58},"spNyl"," src",[44,61,62],{"class":50},"=",[44,64,65],{"class":50},"\"",[44,67,69],{"class":68},"sfazB","https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fvue\u002F2.1.10\u002Fvue.js",[44,71,65],{"class":50},[44,73,74],{"class":50},">\u003C\u002F",[44,76,55],{"class":54},[44,78,79],{"class":50},">\n",[22,81,82,83,90],{},"There is another way that I recommend for installing Vue.js is using ",[84,85,89],"a",{"href":86,"rel":87},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fvue-cli",[88],"nofollow","Vue-cli",". This is a simple command line interface for scaffolding Vue.js project.",[22,92,93],{},"First, run the following command from the command line npm install -g vue-cli, -g flag will make sure that the vue-cli will be installed globally on the system.",[22,95,96],{},[97,98],"img",{"alt":99,"src":100},"null","\u002Fimg\u002Fconemu64_2017-01-24_19-54-49.png",[22,102,103],{},"The next step is to create the new project using the webpack template And let’s give the app a name blogapp ue init webpack blogapp",[22,105,106],{},[97,107],{"alt":99,"src":108},"\u002Fimg\u002Fconemu64_2017-01-24_19-57-11.png",[22,110,111],{},"Now we need to install the dependencies using npm install and then run the application using npm run dev . This will start the local web server on port 8080 (or other open port) and the link will open in the default browser.",[22,113,114],{},[97,115],{"alt":99,"src":116},"\u002Fimg\u002Fconemu64_2017-01-24_20-19-37.png",[22,118,119],{},"The starting page of the application will look like the following",[22,121,122],{},[97,123],{"alt":99,"src":124},"\u002Fimg\u002Fchrome_2017-01-24_20-22-00-e1485269620411.png",[22,126,127],{},"Let’s look at the code",[22,129,130],{},"The one folder that we’ll be focusing on is the src folder, where all the application specific code resides. In the following screenshot you can see, main.js is the file where we’re importing Vue and also we’re importing the app component from App.vue. In the main js we have a Vue instance new Vue({.....",[132,133,134,138,141],"ul",{},[135,136,137],"li",{},"el is the element with the id of app (#app), that we are attaching the Vue instance to",[135,139,140],{},"template here is the app component that we’re importing",[135,142,143],{},"And then we need to list the components available",[22,145,146,147],{},"All the Vue components files have .vue extension. A simple Vue component consists of three parts (template, script, style). In the App.vue we’re importing and using the hello component as ",[18,148,149],{},"\u003Chello>\u003C\u002Fhello>",[22,151,152],{},[97,153],{"alt":99,"src":154},"\u002Fimg\u002Fsublime_text_2017-01-24_20-34-53.png",[22,156,157],{},"Adding Custom Component",[22,159,160],{},"Let’s create a new file under components->Blog.vue, and add the following code,",[11,162,166],{"className":163,"code":164,"language":165,"meta":20,"style":20},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv class=\"blog\">\n    \u003Ch2>{{title}}\u003C\u002Fh2>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n  export default {\n    name: 'blog',\n\n    data() {\n      return {\n        title: 'Blog App',\n      };\n    },\n  };\n\u003C\u002Fscript>\n\n\u003C!-- Add \"scoped\" attribute to limit CSS to this component only -->\n\n\u003Cstyle scoped>\u003C\u002Fstyle>\n","html",[18,167,168,177,200,222,232,241,248,257,270,290,295,306,314,331,337,343,349,358,363,370,375],{"__ignoreMap":20},[44,169,170,172,175],{"class":46,"line":47},[44,171,51],{"class":50},[44,173,174],{"class":54},"template",[44,176,79],{"class":50},[44,178,180,183,186,189,191,193,196,198],{"class":46,"line":179},2,[44,181,182],{"class":50},"  \u003C",[44,184,185],{"class":54},"div",[44,187,188],{"class":58}," class",[44,190,62],{"class":50},[44,192,65],{"class":50},[44,194,195],{"class":68},"blog",[44,197,65],{"class":50},[44,199,79],{"class":50},[44,201,203,206,208,211,215,218,220],{"class":46,"line":202},3,[44,204,205],{"class":50},"    \u003C",[44,207,29],{"class":54},[44,209,210],{"class":50},">",[44,212,214],{"class":213},"sTEyZ","{{title}}",[44,216,217],{"class":50},"\u003C\u002F",[44,219,29],{"class":54},[44,221,79],{"class":50},[44,223,225,228,230],{"class":46,"line":224},4,[44,226,227],{"class":50},"  \u003C\u002F",[44,229,185],{"class":54},[44,231,79],{"class":50},[44,233,235,237,239],{"class":46,"line":234},5,[44,236,217],{"class":50},[44,238,174],{"class":54},[44,240,79],{"class":50},[44,242,244],{"class":46,"line":243},6,[44,245,247],{"emptyLinePlaceholder":246},true,"\n",[44,249,251,253,255],{"class":46,"line":250},7,[44,252,51],{"class":50},[44,254,55],{"class":54},[44,256,79],{"class":50},[44,258,260,264,267],{"class":46,"line":259},8,[44,261,263],{"class":262},"s7zQu","  export",[44,265,266],{"class":262}," default",[44,268,269],{"class":50}," {\n",[44,271,273,276,279,282,284,287],{"class":46,"line":272},9,[44,274,275],{"class":54},"    name",[44,277,278],{"class":50},":",[44,280,281],{"class":50}," '",[44,283,195],{"class":68},[44,285,286],{"class":50},"'",[44,288,289],{"class":50},",\n",[44,291,293],{"class":46,"line":292},10,[44,294,247],{"emptyLinePlaceholder":246},[44,296,298,301,304],{"class":46,"line":297},11,[44,299,300],{"class":54},"    data",[44,302,303],{"class":50},"()",[44,305,269],{"class":50},[44,307,309,312],{"class":46,"line":308},12,[44,310,311],{"class":262},"      return",[44,313,269],{"class":50},[44,315,317,320,322,324,327,329],{"class":46,"line":316},13,[44,318,319],{"class":54},"        title",[44,321,278],{"class":50},[44,323,281],{"class":50},[44,325,326],{"class":68},"Blog App",[44,328,286],{"class":50},[44,330,289],{"class":50},[44,332,334],{"class":46,"line":333},14,[44,335,336],{"class":50},"      };\n",[44,338,340],{"class":46,"line":339},15,[44,341,342],{"class":50},"    },\n",[44,344,346],{"class":46,"line":345},16,[44,347,348],{"class":50},"  };\n",[44,350,352,354,356],{"class":46,"line":351},17,[44,353,217],{"class":50},[44,355,55],{"class":54},[44,357,79],{"class":50},[44,359,361],{"class":46,"line":360},18,[44,362,247],{"emptyLinePlaceholder":246},[44,364,366],{"class":46,"line":365},19,[44,367,369],{"class":368},"sHwdD","\u003C!-- Add \"scoped\" attribute to limit CSS to this component only -->\n",[44,371,373],{"class":46,"line":372},20,[44,374,247],{"emptyLinePlaceholder":246},[44,376,378,380,383,386,388,390],{"class":46,"line":377},21,[44,379,51],{"class":50},[44,381,382],{"class":54},"style",[44,384,385],{"class":58}," scoped",[44,387,74],{"class":50},[44,389,382],{"class":54},[44,391,79],{"class":50},[22,393,394,395,399],{},"I have just copied the code from the Hello.vue and removed the bits that we don’t need. Here, we’re binding the title property in the template as ",[396,397],"binding",{"value":398},"title",", so in place for the title, we’ll see Blog App.",[22,401,402],{},"Now we need to add that component in the App.vue",[11,404,406],{"className":163,"code":405,"language":165,"meta":20,"style":20},"\u003Ctemplate>\n  \u003Cdiv id=\"app\">\n    \u003Cimg src=\".\u002Fassets\u002Flogo.png\" \u002F>\n\n    \u003C!-- \u003Chello>\u003C\u002Fhello> -->\n\n    \u003Cblog>\u003C\u002Fblog>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n  import Hello from '.\u002Fcomponents\u002FHello';\n\n  import Blog from '.\u002Fcomponents\u002FBlog';\n\n  export default {\n    name: 'app',\n\n    components: {\n      Hello,\n      Blog,\n    },\n  };\n\u003C\u002Fscript>\n\n\u003Cstyle>\n  #app {\n    font-family: 'Avenir', Helvetica, Arial, sans-serif;\n\n    -webkit-font-smoothing: antialiased;\n\n    -moz-osx-font-smoothing: grayscale;\n\n    text-align: center;\n\n    color: #2c3e50;\n\n    margin-top: 60px;\n  }\n\u003C\u002Fstyle>\n",[18,407,408,416,436,456,460,465,469,481,489,497,501,509,530,534,552,556,564,578,582,591,598,605,610,615,624,629,638,649,683,688,702,707,720,725,738,743,759,764,777,783],{"__ignoreMap":20},[44,409,410,412,414],{"class":46,"line":47},[44,411,51],{"class":50},[44,413,174],{"class":54},[44,415,79],{"class":50},[44,417,418,420,422,425,427,429,432,434],{"class":46,"line":179},[44,419,182],{"class":50},[44,421,185],{"class":54},[44,423,424],{"class":58}," id",[44,426,62],{"class":50},[44,428,65],{"class":50},[44,430,431],{"class":68},"app",[44,433,65],{"class":50},[44,435,79],{"class":50},[44,437,438,440,442,444,446,448,451,453],{"class":46,"line":202},[44,439,205],{"class":50},[44,441,97],{"class":54},[44,443,59],{"class":58},[44,445,62],{"class":50},[44,447,65],{"class":50},[44,449,450],{"class":68},".\u002Fassets\u002Flogo.png",[44,452,65],{"class":50},[44,454,455],{"class":50}," \u002F>\n",[44,457,458],{"class":46,"line":224},[44,459,247],{"emptyLinePlaceholder":246},[44,461,462],{"class":46,"line":234},[44,463,464],{"class":368},"    \u003C!-- \u003Chello>\u003C\u002Fhello> -->\n",[44,466,467],{"class":46,"line":243},[44,468,247],{"emptyLinePlaceholder":246},[44,470,471,473,475,477,479],{"class":46,"line":250},[44,472,205],{"class":50},[44,474,195],{"class":54},[44,476,74],{"class":50},[44,478,195],{"class":54},[44,480,79],{"class":50},[44,482,483,485,487],{"class":46,"line":259},[44,484,227],{"class":50},[44,486,185],{"class":54},[44,488,79],{"class":50},[44,490,491,493,495],{"class":46,"line":272},[44,492,217],{"class":50},[44,494,174],{"class":54},[44,496,79],{"class":50},[44,498,499],{"class":46,"line":292},[44,500,247],{"emptyLinePlaceholder":246},[44,502,503,505,507],{"class":46,"line":297},[44,504,51],{"class":50},[44,506,55],{"class":54},[44,508,79],{"class":50},[44,510,511,514,517,520,522,525,527],{"class":46,"line":308},[44,512,513],{"class":262},"  import",[44,515,516],{"class":213}," Hello ",[44,518,519],{"class":262},"from",[44,521,281],{"class":50},[44,523,524],{"class":68},".\u002Fcomponents\u002FHello",[44,526,286],{"class":50},[44,528,529],{"class":50},";\n",[44,531,532],{"class":46,"line":316},[44,533,247],{"emptyLinePlaceholder":246},[44,535,536,538,541,543,545,548,550],{"class":46,"line":333},[44,537,513],{"class":262},[44,539,540],{"class":213}," Blog ",[44,542,519],{"class":262},[44,544,281],{"class":50},[44,546,547],{"class":68},".\u002Fcomponents\u002FBlog",[44,549,286],{"class":50},[44,551,529],{"class":50},[44,553,554],{"class":46,"line":339},[44,555,247],{"emptyLinePlaceholder":246},[44,557,558,560,562],{"class":46,"line":345},[44,559,263],{"class":262},[44,561,266],{"class":262},[44,563,269],{"class":50},[44,565,566,568,570,572,574,576],{"class":46,"line":351},[44,567,275],{"class":54},[44,569,278],{"class":50},[44,571,281],{"class":50},[44,573,431],{"class":68},[44,575,286],{"class":50},[44,577,289],{"class":50},[44,579,580],{"class":46,"line":360},[44,581,247],{"emptyLinePlaceholder":246},[44,583,584,587,589],{"class":46,"line":365},[44,585,586],{"class":54},"    components",[44,588,278],{"class":50},[44,590,269],{"class":50},[44,592,593,596],{"class":46,"line":372},[44,594,595],{"class":213},"      Hello",[44,597,289],{"class":50},[44,599,600,603],{"class":46,"line":377},[44,601,602],{"class":213},"      Blog",[44,604,289],{"class":50},[44,606,608],{"class":46,"line":607},22,[44,609,342],{"class":50},[44,611,613],{"class":46,"line":612},23,[44,614,348],{"class":50},[44,616,618,620,622],{"class":46,"line":617},24,[44,619,217],{"class":50},[44,621,55],{"class":54},[44,623,79],{"class":50},[44,625,627],{"class":46,"line":626},25,[44,628,247],{"emptyLinePlaceholder":246},[44,630,632,634,636],{"class":46,"line":631},26,[44,633,51],{"class":50},[44,635,382],{"class":54},[44,637,79],{"class":50},[44,639,641,644,647],{"class":46,"line":640},27,[44,642,643],{"class":50},"  #",[44,645,431],{"class":646},"sbssI",[44,648,269],{"class":50},[44,650,652,656,658,660,663,665,668,671,673,676,678,681],{"class":46,"line":651},28,[44,653,655],{"class":654},"sqsOY","    font-family",[44,657,278],{"class":50},[44,659,281],{"class":50},[44,661,662],{"class":68},"Avenir",[44,664,286],{"class":50},[44,666,667],{"class":50},",",[44,669,670],{"class":213}," Helvetica",[44,672,667],{"class":50},[44,674,675],{"class":213}," Arial",[44,677,667],{"class":50},[44,679,680],{"class":213}," sans-serif",[44,682,529],{"class":50},[44,684,686],{"class":46,"line":685},29,[44,687,247],{"emptyLinePlaceholder":246},[44,689,691,695,697,700],{"class":46,"line":690},30,[44,692,694],{"class":693},"sBMFI","    -webkit-font-smoothing",[44,696,278],{"class":50},[44,698,699],{"class":213}," antialiased",[44,701,529],{"class":50},[44,703,705],{"class":46,"line":704},31,[44,706,247],{"emptyLinePlaceholder":246},[44,708,710,713,715,718],{"class":46,"line":709},32,[44,711,712],{"class":693},"    -moz-osx-font-smoothing",[44,714,278],{"class":50},[44,716,717],{"class":213}," grayscale",[44,719,529],{"class":50},[44,721,723],{"class":46,"line":722},33,[44,724,247],{"emptyLinePlaceholder":246},[44,726,728,731,733,736],{"class":46,"line":727},34,[44,729,730],{"class":654},"    text-align",[44,732,278],{"class":50},[44,734,735],{"class":213}," center",[44,737,529],{"class":50},[44,739,741],{"class":46,"line":740},35,[44,742,247],{"emptyLinePlaceholder":246},[44,744,746,749,751,754,757],{"class":46,"line":745},36,[44,747,748],{"class":654},"    color",[44,750,278],{"class":50},[44,752,753],{"class":50}," #",[44,755,756],{"class":213},"2c3e50",[44,758,529],{"class":50},[44,760,762],{"class":46,"line":761},37,[44,763,247],{"emptyLinePlaceholder":246},[44,765,767,770,772,775],{"class":46,"line":766},38,[44,768,769],{"class":654},"    margin-top",[44,771,278],{"class":50},[44,773,774],{"class":646}," 60px",[44,776,529],{"class":50},[44,778,780],{"class":46,"line":779},39,[44,781,782],{"class":50},"  }\n",[44,784,786,788,790],{"class":46,"line":785},40,[44,787,217],{"class":50},[44,789,382],{"class":54},[44,791,79],{"class":50},[22,793,794],{},"Now the output will look like this,",[22,796,797],{},[97,798],{"alt":99,"src":799},"\u002Fimg\u002Fchrome_2017-01-24_21-12-40.png",[22,801,802],{},"Congratulations, you have created your first custom Vue component.",[29,804,806],{"id":805},"directives-show-all-posts","Directives (Show All Posts)",[22,808,809],{},"Let’s add some blog posts data. Open Blog.vue and update the data () function as follows:",[11,811,813],{"className":38,"code":812,"language":40,"meta":20,"style":20},"data () {\n    return {\n      title: 'Blog App',\n      posts: [{\n        'userId': 1,\n        'id': 1,\n        'title': 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',\n        'body': 'quia et suscipit\\nsuscipit recusandae consequuntur expedita et cum\\nreprehenderit molestiae ut ut quas totam\\nnostrum rerum est autem sunt rem eveniet architecto'\n      },\n      {\n        'userId': 1,\n        'id': 2,\n        'title': 'qui est esse',\n        'body': 'est rerum tempore vitae\\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\\nqui aperiam non debitis possimus qui neque nisi nulla'\n      },\n      {\n        'userId': 1,\n        'id': 3,\n        'title': 'ea molestias quasi exercitationem repellat qui ipsa sit aut',\n        'body': 'et iusto sed quo iure\\nvoluptatem occaecati omnis eligendi aut ad\\nvoluptatem doloribus vel accusantium quis pariatur\\nmolestiae porro eius odio et labore et velit aut'\n      }]\n    }\n  }\n",[18,814,815,827,834,849,861,878,893,912,947,952,957,971,986,1005,1037,1041,1045,1059,1074,1093,1125,1133,1138],{"__ignoreMap":20},[44,816,817,821,824],{"class":46,"line":47},[44,818,820],{"class":819},"s2Zo4","data",[44,822,823],{"class":213}," () ",[44,825,826],{"class":50},"{\n",[44,828,829,832],{"class":46,"line":179},[44,830,831],{"class":262},"    return",[44,833,269],{"class":50},[44,835,836,839,841,843,845,847],{"class":46,"line":202},[44,837,838],{"class":54},"      title",[44,840,278],{"class":50},[44,842,281],{"class":50},[44,844,326],{"class":68},[44,846,286],{"class":50},[44,848,289],{"class":50},[44,850,851,854,856,859],{"class":46,"line":224},[44,852,853],{"class":54},"      posts",[44,855,278],{"class":50},[44,857,858],{"class":54}," [",[44,860,826],{"class":50},[44,862,863,866,869,871,873,876],{"class":46,"line":234},[44,864,865],{"class":50},"        '",[44,867,868],{"class":54},"userId",[44,870,286],{"class":50},[44,872,278],{"class":50},[44,874,875],{"class":646}," 1",[44,877,289],{"class":50},[44,879,880,882,885,887,889,891],{"class":46,"line":243},[44,881,865],{"class":50},[44,883,884],{"class":54},"id",[44,886,286],{"class":50},[44,888,278],{"class":50},[44,890,875],{"class":646},[44,892,289],{"class":50},[44,894,895,897,899,901,903,905,908,910],{"class":46,"line":250},[44,896,865],{"class":50},[44,898,398],{"class":54},[44,900,286],{"class":50},[44,902,278],{"class":50},[44,904,281],{"class":50},[44,906,907],{"class":68},"sunt aut facere repellat provident occaecati excepturi optio reprehenderit",[44,909,286],{"class":50},[44,911,289],{"class":50},[44,913,914,916,919,921,923,925,928,931,934,936,939,941,944],{"class":46,"line":259},[44,915,865],{"class":50},[44,917,918],{"class":54},"body",[44,920,286],{"class":50},[44,922,278],{"class":50},[44,924,281],{"class":50},[44,926,927],{"class":68},"quia et suscipit",[44,929,930],{"class":213},"\\n",[44,932,933],{"class":68},"suscipit recusandae consequuntur expedita et cum",[44,935,930],{"class":213},[44,937,938],{"class":68},"reprehenderit molestiae ut ut quas totam",[44,940,930],{"class":213},[44,942,943],{"class":68},"nostrum rerum est autem sunt rem eveniet architecto",[44,945,946],{"class":50},"'\n",[44,948,949],{"class":46,"line":272},[44,950,951],{"class":50},"      },\n",[44,953,954],{"class":46,"line":292},[44,955,956],{"class":50},"      {\n",[44,958,959,961,963,965,967,969],{"class":46,"line":297},[44,960,865],{"class":50},[44,962,868],{"class":54},[44,964,286],{"class":50},[44,966,278],{"class":50},[44,968,875],{"class":646},[44,970,289],{"class":50},[44,972,973,975,977,979,981,984],{"class":46,"line":308},[44,974,865],{"class":50},[44,976,884],{"class":54},[44,978,286],{"class":50},[44,980,278],{"class":50},[44,982,983],{"class":646}," 2",[44,985,289],{"class":50},[44,987,988,990,992,994,996,998,1001,1003],{"class":46,"line":316},[44,989,865],{"class":50},[44,991,398],{"class":54},[44,993,286],{"class":50},[44,995,278],{"class":50},[44,997,281],{"class":50},[44,999,1000],{"class":68},"qui est esse",[44,1002,286],{"class":50},[44,1004,289],{"class":50},[44,1006,1007,1009,1011,1013,1015,1017,1020,1022,1025,1027,1030,1032,1035],{"class":46,"line":333},[44,1008,865],{"class":50},[44,1010,918],{"class":54},[44,1012,286],{"class":50},[44,1014,278],{"class":50},[44,1016,281],{"class":50},[44,1018,1019],{"class":68},"est rerum tempore vitae",[44,1021,930],{"class":213},[44,1023,1024],{"class":68},"sequi sint nihil reprehenderit dolor beatae ea dolores neque",[44,1026,930],{"class":213},[44,1028,1029],{"class":68},"fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis",[44,1031,930],{"class":213},[44,1033,1034],{"class":68},"qui aperiam non debitis possimus qui neque nisi nulla",[44,1036,946],{"class":50},[44,1038,1039],{"class":46,"line":339},[44,1040,951],{"class":50},[44,1042,1043],{"class":46,"line":345},[44,1044,956],{"class":50},[44,1046,1047,1049,1051,1053,1055,1057],{"class":46,"line":351},[44,1048,865],{"class":50},[44,1050,868],{"class":54},[44,1052,286],{"class":50},[44,1054,278],{"class":50},[44,1056,875],{"class":646},[44,1058,289],{"class":50},[44,1060,1061,1063,1065,1067,1069,1072],{"class":46,"line":360},[44,1062,865],{"class":50},[44,1064,884],{"class":54},[44,1066,286],{"class":50},[44,1068,278],{"class":50},[44,1070,1071],{"class":646}," 3",[44,1073,289],{"class":50},[44,1075,1076,1078,1080,1082,1084,1086,1089,1091],{"class":46,"line":365},[44,1077,865],{"class":50},[44,1079,398],{"class":54},[44,1081,286],{"class":50},[44,1083,278],{"class":50},[44,1085,281],{"class":50},[44,1087,1088],{"class":68},"ea molestias quasi exercitationem repellat qui ipsa sit aut",[44,1090,286],{"class":50},[44,1092,289],{"class":50},[44,1094,1095,1097,1099,1101,1103,1105,1108,1110,1113,1115,1118,1120,1123],{"class":46,"line":372},[44,1096,865],{"class":50},[44,1098,918],{"class":54},[44,1100,286],{"class":50},[44,1102,278],{"class":50},[44,1104,281],{"class":50},[44,1106,1107],{"class":68},"et iusto sed quo iure",[44,1109,930],{"class":213},[44,1111,1112],{"class":68},"voluptatem occaecati omnis eligendi aut ad",[44,1114,930],{"class":213},[44,1116,1117],{"class":68},"voluptatem doloribus vel accusantium quis pariatur",[44,1119,930],{"class":213},[44,1121,1122],{"class":68},"molestiae porro eius odio et labore et velit aut",[44,1124,946],{"class":50},[44,1126,1127,1130],{"class":46,"line":377},[44,1128,1129],{"class":50},"      }",[44,1131,1132],{"class":54},"]\n",[44,1134,1135],{"class":46,"line":607},[44,1136,1137],{"class":50},"    }\n",[44,1139,1140],{"class":46,"line":612},[44,1141,782],{"class":50},[22,1143,1144],{},"Here, we have added a posts property that currently holds three posts, each post has four properties namely userId, id, title, body.",[22,1146,1147],{},"Let’s try to show these posts as list that we can view, for this we can use a vue.js directive called v-for",[11,1149,1151],{"className":163,"code":1150,"language":165,"meta":20,"style":20},"\u003Ch2>{{title}}\u003C\u002Fh2>\n\u003Cul>\n  \u003Cli v-for=\"post in posts\">{{post.title}}\u003C\u002Fli>\n\u003C\u002Ful>\n",[18,1152,1153,1169,1177,1206],{"__ignoreMap":20},[44,1154,1155,1157,1159,1161,1163,1165,1167],{"class":46,"line":47},[44,1156,51],{"class":50},[44,1158,29],{"class":54},[44,1160,210],{"class":50},[44,1162,214],{"class":213},[44,1164,217],{"class":50},[44,1166,29],{"class":54},[44,1168,79],{"class":50},[44,1170,1171,1173,1175],{"class":46,"line":179},[44,1172,51],{"class":50},[44,1174,132],{"class":54},[44,1176,79],{"class":50},[44,1178,1179,1181,1183,1186,1188,1190,1193,1195,1197,1200,1202,1204],{"class":46,"line":202},[44,1180,182],{"class":50},[44,1182,135],{"class":54},[44,1184,1185],{"class":58}," v-for",[44,1187,62],{"class":50},[44,1189,65],{"class":50},[44,1191,1192],{"class":68},"post in posts",[44,1194,65],{"class":50},[44,1196,210],{"class":50},[44,1198,1199],{"class":213},"{{post.title}}",[44,1201,217],{"class":50},[44,1203,135],{"class":54},[44,1205,79],{"class":50},[44,1207,1208,1210,1212],{"class":46,"line":224},[44,1209,217],{"class":50},[44,1211,132],{"class":54},[44,1213,79],{"class":50},[22,1215,1216],{},"Now the output will look like,",[22,1218,1219],{},[97,1220],{"alt":99,"src":1221},"\u002Fimg\u002Fchrome_2017-01-24_21-34-39.png",[22,1223,1224],{},"Here you can see, we’re showing the title from the posts data that we added.",[22,1226,1227],{},"Now let’s make it little bit cleaner by adding bootstrap. Include the bootstrap css in the head section of index.html",[11,1229,1231],{"className":163,"code":1230,"language":165,"meta":20,"style":20},"\u003Clink\n  rel=\"stylesheet\"\n  href=\"https:\u002F\u002Fmaxcdn.bootstrapcdn.com\u002Fbootstrap\u002F3.3.7\u002Fcss\u002Fbootstrap.min.css\"\n\u002F>\n",[18,1232,1233,1240,1255,1269],{"__ignoreMap":20},[44,1234,1235,1237],{"class":46,"line":47},[44,1236,51],{"class":50},[44,1238,1239],{"class":54},"link\n",[44,1241,1242,1245,1247,1249,1252],{"class":46,"line":179},[44,1243,1244],{"class":58},"  rel",[44,1246,62],{"class":50},[44,1248,65],{"class":50},[44,1250,1251],{"class":68},"stylesheet",[44,1253,1254],{"class":50},"\"\n",[44,1256,1257,1260,1262,1264,1267],{"class":46,"line":202},[44,1258,1259],{"class":58},"  href",[44,1261,62],{"class":50},[44,1263,65],{"class":50},[44,1265,1266],{"class":68},"https:\u002F\u002Fmaxcdn.bootstrapcdn.com\u002Fbootstrap\u002F3.3.7\u002Fcss\u002Fbootstrap.min.css",[44,1268,1254],{"class":50},[44,1270,1271],{"class":46,"line":224},[44,1272,1273],{"class":50},"\u002F>\n",[22,1275,1276],{},"Now update the template section in the Blog.vue as follows,",[11,1278,1280],{"className":163,"code":1279,"language":165,"meta":20,"style":20},"\u003Cdiv class=\"blog container\">\n  \u003Ch2>{{title}}\u003C\u002Fh2>\n  \u003Chr \u002F>\n  \u003Cdiv class=\"row\">\n    \u003Cdiv class=\"col-sm-6 col-md-4\" v-for=\"post in posts\">\n      \u003Cdiv class=\"thumbnail\">\n        \u003Cimg src=\"http:\u002F\u002Fplacehold.it\u002F350x150\" \u002F>\n        \u003Cdiv class=\"caption\">\n          \u003Ch3>{{post.title}}\u003C\u002Fh3>\n          \u003Cp>{{post.body}}\u003C\u002Fp>\n          \u003Cp>\n            \u003Ca href=\"#\" class=\"btn btn-primary\" role=\"button\">Read More\u003C\u002Fa>\n            \u003Ca href=\"#\" class=\"btn btn-danger\" role=\"button\">Delete\u003C\u002Fa>\n          \u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[18,1281,1282,1301,1317,1326,1345,1374,1394,1414,1433,1451,1468,1476,1529,1577,1586,1595,1604,1613,1621],{"__ignoreMap":20},[44,1283,1284,1286,1288,1290,1292,1294,1297,1299],{"class":46,"line":47},[44,1285,51],{"class":50},[44,1287,185],{"class":54},[44,1289,188],{"class":58},[44,1291,62],{"class":50},[44,1293,65],{"class":50},[44,1295,1296],{"class":68},"blog container",[44,1298,65],{"class":50},[44,1300,79],{"class":50},[44,1302,1303,1305,1307,1309,1311,1313,1315],{"class":46,"line":179},[44,1304,182],{"class":50},[44,1306,29],{"class":54},[44,1308,210],{"class":50},[44,1310,214],{"class":213},[44,1312,217],{"class":50},[44,1314,29],{"class":54},[44,1316,79],{"class":50},[44,1318,1319,1321,1324],{"class":46,"line":202},[44,1320,182],{"class":50},[44,1322,1323],{"class":54},"hr",[44,1325,455],{"class":50},[44,1327,1328,1330,1332,1334,1336,1338,1341,1343],{"class":46,"line":224},[44,1329,182],{"class":50},[44,1331,185],{"class":54},[44,1333,188],{"class":58},[44,1335,62],{"class":50},[44,1337,65],{"class":50},[44,1339,1340],{"class":68},"row",[44,1342,65],{"class":50},[44,1344,79],{"class":50},[44,1346,1347,1349,1351,1353,1355,1357,1360,1362,1364,1366,1368,1370,1372],{"class":46,"line":234},[44,1348,205],{"class":50},[44,1350,185],{"class":54},[44,1352,188],{"class":58},[44,1354,62],{"class":50},[44,1356,65],{"class":50},[44,1358,1359],{"class":68},"col-sm-6 col-md-4",[44,1361,65],{"class":50},[44,1363,1185],{"class":58},[44,1365,62],{"class":50},[44,1367,65],{"class":50},[44,1369,1192],{"class":68},[44,1371,65],{"class":50},[44,1373,79],{"class":50},[44,1375,1376,1379,1381,1383,1385,1387,1390,1392],{"class":46,"line":243},[44,1377,1378],{"class":50},"      \u003C",[44,1380,185],{"class":54},[44,1382,188],{"class":58},[44,1384,62],{"class":50},[44,1386,65],{"class":50},[44,1388,1389],{"class":68},"thumbnail",[44,1391,65],{"class":50},[44,1393,79],{"class":50},[44,1395,1396,1399,1401,1403,1405,1407,1410,1412],{"class":46,"line":250},[44,1397,1398],{"class":50},"        \u003C",[44,1400,97],{"class":54},[44,1402,59],{"class":58},[44,1404,62],{"class":50},[44,1406,65],{"class":50},[44,1408,1409],{"class":68},"http:\u002F\u002Fplacehold.it\u002F350x150",[44,1411,65],{"class":50},[44,1413,455],{"class":50},[44,1415,1416,1418,1420,1422,1424,1426,1429,1431],{"class":46,"line":259},[44,1417,1398],{"class":50},[44,1419,185],{"class":54},[44,1421,188],{"class":58},[44,1423,62],{"class":50},[44,1425,65],{"class":50},[44,1427,1428],{"class":68},"caption",[44,1430,65],{"class":50},[44,1432,79],{"class":50},[44,1434,1435,1438,1441,1443,1445,1447,1449],{"class":46,"line":272},[44,1436,1437],{"class":50},"          \u003C",[44,1439,1440],{"class":54},"h3",[44,1442,210],{"class":50},[44,1444,1199],{"class":213},[44,1446,217],{"class":50},[44,1448,1440],{"class":54},[44,1450,79],{"class":50},[44,1452,1453,1455,1457,1459,1462,1464,1466],{"class":46,"line":292},[44,1454,1437],{"class":50},[44,1456,22],{"class":54},[44,1458,210],{"class":50},[44,1460,1461],{"class":213},"{{post.body}}",[44,1463,217],{"class":50},[44,1465,22],{"class":54},[44,1467,79],{"class":50},[44,1469,1470,1472,1474],{"class":46,"line":297},[44,1471,1437],{"class":50},[44,1473,22],{"class":54},[44,1475,79],{"class":50},[44,1477,1478,1481,1483,1486,1488,1490,1493,1495,1497,1499,1501,1504,1506,1509,1511,1513,1516,1518,1520,1523,1525,1527],{"class":46,"line":308},[44,1479,1480],{"class":50},"            \u003C",[44,1482,84],{"class":54},[44,1484,1485],{"class":58}," href",[44,1487,62],{"class":50},[44,1489,65],{"class":50},[44,1491,1492],{"class":68},"#",[44,1494,65],{"class":50},[44,1496,188],{"class":58},[44,1498,62],{"class":50},[44,1500,65],{"class":50},[44,1502,1503],{"class":68},"btn btn-primary",[44,1505,65],{"class":50},[44,1507,1508],{"class":58}," role",[44,1510,62],{"class":50},[44,1512,65],{"class":50},[44,1514,1515],{"class":68},"button",[44,1517,65],{"class":50},[44,1519,210],{"class":50},[44,1521,1522],{"class":213},"Read More",[44,1524,217],{"class":50},[44,1526,84],{"class":54},[44,1528,79],{"class":50},[44,1530,1531,1533,1535,1537,1539,1541,1543,1545,1547,1549,1551,1554,1556,1558,1560,1562,1564,1566,1568,1571,1573,1575],{"class":46,"line":316},[44,1532,1480],{"class":50},[44,1534,84],{"class":54},[44,1536,1485],{"class":58},[44,1538,62],{"class":50},[44,1540,65],{"class":50},[44,1542,1492],{"class":68},[44,1544,65],{"class":50},[44,1546,188],{"class":58},[44,1548,62],{"class":50},[44,1550,65],{"class":50},[44,1552,1553],{"class":68},"btn btn-danger",[44,1555,65],{"class":50},[44,1557,1508],{"class":58},[44,1559,62],{"class":50},[44,1561,65],{"class":50},[44,1563,1515],{"class":68},[44,1565,65],{"class":50},[44,1567,210],{"class":50},[44,1569,1570],{"class":213},"Delete",[44,1572,217],{"class":50},[44,1574,84],{"class":54},[44,1576,79],{"class":50},[44,1578,1579,1582,1584],{"class":46,"line":333},[44,1580,1581],{"class":50},"          \u003C\u002F",[44,1583,22],{"class":54},[44,1585,79],{"class":50},[44,1587,1588,1591,1593],{"class":46,"line":339},[44,1589,1590],{"class":50},"        \u003C\u002F",[44,1592,185],{"class":54},[44,1594,79],{"class":50},[44,1596,1597,1600,1602],{"class":46,"line":345},[44,1598,1599],{"class":50},"      \u003C\u002F",[44,1601,185],{"class":54},[44,1603,79],{"class":50},[44,1605,1606,1609,1611],{"class":46,"line":351},[44,1607,1608],{"class":50},"    \u003C\u002F",[44,1610,185],{"class":54},[44,1612,79],{"class":50},[44,1614,1615,1617,1619],{"class":46,"line":360},[44,1616,227],{"class":50},[44,1618,185],{"class":54},[44,1620,79],{"class":50},[44,1622,1623,1625,1627],{"class":46,"line":365},[44,1624,217],{"class":50},[44,1626,185],{"class":54},[44,1628,79],{"class":50},[22,1630,1631],{},"Now the output looks like,",[22,1633,1634],{},[97,1635],{"alt":99,"src":1636},"\u002Fimg\u002Fchrome_2017-01-24_21-50-30.png",[22,1638,1639,1640],{},"If you’re wondering about the Vue logo at the top, I have removed it from the App.vue ",[97,1641],{"src":450},[29,1643,1645],{"id":1644},"filters","Filters",[22,1647,1648],{},"Let’s see how we can make the blog post title uppercase, irrespective of its current case. For this, we can create a filter that does just that. Creating filters in Vue is very easy. We can add a filter in main.js, then we can access that filter globally anywhere in the app.",[11,1650,1652],{"className":38,"code":1651,"language":40,"meta":20,"style":20},"import App from '.\u002FApp';\n\nVue.filter('uppercase', function (value) {\n  return value.toUpperCase();\n});\n",[18,1653,1654,1673,1677,1715,1732],{"__ignoreMap":20},[44,1655,1656,1659,1662,1664,1666,1669,1671],{"class":46,"line":47},[44,1657,1658],{"class":262},"import",[44,1660,1661],{"class":213}," App ",[44,1663,519],{"class":262},[44,1665,281],{"class":50},[44,1667,1668],{"class":68},".\u002FApp",[44,1670,286],{"class":50},[44,1672,529],{"class":50},[44,1674,1675],{"class":46,"line":179},[44,1676,247],{"emptyLinePlaceholder":246},[44,1678,1679,1682,1685,1688,1691,1693,1696,1698,1700,1703,1706,1710,1713],{"class":46,"line":202},[44,1680,1681],{"class":213},"Vue",[44,1683,1684],{"class":50},".",[44,1686,1687],{"class":819},"filter",[44,1689,1690],{"class":213},"(",[44,1692,286],{"class":50},[44,1694,1695],{"class":68},"uppercase",[44,1697,286],{"class":50},[44,1699,667],{"class":50},[44,1701,1702],{"class":58}," function",[44,1704,1705],{"class":50}," (",[44,1707,1709],{"class":1708},"sHdIc","value",[44,1711,1712],{"class":50},")",[44,1714,269],{"class":50},[44,1716,1717,1720,1723,1725,1728,1730],{"class":46,"line":224},[44,1718,1719],{"class":262},"  return",[44,1721,1722],{"class":213}," value",[44,1724,1684],{"class":50},[44,1726,1727],{"class":819},"toUpperCase",[44,1729,303],{"class":54},[44,1731,529],{"class":50},[44,1733,1734,1737,1739],{"class":46,"line":234},[44,1735,1736],{"class":50},"}",[44,1738,1712],{"class":213},[44,1740,529],{"class":50},[22,1742,1743],{},"Now to use that filter, we can use the Pipe | symbol, Open Blog.vue and update the template as follows:",[11,1745,1747],{"className":163,"code":1746,"language":165,"meta":20,"style":20},"\u003Cdiv class=\"caption\">\n  \u003Ch3>{{post.title | uppercase}}\u003C\u002Fh3>\n\u003C\u002Fdiv>\n",[18,1748,1749,1767,1784],{"__ignoreMap":20},[44,1750,1751,1753,1755,1757,1759,1761,1763,1765],{"class":46,"line":47},[44,1752,51],{"class":50},[44,1754,185],{"class":54},[44,1756,188],{"class":58},[44,1758,62],{"class":50},[44,1760,65],{"class":50},[44,1762,1428],{"class":68},[44,1764,65],{"class":50},[44,1766,79],{"class":50},[44,1768,1769,1771,1773,1775,1778,1780,1782],{"class":46,"line":179},[44,1770,182],{"class":50},[44,1772,1440],{"class":54},[44,1774,210],{"class":50},[44,1776,1777],{"class":213},"{{post.title | uppercase}}",[44,1779,217],{"class":50},[44,1781,1440],{"class":54},[44,1783,79],{"class":50},[44,1785,1786,1788,1790],{"class":46,"line":202},[44,1787,217],{"class":50},[44,1789,185],{"class":54},[44,1791,79],{"class":50},[22,1793,1794],{},"Now, the output will look like,",[22,1796,1797],{},[97,1798],{"alt":99,"src":1799},"\u002Fimg\u002Fchrome_2017-01-24_22-09-17.png",[22,1801,1802],{},"Events (Delete Post)\nIn this section, we’ll try to add the delete post functionality. When the user clicks on delete button, the post will be deleted from the view. As we are not persisting data, so data will again come back when we refresh the page.",[22,1804,1805],{},"We can attach any javascript event on an element using v-on: followed by name of the event. e.g. v-on:click=\"function()\"",[22,1807,1808],{},"Let’s update Blog.vue template as follows",[11,1810,1812],{"className":163,"code":1811,"language":165,"meta":20,"style":20},"\u003Cp>{{post.body}}\u003C\u002Fp>\n...\u003Ca href=\"#\" class=\"btn btn-danger\" role=\"button\" v-on:click=\"deletePost(post)\">Delete\u003C\u002Fa>\u003C\u002Fp>\n",[18,1813,1814,1830],{"__ignoreMap":20},[44,1815,1816,1818,1820,1822,1824,1826,1828],{"class":46,"line":47},[44,1817,51],{"class":50},[44,1819,22],{"class":54},[44,1821,210],{"class":50},[44,1823,1461],{"class":213},[44,1825,217],{"class":50},[44,1827,22],{"class":54},[44,1829,79],{"class":50},[44,1831,1832,1835,1837,1839,1841,1843,1845,1847,1849,1851,1853,1855,1857,1859,1861,1863,1865,1867,1869,1872,1874,1876,1879,1881,1883,1885,1887,1889,1891,1893],{"class":46,"line":179},[44,1833,1834],{"class":213},"...",[44,1836,51],{"class":50},[44,1838,84],{"class":54},[44,1840,1485],{"class":58},[44,1842,62],{"class":50},[44,1844,65],{"class":50},[44,1846,1492],{"class":68},[44,1848,65],{"class":50},[44,1850,188],{"class":58},[44,1852,62],{"class":50},[44,1854,65],{"class":50},[44,1856,1553],{"class":68},[44,1858,65],{"class":50},[44,1860,1508],{"class":58},[44,1862,62],{"class":50},[44,1864,65],{"class":50},[44,1866,1515],{"class":68},[44,1868,65],{"class":50},[44,1870,1871],{"class":58}," v-on:click",[44,1873,62],{"class":50},[44,1875,65],{"class":50},[44,1877,1878],{"class":68},"deletePost(post)",[44,1880,65],{"class":50},[44,1882,210],{"class":50},[44,1884,1570],{"class":213},[44,1886,217],{"class":50},[44,1888,84],{"class":54},[44,1890,74],{"class":50},[44,1892,22],{"class":54},[44,1894,79],{"class":50},[22,1896,1897],{},"We can now add deletePost(post) method in the methods property in the Vue instance,",[11,1899,1901],{"className":38,"code":1900,"language":40,"meta":20,"style":20},"{\n        'userId': 1,\n        'id': 3,\n        'title': 'ea molestias quasi exercitationem repellat qui ipsa sit aut',\n        'body': 'et iusto sed quo iure\\nvoluptatem occaecati omnis eligendi aut ad\\nvoluptatem doloribus vel accusantium quis pariatur\\nmolestiae porro eius odio et labore et velit aut'\n      }]\n    }\n  },\n  methods: {\n    deletePost: function (post) {\n      console.log(post)\n      this.posts.splice(this.posts.indexOf(post), 1)\n    }\n  }\n",[18,1902,1903,1907,1923,1938,1956,1984,1990,1994,2001,2010,2028,2045,2082,2086],{"__ignoreMap":20},[44,1904,1905],{"class":46,"line":47},[44,1906,826],{"class":50},[44,1908,1909,1911,1913,1915,1918,1921],{"class":46,"line":179},[44,1910,865],{"class":50},[44,1912,868],{"class":68},[44,1914,286],{"class":50},[44,1916,1917],{"class":54},": ",[44,1919,1920],{"class":646},"1",[44,1922,289],{"class":50},[44,1924,1925,1927,1929,1931,1933,1936],{"class":46,"line":202},[44,1926,865],{"class":50},[44,1928,884],{"class":68},[44,1930,286],{"class":50},[44,1932,1917],{"class":54},[44,1934,1935],{"class":646},"3",[44,1937,289],{"class":50},[44,1939,1940,1942,1944,1946,1948,1950,1952,1954],{"class":46,"line":224},[44,1941,865],{"class":50},[44,1943,398],{"class":68},[44,1945,286],{"class":50},[44,1947,1917],{"class":54},[44,1949,286],{"class":50},[44,1951,1088],{"class":68},[44,1953,286],{"class":50},[44,1955,289],{"class":50},[44,1957,1958,1960,1962,1964,1966,1968,1970,1972,1974,1976,1978,1980,1982],{"class":46,"line":234},[44,1959,865],{"class":50},[44,1961,918],{"class":68},[44,1963,286],{"class":50},[44,1965,1917],{"class":54},[44,1967,286],{"class":50},[44,1969,1107],{"class":68},[44,1971,930],{"class":213},[44,1973,1112],{"class":68},[44,1975,930],{"class":213},[44,1977,1117],{"class":68},[44,1979,930],{"class":213},[44,1981,1122],{"class":68},[44,1983,946],{"class":50},[44,1985,1986,1988],{"class":46,"line":243},[44,1987,1129],{"class":50},[44,1989,1132],{"class":213},[44,1991,1992],{"class":46,"line":250},[44,1993,1137],{"class":213},[44,1995,1996,1999],{"class":46,"line":259},[44,1997,1998],{"class":213},"  }",[44,2000,289],{"class":50},[44,2002,2003,2006,2008],{"class":46,"line":272},[44,2004,2005],{"class":693},"  methods",[44,2007,278],{"class":50},[44,2009,269],{"class":50},[44,2011,2012,2015,2017,2019,2021,2024,2026],{"class":46,"line":292},[44,2013,2014],{"class":693},"    deletePost",[44,2016,278],{"class":50},[44,2018,1702],{"class":58},[44,2020,1705],{"class":50},[44,2022,2023],{"class":1708},"post",[44,2025,1712],{"class":50},[44,2027,269],{"class":50},[44,2029,2030,2033,2035,2038,2040,2042],{"class":46,"line":297},[44,2031,2032],{"class":213},"      console",[44,2034,1684],{"class":50},[44,2036,2037],{"class":819},"log",[44,2039,1690],{"class":54},[44,2041,2023],{"class":213},[44,2043,2044],{"class":54},")\n",[44,2046,2047,2050,2053,2055,2058,2060,2063,2065,2067,2070,2072,2074,2076,2078,2080],{"class":46,"line":308},[44,2048,2049],{"class":50},"      this.",[44,2051,2052],{"class":213},"posts",[44,2054,1684],{"class":50},[44,2056,2057],{"class":819},"splice",[44,2059,1690],{"class":54},[44,2061,2062],{"class":50},"this.",[44,2064,2052],{"class":213},[44,2066,1684],{"class":50},[44,2068,2069],{"class":819},"indexOf",[44,2071,1690],{"class":54},[44,2073,2023],{"class":213},[44,2075,1712],{"class":54},[44,2077,667],{"class":50},[44,2079,875],{"class":646},[44,2081,2044],{"class":54},[44,2083,2084],{"class":46,"line":316},[44,2085,1137],{"class":50},[44,2087,2088],{"class":46,"line":333},[44,2089,782],{"class":50},[22,2091,2092],{},"Now when the user clicks on delete post on a certain post, the post will get deleted.",[29,2094,2096],{"id":2095},"add-new-post","Add New Post",[22,2098,2099],{},"In this section, we’ll try to implement Add New Post functionality. We’ll use a bootstrap modal for this. When user clicks on a new post button, we’ll open a bootstrap modal which will have a form in which we can enter title and body of the post and click Add button.",[22,2101,2102],{},"Let’s update Blog.vue with the following code,",[11,2104,2106],{"className":163,"code":2105,"language":165,"meta":20,"style":20},"\u003Ch2>{{title}}\u003C\u002Fh2>\n\u003C!-- Trigger the modal add post with a button -->\n\u003Cbutton\n  type=\"button\"\n  class=\"btn btn-primary\"\n  data-toggle=\"modal\"\n  data-target=\"#addNewPost\"\n>\n  New Post\n\u003C\u002Fbutton>\n\u003C!-- Add Post -->\n\u003Cdiv id=\"addNewPost\" class=\"modal fade\" role=\"dialog\">\n  \u003Cdiv class=\"modal-dialog\">\n    \u003C!-- Add Post Content-->\n    \u003Cdiv class=\"modal-content\">\n      \u003Cdiv class=\"modal-header\">\n        \u003Cbutton type=\"button\" class=\"close\" data-dismiss=\"modal\">\n          ×\n        \u003C\u002Fbutton>\n        \u003Ch4 class=\"modal-title\">Add New Post\u003C\u002Fh4>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"modal-body\">\n        \u003Cdiv class=\"form-group\">\n          \u003Clabel for=\"title\">Title:\u003C\u002Flabel>\n          \u003Cinput\n            type=\"title\"\n            class=\"form-control\"\n            id=\"title\"\n            v-model=\"newPost.title\"\n          \u002F>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"form-group\">\n          \u003Clabel for=\"body\">Content:\u003C\u002Flabel>\n          \u003Ctextarea\n            class=\"form-control\"\n            rows=\"5\"\n            id=\"body\"\n            v-model=\"newPost.body\"\n          >\u003C\u002Ftextarea>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"modal-footer\">\n        \u003Cbutton\n          type=\"button\"\n          class=\"btn btn-default\"\n          data-dismiss=\"modal\"\n          v-on:click=\"AddPost()\"\n        >\n          Add\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[18,2107,2108,2124,2129,2136,2149,2162,2176,2190,2194,2199,2207,2212,2253,2272,2277,2296,2315,2356,2361,2369,2397,2405,2424,2443,2472,2479,2492,2506,2519,2533,2538,2546,2564,2591,2598,2610,2624,2636,2649,2659,2667,2676,2696,2703,2717,2732,2746,2761,2767,2773,2782,2791,2800,2809],{"__ignoreMap":20},[44,2109,2110,2112,2114,2116,2118,2120,2122],{"class":46,"line":47},[44,2111,51],{"class":50},[44,2113,29],{"class":54},[44,2115,210],{"class":50},[44,2117,214],{"class":213},[44,2119,217],{"class":50},[44,2121,29],{"class":54},[44,2123,79],{"class":50},[44,2125,2126],{"class":46,"line":179},[44,2127,2128],{"class":368},"\u003C!-- Trigger the modal add post with a button -->\n",[44,2130,2131,2133],{"class":46,"line":202},[44,2132,51],{"class":50},[44,2134,2135],{"class":54},"button\n",[44,2137,2138,2141,2143,2145,2147],{"class":46,"line":224},[44,2139,2140],{"class":58},"  type",[44,2142,62],{"class":50},[44,2144,65],{"class":50},[44,2146,1515],{"class":68},[44,2148,1254],{"class":50},[44,2150,2151,2154,2156,2158,2160],{"class":46,"line":234},[44,2152,2153],{"class":58},"  class",[44,2155,62],{"class":50},[44,2157,65],{"class":50},[44,2159,1503],{"class":68},[44,2161,1254],{"class":50},[44,2163,2164,2167,2169,2171,2174],{"class":46,"line":243},[44,2165,2166],{"class":58},"  data-toggle",[44,2168,62],{"class":50},[44,2170,65],{"class":50},[44,2172,2173],{"class":68},"modal",[44,2175,1254],{"class":50},[44,2177,2178,2181,2183,2185,2188],{"class":46,"line":250},[44,2179,2180],{"class":58},"  data-target",[44,2182,62],{"class":50},[44,2184,65],{"class":50},[44,2186,2187],{"class":68},"#addNewPost",[44,2189,1254],{"class":50},[44,2191,2192],{"class":46,"line":259},[44,2193,79],{"class":50},[44,2195,2196],{"class":46,"line":272},[44,2197,2198],{"class":213},"  New Post\n",[44,2200,2201,2203,2205],{"class":46,"line":292},[44,2202,217],{"class":50},[44,2204,1515],{"class":54},[44,2206,79],{"class":50},[44,2208,2209],{"class":46,"line":297},[44,2210,2211],{"class":368},"\u003C!-- Add Post -->\n",[44,2213,2214,2216,2218,2220,2222,2224,2227,2229,2231,2233,2235,2238,2240,2242,2244,2246,2249,2251],{"class":46,"line":308},[44,2215,51],{"class":50},[44,2217,185],{"class":54},[44,2219,424],{"class":58},[44,2221,62],{"class":50},[44,2223,65],{"class":50},[44,2225,2226],{"class":68},"addNewPost",[44,2228,65],{"class":50},[44,2230,188],{"class":58},[44,2232,62],{"class":50},[44,2234,65],{"class":50},[44,2236,2237],{"class":68},"modal fade",[44,2239,65],{"class":50},[44,2241,1508],{"class":58},[44,2243,62],{"class":50},[44,2245,65],{"class":50},[44,2247,2248],{"class":68},"dialog",[44,2250,65],{"class":50},[44,2252,79],{"class":50},[44,2254,2255,2257,2259,2261,2263,2265,2268,2270],{"class":46,"line":316},[44,2256,182],{"class":50},[44,2258,185],{"class":54},[44,2260,188],{"class":58},[44,2262,62],{"class":50},[44,2264,65],{"class":50},[44,2266,2267],{"class":68},"modal-dialog",[44,2269,65],{"class":50},[44,2271,79],{"class":50},[44,2273,2274],{"class":46,"line":333},[44,2275,2276],{"class":368},"    \u003C!-- Add Post Content-->\n",[44,2278,2279,2281,2283,2285,2287,2289,2292,2294],{"class":46,"line":339},[44,2280,205],{"class":50},[44,2282,185],{"class":54},[44,2284,188],{"class":58},[44,2286,62],{"class":50},[44,2288,65],{"class":50},[44,2290,2291],{"class":68},"modal-content",[44,2293,65],{"class":50},[44,2295,79],{"class":50},[44,2297,2298,2300,2302,2304,2306,2308,2311,2313],{"class":46,"line":345},[44,2299,1378],{"class":50},[44,2301,185],{"class":54},[44,2303,188],{"class":58},[44,2305,62],{"class":50},[44,2307,65],{"class":50},[44,2309,2310],{"class":68},"modal-header",[44,2312,65],{"class":50},[44,2314,79],{"class":50},[44,2316,2317,2319,2321,2324,2326,2328,2330,2332,2334,2336,2338,2341,2343,2346,2348,2350,2352,2354],{"class":46,"line":351},[44,2318,1398],{"class":50},[44,2320,1515],{"class":54},[44,2322,2323],{"class":58}," type",[44,2325,62],{"class":50},[44,2327,65],{"class":50},[44,2329,1515],{"class":68},[44,2331,65],{"class":50},[44,2333,188],{"class":58},[44,2335,62],{"class":50},[44,2337,65],{"class":50},[44,2339,2340],{"class":68},"close",[44,2342,65],{"class":50},[44,2344,2345],{"class":58}," data-dismiss",[44,2347,62],{"class":50},[44,2349,65],{"class":50},[44,2351,2173],{"class":68},[44,2353,65],{"class":50},[44,2355,79],{"class":50},[44,2357,2358],{"class":46,"line":360},[44,2359,2360],{"class":213},"          ×\n",[44,2362,2363,2365,2367],{"class":46,"line":365},[44,2364,1590],{"class":50},[44,2366,1515],{"class":54},[44,2368,79],{"class":50},[44,2370,2371,2373,2376,2378,2380,2382,2385,2387,2389,2391,2393,2395],{"class":46,"line":372},[44,2372,1398],{"class":50},[44,2374,2375],{"class":54},"h4",[44,2377,188],{"class":58},[44,2379,62],{"class":50},[44,2381,65],{"class":50},[44,2383,2384],{"class":68},"modal-title",[44,2386,65],{"class":50},[44,2388,210],{"class":50},[44,2390,2096],{"class":213},[44,2392,217],{"class":50},[44,2394,2375],{"class":54},[44,2396,79],{"class":50},[44,2398,2399,2401,2403],{"class":46,"line":377},[44,2400,1599],{"class":50},[44,2402,185],{"class":54},[44,2404,79],{"class":50},[44,2406,2407,2409,2411,2413,2415,2417,2420,2422],{"class":46,"line":607},[44,2408,1378],{"class":50},[44,2410,185],{"class":54},[44,2412,188],{"class":58},[44,2414,62],{"class":50},[44,2416,65],{"class":50},[44,2418,2419],{"class":68},"modal-body",[44,2421,65],{"class":50},[44,2423,79],{"class":50},[44,2425,2426,2428,2430,2432,2434,2436,2439,2441],{"class":46,"line":612},[44,2427,1398],{"class":50},[44,2429,185],{"class":54},[44,2431,188],{"class":58},[44,2433,62],{"class":50},[44,2435,65],{"class":50},[44,2437,2438],{"class":68},"form-group",[44,2440,65],{"class":50},[44,2442,79],{"class":50},[44,2444,2445,2447,2450,2453,2455,2457,2459,2461,2463,2466,2468,2470],{"class":46,"line":617},[44,2446,1437],{"class":50},[44,2448,2449],{"class":54},"label",[44,2451,2452],{"class":58}," for",[44,2454,62],{"class":50},[44,2456,65],{"class":50},[44,2458,398],{"class":68},[44,2460,65],{"class":50},[44,2462,210],{"class":50},[44,2464,2465],{"class":213},"Title:",[44,2467,217],{"class":50},[44,2469,2449],{"class":54},[44,2471,79],{"class":50},[44,2473,2474,2476],{"class":46,"line":626},[44,2475,1437],{"class":50},[44,2477,2478],{"class":54},"input\n",[44,2480,2481,2484,2486,2488,2490],{"class":46,"line":631},[44,2482,2483],{"class":58},"            type",[44,2485,62],{"class":50},[44,2487,65],{"class":50},[44,2489,398],{"class":68},[44,2491,1254],{"class":50},[44,2493,2494,2497,2499,2501,2504],{"class":46,"line":640},[44,2495,2496],{"class":58},"            class",[44,2498,62],{"class":50},[44,2500,65],{"class":50},[44,2502,2503],{"class":68},"form-control",[44,2505,1254],{"class":50},[44,2507,2508,2511,2513,2515,2517],{"class":46,"line":651},[44,2509,2510],{"class":58},"            id",[44,2512,62],{"class":50},[44,2514,65],{"class":50},[44,2516,398],{"class":68},[44,2518,1254],{"class":50},[44,2520,2521,2524,2526,2528,2531],{"class":46,"line":685},[44,2522,2523],{"class":58},"            v-model",[44,2525,62],{"class":50},[44,2527,65],{"class":50},[44,2529,2530],{"class":68},"newPost.title",[44,2532,1254],{"class":50},[44,2534,2535],{"class":46,"line":690},[44,2536,2537],{"class":50},"          \u002F>\n",[44,2539,2540,2542,2544],{"class":46,"line":704},[44,2541,1590],{"class":50},[44,2543,185],{"class":54},[44,2545,79],{"class":50},[44,2547,2548,2550,2552,2554,2556,2558,2560,2562],{"class":46,"line":709},[44,2549,1398],{"class":50},[44,2551,185],{"class":54},[44,2553,188],{"class":58},[44,2555,62],{"class":50},[44,2557,65],{"class":50},[44,2559,2438],{"class":68},[44,2561,65],{"class":50},[44,2563,79],{"class":50},[44,2565,2566,2568,2570,2572,2574,2576,2578,2580,2582,2585,2587,2589],{"class":46,"line":722},[44,2567,1437],{"class":50},[44,2569,2449],{"class":54},[44,2571,2452],{"class":58},[44,2573,62],{"class":50},[44,2575,65],{"class":50},[44,2577,918],{"class":68},[44,2579,65],{"class":50},[44,2581,210],{"class":50},[44,2583,2584],{"class":213},"Content:",[44,2586,217],{"class":50},[44,2588,2449],{"class":54},[44,2590,79],{"class":50},[44,2592,2593,2595],{"class":46,"line":727},[44,2594,1437],{"class":50},[44,2596,2597],{"class":54},"textarea\n",[44,2599,2600,2602,2604,2606,2608],{"class":46,"line":740},[44,2601,2496],{"class":58},[44,2603,62],{"class":50},[44,2605,65],{"class":50},[44,2607,2503],{"class":68},[44,2609,1254],{"class":50},[44,2611,2612,2615,2617,2619,2622],{"class":46,"line":745},[44,2613,2614],{"class":58},"            rows",[44,2616,62],{"class":50},[44,2618,65],{"class":50},[44,2620,2621],{"class":68},"5",[44,2623,1254],{"class":50},[44,2625,2626,2628,2630,2632,2634],{"class":46,"line":761},[44,2627,2510],{"class":58},[44,2629,62],{"class":50},[44,2631,65],{"class":50},[44,2633,918],{"class":68},[44,2635,1254],{"class":50},[44,2637,2638,2640,2642,2644,2647],{"class":46,"line":766},[44,2639,2523],{"class":58},[44,2641,62],{"class":50},[44,2643,65],{"class":50},[44,2645,2646],{"class":68},"newPost.body",[44,2648,1254],{"class":50},[44,2650,2651,2654,2657],{"class":46,"line":779},[44,2652,2653],{"class":50},"          >\u003C\u002F",[44,2655,2656],{"class":54},"textarea",[44,2658,79],{"class":50},[44,2660,2661,2663,2665],{"class":46,"line":785},[44,2662,1590],{"class":50},[44,2664,185],{"class":54},[44,2666,79],{"class":50},[44,2668,2670,2672,2674],{"class":46,"line":2669},41,[44,2671,1599],{"class":50},[44,2673,185],{"class":54},[44,2675,79],{"class":50},[44,2677,2679,2681,2683,2685,2687,2689,2692,2694],{"class":46,"line":2678},42,[44,2680,1378],{"class":50},[44,2682,185],{"class":54},[44,2684,188],{"class":58},[44,2686,62],{"class":50},[44,2688,65],{"class":50},[44,2690,2691],{"class":68},"modal-footer",[44,2693,65],{"class":50},[44,2695,79],{"class":50},[44,2697,2699,2701],{"class":46,"line":2698},43,[44,2700,1398],{"class":50},[44,2702,2135],{"class":54},[44,2704,2706,2709,2711,2713,2715],{"class":46,"line":2705},44,[44,2707,2708],{"class":58},"          type",[44,2710,62],{"class":50},[44,2712,65],{"class":50},[44,2714,1515],{"class":68},[44,2716,1254],{"class":50},[44,2718,2720,2723,2725,2727,2730],{"class":46,"line":2719},45,[44,2721,2722],{"class":58},"          class",[44,2724,62],{"class":50},[44,2726,65],{"class":50},[44,2728,2729],{"class":68},"btn btn-default",[44,2731,1254],{"class":50},[44,2733,2735,2738,2740,2742,2744],{"class":46,"line":2734},46,[44,2736,2737],{"class":58},"          data-dismiss",[44,2739,62],{"class":50},[44,2741,65],{"class":50},[44,2743,2173],{"class":68},[44,2745,1254],{"class":50},[44,2747,2749,2752,2754,2756,2759],{"class":46,"line":2748},47,[44,2750,2751],{"class":58},"          v-on:click",[44,2753,62],{"class":50},[44,2755,65],{"class":50},[44,2757,2758],{"class":68},"AddPost()",[44,2760,1254],{"class":50},[44,2762,2764],{"class":46,"line":2763},48,[44,2765,2766],{"class":50},"        >\n",[44,2768,2770],{"class":46,"line":2769},49,[44,2771,2772],{"class":213},"          Add\n",[44,2774,2776,2778,2780],{"class":46,"line":2775},50,[44,2777,1590],{"class":50},[44,2779,1515],{"class":54},[44,2781,79],{"class":50},[44,2783,2785,2787,2789],{"class":46,"line":2784},51,[44,2786,1599],{"class":50},[44,2788,185],{"class":54},[44,2790,79],{"class":50},[44,2792,2794,2796,2798],{"class":46,"line":2793},52,[44,2795,1608],{"class":50},[44,2797,185],{"class":54},[44,2799,79],{"class":50},[44,2801,2803,2805,2807],{"class":46,"line":2802},53,[44,2804,227],{"class":50},[44,2806,185],{"class":54},[44,2808,79],{"class":50},[44,2810,2812,2814,2816],{"class":46,"line":2811},54,[44,2813,217],{"class":50},[44,2815,185],{"class":54},[44,2817,79],{"class":50},[22,2819,2820],{},"Also, let’s add AddPost method in the Vue instance,",[11,2822,2824],{"className":38,"code":2823,"language":40,"meta":20,"style":20},"methods: {\n    deletePost: function (post) {\n      console.log(post)\n      this.posts.splice(this.posts.indexOf(post), 1)\n    },\n    AddPost: function () {\n      this.posts.push({\n        'userId': 1,\n        'id': this.posts.length + 1,\n        'title': this.newPost.title,\n        'body': this.newPost.body\n      })\n\n      this.newPost = {}\n    }\n  }\n",[18,2825,2826,2835,2851,2865,2897,2901,2915,2930,2944,2971,2992,3011,3017,3021,3033,3037],{"__ignoreMap":20},[44,2827,2828,2831,2833],{"class":46,"line":47},[44,2829,2830],{"class":693},"methods",[44,2832,278],{"class":50},[44,2834,269],{"class":50},[44,2836,2837,2839,2841,2843,2845,2847,2849],{"class":46,"line":179},[44,2838,2014],{"class":693},[44,2840,278],{"class":50},[44,2842,1702],{"class":58},[44,2844,1705],{"class":50},[44,2846,2023],{"class":1708},[44,2848,1712],{"class":50},[44,2850,269],{"class":50},[44,2852,2853,2855,2857,2859,2861,2863],{"class":46,"line":202},[44,2854,2032],{"class":213},[44,2856,1684],{"class":50},[44,2858,2037],{"class":819},[44,2860,1690],{"class":54},[44,2862,2023],{"class":213},[44,2864,2044],{"class":54},[44,2866,2867,2869,2871,2873,2875,2877,2879,2881,2883,2885,2887,2889,2891,2893,2895],{"class":46,"line":224},[44,2868,2049],{"class":50},[44,2870,2052],{"class":213},[44,2872,1684],{"class":50},[44,2874,2057],{"class":819},[44,2876,1690],{"class":54},[44,2878,2062],{"class":50},[44,2880,2052],{"class":213},[44,2882,1684],{"class":50},[44,2884,2069],{"class":819},[44,2886,1690],{"class":54},[44,2888,2023],{"class":213},[44,2890,1712],{"class":54},[44,2892,667],{"class":50},[44,2894,875],{"class":646},[44,2896,2044],{"class":54},[44,2898,2899],{"class":46,"line":234},[44,2900,342],{"class":50},[44,2902,2903,2906,2908,2910,2913],{"class":46,"line":243},[44,2904,2905],{"class":693},"    AddPost",[44,2907,278],{"class":50},[44,2909,1702],{"class":58},[44,2911,2912],{"class":50}," ()",[44,2914,269],{"class":50},[44,2916,2917,2919,2921,2923,2926,2928],{"class":46,"line":250},[44,2918,2049],{"class":50},[44,2920,2052],{"class":213},[44,2922,1684],{"class":50},[44,2924,2925],{"class":819},"push",[44,2927,1690],{"class":54},[44,2929,826],{"class":50},[44,2931,2932,2934,2936,2938,2940,2942],{"class":46,"line":259},[44,2933,865],{"class":50},[44,2935,868],{"class":54},[44,2937,286],{"class":50},[44,2939,278],{"class":50},[44,2941,875],{"class":646},[44,2943,289],{"class":50},[44,2945,2946,2948,2950,2952,2954,2957,2959,2961,2964,2967,2969],{"class":46,"line":272},[44,2947,865],{"class":50},[44,2949,884],{"class":54},[44,2951,286],{"class":50},[44,2953,278],{"class":50},[44,2955,2956],{"class":50}," this.",[44,2958,2052],{"class":213},[44,2960,1684],{"class":50},[44,2962,2963],{"class":213},"length",[44,2965,2966],{"class":50}," +",[44,2968,875],{"class":646},[44,2970,289],{"class":50},[44,2972,2973,2975,2977,2979,2981,2983,2986,2988,2990],{"class":46,"line":292},[44,2974,865],{"class":50},[44,2976,398],{"class":54},[44,2978,286],{"class":50},[44,2980,278],{"class":50},[44,2982,2956],{"class":50},[44,2984,2985],{"class":213},"newPost",[44,2987,1684],{"class":50},[44,2989,398],{"class":213},[44,2991,289],{"class":50},[44,2993,2994,2996,2998,3000,3002,3004,3006,3008],{"class":46,"line":297},[44,2995,865],{"class":50},[44,2997,918],{"class":54},[44,2999,286],{"class":50},[44,3001,278],{"class":50},[44,3003,2956],{"class":50},[44,3005,2985],{"class":213},[44,3007,1684],{"class":50},[44,3009,3010],{"class":213},"body\n",[44,3012,3013,3015],{"class":46,"line":308},[44,3014,1129],{"class":50},[44,3016,2044],{"class":54},[44,3018,3019],{"class":46,"line":316},[44,3020,247],{"emptyLinePlaceholder":246},[44,3022,3023,3025,3027,3030],{"class":46,"line":333},[44,3024,2049],{"class":50},[44,3026,2985],{"class":213},[44,3028,3029],{"class":50}," =",[44,3031,3032],{"class":50}," {}\n",[44,3034,3035],{"class":46,"line":339},[44,3036,1137],{"class":50},[44,3038,3039],{"class":46,"line":345},[44,3040,782],{"class":50},[22,3042,3043],{},"We also need to include jQuery & bootstrap.js in the index.html head section",[11,3045,3047],{"className":163,"code":3046,"language":165,"meta":20,"style":20},"\u003Chead>\n  \u003Cmeta charset=\"utf-8\" \u002F>\n  \u003Clink\n    rel=\"stylesheet\"\n    href=\"https:\u002F\u002Fmaxcdn.bootstrapcdn.com\u002Fbootstrap\u002F3.3.7\u002Fcss\u002Fbootstrap.min.css\"\n  \u002F>\n  \u003Cscript src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fjquery\u002F3.1.1\u002Fjquery.js\">\u003C\u002Fscript>\n  \u003Cscript src=\"https:\u002F\u002Fmaxcdn.bootstrapcdn.com\u002Fbootstrap\u002F3.3.7\u002Fjs\u002Fbootstrap.min.js\">\u003C\u002Fscript>\n  \u003Ctitle>blogapp\u003C\u002Ftitle>\n\u003C\u002Fhead>\n",[18,3048,3049,3058,3079,3085,3098,3111,3116,3139,3162,3179],{"__ignoreMap":20},[44,3050,3051,3053,3056],{"class":46,"line":47},[44,3052,51],{"class":50},[44,3054,3055],{"class":54},"head",[44,3057,79],{"class":50},[44,3059,3060,3062,3065,3068,3070,3072,3075,3077],{"class":46,"line":179},[44,3061,182],{"class":50},[44,3063,3064],{"class":54},"meta",[44,3066,3067],{"class":58}," charset",[44,3069,62],{"class":50},[44,3071,65],{"class":50},[44,3073,3074],{"class":68},"utf-8",[44,3076,65],{"class":50},[44,3078,455],{"class":50},[44,3080,3081,3083],{"class":46,"line":202},[44,3082,182],{"class":50},[44,3084,1239],{"class":54},[44,3086,3087,3090,3092,3094,3096],{"class":46,"line":224},[44,3088,3089],{"class":58},"    rel",[44,3091,62],{"class":50},[44,3093,65],{"class":50},[44,3095,1251],{"class":68},[44,3097,1254],{"class":50},[44,3099,3100,3103,3105,3107,3109],{"class":46,"line":234},[44,3101,3102],{"class":58},"    href",[44,3104,62],{"class":50},[44,3106,65],{"class":50},[44,3108,1266],{"class":68},[44,3110,1254],{"class":50},[44,3112,3113],{"class":46,"line":243},[44,3114,3115],{"class":50},"  \u002F>\n",[44,3117,3118,3120,3122,3124,3126,3128,3131,3133,3135,3137],{"class":46,"line":250},[44,3119,182],{"class":50},[44,3121,55],{"class":54},[44,3123,59],{"class":58},[44,3125,62],{"class":50},[44,3127,65],{"class":50},[44,3129,3130],{"class":68},"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fjquery\u002F3.1.1\u002Fjquery.js",[44,3132,65],{"class":50},[44,3134,74],{"class":50},[44,3136,55],{"class":54},[44,3138,79],{"class":50},[44,3140,3141,3143,3145,3147,3149,3151,3154,3156,3158,3160],{"class":46,"line":259},[44,3142,182],{"class":50},[44,3144,55],{"class":54},[44,3146,59],{"class":58},[44,3148,62],{"class":50},[44,3150,65],{"class":50},[44,3152,3153],{"class":68},"https:\u002F\u002Fmaxcdn.bootstrapcdn.com\u002Fbootstrap\u002F3.3.7\u002Fjs\u002Fbootstrap.min.js",[44,3155,65],{"class":50},[44,3157,74],{"class":50},[44,3159,55],{"class":54},[44,3161,79],{"class":50},[44,3163,3164,3166,3168,3170,3173,3175,3177],{"class":46,"line":272},[44,3165,182],{"class":50},[44,3167,398],{"class":54},[44,3169,210],{"class":50},[44,3171,3172],{"class":213},"blogapp",[44,3174,217],{"class":50},[44,3176,398],{"class":54},[44,3178,79],{"class":50},[44,3180,3181,3183,3185],{"class":46,"line":292},[44,3182,217],{"class":50},[44,3184,3055],{"class":54},[44,3186,79],{"class":50},[22,3188,3189],{},"The output will look like,",[22,3191,3192],{},[97,3193],{"alt":99,"src":3194},"\u002Fimg\u002Fchrome_2017-01-26_20-28-53.png",[22,3196,3197],{},[97,3198],{"alt":99,"src":3199},"\u002Fimg\u002Fchrome_2017-01-26_20-29-03.png",[22,3201,3202,3203],{},"vue-resource\nWe can use vue-resource for sending ajax request to external server. Here we’ll try to fetch the blog posts from ",[84,3204,3205],{"href":3205,"rel":3206},"https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts",[88],[22,3208,3209],{},[97,3210],{"alt":99,"src":3211},"\u002Fimg\u002Fchrome_2017-01-26_20-52-11.png",[22,3213,3214],{},"First, we need to install the vue-resource using npm install vue-resource --save",[22,3216,3217],{},[97,3218],{"alt":99,"src":3219},"\u002Fimg\u002Fconemu64_2017-01-26_20-35-19.png",[22,3221,3222],{},"Now update the main.js file,",[11,3224,3226],{"className":38,"code":3225,"language":40,"meta":20,"style":20},"...\nimport App from '.\u002FApp'\nimport VueResource from 'vue-resource'\n\nVue.use(VueResource)\n\nVue.filter('uppercase', function (value) {\n...\n",[18,3227,3228,3233,3247,3263,3267,3279,3283,3311],{"__ignoreMap":20},[44,3229,3230],{"class":46,"line":47},[44,3231,3232],{"class":50},"...\n",[44,3234,3235,3237,3239,3241,3243,3245],{"class":46,"line":179},[44,3236,1658],{"class":262},[44,3238,1661],{"class":213},[44,3240,519],{"class":262},[44,3242,281],{"class":50},[44,3244,1668],{"class":68},[44,3246,946],{"class":50},[44,3248,3249,3251,3254,3256,3258,3261],{"class":46,"line":202},[44,3250,1658],{"class":262},[44,3252,3253],{"class":213}," VueResource ",[44,3255,519],{"class":262},[44,3257,281],{"class":50},[44,3259,3260],{"class":68},"vue-resource",[44,3262,946],{"class":50},[44,3264,3265],{"class":46,"line":224},[44,3266,247],{"emptyLinePlaceholder":246},[44,3268,3269,3271,3273,3276],{"class":46,"line":234},[44,3270,1681],{"class":213},[44,3272,1684],{"class":50},[44,3274,3275],{"class":819},"use",[44,3277,3278],{"class":213},"(VueResource)\n",[44,3280,3281],{"class":46,"line":243},[44,3282,247],{"emptyLinePlaceholder":246},[44,3284,3285,3287,3289,3291,3293,3295,3297,3299,3301,3303,3305,3307,3309],{"class":46,"line":250},[44,3286,1681],{"class":213},[44,3288,1684],{"class":50},[44,3290,1687],{"class":819},[44,3292,1690],{"class":213},[44,3294,286],{"class":50},[44,3296,1695],{"class":68},[44,3298,286],{"class":50},[44,3300,667],{"class":50},[44,3302,1702],{"class":58},[44,3304,1705],{"class":50},[44,3306,1709],{"class":1708},[44,3308,1712],{"class":50},[44,3310,269],{"class":50},[44,3312,3313],{"class":46,"line":259},[44,3314,3232],{"class":50},[22,3316,3317],{},"Vuejs provides various lifecycle hooks, we can use the created lifecycle hook. It is called after the instance is created. We can update the Vue instance in Blog.vue as follows,",[11,3319,3321],{"className":38,"code":3320,"language":40,"meta":20,"style":20},"...\n      this.newPost = {}\n    }\n  },\n  created: function () {\n    this.$http.get('https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts').then(function (response) {\n      \u002F\u002F console.log(response.data);\n      this.posts = response.data\n    })\n  }\n...\n",[18,3322,3323,3327,3338,3342,3348,3361,3403,3408,3424,3431,3435],{"__ignoreMap":20},[44,3324,3325],{"class":46,"line":47},[44,3326,3232],{"class":50},[44,3328,3329,3331,3334,3336],{"class":46,"line":179},[44,3330,2049],{"class":50},[44,3332,3333],{"class":213},"newPost ",[44,3335,62],{"class":50},[44,3337,3032],{"class":50},[44,3339,3340],{"class":46,"line":202},[44,3341,1137],{"class":213},[44,3343,3344,3346],{"class":46,"line":224},[44,3345,1998],{"class":213},[44,3347,289],{"class":50},[44,3349,3350,3353,3355,3357,3359],{"class":46,"line":234},[44,3351,3352],{"class":693},"  created",[44,3354,278],{"class":50},[44,3356,1702],{"class":58},[44,3358,2912],{"class":50},[44,3360,269],{"class":50},[44,3362,3363,3366,3369,3371,3374,3376,3378,3380,3382,3384,3386,3389,3391,3394,3396,3399,3401],{"class":46,"line":243},[44,3364,3365],{"class":50},"    this.",[44,3367,3368],{"class":213},"$http",[44,3370,1684],{"class":50},[44,3372,3373],{"class":819},"get",[44,3375,1690],{"class":54},[44,3377,286],{"class":50},[44,3379,3205],{"class":68},[44,3381,286],{"class":50},[44,3383,1712],{"class":54},[44,3385,1684],{"class":50},[44,3387,3388],{"class":819},"then",[44,3390,1690],{"class":54},[44,3392,3393],{"class":58},"function",[44,3395,1705],{"class":50},[44,3397,3398],{"class":1708},"response",[44,3400,1712],{"class":50},[44,3402,269],{"class":50},[44,3404,3405],{"class":46,"line":250},[44,3406,3407],{"class":368},"      \u002F\u002F console.log(response.data);\n",[44,3409,3410,3412,3414,3416,3419,3421],{"class":46,"line":259},[44,3411,2049],{"class":50},[44,3413,2052],{"class":213},[44,3415,3029],{"class":50},[44,3417,3418],{"class":213}," response",[44,3420,1684],{"class":50},[44,3422,3423],{"class":213},"data\n",[44,3425,3426,3429],{"class":46,"line":272},[44,3427,3428],{"class":50},"    }",[44,3430,2044],{"class":54},[44,3432,3433],{"class":46,"line":292},[44,3434,782],{"class":50},[44,3436,3437],{"class":46,"line":297},[44,3438,3232],{"class":50},[22,3440,3441],{},"Now we’re using the data from the server, the output in the browser will look like,",[22,3443,3444,3447],{},[97,3445],{"alt":20,"src":3446},"\u002Fimg\u002Fchrome_2017-01-26_20-51-04.png","\nI have removed the body below the title intentionally, we’ll use in the blog-detail page.",[22,3449,3450],{},"vue-router\nIn a single page application, we navigate to different routes without refreshing the browser. Vue-router allows us to do that very easily.",[22,3452,3453],{},"First, we need to install the vue-resource using npm install vue-router --save",[22,3455,3456],{},[97,3457],{"alt":99,"src":3458},"\u002Fimg\u002Fconemu64_2017-01-26_20-37-59.png",[22,3460,3461],{},"Now Update the main.js file as follows,",[11,3463,3465],{"className":38,"code":3464,"language":40,"meta":20,"style":20},"\u002F\u002F The Vue build version to load with the `import` command\n\u002F\u002F (runtime-only or standalone) has been set in webpack.base.conf with an alias.\nimport Vue from 'vue';\nimport Blog from '.\u002Fcomponents\u002FBlog';\nimport Hello from '.\u002Fcomponents\u002FHello';\nimport VueResource from 'vue-resource';\nimport VueRouter from 'vue-router';\n\nVue.use(VueResource);\nVue.use(VueRouter);\n\nVue.filter('uppercase', function (value) {\n  return value.toUpperCase();\n});\n\nconst routes = [\n  { path: '\u002F', component: Blog },\n  { path: '\u002Fhello', component: Hello },\n];\n\nconst router = new VueRouter({\n  mode: 'history', \u002F\u002Fremoves # in the url\n  routes, \u002F\u002F short for routes: routes\n});\n\n\u002F* eslint-disable no-new *\u002F\nnew Vue({\n  router,\n  template: `\n  \u003Cdiv id=\"app\">\n   \u003Cnav class=\"navbar navbar-default\">\n    \u003Cdiv class=\"container-fluid\">\n    \u003Cdiv class=\"navbar-header\">\n      \u003Ca class=\"navbar-brand\" href=\"#\">Blog App\u003C\u002Fa>\n    \u003C\u002Fdiv>\n    \u003Cul class=\"nav navbar-nav\">\n      \u003Cli>\u003Crouter-link to=\"\u002F\">Blog\u003C\u002Frouter-link>\u003C\u002Fli>\n      \u003Cli>\u003Crouter-link to=\"\u002Fhello\">Hello\u003C\u002Frouter-link>\u003C\u002Fli>\n    \u003C\u002Ful>\n    \u003C\u002Fdiv>\n   \u003C\u002Fnav>\n\n    \u003Crouter-view>\u003C\u002Frouter-view>\n  \u003C\u002Fdiv>\n  `,\n}).$mount('#app');\n",[18,3466,3467,3472,3477,3495,3511,3527,3543,3561,3565,3578,3591,3595,3623,3637,3645,3649,3662,3691,3716,3723,3727,3746,3765,3775,3783,3787,3792,3804,3811,3821,3826,3831,3836,3841,3846,3851,3856,3861,3866,3871,3875,3880,3884,3889,3894,3901],{"__ignoreMap":20},[44,3468,3469],{"class":46,"line":47},[44,3470,3471],{"class":368},"\u002F\u002F The Vue build version to load with the `import` command\n",[44,3473,3474],{"class":46,"line":179},[44,3475,3476],{"class":368},"\u002F\u002F (runtime-only or standalone) has been set in webpack.base.conf with an alias.\n",[44,3478,3479,3481,3484,3486,3488,3491,3493],{"class":46,"line":202},[44,3480,1658],{"class":262},[44,3482,3483],{"class":213}," Vue ",[44,3485,519],{"class":262},[44,3487,281],{"class":50},[44,3489,3490],{"class":68},"vue",[44,3492,286],{"class":50},[44,3494,529],{"class":50},[44,3496,3497,3499,3501,3503,3505,3507,3509],{"class":46,"line":224},[44,3498,1658],{"class":262},[44,3500,540],{"class":213},[44,3502,519],{"class":262},[44,3504,281],{"class":50},[44,3506,547],{"class":68},[44,3508,286],{"class":50},[44,3510,529],{"class":50},[44,3512,3513,3515,3517,3519,3521,3523,3525],{"class":46,"line":234},[44,3514,1658],{"class":262},[44,3516,516],{"class":213},[44,3518,519],{"class":262},[44,3520,281],{"class":50},[44,3522,524],{"class":68},[44,3524,286],{"class":50},[44,3526,529],{"class":50},[44,3528,3529,3531,3533,3535,3537,3539,3541],{"class":46,"line":243},[44,3530,1658],{"class":262},[44,3532,3253],{"class":213},[44,3534,519],{"class":262},[44,3536,281],{"class":50},[44,3538,3260],{"class":68},[44,3540,286],{"class":50},[44,3542,529],{"class":50},[44,3544,3545,3547,3550,3552,3554,3557,3559],{"class":46,"line":250},[44,3546,1658],{"class":262},[44,3548,3549],{"class":213}," VueRouter ",[44,3551,519],{"class":262},[44,3553,281],{"class":50},[44,3555,3556],{"class":68},"vue-router",[44,3558,286],{"class":50},[44,3560,529],{"class":50},[44,3562,3563],{"class":46,"line":259},[44,3564,247],{"emptyLinePlaceholder":246},[44,3566,3567,3569,3571,3573,3576],{"class":46,"line":272},[44,3568,1681],{"class":213},[44,3570,1684],{"class":50},[44,3572,3275],{"class":819},[44,3574,3575],{"class":213},"(VueResource)",[44,3577,529],{"class":50},[44,3579,3580,3582,3584,3586,3589],{"class":46,"line":292},[44,3581,1681],{"class":213},[44,3583,1684],{"class":50},[44,3585,3275],{"class":819},[44,3587,3588],{"class":213},"(VueRouter)",[44,3590,529],{"class":50},[44,3592,3593],{"class":46,"line":297},[44,3594,247],{"emptyLinePlaceholder":246},[44,3596,3597,3599,3601,3603,3605,3607,3609,3611,3613,3615,3617,3619,3621],{"class":46,"line":308},[44,3598,1681],{"class":213},[44,3600,1684],{"class":50},[44,3602,1687],{"class":819},[44,3604,1690],{"class":213},[44,3606,286],{"class":50},[44,3608,1695],{"class":68},[44,3610,286],{"class":50},[44,3612,667],{"class":50},[44,3614,1702],{"class":58},[44,3616,1705],{"class":50},[44,3618,1709],{"class":1708},[44,3620,1712],{"class":50},[44,3622,269],{"class":50},[44,3624,3625,3627,3629,3631,3633,3635],{"class":46,"line":316},[44,3626,1719],{"class":262},[44,3628,1722],{"class":213},[44,3630,1684],{"class":50},[44,3632,1727],{"class":819},[44,3634,303],{"class":54},[44,3636,529],{"class":50},[44,3638,3639,3641,3643],{"class":46,"line":333},[44,3640,1736],{"class":50},[44,3642,1712],{"class":213},[44,3644,529],{"class":50},[44,3646,3647],{"class":46,"line":339},[44,3648,247],{"emptyLinePlaceholder":246},[44,3650,3651,3654,3657,3659],{"class":46,"line":345},[44,3652,3653],{"class":58},"const",[44,3655,3656],{"class":213}," routes ",[44,3658,62],{"class":50},[44,3660,3661],{"class":213}," [\n",[44,3663,3664,3667,3670,3672,3674,3677,3679,3681,3684,3686,3688],{"class":46,"line":351},[44,3665,3666],{"class":50},"  {",[44,3668,3669],{"class":54}," path",[44,3671,278],{"class":50},[44,3673,281],{"class":50},[44,3675,3676],{"class":68},"\u002F",[44,3678,286],{"class":50},[44,3680,667],{"class":50},[44,3682,3683],{"class":54}," component",[44,3685,278],{"class":50},[44,3687,540],{"class":213},[44,3689,3690],{"class":50},"},\n",[44,3692,3693,3695,3697,3699,3701,3704,3706,3708,3710,3712,3714],{"class":46,"line":360},[44,3694,3666],{"class":50},[44,3696,3669],{"class":54},[44,3698,278],{"class":50},[44,3700,281],{"class":50},[44,3702,3703],{"class":68},"\u002Fhello",[44,3705,286],{"class":50},[44,3707,667],{"class":50},[44,3709,3683],{"class":54},[44,3711,278],{"class":50},[44,3713,516],{"class":213},[44,3715,3690],{"class":50},[44,3717,3718,3721],{"class":46,"line":365},[44,3719,3720],{"class":213},"]",[44,3722,529],{"class":50},[44,3724,3725],{"class":46,"line":372},[44,3726,247],{"emptyLinePlaceholder":246},[44,3728,3729,3731,3734,3736,3739,3742,3744],{"class":46,"line":377},[44,3730,3653],{"class":58},[44,3732,3733],{"class":213}," router ",[44,3735,62],{"class":50},[44,3737,3738],{"class":50}," new",[44,3740,3741],{"class":819}," VueRouter",[44,3743,1690],{"class":213},[44,3745,826],{"class":50},[44,3747,3748,3751,3753,3755,3758,3760,3762],{"class":46,"line":607},[44,3749,3750],{"class":54},"  mode",[44,3752,278],{"class":50},[44,3754,281],{"class":50},[44,3756,3757],{"class":68},"history",[44,3759,286],{"class":50},[44,3761,667],{"class":50},[44,3763,3764],{"class":368}," \u002F\u002Fremoves # in the url\n",[44,3766,3767,3770,3772],{"class":46,"line":612},[44,3768,3769],{"class":213},"  routes",[44,3771,667],{"class":50},[44,3773,3774],{"class":368}," \u002F\u002F short for routes: routes\n",[44,3776,3777,3779,3781],{"class":46,"line":617},[44,3778,1736],{"class":50},[44,3780,1712],{"class":213},[44,3782,529],{"class":50},[44,3784,3785],{"class":46,"line":626},[44,3786,247],{"emptyLinePlaceholder":246},[44,3788,3789],{"class":46,"line":631},[44,3790,3791],{"class":368},"\u002F* eslint-disable no-new *\u002F\n",[44,3793,3794,3797,3800,3802],{"class":46,"line":640},[44,3795,3796],{"class":50},"new",[44,3798,3799],{"class":819}," Vue",[44,3801,1690],{"class":213},[44,3803,826],{"class":50},[44,3805,3806,3809],{"class":46,"line":651},[44,3807,3808],{"class":213},"  router",[44,3810,289],{"class":50},[44,3812,3813,3816,3818],{"class":46,"line":685},[44,3814,3815],{"class":54},"  template",[44,3817,278],{"class":50},[44,3819,3820],{"class":50}," `\n",[44,3822,3823],{"class":46,"line":690},[44,3824,3825],{"class":68},"  \u003Cdiv id=\"app\">\n",[44,3827,3828],{"class":46,"line":704},[44,3829,3830],{"class":68},"   \u003Cnav class=\"navbar navbar-default\">\n",[44,3832,3833],{"class":46,"line":709},[44,3834,3835],{"class":68},"    \u003Cdiv class=\"container-fluid\">\n",[44,3837,3838],{"class":46,"line":722},[44,3839,3840],{"class":68},"    \u003Cdiv class=\"navbar-header\">\n",[44,3842,3843],{"class":46,"line":727},[44,3844,3845],{"class":68},"      \u003Ca class=\"navbar-brand\" href=\"#\">Blog App\u003C\u002Fa>\n",[44,3847,3848],{"class":46,"line":740},[44,3849,3850],{"class":68},"    \u003C\u002Fdiv>\n",[44,3852,3853],{"class":46,"line":745},[44,3854,3855],{"class":68},"    \u003Cul class=\"nav navbar-nav\">\n",[44,3857,3858],{"class":46,"line":761},[44,3859,3860],{"class":68},"      \u003Cli>\u003Crouter-link to=\"\u002F\">Blog\u003C\u002Frouter-link>\u003C\u002Fli>\n",[44,3862,3863],{"class":46,"line":766},[44,3864,3865],{"class":68},"      \u003Cli>\u003Crouter-link to=\"\u002Fhello\">Hello\u003C\u002Frouter-link>\u003C\u002Fli>\n",[44,3867,3868],{"class":46,"line":779},[44,3869,3870],{"class":68},"    \u003C\u002Ful>\n",[44,3872,3873],{"class":46,"line":785},[44,3874,3850],{"class":68},[44,3876,3877],{"class":46,"line":2669},[44,3878,3879],{"class":68},"   \u003C\u002Fnav>\n",[44,3881,3882],{"class":46,"line":2678},[44,3883,247],{"emptyLinePlaceholder":246},[44,3885,3886],{"class":46,"line":2698},[44,3887,3888],{"class":68},"    \u003Crouter-view>\u003C\u002Frouter-view>\n",[44,3890,3891],{"class":46,"line":2705},[44,3892,3893],{"class":68},"  \u003C\u002Fdiv>\n",[44,3895,3896,3899],{"class":46,"line":2719},[44,3897,3898],{"class":50},"  `",[44,3900,289],{"class":50},[44,3902,3903,3905,3907,3909,3912,3914,3916,3919,3921,3923],{"class":46,"line":2734},[44,3904,1736],{"class":50},[44,3906,1712],{"class":213},[44,3908,1684],{"class":50},[44,3910,3911],{"class":819},"$mount",[44,3913,1690],{"class":213},[44,3915,286],{"class":50},[44,3917,3918],{"class":68},"#app",[44,3920,286],{"class":50},[44,3922,1712],{"class":213},[44,3924,529],{"class":50},[22,3926,3927],{},"Here, we’re importing vue-router similar to we did with vue-resource. Next, we have created a constant for defining our app routes. Then we have a VueRouter instance.",[22,3929,3930,3931,3934,3935,3939],{},"In the template, we’re using ",[3932,3933],"router-view",{}," directive, this section will update when we browse to different views. Also, we’re using ",[3936,3937,3938],"router-link",{"to":3676},"Nav-Item"," directive to link to different views in the app.",[22,3941,3942],{},"Now the app will look like,",[22,3944,3945],{},[97,3946],{"alt":20,"src":3947},"\u002Fimg\u002Fchrome_2017-01-26_21-18-52.png",[29,3949,3951],{"id":3950},"wrapping-up","Wrapping Up",[22,3953,3954],{},"Hope, This will help you get started with Vue. If there are any doubts, you can ask in the comments section below.",[22,3956,3957],{},"Thanks.",[382,3959,3960],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":20,"searchDepth":179,"depth":179,"links":3962},[3963,3964,3965,3966,3967],{"id":31,"depth":179,"text":32},{"id":805,"depth":179,"text":806},{"id":1644,"depth":179,"text":1645},{"id":2095,"depth":179,"text":2096},{"id":3950,"depth":179,"text":3951},"2017-01-24","In this article we will be Up & Running with Vue.js 2.0 by creating a simple blog application","md","\u002Fimg\u002Fvuejs.jpg",{},"\u002Fblog\u002Frunning-vue-js-2-0-creating-simple-blog-application-709",{"title":5,"description":3969},"blog\u002Frunning-vue-js-2-0-creating-simple-blog-application-709",[3977],"Web Development","jtaPHT05or8MZzhcwHCNC_1BODRVQzU7ZVnFt73qDmc",[3980,3985],{"title":3981,"path":3982,"stem":3983,"description":3984,"children":-1},"Pixl Preview, An App For Real Time Mobile Design Previews","\u002Fblog\u002Fpixl-preview-an-app-for-real-time-mobile-design-previews-266","blog\u002Fpixl-preview-an-app-for-real-time-mobile-design-previews-266","In this article we will take a look at Pixl Preview, An App For Real Time Mobile Design Previews",{"title":3986,"path":3987,"stem":3988,"description":3989,"children":-1},"Build an app with Laravel5 (backend) and Angularjs (frontend) - Part 1","\u002Fblog\u002Fseries-build-an-app-with-laravel5-backend-and-angularjs-frontend-part-1-480","blog\u002Fseries-build-an-app-with-laravel5-backend-and-angularjs-frontend-part-1-480","In this part 1 of the series we will take a look at how to build the api using Laravel",1775568353716]