[VUE]:is特性

最新推荐文章于 2022-06-29 22:14:56 发布

wding914

最新推荐文章于 2022-06-29 22:14:56 发布

阅读量425

点赞数

分类专栏： vue 文章标签：动态切换组件 is is特性 vue 动态加载不同的组件

本文链接：https://blog.csdn.net/wding914/article/details/92389584

版权

本文介绍了Vue.js中`is`特性的使用，如何动态切换不同组件，以及如何解析DOM模板来解除元素的限制。通过`is`属性，可以动态地在模板中更换组件，解决在特定元素内部使用受限元素的问题。详细内容参考官方文档。

摘要由CSDN通过智能技术生成

1.动态切换不同组件

通过is我们可以动态的更换模板中的组件

<div id="app">
    <button @click="changeComponent('component1')">A</button>
    <button @click="changeComponent(

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wding914

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue的一些特性

ZhiAng99的博客

09-25

304

文章目录1.自定义指令2.计算属性3.侦听器4.过滤器5.变异方法和替换数组 1.自定义指令 1.基础指令 v-clock 这个指令的意思是点击就会触发这个指令除了一些vue提供给我们得指令外我们还可以自定义一些指令来方便我们的一些操作 Vue.directive(‘focus’, { //inserted是固定的是vue的api inserted: function(el){ // el表示指令所绑定的元素 el.focus(); } }); <body> <div id="a

is-is特性

f990065706的专栏

11-07

582

1、链路状态路由协议2、Isis使用区域建立层次体系关系3、Isis支持VLSM，路由汇总4、isis用路由执行第一层和第二层的功能5、Isis使用hello数据包同其他启用Isis的路由器建立邻居关系，每十秒一次6、Isis支持路由选择的认证机制

参与评论您还未登录，请先登录后发表或查看评论

vue中的is特性

yu_yu_lll的博客

06-29

293

vue中的is特性

【Vue】is特性

jzq950522的博客

03-11

464

1.限制元素 Vue模板就是dom模板，而dom对一些html元素是有限制的，比如 <table> <my-component></my-component> </table> 这样是不行的通过is我们可以拓展html元素，比如 <ul> <li is="my-component"></li&amp

Vue常见特性

泊一的博客

11-30

1135

文章目录Vue常见特性Vue常见特性概览表单操作1. 基于Vue的表单操作2. 表单域修饰符自定义指令1. 为何需要自定义指令？2. 自定义指令的语法规则（获取元素焦点）3. 自定义指令用法4. 局部指令——只能在当前组件使用计算属性1. 为何需要计算属性？2. 计算属性的用法 Vue常见特性 Vue常见特性概览表单操作自定义指令计算属性侦听器过滤器生命周期表单操作 1. 基于V...

vue 动态组件(component :is) 和 dom元素限制(is)用法说明

11-19

Vue.js 是一款流行的前端框架，它提供了一些强大的特性来帮助开发者构建复杂的Web应用。在Vue 2.0中，动态组件（`component :is`）和DOM元素限制（`is`）是两个非常实用的功能，尤其在处理特殊场景时。一、动态...

vue2.x中的：is和is的区别

sinat_27514587的博客

11-02

424

此文首发于 https://lijing0906.github.io 最近，工作之余在翻阅vue.js的官方文档，在查看到动态组件和解析 DOM 模板时的注意事项的时候，讲到一个特殊的is特性，觉得很有意思，就来写一篇自己理解的总结。现场写栗子实践其实看过之后，其实是有点懵的，这两个有啥区别，怎么用呢？仔细分析，没那么难懂，参考这篇博客，我们也写一个栗子来试试我们平时用局部注册的情况...

storybook-vue：带VUE的Storybook

02-04

Vue.js 的组件系统是其核心特性之一，允许我们将复杂的UI拆分成可复用的模块。接下来，我们来看看如何在Vue项目中设置Storybook。首先，你需要确保你的项目已经初始化并安装了Vue。你可以通过运行 `npm init` 来...

vue3 is动态组件

qt的博客

04-20

1万+

vue 的 is 属性简单说就是扩展 html标签的限制什么是动态组件：就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。动态切换：（:is后面的是对应的组件名，必须一致）在挂载点使用component标签，然后使用v-bind:is=”组件名”，会自动去找匹配的组件名，如果没有，则不显示；改变挂载的组件，只需要修改is指令的值即可在一个多标签的界面中使用 “ is ”特性来切换不同的组件： <template> <div

vue组件is特性

A13330069275的博客

06-29

426

有些元素，比如 ul 里面只能直接包含 li元素，像这样：<ul> <li></li> </ul>而不能：<ul> <your-component> </ul>这样就不能复用your-component这个组件了，如果要达到我们的目的，我们就要使用is特性像这样：<ul>

vue组件的is特性

qq_36306659的博客

05-19

782

vue组件功能是vue项目的一大特色。组件可以扩展html元素，可以封装课重用的代码，可以增加开发效率它是自定义元素。vue.js的编译器为它添加特殊功能。有些情况。组件也可以是原生HTML的形式，以is特性进行扩展。那么is特性究竟是什么呢？有什么用处？简单来说，因为vue模板就是dom模板，使用的是浏览器原生的解析器进行解析，所以dom模板的限制也就成为vue的模板限制了，要求...

Vue：:is特性详解和示例

灿灿大王搭建的黄金屋

05-31

9525

今天在阅读Vue教程的时候，读到“解析DOM模板时的注意事项”这一节，看到:is特性——就是有些元素内部不能使用自定义标签或者自定义标签内也不能放某些特殊的标签，这时候就要用is代替一下，让html语法符合规则验证。is属于指定要在内部使用的标签。文档链接：https://cn.vuejs.org/v2/guide/components.html 教程里面是这么解释的：看完之后...

vue.js的特殊特性

我竟然是凡人

10-23

1353

key 预期：number | string key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。有相同父元素的子元素必须有

vue组件is属性详解

热门推荐

树上骑个猴的博客

11-24

1万+

查看官网对is属性的讲解，请移步：vue.js官网对is的解释在vue.js组件教程的一开始提及到了is特性下面是官网对is属性使用的说明：组件功能是vue项目的一大特色。组件可以扩展html元素，可以封装可重用的代码，可以增加开发效率。它是自定义元素，vue.js的编译器为它添加特殊功能。有些情况，组件也可以是原生HTML元素的形式，以is特性进行扩展。那么is特性究竟是什么呢？有什么用途呢？　　 1、限制元素其实简单的来说，因为vue模板就是dom模板，使用的是浏览器原生的解析器进行解析，

Vue特性

weixin_43805679的博客

04-29

329

VUE <div id="app"> {{message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue ({ el: "#app", da...

Vue动态组件

nicexibeidage的博客

01-24

2156

前面的话　　让多个组件使用同一个挂载点，并动态切换，这就是动态组件。本文将详细介绍Vue动态组件概述　　通过使用保留的元素，动态地绑定到它的 is 特性，可以实现动态组件 div id="example"> button @click="change">切换页面button> component :is="currentView">compo

vue :is的用法

jieweiwujie的博客

10-17

2351

由于使用ul标签下只能识别li标签，所有添加的组件不能识别，因此要使用转义 :is <ul> <component :is="componentA"></component> </ul> componentA 就是一个子组件可以使用is 直接传递一个组件也可以使用:is 查找父组件中的一个赋值，然后找到相应的组件(for循环) ...