Question

我开始追赶它，但我坚持使用组件会感激你的帮助谢谢

//这是我的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',
        };
      }
});

请注意，选项＆＃39;替换：true＆＃39;替换el的原始模板内容，而不是附加到它。

Vue.js组件问题

1 个答案: