vuejs的：is和is使用和区别

在vue.js组件教程的一开始提及到了is特性：：

意思就是有些元素，比如ul里面只能直接包含li元素，像这样：

<ul>
    <li></li>
</ul>

而不能：

<ul>
    <your-component>
</ul>

这样就不能复用的组分这个组件了，如果要达到我们的目的，我们就要使用IS特性像这样：

<ul>
    <li is="your-component"></li>
</ul>

TIGERB 7.6k声望

就是有些元素内部不能使用自定义标签或者自定义标签内也不能放某些特殊的标签，这时候就要用IS代替一下，让HTML语法符合规则验证。是属于指定要在内部使用的标签。
在自定义组件中使用这些受限制的元素时会导致一些问题，例如：

<table>
  <my-row>...</my-row>
</table>

自定义组件<my-row>会被当作无效的内容，因此会导致错误的渲染结果。变通的方案是使用特殊的is特性：

<table>
  <tr is="my-row"></tr>
</table>

这两种写法表达的意思是一样的，但是第一种写法是不符合HTML语法验证的。

代码之美 2声望

就是某些标签下只能使用指定的标签，否则无法被浏览器正确解析，例如UL，表中，a，选择这些。（例如UL一般跟着里，选择一般跟着选项这样）

<ul>
    <component-name></component-name>
</ul>

所以导致，上面的代码并不能被浏览器正确的解析，最终导致组件不能生效。

如果我们想要在这些标签UL，表中，a，选择下使用组件，想要他正确的被解析出来，就需要使用IS属性。

是属性的值是组件名，例如在UL下使用一个组件，代码可以这样写：

//声明一个组件
new Vue({
    components:{
        'component-name':{
           template:'<p>你好，这是一个示例</p>' 
        }
    }
})

// ul下使用组件
<ul>
    <li is="component-name"></li>
</ul>

一，是的用途

<div id = “app” >
    <button @ click = “plusone” > +++ 1 </ button>
    <myheaders ：mycount = “count” ：mymsg = “msg” > </ myheaders>
    <div ：is = “ tttson“ > </ div>
    <div ：is = ”ttmyheader“ > </ div>
  </ div>

以上的tttson和ttmyheader都必须是变量名（组件），以上是可以动态改变的，十分方便。

如果不用V形绑定则：“这里的内容：COMP1” - >必须是组件：{COMP1：COMP1}

<div is = “comp1” > </ div>这样也是正确的

JS代码如下：

var son = {
   template： “<b>子子{{son}} {{myson}} {{mymsg}} </ b>” ，
  data： function（）{
     return { “son”： “sonson” }  
  } ，
  道具：[ “myson” ，“mymsg” ]  
} 
var myheader = {
   template：“<3333333father --- {{a}}，{{b}} {{mycount}} <myson：myson ='a'：mymsg ='mymsg'> </ myson> p>“ ，
  data：function（）{
     return { a：”aaa“ ，”b“：”mymsg“ ，tson：son} ;
} ，
  道具：[ “mycount” ，“mymsg” ] ，
  组件：{
     myson：son        
  } 
} 
var vm = new Vue（{
   el：“#app” ，
  data：{
     count：5 ，msg：“my message” ，tttson：son ，ttmyheader：myheader  
  } ，
  组件：{
      “myheaders”：myheader  
  } ，
  方法：{
      Plusone精选：函数（）{
        此。计数 ++ ;
}      
  } 
}）

总结：只能用于绑定组件。

vuejs的：is和is使用和区别

猜你喜欢