zoukankan      html  css  js  c++  java
  • Vue里标签嵌套限制问题解决------解析DOM模板时注意事项:

    受到html本身的一些限制,像<ul>、<ol>、<table>、<select>这样的元素里允许包含的元素有限制,而另一些像<option>这样的元素只能出现在某些特定元素的内部。变通的方案是使用特殊的 is 特性

    应当注意,如果使用来自以下来源之一的字符串模板,则没有这些限制:

    --------<script type="text/x-template">

    --------<javascript>内联模板字符串

    --------.vue组件

    这句话意思是:

    这样不可以

    <body>

        <div id="app">

            <select>

                <optioncomp></optioncomp>

            </select>

        </div>

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

        <script>

            new Vue({

                el: '#app',

                components:{

                    'optioncomp':{

                        template: '<option >a</option>'

                    }

                }

            })

        </script>

    </body>

    但是用 is 特殊属性可以

    <body>

        <div id="app">

            <select>

                <option is="optioncomp"></option>

            </select>

        </div>

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

        <script>

            new Vue({

                el: '#app',

                components:{

                    'optioncomp':{

                        template: '<option >a</option>'

                    }

                }

            })

        </script>

    </body>

    或者temp模板标签也可以

    <body>

        <div id="app">

            <select>

                <option is="optioncomp"></option>

            </select>

            <!--模板内容存放区域-->

            <script type="x-template" id="optioncompTemp">

                <option >a</option>

            </script>

        </div>

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

        <script>

            new Vue({

                el: '#app',

                components:{

                    'optioncomp':{

                        template: '#optioncompTemp'

                    }

                }

            })

        </script>

    </body>

    或者内联模板字符串也行

    <body>

        <div id="app">

            <selectcomp></selectcomp>

        </div>

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

        <script>

            Vue.component('optioncomp',{

                template: '<option >a</option>'

            });

            new Vue({

                el: '#app',

                components:{

                    'selectcomp':{

                        template: ' <select> <optioncomp></optioncomp></select>'

                    }

                }

            })

        </script>

    </body>

    当然了,单页应用的组件文件xxx.vue更是没问题了,就不演示了。

    受到html本身的一些限制,像<ul>、<ol>、<table>、<select>这样的元素里允许包含的元素有限制,而另一些像<option>这样的元素只能出现在某些特定元素的内部。变通的方案是使用特殊的 is 特性

    应当注意,如果使用来自以下来源之一的字符串模板,则没有这些限制:

    --------<script type="text/x-template">

    --------<javascript>内联模板字符串

    --------.vue组件

    这句话意思是:

    这样不可以

     

    1.  
      <body>
    2.  
      <div id="app">
    3.  
      <select>
    4.  
      <optioncomp></optioncomp>
    5.  
      </select>
    6.  
      </div>
    7.  
      <script src="lib/vue.js"></script>
    8.  
      <script>
    9.  
      new Vue({
    10.  
      el: '#app',
    11.  
      components:{
    12.  
      'optioncomp':{
    13.  
      template: '<option >a</option>'
    14.  
      }
    15.  
      }
    16.  
      })
    17.  
      </script>
    18.  
      </body>

    但是用 is 特殊属性可以

     

    1.  
      <body>
    2.  
      <div id="app">
    3.  
      <select>
    4.  
      <option is="optioncomp"></option>
    5.  
      </select>
    6.  
      </div>
    7.  
      <script src="lib/vue.js"></script>
    8.  
      <script>
    9.  
      new Vue({
    10.  
      el: '#app',
    11.  
      components:{
    12.  
      'optioncomp':{
    13.  
      template: '<option >a</option>'
    14.  
      }
    15.  
      }
    16.  
      })
    17.  
      </script>
    18.  
      </body>

    或者temp模板标签也可以

    1.  
      <body>
    2.  
      <div id="app">
    3.  
      <select>
    4.  
      <option is="optioncomp"></option>
    5.  
      </select>
    6.  
       
    7.  
      <!--模板内容存放区域-->
    8.  
      <script type="x-template" id="optioncompTemp">
    9.  
      <option >a</option>
    10.  
      </script>
    11.  
      </div>
    12.  
      <script src="lib/vue.js"></script>
    13.  
      <script>
    14.  
      new Vue({
    15.  
      el: '#app',
    16.  
      components:{
    17.  
      'optioncomp':{
    18.  
      template: '#optioncompTemp'
    19.  
      }
    20.  
      }
    21.  
      })
    22.  
      </script>
    23.  
      </body>

    或者内联模板字符串也行

     

    1.  
      <body>
    2.  
      <div id="app">
    3.  
      <selectcomp></selectcomp>
    4.  
      </div>
    5.  
      <script src="lib/vue.js"></script>
    6.  
      <script>
    7.  
      Vue.component('optioncomp',{
    8.  
      template: '<option >a</option>'
    9.  
      });
    10.  
      new Vue({
    11.  
      el: '#app',
    12.  
      components:{
    13.  
      'selectcomp':{
    14.  
      template: ' <select> <optioncomp></optioncomp></select>'
    15.  
      }
    16.  
      }
    17.  
      })
    18.  
      </script>
    19.  
      </body>

    当然了,单页应用的组件文件xxx.vue更是没问题了,就不演示了。

  • 相关阅读:
    ElasticSearch入门 第一篇:Windows下安装ElasticSearch
    怎样打开.jar格式文件,怎样运行.jar格式文件
    如何安装java环境和如何配置java环境
    JDK安装、java环境配置
    学习PHP好,还是Python好呢?
    艾伟:WPF简介 狼人:
    艾伟:ASP.NET MVC,深入浅出IModelBinder,在Post方式下慎用HtmlHelper 狼人:
    艾伟:在Mono平台开发前你应该知道 狼人:
    艾伟:一个较完整的关键字过滤解决方案(上) 狼人:
    艾伟:闲话WPF之一(WPF的结构) 狼人:
  • 原文地址:https://www.cnblogs.com/wjx6270/p/11927803.html
Copyright © 2011-2022 走看看