Simple html with vue.js not working

Question

A beginner of vue.js and I followed this link: https://www.sitepoint.com/getting-started-with-vue-js/

Almost copy the code into my html.However it just not working.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>

The result is just:{{name}}

This is working here: jsfiddle.net/b75yspL8. What's not working for you? — jonmrich
– jonmrich, Commented Jan 20, 2017 at 2:53
@jonmrich why it is not working in my computer? I just double clicked html file and open it in chrome. — 吴环宇
– 吴环宇, Commented Jan 20, 2017 at 2:56
@jonmrich Yeah,jsfiddle works. Now the problem solved thanks to the first answer. — 吴环宇
– 吴环宇, Commented Jan 20, 2017 at 3:09

Wim Mertens · Accepted Answer · 2017-01-20 03:05:56Z

16

You need to add the <head> tag and add the script at the end of the file like this:

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

edited Jan 20, 2017 at 3:05

answered Jan 20, 2017 at 2:57

Wim Mertens

1,7903 gold badges20 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

吴环宇 Over a year ago

Is head tag really a must?

Wim Mertens Over a year ago

FYI: Here's a post about omitting head tags: stackoverflow.com/questions/5641997/…

吴环宇 Over a year ago

Thank you sooo much

Collectives™ on Stack Overflow

Simple html with vue.js not working

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related