Vue学习笔记六-蒲公英云

Vue学习笔记六

组件

注册

全局注册

<div id="app">
        <list></list>
    </div>
    <script type="text/javascript"> Vue.component('list',{ template:"<div><h2>xiaoD</h2><p>welcome</p></div>" }) var app = new Vue({ el: "#app", }) </script>

局部注册

<div id="app">
        <list></list>
    </div>
    <script type="text/javascript"> var child = { template:"<div><h2>xiaoD</h2><p>welcome</p></div>" } var app = new Vue({ el: "#app", components: { 'list': child } }) </script>

模板解析的is属性

在ul,ol,table,select等控件限制了被包括的元素，所以这时候我们直接将我们注册的组件放入会出现一些问题，因此，这时候我们需要使用is属性

<div id="app">
        <table>
            <tr is="myRow"></tr>
        </table>
    </div>
    <script type="text/javascript"> var child = { template:"<div><h2>12</h2><span>1234</span></div>" } var app = new Vue({ el: "#app", components: { 'myRow': child } }) </script>

data必须是函数

<div id="app">
        <my-component></my-component>
        <my-component></my-component>
        <my-component></my-component>
    </div>
    <script type="text/javascript"> Vue.component('my-component',{ template:"<button @click='count++'>{ {count}}</button>", data: function(){ return { count: 0 } } }) var app = new Vue({ el: "#app" }) </script>