VueJS（十）

最新推荐文章于 2022-05-07 11:32:32 发布
最新推荐文章于 2022-05-07 11:32:32 发布
阅读量78 收藏
点赞数
分类专栏： VueJS 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43278421/article/details/107385764
版权

今天继续第二个组件的学习

标签页组件
一个标签按钮对应一个slot

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	</head>
	<body>
		<div id="app" v-closk >
			<tabs v-model="activeKey">
				<pane label="one" name="1">
					标签一的内容
				</pane>
				<pane label="two" name="2">
					标签而的内容
				</pane>
				<pane label="three" name="3">
					标签三的内容
				</pane>
			</tabs>
		</div>
		<script src="js/pane.js"></script>
		<script src="js/tab.js"></script>
		<script>
			var app = new Vue({
				el:'#app'
			})
		</script>
	</body>
</html>

pane的

Vue.component('pane',{
	name:'pane',
	template:'\
	    <div class="pane" v-show="show">\
		    <slot></slot>\
		</div>',
	props:{
		name:{
			type:String,
			default:''
		},
		label:{
			type:String,
			default:''
		}
	},
	data:function(){
		return {
			show:true
		}
	},
	methods:{
		updateNav(){
			this.$parent.updateNav();
		}
	},
	watch:{
		label(){
			this.updateNav();
		}
	},
	mounted(){
		this.updateNav();
	}
})

tab的

Vue.component('tabs',{
	template:'\
	     <div class="tabs">\
		   <div class="tabs-bar">\
		        <div \
				     :class = "tabCls(item)"\
					 v-for="(item,index) in navList" \
					 @click = "handleChange(index)"> \
					 {{ item.label }}\
			    </div>\
		   <div>\
		   <div class="tabs-content">\
		      <slot></slot>\
		   </div>\
		 </div>',
		 props:{
			 value:{
				 type:[String,Number]
			 }
		 },
		 data:function(){
			 return {
				 currentValue:this.value,
				 navList:[]
			 }
		 },
		 methods:{
			 tabCls:function(item){
				 return [
					 'tabs-tab',
					 {
						 'tabs-tab-active':item.name == this.currentValue
					 }
				 ]
			 },
			 getTabs(){
				 return this.$children.filter(function(item){
					 return item.$options.name === 'pane';
				 });
			 },
			 updateNav(){
				 this.navList = [];
				 var _this = this;
				 
				 this.getTabs().forEach(function(pane,index){
					 _this.navList.push({
						 label:pane.label,
						 name:pane.name || index
					 });
					 if(!pane.name) pane.name = index;
					 if(index ===0 ){
						 if(!_this.currentValue){
							 _this.currentValue = pane.name || index;
						 }
					 }
				 });
				 this.updateStatus();
			 },
			 updateStatus(){
				 var tabs = this.getTabs();
				 var _this = this;
				 
				 tabs.forEach(function(tab){
					 return tab.show = tab.name ===_this.currentValue;
				 })
			 },
			 handleChange:function(index){
				 var nav = this.navList[index];
				 var name = nav.name;
				 this.currentValue = name;
				 this.$emit('input',name);
				 this.$emit('on-click',name);
			 }
		 },
		 watch:{
			 value:function(val){
				 this.currentValue = val;
			 },
			 currentValue:function(){
				 this.updateStatus();
			 }
		 }
	
})

css的

[v-cloak]{
	display: none;
}

.tabs{
	font-size: 14px;
	color:#657180;
}

.tabs-bar:after{
	content:'';
	display: block;
	width: 100%;
	height: 1px;
	background: #d7dde4;
	margin-top: -1px;
}

.tabs-tab{
	display:inline-block;
	padding:4px 16px;
	margin-right: 6px;
	background: #fff;
	border:1px solid #D7DDE4;
	cursor:pointer;
	position:relative;
}

.tabs-tab-active{
	color:#3399ff;
	border-top:1px solid #3399ff;
	border-bottom:1px solid #fff;
}

.tabs-tab-active:before{
	content:'';
	display:block;
	height:1px;
	background:#3399ff;
	position:absolute;
	top:0;
	left:0;
	right:0;
}

.tabs-content{
	padding:8px 0;
}

自定义指令的学习
指令就是像v-if这种，自定义指令也是通过注册再使用，就和vue实例，组件他们一样的

同样的，也分为全局注册和局部注册

//全局注册的代码示例如下
Vue.directive（‘focus’，{
//指令选项
}）;

//局部注册
var app = new Vue({
el:’#app’,
directives:{
//指令选项
}
})

显然，局部的注册位置就在一个vue实例属性里面而已

mwwb
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vuejs路由参数二十二
qq_50563868的博客
05-06 94
<--! message.vue query参数--> <li v-for=" m in message" :key="m.id"> <!-- query参数 --> <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp
Vuejs第十三篇之组件——杂项
10-21
组件是Vue.js的核心特性，它允许开发者将UI分解为独立、可重用的代码块，进一步提高代码的可维护性和可扩展性。在Vue.js中，组件可以看作是自定义元素，它们拥有自己的视图和数据逻辑。... 在实际开发中，组件通常用于...
Vuejs脚手架十三
qq_50563868的博客
04-21 916
import Vue from 'vue' import App from './App.vue' //设置vue生产环境 Vue.config.productionTip = false new Vue({ el: '#app', components: { App }, render: h => h(App) }) CLI： command line interface； main.js中的render： 在脚手架中，引入的vue是一个残缺版的vue，所以没有模板解
Vuejs生命周期十
qq_50563868的博客
04-18 222
<body> <div id="root"> <h2>让n加一:{{n}}</h2> <button @click="add">加一</button> <button @click="goodbye">销毁vm</button> </div> <script> new Vue({ el: '#root', data: {
VueJs（十四）
qq_43278421的博客
08-10 110
vue 2.x和1.x的最大不同在于使用了Virtual Dom（虚拟DOM）来更新DOM节点，提升了渲染性能 Virtual DOM 不是真正意义上的DOM对象，而是一个轻量级Js对象，状态发生变化的时候，会进行Diff运算，来更新只需要被替换的DOM，而不是全部重载 下面是一个普通的DOM节点 <div id="main"> <p>文本内容</p> <p>文本内容</p> </div> 下面是使用Virtual D
Vuejs自定义事件十五
qq_50563868的博客
04-25 120
//App.vue组件 <template> <div class="app"> <h2>{{ msg }}</h2> <h2>子组件传递过来的数据，{{studentName}}</h2> <School :getSchoolName="getSchoolName" /> <!-- 使用$emit触发事件 --> <Student v-on:getStudent
VueJs（十五）
qq_43278421的博客
08-12 87
今天开始学习webpack 这是当前比较热门的js应用程序的模块打包工具 它依赖于node.js和NPM 前端自动化工程主要解决以下问题： js、css代码的和平和压缩 css预处理：less、sass、Stylus的编译 生成雪碧图（css sprite） ES 6转ES 5 模块划 webpack打包后的代码已经不是你的代码，其中夹杂了更多webpack自身的模块处理代码 这部分内容最重要的是编译这个概念 各种格式的文件通过特定加载器编译后最终统一称为js，css，png等静态资源文件 在webpack
VueJS（十三）
qq_43278421的博客
08-07 112
今天继续时间显示组件的实战 目标是把时间转换成相对时间 确定转换逻辑 1分钟以前，显示“刚刚“” 1分钟~1个小时内，显示“xx分钟前” 1个小时~1天之间，显示“xx小时前” 1天~1个月之间，显示“”xx天“” 大于一个月，显示“xx年xx月xx日” ...
Vuejs路由守卫二十四
qq_50563868的博客
05-07 87
//route>index.js { name: 'xinwen', path: 'news', component:News, meta: {isAuth:true,title: '新闻'}, }, // 前置路由守卫 router.beforeEach((to,from,next) => { console.log('前置路由守卫',to,from,); if(to.meta.isAuth) { if(localStorage.ge
Vuejs——（８）Vuejs组件的定义
qq20004604的博客
09-04 2143
本篇资料来于官方文档： http://cn.vuejs.org/guide/components.html 本文是在官方文档的基础上，更加细致的说明，代码更多更全。 简单来说，更适合新手阅读 （二十五）组件的定义 ①组件的作用： 【1】扩展HTML元素，封装可重用的代码； 【2】组件是自定义元素，Vuejs的编译器可以为其添加特殊的功能； 【3】某些情况
Vuejs第十篇之vuejs父子组件通信
10-21
在学习Vue.js框架的过程中，理解父子组件之间的通信机制是非常重要的。Vue.js通过其响应式系统和组件系统，为我们提供了多种在父子组件之间交换数据和事件的方法。在本文中，我们将详细讨论如何在Vue.js中实现父子...
Vuejs第十二篇之动态组件全面解析
10-21
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。接下来通过本文给大家介绍Vuejs第十二篇之动态组件，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
vuewp：WordPress Vuejs GraphQL
02-05
威普带有Vue（VueJS）和GraphQL的Wordpress二十七主题。 仍在进行中。 您可以在此处找到一个演示： : 。 该演示是一个分离的设置：前端从另一台服务器上的WordPress安装获取其数据。 在上阅读更多内容。安装git ...
基于ASP.NET+MVC5+EF6开发企业网站.zip
08-22
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助 【资源内容】：项目具体内容可查看/点击本页面下方的*资源详情*，包含完整源码+工程文件+说明（若有）等。【若无VIP，此资源可私信获取】 【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于整理和收集资料耗费时间的酬劳 3. 积分资源不提供使用问题指导/解答
Steam家庭共享同时玩工具.bat
08-22
Steam家庭共享：两个人同时玩同一个游戏
基于Mysql和JAVA的股票交易系统.zip
08-22
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助 【资源内容】：项目具体内容可查看/点击本页面下方的*资源详情*，包含完整源码+工程文件+说明（若有）等。【若无VIP，此资源可私信获取】 【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于整理和收集资料耗费时间的酬劳 3. 积分资源不提供使用问题指导/解答
这个库用于存储及在组内共享《肖像印》项目数据.zip
08-22
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助 【资源内容】：项目具体内容可查看/点击本页面下方的*资源详情*，包含完整源码+工程文件+说明（若有）等。【若无VIP，此资源可私信获取】 【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于整理和收集资料耗费时间的酬劳 3. 积分资源不提供使用问题指导/解答
基于51单片机倒计时器秒表定时器数码管显示设计
最新发布
08-22
题目：基于51单片机倒计时器秒表定时器数码管显示设计（毕业设计） 系统构成： 本设计由STC89C52单片机核心电路+4位共阳数码管显示电路+蜂鸣器电路+按键电路+电源电路组成。 系统功能： 1、可以设置倒计时间1到99分种，倒计时最后5秒蜂鸣器报警提示。 2、在倒计时过程随时可以暂停和开始计时。 资料包含： 程序源码 电路图 任务书 答辩技巧 开题报告 参考论文 系统框图 程序流程图 使用到的芯片资料 器件清单 焊接说明 疑难问题说明
nodejs vuejs
01-01
Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，用于构建高性能的网络应用程序。它允许开发者使用JavaScript语言编写服务器端代码，实现了非阻塞、事件驱动的特性，使得处理大量并发请求成为可能。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值