I am trying to understand how vue works. To do that I simplify it as much as possible, hence no webpack no CDNs or any other packages (unless its a necessity).
So, Came up with this but trying to inject a simple a variable into html gives vue is undefined error.
*vue.js file is taken from npm vue package.
JavaScript
x
20
20
1
<html>
2
<head>
3
<script src="vue.js"></script>
4
5
<script>
6
new vue({
7
data: 'This must be injected'
8
}).$mount('#app');
9
</script>
10
11
</head>
12
<body>
13
<div id="app">
14
<p> {{ data }} </p>
15
</div>
16
17
<h1>This is a sample header</h1>
18
</body>
19
</html>
20
Advertisement
Answer
You need to have Vue load after the Dom is ready so it can find the element to attach itself to — don’t put it in the head. Also it’s upper-case Vue
. And Data
can’t just be a naked property it should be a function that returns an object with your properties (it can also be an an object, but it’s not recommended once the app starts getting bigger).
JavaScript
1
18
18
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
2
3
<div id="app">
4
5
<p> {{ data }} </p>
6
7
</div>
8
9
<h1>This is a sample header</h1>
10
<script>
11
Vue.config.productionTip = false
12
new Vue({
13
data(){ return {
14
data: 'This must be injected'
15
}
16
}
17
}).$mount('#app');
18
</script>