框架小白白白白的进阶之路 --- Vue（四）自定义指令和组件

最新推荐文章于 2024-05-25 16:04:51 发布

兜里ヌ有糖

最新推荐文章于 2024-05-25 16:04:51 发布

阅读量130

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_43980232/article/details/107815055

版权

笔记专栏收录该内容

60 篇文章 0 订阅

订阅专栏

自定义指令

全局自定义指令

Vue.directive('red',function(el){ <!-- red是自定义指令的名字 参数el代表的是调用该指令的对象 -->
	el.style.background='red'  <!-- 将背景颜色改为红色 -->
})

<!--调用 -->
<p v-red>aaaa</p>

自定义指令传参

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-bgcolor='color'>aaa</p>
			<p v-bgcolor="'green'">bbb</p> <!-- v-bgcolor='参数' -->
		</div>
		
		<script type="text/javascript">
			Vue.directive('bgcolor',function(el,binding){ //binding为传进来的第一个参数
				el.style.background=binding.value //binding.value是传递进来的第一个参数值
			})
			let vm=new Vue({
				el:"#app",
				data:{
					color:'red',
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

Vue组件

定义好一个组件之后，可以反复调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <aaa></aaa>  <!-- 调用组件 -->
        <aaa></aaa>
        <aaa></aaa>
    </div>

    <script>
        var Aaa=Vue.extend({
            template:'<h3>我是全局组件</h3>'     //定义模板
        });

        Vue.component('aaa',Aaa);      		//注册组件

        var vm=new Vue({
            el:'#box',
        });

    </script>
</body>
</html>

在这里插入图片描述
组件的另一种写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-if="msg=='login'">
				<aaa></aaa>
			</div>
			<div v-else-if="msg=='register'">
				<bbb></bbb>
			</div>
			<div v-else >
				<ccc></ccc>
			</div>
			<div id="butgroup">
				<button type="button" @click="goto('login')">去登陆</button>
				<button type="button" @click="goto('register')">去注册</button>
				<button type="button" @click="goto('other')">哪也不去</button>
			</div>
		</div>
		<template id="temp1">
			<form action="#" method="get"></br>
				用户名：<input type="text" /></br>
				密码：<input type="password" /></br>
				<input type="submit" value="登录" />
			</form>
		</template>
		<template id="temp2">
			<form action="#" method="get">
				用户名：<input type="text" /></br>
				密码：<input type="password" /></br>
				邮箱：<input type="text"/></br>
				电话：<input type="tel" /></br>
				<input type="submit" value="注册" />
			</form>
		</template>
		<template id="temp3">
			<label>待完善页面</label>
		</template>
		<script type="text/javascript">
			Vue.component("aaa",{        //注册组件    通过template标签的id引用template标签进行注册
				template:'#temp1'
			})
			Vue.component("bbb",{
				template:'#temp2'
			})
			Vue.component("ccc",{
				template:'#temp3'
			})
			let vm=new Vue({
				el:"#app",
				data:{
					msg:'login'
				},
				methods:{
					goto:function(msg){
						this.msg=msg
					}
				}
			})
		</script>
	</body>
</html>

在template模板当中，想要使用data，需要在其对应的component中定义（定义一个data方法，将需要的值作为返回值）

	<template id="temp1">
		<form action="#" method="get"></br>
			{{osname}}  {{osauthor}}
			用户名：<input type="text" /></br>
			密码：<input type="password" /></br>
			<input type="submit" value="登录" />
		</form>
	</template>
	<script>
		Vue.component("aaa",{
			template:'#temp1',
			data:function(){
				return{
					osname:'无敌os',
					osauthor:'tom'
				}
			}
		})
	</script>

局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <my-aaa></my-aaa>
    </div>
    <script>
        var vm=new Vue({
            el:'#box',
            components:{
                'my-aaa':{
                    data(){
                        return {
                            msg:'welcome vue'
                        }
                    },
                    methods:{
                        change(){
                            this.msg='changed';
                        }
                    },
                    template:'<h2 @click="change">局部组件-->{{msg}}</h2>'
                }
            }
        });

    </script>
</body>
</html>

兜里ヌ有糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
框架小白白白白的进阶之路 --- Vue（四）自定义指令和组件

自定义指令全局自定义指令Vue.directive('red',function(el){  el.style.background='red' })<p v-red>aaaa</p>自定义指令传参<!DOCTYPE html><html> <head>
复制链接

扫一扫