-
-
Save vestigegroup/3ae7b4a2e822baa294e8ba1bb0603806 to your computer and use it in GitHub Desktop.
OOP Inheritance in Vue.js
This file contains 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