vue组件实际应用

1、使用template 标签：注意template标签最上层标签只能有一个 否则报错

            <div id="app">

                <mydiv></mydiv>

            </div>

            <template id="t1">

                <div>

                    <img src="img/456.jpg" />

                    <p>我喜欢你！！！</p>

                </div>

                <!--<p>123</p>或报错，因为最外部同级别元素只能为1个-->

            </template>

            <script src="js/vue.js"></script>

            <script>

                  

                Vue.component('mydiv',{

                    template:"#t1"

                });

                new Vue({

                    el:'#app'

                })

            </script>

   

2、使用script标签

<div id="app">

            <mydiv></mydiv>

        </div>

        <script src="js/vue.js"></script>

          

        <script type="text/template" id="sc">

            <div>

                <img src="img/123.jpg" width="200px" width="150px" />

            </div>

        </script>

        <script>

            Vue.component('mydiv',{

                template:"#sc"

            });

            new Vue({

                el:'#app'

            })

        </script>