Vue.js 组件问题

Question

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>

Answer 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',
        };
      }
});

请注意，选项 'replace : true' 替换了原始模板的 el 内容，而不是附加到它。

Vue.js 组件问题

Vue.js component issue

vue.js