Having trouble getting basic HTML to function with Vue.js

Question

Having trouble getting basic HTML to function with Vue.js

I am new to vue.js and decided to follow the steps in this tutorial: https://www.sitepoint.com/getting-started-with-vue-js/

After copying the code into my HTML, I encountered some issues. Could someone please assist me in identifying what might be going wrong?
Below are the snippets of code that I used:

<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js">
</script>

<script>

var myModel = {
  name: "Ashley",
  age: 24
};

var myViewModel = new Vue({
  el: '#my_view',
  data: myModel
});

</script>
<div id="my_view">
{{ name }}
</div>
</body>
</html>

The output just displays:{{name}}

javascript vue.js

Answer 1

Answer №1

To successfully integrate Vue.js into your HTML file, remember to include the <head> tag and place the script at the bottom of the document as shown below:

<html>
<head>
<title></title>
</head>
<body>
<div id="my_view">
{{ name }} {{ age }}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>

<script>

var myModel = {
  name: "Ashley",
  age: 24
};

var myViewModel = new Vue({
  el: '#my_view',
  data: myModel
});

</script>

</body>
</html>

Answer 2

To successfully integrate Vue.js into your HTML file, remember to include the <head> tag and place the script at the bottom of the document as shown below:

<html>
<head>
<title></title>
</head>
<body>
<div id="my_view">
{{ name }} {{ age }}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>

<script>

var myModel = {
  name: "Ashley",
  age: 24
};

var myViewModel = new Vue({
  el: '#my_view',
  data: myModel
});

</script>

</body>
</html>

Having trouble getting basic HTML to function with Vue.js

Answer №1

Similar questions

Unusual Encounters in Laravel: Navigating with React Router and the Back Button

Show a condensed version of a lengthy string in a div using React TS

Troubleshooting problems with connecting Express JS and MongoDB

Vanilla JavaScript MVC - Send notification to controller from model upon successful AJAX completion

django, the X-CSRFToken in the request header is improperly configured

Open the URL in a new tab based on certain conditions

Display the cost of an item on WooCommerce once the customer has selected a button

Data remaining static despite store state changes

Interested in integrating Mockjax with QUnit for testing?

How can I extract a substring from a URL and then save it to the clipboard?

Error Message: Unknown Custom Element <b-nav-brand> in Bootstrap-Vue.JS

Issues with lighting on textures in Three.js

Unique: "Best Practices for Setting Angular.js Controller Data Directly in the Code"

Is there a way to improve the efficiency of this jQuery/JavaScript snippet by rewriting it?

Display a q-table inside a nested row q-table component

Is there a way to track dynamic changes in window dimensions within Vue?

Step-by-step guide on transferring an HTML5 sqlite result set to a server using AJAX

When attempting to display an updated value in a dialog window using an ajax response for the second time, the change

Is there a way for me to update a Link To containing a parameter by using history.push with a parameter inside a table cell?

Need a jQuery callback function in PHP that only retrieves the value without any redirection