-
-
Save hamzamu/3aca67cf7a0aef678cc3156cb54cbc92 to your computer and use it in GitHub Desktop.
OOP Inheritance in Vue.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>vue inheritance</title> | |
| </head> | |
| <body> | |
| <my-student></my-student> | |
| <my-student first-name="Franz" last-name="Meier" :student-id="54321"></my-student> | |
| <my-professor first-name="Jared" last-name="Josey"></my-professor> | |
| </body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.js"></script> | |
| <script> | |
| var userTemplate = '<h3>{{fullName}}</h3>' | |
| var Person = Vue.extend({ | |
| template: userTemplate, | |
| props: { | |
| firstName: { type: String, default: "first name",}, | |
| lastName: { type: String, default: "last name",}, | |
| }, | |
| methods: { | |
| login: function() { | |
| console.log('Logging in user: ' + this.firstName) | |
| }, | |
| }, | |
| computed: { | |
| fullName: function() { | |
| return this.firstName + " " + this.lastName; | |
| }, | |
| }, | |
| ready: function() { | |
| this.login(); | |
| } | |
| }); | |
| var Student = Person.extend({ | |
| props: { | |
| firstName: { type: String, default: "students first name",}, | |
| studentId: { type: Number, default: 12345,}, | |
| }, | |
| template: userTemplate + '<p>Student ID: {{studentId}}</p>' | |
| }); | |
| var Professer = Person.extend({ | |
| data: function() { | |
| return { | |
| teachingModules: [ 'Logic', 'Term rewriting' ] | |
| } | |
| }, | |
| computed: { | |
| fullName: function() { | |
| // unfourtunately ends in endless recursion, | |
| // and there seems no way to use the parent function | |
| // return "Prof. " + this.fullName; | |
| return "Prof. " + this.firstName + " " + this.lastName; | |
| }, | |
| }, | |
| template: userTemplate + | |
| 'Teaches the modules: <ul>' + | |
| '<li v-for="module in teachingModules">{{module}}</li>' + | |
| '</ul>' | |
| }); | |
| var vm = new Vue({ | |
| el: 'body', | |
| components: { | |
| 'my-student': Student, | |
| 'my-professor': Professer, | |
| } | |
| }); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment