PROSAGA码农传奇-Vue-Vue实例中的Vue实例

0# 雪浴冰灵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    使用vue-cli创建一个webpack入门应用程序。
     <code>
      vue init app --webpack
    </code>
  </p>
  <P>
    然后，尝试以这种方式构建组件。阅读更多：
    <a href="https://vuejs.org/v2/guide/components.html#What-are-Components" rel="nofollow noreferrer">
      https://vuejs.org/v2/guide/components.html#What-are-Components
    </A>
  </p>
  <OL>
    <LI>
      这是main.js
    </LI>
  </醇>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          import Vue from 'vue'
import ComponentOne from './ComponentOne.vue'
import ComponentTwo from './ComponentTwo.vue'

new Vue({
  el: '#app',
  template: '<App/>',
  components: { 
    ComponentOne,
    ComponentTwo
  }
})
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
  <ol start =“2”>
    <LI>
      这是ComponentOne.vue
    </LI>
  </醇>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          <template>
  <div class="user">
    <div v-for="user in users">
      <p>Username: {{ user.username }}</p>
    </div>
  </div>
</template>

}
</script>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>

1# 烏鴉喝酒 | 2019-08-31 10-32

2# Hey ou | 2019-08-31 10-32

</code>
  </pre>
</DIV>

3# 你咖喱人biss嗷 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <BLOCKQUOTE>
    <P>
      但是当我做一些内联的东西，比如{{3 + 3}}时，它会像它应该的那样计算。所以Vue知道有什么东西。
    </p>
  </BLOCKQUOTE>
  <P>
    因为你有父实例'componentOne'。它为此模板激活了Vue。如果需要在内部设置另一个实例，则必须分离模板的一部分。示例（它可能滞后于片段！）。
替代
  </p>
   <pre>
    <code>
      https://jsfiddle.net/qh8a8ebg/2/

</code>
  </pre>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“true”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          // componentOne.js
new Vue({
  el: '[data-init="component-one"]',
  data: {
  	text: 'first'
  },
  methods: {}
});

// componentTwo.js
new Vue({
  el: '[data-init="component-two"]',
  data: {
  	text: 'second'
  },
  template: `<button @click="doSomething($event)">{{text}}</button>`,
  methods: {
    doSomething: function(event) {
    	console.log(event);
    }
  }
});
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <script src="https://vuejs.org/js/vue.min.js"></script>
<div data-init="component-one">
{{text}}
</div>
 <div data-init="component-two">
 </div>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>