![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 58
刘什么同学
爱生活,爱自己。
展开
-
Vue动态组件实现tab标签页切换
前言:关于组件注册在 vue 中,实现 Tab 切换主要有三种方式:使用动态组件,使用 vue-router 路由,使用第三方插件。因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需要改变地址略微麻烦,所以使用的是动态组件实现,如果是在大型应用上,可能使用 vue-router 会方便一些。先看下最终实现的效果,结构比较简单,顶部的三个 Tab 标签用于切换,内容区域分别为三个子组件。主要代码(Home.vue)<template> <div class="con原创 2021-02-01 13:23:25 · 2731 阅读 · 1 评论 -
Vue学习之路(4)
vue-router**安装 ** cmd进入项目里面,敲入 npm install vue-router --save-dev修复 npm audit fix导入import VueRouter from 'vue-router'显示声明//显示声明使用VueRouterVue.use(VueRouter);测试首先写三个组件用做测试–>首页,内容页,标签页Main.vue<template> <h1>首页</h1><原创 2021-01-17 11:53:34 · 203 阅读 · 4 评论 -
Vue学习之路(3)
自定义事件内容分发 $emit(自定义事件)SOC原则“系统中的一个部分发生了变化,不会影响其他部分。”“即使需要改变,也能够清晰地识别出那些部分需要改变。”“如果需要扩展架构,将影响最小化,已经可以工作的每个部分都将继续工作。”<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>test6-slot</title> </head>原创 2021-01-16 15:51:48 · 235 阅读 · 0 评论 -
vue学习之路(2)
vue学习之路(2)双向绑定v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>test5</title> </head> <body> <div id="app"> {{message}} <input v-model="m原创 2021-01-15 16:17:41 · 451 阅读 · 2 评论 -
Vue学习之路(1)
vue学习传值的两种方式 v-bind文本传值 {{data}}<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>test1</title> </head> <body> <div id="app"> {{message}} </div> <script src="htt原创 2021-01-14 15:56:27 · 78 阅读 · 0 评论