3👍
✅
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).
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p> {{ data }} </p>
</div>
<h1>This is a sample header</h1>
<script>
Vue.config.productionTip = false
new Vue({
data(){ return {
data: 'This must be injected'
}
}
}).$mount('#app');
</script>
👤Mark
1👍
There are a few problems in your code.
- vue should be Vue
- data should be an Object or Function – https://v2.vuejs.org/v2/api/#data
<html>
<head>
</head>
<body>
<div id="app">
<p> {{ myText }} </p>
</div>
<h1>This is a sample header</h1>
<script src="vue.js"></script>
<script>
new Vue({
data: {
myText: 'This must be injected'
}
}).$mount('#app');
</script>
</body>
</html>
0👍
I think the data must have an object as it’s value.
<html>
<head>
<script src="vue.js"></script>
<script>
new Vue({
data: {
txt: 'This must be injected'
}
}).$mount('#app');
</script>
</head>
<body>
<div id="app">
<p> {{ txt }} </p>
</div>
<h1>This is a sample header</h1>
</body>
</html>
Source:stackexchange.com