I'm starting with Vue.js. I have my index.html file and my index.js file.
I get an error showing the index.html file in the browser.
File index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LearnVue.js</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<div id="app-2">
<span v-bind:tittle="message">
Hover your mouse over me for a few seconds
to see my dynamically bound title!
</span>
</div>
<div id="app-3">
<span v-if="seen">Now you see me</span>
</div>
<div id="app-4">
<ol>
<li v-for="all in all">
{{all.text}}
</li>
</ol>
</div>
<div id="app-5">
<p>{{message}}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
</body>
</html>Index.js file
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
});
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
});
var app4 = new Vue({
el: '#app-4',
data: {
all: [
{text: 'Learn JavaScript'},
{text: 'Learn Ruby on Rails'}
]
}
});
var app5 = new Vue({
el: 'app-5',
data: {
message: 'Hello Vue!'
},
methods: {
reserveMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
});