简单的HTML与vue.js无法正常工作 [英] Simple html with vue.js not working

查看:84
本文介绍了简单的HTML与vue.js无法正常工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

vue.js的初学者和我关注此链接:
https://www.sitepoint.com/getting-started-with-vue-js/

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

几乎将代码复制到我的html中。但是它只是没有工作。有人可以帮我找到出错的地方吗?


以下是所有代码:

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>

结果只是: {{name}}

推荐答案

您需要添加< head> 标签并在文件末尾添加脚本,如下所示:

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>

这篇关于简单的HTML与vue.js无法正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆