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>