reference type and primitive type

Author: Online Web Tutor

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-3"
+  ]
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
+yarn-error.log
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

simple.html

@@ -54,6 +54,5 @@ <h3>Playlists</h3>
         <footer>
             Copyright @Online Web Tutor Developers 2018
         </footer>
-
     </body>
 </html>

src/App.vue

@@ -2,7 +2,9 @@
   <div>
       <owt-header></owt-header>
 
-      <owt-content></owt-content>
+      <owt-content v-bind:simple-message="someMessage" v-bind:students="students" channel-name="Online Web Tutor" name="Sanjay Kumar" v-bind:is-learning="false" v-bind:author="{name:'Sanjay',email:'[email protected]'}"  v-bind:myplaylist="playlists"></owt-content>
+
+      <owt-student v-bind:simple-message="someMessage" v-bind:students="students"></owt-student>
 
       <owt-footer></owt-footer>
   </div>
@@ -13,16 +15,52 @@
 import Header from './components/Header.vue'
 import Footer from './components/Footer.vue'
 import Content from './components/Content.vue'
+import Student from './components/Student.vue'
 
 export default {
   components:{
     "owt-header": Header,
     "owt-footer": Footer,
-    "owt-content": Content
+    "owt-content": Content,
+    "owt-student":Student
   },
   data () {
     return {
-
+    playlists:[
+      {
+          name:"Wordpress Plugin Development",
+          githublink:"https://github.com/owthub/wordpress-plugin",
+          title:"Wordpress Plugin Development"
+      },
+      {
+         name:"Wordpress Theme Development",
+         githublink:"https://github.com/owthub/wordpress-theme",
+         title:"Wordpress Theme Development"
+       },
+       {
+          name:"Vue Js2 Development",
+          githublink:"https://github.com/owthub/vuejs2",
+          title:"Vue Js2 Development"
+        },
+        {
+           name:"WP JSON Rest API Development",
+           githublink:"https://github.com/owthub/wordpress-json-rest-api",
+           title:"WP JSON Rest API Development"
+         },
+         {
+            name:"WP JSON Rest API Development",
+            githublink:"https://github.com/owthub/wordpress-json-rest-api",
+            title:"WP JSON Rest API Development"
+          }
+    ],
+    students:[
+      "Sanjay",
+      "Rahul",
+      "Rakesh",
+      "Aman",
+      "Vijay"
+    ],
+    someMessage:"Simple message defined here"
     }
   }
 }

src/components/Content.vue

@@ -2,49 +2,66 @@
   <div>
   <div id="content">
       <h3>Playlists</h3>
+{{ channelName }}  AND {{ name }}
        <ul>
-          <li v-for="playlist in playlists">
+          <li v-for="playlist in myplaylist">
             <a v-bind:href="playlist.githublink" v-bind:title="playlist.title" target="_blank">
                  {{ playlist.name }}
             </a>
           </li>
        </ul>
+
+        <h2>Student List</h2>
+        <ul>
+            <li v-for="student in students">{{ student }}</li>
+        </ul>
+        <button v-on:click="deleteStudent">Delete Student</button>
+
+       <h3>Simple message: {{ simpleMessage }}</h3>
+
+       {{ call1() }}
   </div>
   </div>
 </template>
 
 <script>
 export default {
-
+  /*props:["name","myplaylist","channelName"],*/
+  props:{
+    simpleMessage:{
+      type: String
+    },
+    students:{
+      type: Array
+    },
+    name:{
+       type: String,
+       default: "Default name"
+    },
+    myplaylist:{
+      type: Array
+    },
+    channelName:{
+       type: String
+    },
+    author:{
+      type:Object
+    },
+    isLearning:{
+       type: Boolean
+    }
+  },
   data () {
     return {
-       playlists:[
-         {
-             name:"Wordpress Plugin Development",
-             githublink:"https://github.com/owthub/wordpress-plugin",
-             title:"Wordpress Plugin Development"
-         },
-         {
-            name:"Wordpress Theme Development",
-            githublink:"https://github.com/owthub/wordpress-theme",
-            title:"Wordpress Theme Development"
-          },
-          {
-             name:"Vue Js2 Development",
-             githublink:"https://github.com/owthub/vuejs2",
-             title:"Vue Js2 Development"
-           },
-           {
-              name:"WP JSON Rest API Development",
-              githublink:"https://github.com/owthub/wordpress-json-rest-api",
-              title:"WP JSON Rest API Development"
-            },
-            {
-               name:"WP JSON Rest API Development",
-               githublink:"https://github.com/owthub/wordpress-json-rest-api",
-               title:"WP JSON Rest API Development"
-             }
-       ]
+      message:"This is simple message"
+    }
+  },
+  methods:{
+    call1: function(){
+        console.log(this.channelName);
+    },
+    deleteStudent:function(){
+         this.students.pop();
     }
   }
 }

src/components/Student.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+
+  <div id="content">
+      <h2>Students List</h2>
+      <ul>
+        <li v-for="student in students">{{ student }}</li>
+      </ul>
+
+<h3>Simple message: {{ simpleMessage }}</h3>
+<button v-on:click="UpdateMessage">Update message</button>
+
+  </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props:{
+  simpleMessage:{
+    type: String
+  },
+     students:{
+       type: Array
+     }
+  },
+  data () {
+    return {
+      message:"This is simple message"
+    }
+  },
+  methods:{
+     UpdateMessage: function(){
+         this.simpleMessage = "Simple message has been updated";
+     }
+  }
+}
+</script>