带有 vue.js 的简单 html 不起作用

Question

A beginner of vue.js and I followed this link: https://www.sitepoint.com/getting-started-with-vue-js/ vue.js 的初学者，我点击了这个链接： 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?几乎将代码复制到我的 html 中。但是它不起作用。有人可以帮我找出问题所在吗？
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}}结果只是： {{name}}

Answer 1

You need to add the <head> tag and add the script at the end of the file like this:您需要添加<head>标记并在文件末尾添加脚本，如下所示：

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

带有 vue.js 的简单 html 不起作用

问题描述

1 个解决方案

解决方案1
14 已采纳 2017-01-20 02:57:55

带有 vue.js 的简单 html 不起作用

问题描述

1 个解决方案

解决方案1 14 已采纳 2017-01-20 02:57:55

解决方案1
14 已采纳 2017-01-20 02:57:55