first commiy

Author: softchris

Diff for: .gitignore

@@ -0,0 +1 @@
+.vscode

Diff for: components/README.md

@@ -0,0 +1,192 @@
+# Components
+
+We declare a component by using the `Vue` object and calling its component method with two arguments:
+
+* component name
+* component definition object
+
+```
+Vue.component('person-detail', {
+  template: `<div>a component</div>`
+})
+```
+
+Declaring the above means we can start adding this component wherever we need it, like so:
+
+```
+<person-detail>
+```
+
+## Adding input property
+
+We are going to want to add an input property to the component so we can pass data for it to render. We do that by doing the following:
+
+* adding v-bind directive when creating the component
+* adding a `props` property to component definition
+
+```
+Vue.component('person-detail', {
+  template: `<div>{{person.name}}</div>`,
+  props: ['person']
+})
+```
+
+We did two things above, we added the `props` to our component definition object. We also updated the template to render our property like so:
+
+```
+template: `<div>{{person.name}}</div>`
+```
+
+At this point we need to creating the binding in the markup. We create this binding by using the structural directive `v-bind`, like so:
+
+```
+<div v-bind:nameOfProperty="property">
+```
+
+For our component it means we change it to the following:
+
+```
+<person-detail v-bind:person="person">
+```
+
+This of course means that the context this component lives in knows about `person`, like so:
+
+```
+var app = new Vue({
+  el: '#app',
+  data: {
+    person: {
+      name: 'chris'
+    }
+  }
+})
+```
+
+### Naming
+
+So far we have been using the `v-bind:propertyInComponent` binding syntax, but it is a bit verbose. We can shorten this to `:propertyInComponent`. There is another naming convention that we need to know about. When we name things in our props of our component like so:
+
+```
+Vue.component('component', {
+  props : ['title','longTitle']
+});
+```
+
+The casing we use matter. When we create our component in markup, we need to name it correctly
+
+* title becomes title
+  BUT
+* longTitle becomes long-title when used in the markup
+
+```
+<component long-title="someProp">
+```
+
+### More on binding
+
+We can bind anything to a component, a primitive like a string, number or boolean or a list and even an object. However there is a difference in how different types behave. Primitives are being one-time binded so binding against the following primitives, would be one-time:
+
+```
+<component :show="show" :title="title" :counter="counter" >
+```
+
+Binding to an object would be another thing though:
+
+```
+<component :person="person" >
+```
+
+The above shows how we bind towards the property `person` and binds it to an object that may look like this:
+
+```
+{
+  name: 'chris'
+}
+```
+
+Changing the property inside of the component with a `v-model`, like so:
+
+```
+<input v-model="person.name">
+```
+
+would lead to even the parent object being affected.
+
+### fixing the double binding
+
+What you usually want when you bind in a list or object is to change things in the component first and when you are happy with it you invoke an action so the parent knows all about this updated list or object. You usually don't want the parent to be alerted about every change that you do. You can fix this by using the `data()` method with the component like so:
+
+```
+data() {
+  const copyObject = Object.assign({}, this.object);
+
+  const copyList = this.list.map(item => Object.assign(item));
+
+  return {
+    copyObject,
+    copyList
+  };
+
+}
+```
+
+## Output
+
+How do we communicate with upwards, i.e how do we invoke a method, simple, we can just bind a method to it like so:
+
+```
+<component v-on:customEventName="method" v-bind:prop="prop">
+```
+
+The above tells us that we can call the event whatever we want, as indicated by the name `customEVentName`.
+
+And of course our parent component needs updating, like so:
+
+```
+var app = new Vue({
+  el: '#app',
+  data: {
+    person: {
+      name: 'chris'
+    }
+  },
+  methods: {
+    method: () => {
+      alert('called from component')
+    }
+  }
+})
+```
+
+The interesting part happens when we invoke the method from the component itself, then it looks like this:
+
+```
+Vue.component('person-detail',{
+  template: `
+  <div style="border: solid 1px blue">
+    <button v-on:click="$emit('save', person)">Save</button>
+  </div>`,
+  props: ['person'],
+  methods: {
+    increment() {
+      this.counter += 1 ;
+    }
+  }
+})
+```
+
+### Actual example
+
+Not how we below call our custom event `save`. We will soon see how this matches up in our component.
+
+```
+<person-detail v-on:save="method" >
+```
+
+Let's now turn to our component and look at how we can invoke the event we just set up:
+
+```
+<button v-on:click="$emit('save', person)">Save</button>
+```
+
+Zooming in we see `v-on:click` and that it invokes `$emit`.

Diff for: components/app.js

@@ -0,0 +1,100 @@
+Vue.component('person-detail',{
+  template: `
+  <div style="border: solid 1px blue; padding: 30px; box-shadow: 0px 0px 5px gray">
+
+    Person object
+    <input v-model="person.name" /> <br/>
+
+    Name:
+    <input v-model="name" />
+
+    Person: {{person.name}}
+    Counter: {{counter}}
+
+    <h2>Copy person</h2>
+    <input v-model="copyPerson.name" />
+
+    <h2>Copy jedis</h2>
+    <div v-for="jedi in copyJedis">
+      {{ jedi.name }}
+      <input v-model="jedi.name" />
+    </div>
+
+    <h2>Jedis</h2>
+    <div v-for="jedi in jedis">
+      {{ jedi.name }}
+      <input v-model="jedi.name" />
+    </div>
+    <input v-model="newJedi" />
+    <button v-on:click="addJedi" >Add</button>
+
+    <h2>List</h2>
+    <div v-for="item in list">
+      {{ item.name }}
+      <input v-model="item.name" />
+    </div>
+    <input v-model="newItem" />
+    <button v-on:click="add" >Add</button>
+
+    <button v-on:click="increment">+</button>
+    <button v-on:click="$emit('save', person)">Save</button>
+  </div>`,
+  props: ['person', 'counter', 'name', 'jedis'],
+  methods: {
+    increment() {
+      this.counter += 1 ;
+    },
+    add() {
+      this.list.push({ name: this.newJedi});
+      this.newItem = "";
+    },
+    addJedi() {
+      this.jedis.push({ name: this.newJedi});
+      this.newJedi = "";
+    }
+  },
+  data() {
+    const copyJedis = this.jedis.map( j => Object.assign({},j));
+    const copyPerson = Object.assign({}, this.person);
+
+    return {
+      newJedi: '',
+      newItem: '',
+      list: [],
+      copyJedis,
+      copyPerson
+    };
+  }
+})
+
+var app = new Vue({
+  el: '#app',
+  data: {
+    message: 'Hello Vue!',
+    person: {
+      name: 'chris'
+    },
+    counter: 0,
+    title: 'Star Wars',
+    jedis: [{
+      name: 'luke'
+    },
+    {
+      name: 'vader'
+    }]
+  },
+  methods : {
+    // points to window this
+    showDetail : (product) => {
+      alert('detail ' + product.name);
+    },
+    // points to window this
+    save: (person) => {
+      alert('called from component');
+    },
+    // points to correct this, no =>
+    changeTitle() {
+      this.title = "new title";
+    }
+  }
+})

Diff for: components/index.html

@@ -0,0 +1,21 @@
+<html>
+
+<body>
+  <div id="app">
+    {{ message }} {{person.name}} counter from parent: {{counter}}
+
+    <div v-once>{{title}}</div>
+    <button v-on:click="changeTitle">Change title</button>
+
+    <div v-for="jedi in jedis">
+      {{jedi.name}}
+    </div>
+
+    <person-detail :jedis="jedis" :name="person.name" v-bind:counter="counter" v-on:save="save" :person="person">
+  </div>
+  <!-- development version, includes helpful console warnings -->
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  <script src="app.js"></script>
+</body>
+
+</html>

Diff for: setup/README.md

@@ -0,0 +1,29 @@
+introducing {}
+
+`data` property is what we can show
+
+```
+var app = new Vue({
+  el: '#app',
+  data: {
+    message: 'Hello Vue!'
+  }
+})
+
+{{message}}
+```
+
+This makes `message` available to template.
+Add another property like so:
+
+```
+var app = new Vue({
+  el: '#app',
+  data: {
+    message: 'Hello Vue!',
+    secondmessage : 'Hello again'
+  }
+})
+
+{{secondmessage}}
+```

Diff for: setup/app.js

@@ -0,0 +1,7 @@
+var app = new Vue({
+  el: '#app',
+  data: {
+    message: 'Hello Vue!',
+    otherMessage: 'other message'
+  }
+})

Diff for: setup/index.html

@@ -0,0 +1,12 @@
+<html>
+
+<body>
+  <div id="app">
+    {{ message }} {{ other message }}
+  </div>
+  <!-- development version, includes helpful console warnings -->
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  <script src="app.js"></script>
+</body>
+
+</html>