1. 首頁
  2. 問答
  3. Vue.js組件問題

Vue.js組件問題

2015-06-19 116 views
0

JS我開始追趕上它，但我被困在組件會感謝你的幫助的感謝Vue.js組件問題

//這裏是我的js

Vue.component('thatsCool', { 

     template: document.querySelector('#myOwnTemplate'), 

     data: function() { 
     return { 
      helloWorld: 'thats cool', 
     }; 
     }, 

}); 

new Vue({ 
    el: 'body', 
});

//和這是我的HTML

<! DOCTYPE html> 
<html> 
    <head> 
     <title>playing with Vue components</title> 
    </head> 
    <body> 

     <thatsCool></thatsCool> 

     <script id="myOwnTemplate" type="x/template"> 
      <p v-text="helloWorld"></p> 
     </script> 

     <script src="vue.js"></script> 
     <script src="component.js"></script> 
    </body> 
</html>

來源

2015-06-19 yoel neuman

回答

1

你的代碼有幾個錯誤。對於組件使用短劃線約定，對於字符串輸出使用簡單的句柄標記。嘗試使用此代碼：

HTML

<thats-cool></thats-cool> 

<script id="myOwnTemplate" type="x-template"> 
    <p>{{ helloWorld }}</p> 
</script>

JS

Vue.component('thats-cool', { 

     template: '#myOwnTemplate', 
     replace : true, 

     data: function() { 
     return { 
      helloWorld: 'thats cool', 
     }; 
     } 
});

注意，選項 '代替：真正的' 替代EL的原始模板的內容，而不是追加到它。

來源

2015-06-20 13:22:25 mauricius

+0

感謝百萬人，突破問題就像你說的組件名稱套管有其嚴格的規則，甚至是 - 酷大寫c不會工作 –

相關問題

 相關問題