{"id":15986080,"url":"https://github.com/coderhs/osk2017-vuejs-workshop","last_synced_at":"2026-01-18T00:03:14.613Z","repository":{"id":145141467,"uuid":"111992666","full_name":"coderhs/osk2017-vuejs-workshop","owner":"coderhs","description":"VueJS workshop during Open Source Kerala 2017","archived":false,"fork":false,"pushed_at":"2017-11-25T13:00:04.000Z","size":2,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-10T06:13:09.952Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coderhs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-25T09:42:27.000Z","updated_at":"2017-11-25T09:42:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"dcff3469-91e9-465c-8b3c-9538d9d52b2d","html_url":"https://github.com/coderhs/osk2017-vuejs-workshop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderhs%2Fosk2017-vuejs-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderhs%2Fosk2017-vuejs-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderhs%2Fosk2017-vuejs-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderhs%2Fosk2017-vuejs-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coderhs","download_url":"https://codeload.github.com/coderhs/osk2017-vuejs-workshop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247251029,"owners_count":20908447,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-08T02:42:34.559Z","updated_at":"2026-01-18T00:03:14.599Z","avatar_url":"https://github.com/coderhs.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue.js Workshop\n\n## Jesvin Jose\n## Open Source Kerala 2017\n\n\n## Note:\n\n* No special requirement\n* Can drop directly into the project\n* Scalable\n* Hot Reload (like in react) 😈\n\nDeclarative Programming\n\n```\nBad programmers worry about the code. Good programmers worry about data structures and their relationshps - Linus Tovalds\n```\n\nIf you can understand the datastrucutre you can understand the algorithm.\n\n\n## Vue is reactive\n\n* By changing the data the system will re-render its contents.\n* Updating message results in having the message updated every where.\n\n## v-cloak\n\n* Won't show the view app until the data is mounted\n* If v-cloak is not there it would show the template\n\n## v-model\n\n```html\n\u003cinput v-model=\"name\" /\u003e\n```\n\nIf you have vue.js dev tools enabled, you can change the name via console as well. The step to do that is to run `$vm0.name = 'something'`\n\n## methods\n\n```js\n    new Vue({\n      el: '#app',\n      data: {\n        name: 'Arun'\n      },\n      methods: {\n        reverse: function() {\n         this.name = this.name.split(\"\").reverse().join(\"\");\n       }\n      }\n    })\n```\n\nTo add a method, in the methods section of our app config declare your method.\n\n### v-on:click\n\nTo execute the above method on clicking the mutton we use the vue.js click event listener.\n\n```html\n  \u003cbutton v-on:click=\"reverse()\" \u003ereverse\u003c/button\u003e\n```\n\n### Note: Vue.js Lifecycle 🚲\n\nList of callbacks that are triggered during the various stags of the view app.\n\nEg: mounted()\n\n\n### Run a method outside vue.js in the vue.js app's context\n\nWe pass the context of the app to outside method and it would then use that context to assign\nthe variable.\n\n```js\n    new Vue({\n      el: '#app',\n      data: {\n        name: 'Arun'\n      },\n      methods: {\n        reverse: function() {\n          this.name = this.name.split(\"\").reverse().join(\"\")\n        },\n        fetchName: function() {\n          var that = this;\n          randomName(function (name) { that.name = name })\n        }\n      }\n    })\n```\n\nThe last line of the randomName method is to pass in that result to the anonymous method we passed.\n\n```js\n    function randomName(callback){\n      fetch('https://randomuser.me/api/').then( function(response){\n        return response.json()\n      }).then( function(json) {\n        callback(json.results[0].name.first + ' ' + json.results[0].name.last)\n      })\n    }\n\n  // the callback refered here is our annoynmous function.\n  // Name fetched is passed into the anonymous function which assigns that name\n  // to the name model of the view app\n```\n\n## Bootstrap\n\nBootstrap Vue.js\n\n### v-for\n\nFor loop happens for array or list or collection\n\n```html\n  \u003ctr v-for=\"item of items\" :key=\"item.id\"\u003e\n   \n  \u003c/tr\u003e\n```\n\nWhen a new element is added to the view, vue.js will detect the change and run the extra loop to fill that.\n\n\n## Questions?\n\n* Can we use model to create \u0026 submit params?\n* How to handle authenticity Token, in rails?\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderhs%2Fosk2017-vuejs-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoderhs%2Fosk2017-vuejs-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderhs%2Fosk2017-vuejs-workshop/lists"}