Vue组件与实例使用注意

Vue组件与Vue实例的顺序

组件必须在实例之前创建

HTML

   

<div id='wp'>

       <button-counter></button-counter>

       <button-counter></button-counter>

       <button-counter></button-counter>

</div>

JS

    Vue.component('button-counter', {

      data:function(){

          return {

             count:0

          }

      },

      template:'<button v-on:click="count++">You click {{count}} times</button>'

   });

   //此处顺序不能变。必须先创建组件后创建实例，否则模板不能在页面中渲染出来

   var vm = new Vue({

      el:'#wp'

   });

反引号的应用

对于创建复杂组件中的模板时，为了使代码更具有可读性，使用反引号 

 `  模板代码 `

    Vue.component('blog-post', {
        props: ['post'],
        template: `
                <div class="blog-post">
                    <h3>{{ post.title }}</h3>
                    <div v-html="post.content"></div>
                </div>
             `			//此处为反引号包含折行模板字符串
    });