請參閱vue.js數據，但沒有任何內容

1.我是vue.js的初學者，但是當我嘗試一些示例時，發現了一些不常見的東西。第一個是當我在body設置id，寫我的JS代碼如下：請參閱vue.js數據，但沒有任何內容

<html> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="./css/semantic.css"> 
    <script type="text/javascript" src="js/vue.js"> 
    </script> 
    <title></title> 
</head> 
<body style="background-color:black;" id="app"> 
<div class="ui container" style="margin:20px;"> 
    <div class="ui segment"> 
     <h1>{{ title }}</h1> 
     <p> 
      {{ message }} 
     </p> 
    </div> 
</div> 

<script> 
    var app = new Vue({ 
     el: "#app", 
     data: { 
      message: "Hello, world!", 
      title: "How about you?" 
     } 
    }) 
</script> 

</body> 
</html>

這是我的結果不顯示我的數據：

2。第二個問題是當我在數據中創建一個對象時，我將其作爲後面的參考，它在div標籤中也不起作用。這是代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="./css/semantic.css"> 
    <script type="text/javascript" src="js/vue.js"> 
    </script> 
    <title></title> 
</head> 
<body style="background-color:black;"> 
<div class="ui container" style="margin:20px;"> 
    <div class="ui segment" id="app"> 
     <h1>{{ article.title }}</h1> 
     <p> 
      {{ article.message }} 
     </p> 
    </div> 

</div> 

<script> 
    var app = new Vue({ 
     el: "#app", 
     data: { 
      article{ 
       message: "Hello, world!", 
       title: "How about you?" 
      } 
     } 
    }) 
</script> 

</body> 
</html>

所以我不知道是否有一些衝突，我用semanticUI和vue.js時？

來源

2017-08-24 Pan

不能安裝到身體Vue公司。而且你的第二個例子'article {'should be'article：{'。但是，如果你有兩個問題，它應該分爲兩個獨立的帖子。請閱讀[如何提出一個好問題]的幫助頁面（https://stackoverflow.com/help/how-to-ask） – thanksd

作爲一種最佳實踐，您可以創建頂級div＃app。看到我的答案。 –

最佳做法是，你可以創建一個頂級div#app，像這樣：

var app = new Vue({ 
 
    el: "#app", 
 
    data: { 
 
     message: "Hello, world!", 
 
     title: "How about you?" 
 
    } 
 
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<body style="background-color:black;"> 
 
<div id="app"><!-- just a wrapper for vuejs --> 
 
    <div class="ui container" style="margin:20px;"> 
 
     <div class="ui segment"> 
 
      <h1>{{ title }}</h1> 
 
      <p> 
 
       {{ message }} 
 
      </p> 
 
     </div> 
 
    </div> 
 
</div> 
 
</body>

來源

2017-08-24 13:58:29

但是，如果我添加'''div'''只是爲了添加'''id'''，這看起來有點沒有意義，在''''body'''標籤中有一個很好的選擇，它可以收費vue.js1.0的整個'''body'''部分可以在'''body''中設置。 – Pan

請參閱vue.js數據，但沒有任何內容

回答

相關問題