爲什麼這個Vuejs「Hello World」示例在我的電腦上呈現？

我正在嘗試使用Vue與Phoenix/Elixir項目。經過大量的故障排除後，我仍然無法獲取Vuejs元素進行渲染。所以我決定在原始html/js中測試簡單的「hello world」示例。爲什麼這個Vuejs「Hello World」示例在我的電腦上呈現？

它也不起作用。我究竟做錯了什麼？

這裏是我試圖複製我的計算機上的jsfiddle： https://jsfiddle.net/yyx990803/okv0rgrk/

下面的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Vue Test</title> 

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> 

<script> 
new Vue({ 
    el: '#app', 
    data: { 
    message: 'Hello Vue.js!' 
    } 
}) 
</script> 

</head> 
<body> 

<div id="app"> 
    {{ message }} 
</div> 

</body> 
</html>

來源

2016-01-13 Emily

嘗試在HTML文件的頭部添加腳本。或者把它封裝在一個'window.onload'鉤子中 –

如果你檢查了那個小提琴產生的iframe，你會發現'javascript'面板中的代碼被插入iframe的頭部 –

我相信這些腳本是在頭標籤？ – Emily

</body>之前把你的第二script標籤。你的代碼不工作的原因是因爲你試圖在它存在之前掛載#app。如果你嘗試在它出現之後再安裝它，它會很好。

來源

2016-01-13 19:49:46

正如@Bill提到的那樣，你的第二個腳本標籤需要在'＃app' div之後出現。在實踐中，你應該把所有腳本標籤都包含在HTML主體中的最後一個項目中。 –

除非OP從原始編輯他的問題，否則''之前的第二個腳本是。所以我不確定你的意思 – user2903379

緊接在''之前。不僅僅是從行號角度出發。 –

下面是一個小例子：

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="http://cdn.jsdelivr.net/vue/2.0.3/vue.js"></script> 
    </head> 
    <body> 
    <div id="app"> 
     <p>{{ message }}</p> 
    </div> 
    <!-- Must put the script below after the app div --> 
    <script type="text/javascript"> 
     new Vue({ 
     el: '#app', 
     data: { 
      message: 'Hello Vue.js!' 
     } 
     }) 
    </script> 
    </body> 
</html>

來源

2016-10-23 08:48:52 soulmachine

爲什麼這個Vuejs「Hello World」示例在我的電腦上呈現？

回答

相關問題