【Vue.js 入门与实战】--组件切换-使用Vue提供的component元素实现组件

简介: 一、component实现组件二、总结

组件切换-使用Vue提供的component元素实现组件

 

目录:

一、component实现组件

二、总结

 

本节主要学习组件切换的第二种方式:

 

一、component实现组件

例:

<div id=app>

<a href=""@clik.prevent=comName=login'">登录</a>

<a href=""@clik.prevent=comName=register'">注册</a>

 

// vue提供了component,来展现对应名称的组件

//component是一个占位符,:is属性,可以用来指定要展示的组件的名称

<component :is="'comName'"></component>

</div>

data{

comname:'login'  

//当前component中的:is绑定的组件的名称

}

例如:如果 is 指定的是 login ,那么就会在 Component 的位置里面替换为 login

<component:is=”login”></component>

其中,属性绑定会当做表达式来解析,并不是真是的字符串,所以上面的代码中,应该为:

<component:is=”’login’”></component>

此时再刷新,右键浏览,可以执行出正确结果:

image.png

 

 

 

二、总结

当前学习了几个Vue提供的标签

Component

template

transition,(过渡,实现单个元素过渡)

transitionGroup(过渡,实现多个元素过渡)

相关文章
|
1天前
|
缓存 JavaScript 算法
|
8天前
|
存储 资源调度 JavaScript
Vue.js组件通信策略详解
【7月更文挑战第17天】通过以上几种策略,Vue.js 提供了灵活且强大的组件间通信能力,使得开发者可以构建出结构清晰、易于维护的大型应用。
|
5天前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
12天前
|
JavaScript
|
10天前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
|
11天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
26 2
|
14天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
37 4
|
14天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
27 1
|
14天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
39 1
|
Web App开发 JSON JavaScript
Vue 实战 (一) -- Vue 基础总结
Vue作为一个前端轻量级的MVVM框架有其独到之处,本文主要针对Vue1.0版本的官方文档进行梳理总结,主要包括以下几个方面:1.数据绑定2.指令3.组件4.事件5.过滤器
2408 0