vue组件（二）

v-for with v-if

• v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
• 当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中

• v-for与v-for同时作用于一个标签上，那么就不能再与一个带有v-else标签连用：

  <code>    //这样写不能起作用    <ul>        <li v-for="m in showList" v-if="showLength>0">{{m}}</li>        <li v-else>没有符合条件的数据</li>    </ul>    //下面才是正确写法：    <ul>        <template v-if="showLength>0">            <li v-for="m in showList" >--{{m}}</li>        </template>        <template v-else>            <li>没有符合条件的数据</li>        </template>    </ul>    //或者    <div>        <div v-if="showLength>0">            <div v-for="m in showList" >--{{m}}</div>        </div>        <div v-else>            <div>没有符合条件的数据</div>        </div>    </div></code>

x-template

<code>    <script type="text/x-template" id="hello-world-template">        <p>Hello hello hello</p>    </script>    <script type="text/javascript">        Vue.component('my-component', {            // 组件的模板选项            // template: '<h1>自定义组件</h1>'            template: '#hello-world-template'        });        new Vue({            el: '#app'        });    </script></code>

插槽

默认情况下，vue会使用template选项中的内容覆盖页面中标签内容。可用插槽解决这个问题

<code>    <div id="app">        <m-button>按钮1</m-button>        <m-button>按钮2</m-button>    </div>    script type="text/javascript">        Vue.component('mButton', {            // 但是这个操作会让标签中的内容被替换            // 其实在vue替换内容之前，会把页面中标签中包含的内容保存的vue内容一个属性中            // 我们可以在组件中使用一个vue已经实现了组件:slot，去获取到该内容            template: `<h1><slot></slot></h1>`        });        new Vue({            el: '#app'        });    </script></code>

- 单个插槽
- 具名插槽–多个插槽

    <code>         <div id="app">            <m-dialog header="注册">                <form>                    <p>                        用户名：<input />                    </p>                    <p>                        密码：<input />                    </p>                </form>                <div slot="footer">                    <button>确认</button>                    <button>取消</button>                    <a href="#">我有账号，立即登录！</a>                </div>            </m-dialog>            <br>            <m-dialog header="错误" content="删除失败" footer="关闭"></m-dialog>        </div>        <script type="text/javascript">            Vue.component('mDialog', {                props: ['header', 'content', 'footer'],                template: `                    <div class="dialog">                        <div class="header">{{header}}</div>                        <div class="content">                            <div v-if="content">{{content}}</div>                            <div v-else><slot></slot></div>                        </div>                        <div class="footer">                            <div v-if="footer">{{footer}}</div>                            <div v-else><slot name="footer"></slot></div>                        </div>                    </div>                `            });            new Vue({                el: '#app'            });        </script>    </code>