JAVA高级面试进阶训练营视频教程

admin · 发表于 2021-9-5 16:23:56

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

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

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

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

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

这句话意思是：

这样不可以

<body>

</select>

</div>

new Vue({

el: '#app',

components:{

'optioncomp':{

}

})

</script>

</body>

但是用 is 特殊属性可以

<body>

</select>

</div>

new Vue({

el: '#app',

components:{

'optioncomp':{

}

})

</script>

</body>

或者temp模板标签也可以

<body>

</select>

</script>

</div>

new Vue({

el: '#app',

components:{

'optioncomp':{

}

})

</script>

</body>

或者内联模板字符串也行

<body>

</div>

Vue.component('optioncomp',{

});

new Vue({

el: '#app',

components:{

'selectcomp':{

}

})

</script>

</body>

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

受到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更是没问题了，就不演示了。

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶训练营视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万大数据入门到精通学习路线	年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

Vue里标签嵌套限制问题解决------解析DOM模板时注意事项：