Notes

1
2
3
4
5

v-on:click="myFunc"
@click="myFunc"
v-bind:title="myString"
:title="myString"

• data
• methods
• computed
• props
• You can chain filters in Vue templates.
• watch While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. This is most useful when you want to perform asynchronous or expensive operations in response to changing data. (e.g. debounce)

  1 2	watch: { myInput: _.debounce(function(){ this.buttonText = this.myInput !== '' ? "Add " + this.myInput : "Add Dinosaur" }, 250)

API:

• v-on: v-on:click or @click
• v-bind: v-bind:class or :class. We can use conditionally it with a boolean value as well like: :class="{ 'loading': isLoading }". You can combine multiple checks with an array <button class="[sizeToggle ? 'large' : '', {'rounded': isRounded}]" You can pass a style object, containing css styling key, value pairs.
• v-text for writing text to a html element <li v-text="task.description"></li>
• v-model
• v-for for iterating v-for="task in tasks", you can also pass index <li v-for="(item, index) in items">
• v-if=”“ for conditional rendering v-if="task.completed
• v-else
• v-show=”“
• inline-template <progress-view inline-template>......</progress-view> converts html to template for component
• v-html <div v-html="htmlToAdd"></div> you can insert HTML inside an element
• v-pre <h1 v-pre></h1>
• v-one <p v-one>...</p> Renders only one time, won’t re-render if data changes
• v-cloak <div v-cloak></div> Won’t render until vue intiliazed and view is ready (you need to add to your css [v-cloak] { display: none; })

• $emit: Emits events for parent component, you can use it as this.$emit methods or inline in template <button @click="$emit('toggle') and at parent component <todo @toggle="toggleTodo(todo)"></todo>
• $on: For listening to events in components/instances
• $event
• $refs
• $children
• $data: this.$data for whole data object

• event.eventmodifier: <form @submit.prevent="onSubmit"></form> .prevent == preventDefault()

• <transition> is a component wraping your elements/components in order to add animation. You can also specify transition modes.

  1 2 3 4 5 6 7 8

  <transition name="fade" mode="out-in"> <div class="fade"></div> </transition> <style> fade {transition: opacity .5s ease;} fade-enter, fade-leave-acitve {opacity: 0;} </style>

Vue Router

1
2
3
4
5
6
7
8
9
10
11
12

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: App },
    { path: '/post/:id', component: Post }
  ]
})

• VueRouter will render component inside <router-view></router-view> tag.
• By default VueRouter uses /#/ mode. To use history mode add mode: 'history', if history mode is not supperted (IE9) it will fallback to hash mode.
• To navigate between routes you need <router-link to="/post/1"> tag. It’ll add an <a> tag.

Iterators

In JavaScript an iterator is an object that provides a next() method which returns the next item in the sequence.

String, Array, TypedArray, Map and Set are all built-in iterables, because the prototype objects of them all have a Symbol.iterator method.

res.locals

An object that contains response local variables scoped to the request, and therefore available only to the view(s) rendered during that request / response cycle (if any).

This property is useful for exposing request-level information such as the request path name, authenticated user, user settings, and so on.

1
2
3
4
5

app.use(function(req, res, next){
  res.locals.user = req.user;
  res.locals.authenticated = ! req.user.anonymous;
  next();
});

Immutable data cannot be changed once created, leading to much simpler application development, no defensive copying, and enabling advanced memoization and change detection techniques with simple logic. Persistent data presents a mutative API which does not update the data in-place, but instead always yields new updated data.

• fromJS(): Deeply converts plain JS objects and arrays to Immutable Maps and Lists. If reviver is not provided, the default behavior will convert Arrays into Lists and Objects into Maps.

List

Lists are ordered indexed dense collections, much like a JavaScript Array. Docs

• List.isList(maybeList): True if the provided value is a List

Yardım - Referans

1
2
3
4
5

npm help <command>
# Help for specific npm commands
npm <command> -h
# quick command parameter reference

npm için defaultlar

1
2
3
4

npm init -y
npm config set init.author.name <name>
npm config set init.author.email <email>

Database

• knex: A batteries-included SQL query & schema builder for Postgres, MySQL and SQLite3 and the Browser
• pg: PostgreSQL client - pure javascript & libpq with the same API
• bookshelf: A lightweight ORM for PostgreSQL, MySQL, and SQLite3
• mongoose: Mongoose MongoDB ODM

Exiting ES6 features for NodeJS

Setting defaults for function parameters

1
2
3
4
5

function toThePower(value, exponent = 2) {
  // The rest of your code
}
toThePower(1, undefined) // exponent defaults to 2

TODO

• Add short description what higher order functions is
• Add a simple example
• (Add a complex example?)

TODO

• Short description
• Use case and example

Database Oluştur

İlk olarak bir database ve kullanıcı oluştur.

1
2
3
4
5

sudo -u postgres -i
createdb database_ismi
psql database_ismi
CREATE USER user-name WITH PASSWORD "user-password"
GRANT ALL PRIVILEGES ON DATABASE "database_ismi" to username

Knex

Data senkronizasyonu ve migrasyonu için knex adlı paketten yararlanabilirsin. Proje rootta knex init ile knexfile.js oluştur. Konfiguasyon bilgilerini knexfile.js‘e gir.