All geek questions in one place

Simple html with vue.js not working

The vue.js boss and I follow this link: https://www.sitepoint.com/getting-started-with-vue-js/

Copy the code into my html. However, it just doesn't work. Can someone help me find what is going wrong?
Here are all the codes:

<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>

Result: {{name}}

+4
source share
1 answer

You need to add the tag <head>and add the script to the end of the file as follows:

<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>
+7
source

Source: https://habr.com/ru/post/1667313/

More articles:


All Articles