程序员经验分享-hwhale

VUE [入门篇(三)]

2023-11-09

Vue入门

目录

Vue入门

1.6.自定义指令

1、示例代码

2、调试步骤

3、参数说明

4、生命周期

1.7.组件基础

 1、组件注册

2、props属性传值

3、父子组件

4、完整示例代码

1.8.制作模板

1、选项模板

2、标签模板

 

 

 

 

 

 

 

 

1.6.自定义指令

vue中的自定义指令通过Vue.directive来实现，主要完成内置指令不能完成的一些事情

1、示例代码

<!DOCTYPE html>
	<html lang="en">
		<head>
		<meta charset="UTF-8">
			<title>Vue入门之自定义指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<div v-test="color">
			{{num}}
				</div>
</div>
<button onclick="unbindApp()">解绑</button>

<script type="text/javascript">
	// 解绑
	function unbindApp() {
	app.$destroy();
}

// 自定义指令
Vue.directive("test",{
	//1-被绑定
	bind:function (el, binding, vnode) {
		console.log("1-bind 被绑定");
		console.log("el:",el);
		console.log("binding:",binding);
		console.log("vnode:",vnode);
		el.style.color = binding.value;
	},
	//2-被插入
	inserted:function (el, binding, vnode) {
		console.log("2-inserted 被插入");
	},
	//3-更新
	update:function (el, binding, vnode) {
		console.log("3-update 更新");
	},
	//4-更新完成
	componentUpdated:function (el, binding, vnode) {
		console.log("4-componentUpdated 更新完成");
	},
	//5-解绑
	unbind:function (el, binding, vnode) {
		console.log("5-unbind 解绑");
	}
});

var app = new Vue({
	el:'#app',
	data:{
		num: 123,
		color:'red'
	}
})
</script>
</body>
</html>

2、调试步骤

（1）chrome打开控制器查看
（2）控制台输入“app.num=’通过控制台设置的新name’”
（3）点击解绑按钮

3、参数说明

  • el：指令所绑定的元素，可以用来直接操作DOM
  • binding： 一个对象，包含指令的很多信息
  • vnode:：Vue编译生成的虚拟节点

4、生命周期

自定义指令有五个生命周期（也叫钩子函数），分别是bind、inserted、update、componentUpdated、unbind，说明如下：

  1. bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作
  2. inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）
  3. update：被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新
  4. componentUpdated：被绑定元素所在模板完成一次更新周期时调用
  5. unbind：只调用一次，指令与元素解绑时调用

1.7.组件基础

 1、组件注册

（1）全局注册

// script
Vue.component('button-counter', {
	data: function () {
		return {
			count: 0
		}
	},
	template: '<button v-on:click="count++">全局组件显示： {{ count }}</button>'
});

new Vue({
	el: '#app'
});

// html使用
<button-counter></button-counter>

（2）局部注册

// script
new Vue({
	el: '#app',
	components:{
		"button-inner":{
			data: function() {
				return {
					inner: 0
				}
			},
			template: '<button v-on:click="inner++">局部组件显示： {{ inner }}</button>'
		}
	}
});

// html使用
<button-inner></button-inner>

2、props属性传值

（1）属性取值

// script
new Vue({
	el: '#app',
	components:{
		"button-props":{
			template:`<div style="color:red;">参数1： {{ here }}:---参数2： {{fromHere}}</div>`,
			props:['here', 'fromHere']
		}
	}
});

// html使用
<button-props here="hello" from-here="world"></button-props>

PS：如果属性带“-”，props中需要驼峰取值

（2）在构造器向组件传值（v-bind）

// script
new Vue({
	el: '#app',
	data: {
		message: 'hello'
	},
	components:{
		"button-props":{
			template:`<div style="color:red;">参数1： {{ here }}:---参数2： {{fromHere}}</div>`,
			props:['here', 'fromHere']
		}
	}
});

// html使用
<button-props v-bind:here="message" :from-here="message"></button-props>

3、父子组件

// script
// 子组件
var city = {
	template:`<div>Sichuan of China</div>`
}
// 父组件
var parent = {
	template:
	`<div>
	<p> Panda from China!</p>
	<city></city>
	</div>`,
	components:{
		"city": city
	}
}

// 实例化
new Vue({
	el: '#app',
	// 定义局部组件
	components:{
		// 组件注册
		"parent": parent
	}
});

// html使用
<parent></parent>

4、完整示例代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue入门之组件</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 全局组件 -->
			<div>
				<button-counter></button-counter>
			</div>
			<!-- 局部组件 -->
			<div>
				<button-inner></button-inner>
			</div>
			<!-- 常规属性传值 -->
			<div>
				<button-props here="hello" from-here="world"></button-props>
			</div>
			<!-- v-bind传值 -->
			<div>
				<button-props v-bind:here="message" :from-here="message"></button-props>
			</div>
			<!-- 父子组件调用 -->
			<div>
				<parent></parent>
			</div>

		</div>

		<script type="text/javascript">
			// 定义全局组件
			Vue.component('button-counter', {
				data: function() {
					return {
						count: 0
					}
				},
				template: '<button v-on:click="count++">全局组件显示： {{ count }}</button>'
			});

			// 子组件
			var city = {
				template: `<div>Sichuan of China</div>`
			}
			// 父组件
			var parent = {
				template: `<div>
                <p> Panda from China!</p>
                <city></city>
            </div>`,
				components: {
					"city": city
				}
			}

			// 实例化
			new Vue({
				el: '#app',
				data: {
					message: 'hello'
				},
				// 定义局部组件
				components: {
					"button-inner": {
						data: function() {
							return {
								inner: 0
							}
						},
						template: '<button v-on:click="inner++">局部组件显示： {{ inner }}</button>'
					},
					// 取值
					"button-props": {
						template: `<div style="color:red;">参数1： {{ here }}:---参数2： {{fromHere}}</div>`,
						props: ['here', 'fromHere']
					},
					// 组件注册
					"parent": parent
				}
			});
		</script>
	</body>
</html>

1.8.制作模板

vue中的模板使用template来实现

1、选项模板

<div id="app">
</div>

<script type="text/javascript">
    // 实例化
    new Vue({
        el: '#app',
        data: {
            message: 'hello'
        },
        template:`<h1 style="color:red">我是选项模板</h1>`
    });
</script>

2、<template>标签模板

<div id="app">
    <template id="demo2">
        <h2 style="color:red">我是template标签模板</h2>
    </template>
</div>

<script type="text/javascript">
    // 实例化
    new Vue({
        el: '#app',
        data: {
            message: 'hello'
        },
        template:'#demo2'
    });
</script>

3、<script>标签模板

<div id="app">
</div>

<script type="x-template" id="demo3">
    <h2 style="color:red">我是script标签模板</h2>
</script>

<script type="text/javascript">
    // 实例化
    new Vue({
        el: '#app',
        data: {
            message: 'hello'
        },
        template:'#demo3'
    });
</script>

4、完整示例代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue入门之组件</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- template标签模板 -->
			<template id="demo2">
				<h2 style="color:red">我是template标签模板</h2>
			</template>
		</div>

		<!-- script标签模板 -->
		<script type="x-template" id="demo3">
			<h2 style="color:red">我是script标签模板</h2>
</script>

		<script type="text/javascript">
			// 实例化
			new Vue({
				el: '#app',
				data: {
					message: 'hello'
				},
				// 选项模板
				//template:`<h1 style="color:red">我是选项模板</h1>`
				//template:'#demo2'
				template: '#demo3'
			});
		</script>
	</body>
</html>

1.9.插槽slot

插槽，也就是slot，是组件的一块HTML模板(占位符)，一个slot最核心的两个问题是显不显示和怎样显示

1、单个slot

单个插槽，别名默认插槽、匿名插槽，不用设置name属性

<div id="app">
	<children1>
	<span>12345</span>
</children1>
</div>

<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		components: {
			children1: {
				template: "<button><slot></slot>单个插槽</button>"
			}
		}
	});
</script>

2、具名slot

插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现N次，出现在不同的位置

<div id="app">
	<children2>
	<span slot="first" @click="tobeknow">12345</span>
<span slot="second">56789</span>
</children2>
</div>

<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		methods: {
			tobeknow: function () {
				console.log("It is the parent's method");
			}
		},
		components: {
			children2: {//这个无返回值，不会继续派发  
				template: "<button><slot name='first'></slot>具名插槽，<slot name='second'></slot></button>"
			}
		}
	});
</script>

3、作用域slot

vue2.5版本中slot-scope取代了scope，来实现作用域插槽，主要用在组件调用中，具体在template标签上面使用slot-scope来获取插槽slot上面的属性值，获取值的为一个对象，slot-scope=”它可以取任意字符串”，在element-ui的组件中经常看到。

<div id="app">
	<!-- 将数据传递给组件 -->
	<tb-list :data="data">
		<!-- 获取slot上面的值 -->
		<template slot-scope="scope">
			<p>索引：{{JSON.stringify(scope)}}</p>
			<p>索引：{{scope.$index}}</p>
			<p>姓名:{{scope.row.name}}</p>
			<p>年龄: {{scope.row.age}}</p>
			<p>性别: {{scope.row.sex}}</p>
		</template>
	</tb-list>
</div>

<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			data: [{
				name: 'kongzhi1',
				age: '29',
				sex: 'man'
			}]
		},
		components: {
			// 作用域slot
			'tb-list': {
				template:
				`<ul>
				<li v-for="(item, index) in data">
				<slot :row="item" :$index="index"></slot>
				</li>
				</ul>`,
				// 获取值
				props: ['data']
			}
		}
	});
</script>

4、完整示例代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue入门之slot</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<children1>
				<span>12345</span>
			</children1>
			
			<children2>
				<span slot="first" @click="tobeknow">12345</span>
				<span slot="second">56789</span>
			</children2>
			
			<!-- 将数据传递给组件 -->
			<tb-list :data="data">
				<!-- 获取slot上面的值 -->
				<template slot-scope="scope">
<p>索引：{{JSON.stringify(scope)}}</p>
<p>索引：{{scope.$index}}</p>
<p>姓名:{{scope.row.name}}</p>
<p>年龄: {{scope.row.age}}</p>
<p>性别: {{scope.row.sex}}</p>
				</template>
			</tb-list>
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					data: [{
						name: 'kongzhi1',
						age: '29',
						sex: 'man'
					}]
				},
				methods: {
					tobeknow: function() {
						console.log("It is the parent's method");
					}
				},
				components: {
					// 单个slot
					children1: {
						template: "<button><slot></slot>单个插槽</button>"
					},
					// 具名slot
					children2: {
						template: "<button><slot name='first'></slot>具名插槽，<slot name='second'></slot></button>"
					},
					// 作用域slot
					'tb-list': {
						template: `<ul>
						<li v-for="(item, index) in data">
						<slot :row="item" :$index="index"></slot>
			</li>
			</ul>`,
						// 获取值
						props: ['data']
					}
				}
			});
		</script>
	</body>
</html>

 

 

 

 

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vuejs

前端

javascript

VUE [入门篇(三)] 的相关文章

随机推荐

  • IPv6头部

    一 IPv6数据包的结构 IPv6报文 分为三个部分 头部 扩展头 上层协议数据单元 IPv4报文 头部 上层协议数据单元 IPv6头部始终存在 大小固定40字节 扩展头可能有0个或多个 且长度不固定 二 IPv6头部 1 结构 2 域 P

  • ORALCE函数：LAG()和LEAD() 分析函数详解

    Lag和Lead分析函数可以在同一次查询中取出同一字段的前N行的数据 Lag 和后N行的数据 Lead 作为独立的列 在实际应用当中 若要用到取今天和昨天的某字段差值时 Lag和Lead函数的应用就显得尤为重要 当然 这种操作可以用表的自连

  • SpringBoot整合RabbitMQ详细案例（入门RabbitMQ看这一篇就够了）

    SpringBoot整合RabbitMQ详细案例 入门RabbitMQ看这一篇就够了 1 RabbitMQ的使用场景 1 1 异步处理 1 2 应用解耦 1 3 流量削峰 2 RabbitMQ 交换机介绍 2 1 Direct exchan

  • 第3课 微信开发者工具picker标签实现动态时间选择器与地区选择器：

    微信小程序picker标签实现动态时间选择器与地区选择器 运行效果如下 wxml代码如下

  • Vue实现搜索页面

    目录 一 效果 二 实现 一 效果 实现功能如下图所示 因为被腰斩 样式未调整 二 实现 直接上代码 pages Search vue 搜索页

  • remote: Support for password authentication was removed on August 13, 2021

    1 github在2021年8月14日七夕这天搞事情 如果这天你提交了github代码报错如下 问题 remote Support for password authentication was removed on August 13 2

  • 报错： ‘XXXX‘ is declared but its value is never read.Vetur(6133)

    引入的路径本没有问题 结果确报错 解决方法如下 1 在VScode工具的设置中找到设置 2 在搜索栏输入 vetur 并找到Vertur gt Validation Script 在比较靠下多滑动页面哦 3 最后关闭项目重新打开即可 报错消

  • 【C语言】如何使用 Visual studio 2019 编写，并编译和运行C代码?

    提示 该文章以 Visual studio 2019为例来进行说明 2019及以后的版本同样适用该文章 文章目录 一 创建一个新项目 二 在项目里创建一个源文件 三 编写C语言代码 四 编译和运行代码 五 将旧项目中的C文件添加到新项目中

  • [CISCN 2022 初赛]online_crt

    文章目录 涉及知识点 代码审计 解题过程 涉及知识点 CVE 2022 1292漏洞 OpenSSL ssrf 代码审计 app py源码 import datetime import json import os import socke

  • 权限篇

    权限篇 root 系统超级用户 UID为0 普通用户由root创建 UID从1000开始累计 系统中虚拟用户UID在1 999之间 由操作系创建 用户配置文件 etc passwd 新创建的用户 信息会追加到这个文件结尾 sbin nolo

  • Git更新国内清华源

    sudo sed i s http archive ubuntu com https mirrors tuna tsinghua edu cn g etc apt sources list sudo sed i s http securit

  • 浏览器network报错：ERR_CERT_AUTHORITY_INVALID

    1 今天遇到个问题在访问自己写的网站时 其中有个获取验证码功能 是后端Https接口 请求没到后端 浏览器报了Failed to load resource net ERR CERT AUTHORITY INVALID 临时解决办法 1 其

  • 深入理解Java虚拟机jvm-栈溢出-栈帧过多java.lang.StackOverflowError

    栈溢出 示例 虚拟机参数 结果 原因分析 示例 栈溢出 栈帧过多 栈内存过小 每个方法被执行的时候 Java虚拟机都会同步创建一个栈帧 1 Stack Frame 用于存储局部变量表 操作数栈 动态连接 方法出口等信息 java lang

  • CSDN常用字体设置

    一 字体设置 font face 微软雅黑 color FF8C00 size 3 在这里放入需要修改颜色的语句 font 效果 在这里放入需要修改颜色的语句 face 是调节字体类型 可随意改写 楷体 黑体 微软雅黑 宋体等 color

  • 贝叶斯网络之父Judea Pearl力荐、LeCun点赞，这篇长论文全面解读机器学习中的因果关系

    选自arXiv 作者 Bernhard Sch lkopf机器之心编译 机器之心编辑部 本文认为机器学习和人工智能领域中的待解难题本质上与因果关系有关 图灵奖得主 贝叶斯网络之父 Judea Pearl 曾自嘲自己是 AI 社区的反叛者 因

  • C++ 可扩展的内存缓冲区

    类声明 CMemBuffer h pragma once class CMemBuffer public CMemBuffer DWORD dwSize 0 CMemBuffer void 申请内存 BOOL Realloc DWORD d

  • 服务器测速

    一键测试服务器到国内的速度脚本Superspeed sh wget https raw githubusercontent com oooldking script master superspeed sh chmod x superspe

  • 关于qsort函数

    1 qsort函数介绍 A 对应头文件

  • C# DataGridView控件选中行获取其值

    DataGridView的几个基本操作 1 获得某个 指定的 单元格的值 dataGridView1 Row i Cells j Value 2 获得选中的总行数 dataGridView1 SelectedRows Count 3 获得当

  • VUE [入门篇(三)]

    Vue入门 目录 Vue入门 1 6 自定义指令 1 示例代码 2 调试步骤 3 参数说明 4 生命周期 1 7 组件基础 1 组件注册 2 props属性传值 3 父子组件 4 完整示例代码 1 8 制作模板 1 选项模板 2 标签模板

热门标签