Difference between revisions of "Vue.js"

Revision as of 17:10, 4 June 2019

directive inside HTML tags start with v-
v-bind:____="someDataStoreObj - bind keeps something up-to-date with some data store property
v-if="varName"
v-for:"i in datastoreobj"
v-on:click="someMethod" - binds a function to button
<input v-model="message"> - direct two-way binding between input and app state

@@ Line 1: / Line 1: @@
 ==2019 Tech Stack==
 ===Vue.js===
-====Using Vue CLI====
+====Component templates====
+* Computed property - double mustache inside the component template
+* Components have templates, script, and styling
+====Directives====
+* directive inside HTML tags start with v-
+* <code>v-bind:____="someDataStoreObj</code> - bind keeps something up-to-date with some data store property
+* <code>v-if="varName"</code>
+* <code>v-for:"i in datastoreobj"</code>
+* <code>v-on:click="someMethod"</code> - binds a function to button
+* <code><input v-model="message"></code> - direct two-way binding between input and app state
+====Vue Instance====
+===Vuex===
+* Single state tree - single source of truth
+*
+===Vue Router===
+* Single page App
+* In index.js, after imports, add <code>Vue.use(Router)</code>
+* In App.vue, add <code><router-view/></code> tag.
+===Vue CLI===
 # <code>npm install -g @vue/cli</code>
 # <code>vue --version</code>
 # <code>vue ui</code>
-===Vuex.js===
+# Create new project, include vuex and vue router components
-===Vue Router===
+# Run Project task 1: serve
-* Single page App
+# Run Project task 2 (build):
 ==2018 Tech Stack==