Philipp-M/OOP_inheritance.html

## OOP_inheritance.html
<!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>
	<!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>