Vue Introduction: Difference between revisions
Jump to navigation
Jump to search
| Line 99: | Line 99: | ||
firstName: 'Fred', | firstName: 'Fred', | ||
lastName: 'Bloggs' | lastName: 'Bloggs' | ||
message: '' | |||
} | } | ||
}, | }, | ||
| Line 104: | Line 105: | ||
</script> | </script> | ||
</syntaxhighlight> | |||
==Event Binding== | |||
To bind events we use v-on: or @ to bind our methods to an event. | |||
<syntaxhighlight lang="vue"> | |||
</template> | |||
<button @click="cancelHero">Cancel</button> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'Heroes', | |||
data() { | |||
... | |||
}, | |||
methods: { | |||
cancelHero() { | |||
this.message = '' | |||
}, | |||
} | |||
}; | |||
</script> | |||
</syntaxhighlight> | </syntaxhighlight> | ||
Revision as of 11:48, 9 December 2020
Intro
Hello John (No world)
Resource for the tutorial was https://github.com/johnpapa/vue-getting-started
The vue js lives at https://cdn.jsdelivr.net/npm/vue. Below is a simple example just showing two way binding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="name">
<p>Hello {{name}}</p>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
name: "John"
}
}
})
</script>
</body>
</html>
Sections
Vue files are comprised of three sections. No prizes for what each bit does
<template>
<a v-bind:href="github" target="_blank">
</a>
<template/>
<script>
</script>
<style>
</style>Displaying Data and Events
Data Binding
Binding we can use v-bind or the short cut : (full colon). So in the template put the colon and define a data component below
<template>
...
<a
v-bind:="github"
target="_blank"
rel="noopener noreferrer"
>
<i class="fab fa-github fa-2x" aria-hidden="true"></i>
</a>
<a
:href="twitter"
target="_blank"
rel="noopener noreferrer"
>
<i class="fab fa-twitter fa-2x" aria-hidden="true"></i>
</a>
...
</template>
<script>
export default {
name: 'headerLinks',
data() {
return {
github: 'https://github.com/johnpapa/vue-getting-started',
twitter:'https://twitter.com/john_papa',
}
},
}
</script>Data Model
We can define a data model and use it with standard double curly braces.
</template>
...
<div>{{hero.id}}</div>
...
</template>
<script>
export default {
name: 'Heroes',
data() {
return {
id: 20,
firstName: 'Fred',
lastName: 'Bloggs'
message: ''
}
},
};
</script>Event Binding
To bind events we use v-on: or @ to bind our methods to an event.
</template>
<button @click="cancelHero">Cancel</button>
</template>
<script>
export default {
name: 'Heroes',
data() {
...
},
methods: {
cancelHero() {
this.message = ''
},
}
};
</script>