Tabla de contenido

Tres, función de renderizado de renderizado

1. Ranura

Las ranuras se pueden dividir en ranuras predeterminadas, ranuras con nombre (ranuras con un nombre) y ranuras con ámbito. Las ranuras nos permiten pasar plantillas para subcomponentes cuando los llamamos.

1. Ranura predeterminada

Una ranura sin nombre es la ranura predeterminada, y una salida <ranura> sin nombre tendrá el nombre implícito "predeterminado".

<slot></slot>
或者
<slot name="default"></slot>

El contenido dentro de la etiqueta del componente se representará en la ranura predeterminada:

<body>
	<div id="app">
		<!-- 组件标签里面的内容需要使用插槽来接收，否则无法渲染出来，
             而里面的内容会默认渲染到默认插槽中 -->
		<my-a>hello vue</my-a>
	</div>
	<script>
		// 定义组件
		let myA={
			template:`
				<div>
					<p>1111111</p>
					<slot></slot>
                    <slot></slot>
					<p>3333333</p>
				</div>
			`
		}
		new Vue({
			el:"#app",
            //局部注册组件
			components:{
				"my-a":myA
			}
		})
	</script>
</body>

El resultado es el siguiente:

2. Ranura con nombre

Una ranura con un nombre es una ranura con nombre.

Cuando necesitamos representar el contenido correspondiente en la etiqueta del componente en la ranura correspondiente, usamos la ranura con nombre. En este momento, necesitamos usar la plantilla plantilla en la etiqueta del componente:

<slot name='header'></slot>

<template v-slot:header>头部内容</template>

<body>
	<div id="app">
		<my-a>
			<!-- 使用 v-slot:插槽名 ，这样就可以把相应内容放到相应插槽中 -->
			<template v-slot:footer>底部内容</template>
            <!-- default 表示默认插槽 -->
			<template v-slot:default>hello vue</template>
			<template v-slot:center>中间内容</template>
			<!-- <template v-slot:header>头部内容</template> -->
			<!-- v-slot: 可以简写成 #  -->
			<template #header>头部内容</template>
		</my-a>
	</div>
	<script>
		// 定义组件
		let myA={
			template:`
				<div>
					<p>1111111</p>
					<slot></slot>
                    <slot></slot>
					<p>3333333</p>
					<hr/>
					<slot name='header'></slot>					
					<slot name='center'></slot>					
					<slot name='footer'></slot>	
				</div>
			`
		}
		new Vue({
			el:"#app",
			components:{
				"my-a":myA
			}
		})
	</script>
</body>

El resultado es el siguiente:

3. Ranuras de alcance

Usamos ranuras para pasar datos en subcomponentes, y los datos pasados deben obtenerse usando ranuras con alcance en etiquetas de componentes.

<slot :row='item'></slot>

<template slot-scope="scope">{
   
   {scope}}</template>

<body>
	<div id="app">
		<!-- 父组件给子组件传递数据  :arr="arrs" -->
		<my-a :arr="arrs">
			<!-- v-slot对应插槽的name，这样就可以把相应内容放到相应插槽中 -->
			<template v-slot:footer>底部内容</template>
			<div>hello vue</div>
			<template v-slot:center>中间内容</template>
			<!-- <template v-slot:header>头部内容</template> -->
			<!-- v-slot: 可以简写成 #  -->
			<template #header>头部内容</template>
			<!-- 作用域插槽 slot-scope="变量"  该变量用于接收数据-->
			<template slot-scope="scope">
				{
   
   {scope}}
			</template>
		</my-a>
	</div>
	<script>
		// 定义组件
		let myA={
			// 接收父组件传递过来的数据
			props:['arr'],
			template:`
				<div>
					<p>1111111</p>
					<slot></slot>
					<slot></slot>
					<p>3333333</p>
					<hr/>
					<slot name='header'></slot>					
					<slot name='center'></slot>					
					<slot name='footer'></slot>	
					<hr/>
					<ul>
						<li v-for='item in arr'>
							<slot :row='item'></slot>	
						</li>	
					</ul>	
				</div>
			`
		}
		new Vue({
			el:"#app",
			data:{
				arrs:[
					{id:1,name:'zhangsan'},
					{id:1,name:'lisi'},
					{id:1,name:'wangwu'},
				]
			},
			components:{
				"my-a":myA
			}
		})
	</script>
</body>

El resultado es el siguiente:

Como puede ver, el "hola vue" de la ranura predeterminada no se representa porque la ranura del alcance no tiene nombre, por lo que también es una ranura predeterminada. La ranura del alcance sobrescribirá el contenido de la ranura predeterminada anterior. La solución es agregar un nombre a la ranura del alcance:

<slot name="content" :row='item'></slot>

<!-- v-slot:插槽名字="变量" -->
<template v-slot:content="scope">{
   
   {scope}}</template>

2. Comandos personalizados

La mayoría de los comandos en Vue se llaman con v-. Sin embargo, a veces las instrucciones proporcionadas por Vue no satisfacen nuestras necesidades y en este momento necesitamos instrucciones personalizadas.

Las directivas nos permiten realizar operaciones de bajo nivel en elementos DOM ordinarios. Se puede registrar global o localmente:

Registro mundial:

Ver.directiva()

Registro parcial:

Agregue directivas de opciones en la instancia o componente de Vue

Función de gancho:

Un objeto de definición de instrucción puede proporcionar las siguientes funciones de enlace (todas opcionales):

bind: Llamado solo una vez, cuando la directiva está vinculada al elemento por primera vez. La configuración de inicialización única se puede realizar aquí.
inserted: se llama cuando el elemento enlazado se inserta en el nodo principal (solo se garantiza que existe el nodo principal, pero no necesariamente se inserta en el documento).
update: se llama cuando se actualiza el VNode del componente, pero puede suceder antes de que se actualice su VNode secundario . El valor de la directiva puede o no haber cambiado. Pero puede ignorar las actualizaciones de plantillas innecesarias comparando los valores antes y después de la actualización.

componentUpdated : Llamado después de que se actualice el VNode del componente donde se encuentra el comando y sus VNodes secundarios .
unbind: Llamado solo una vez, cuando la directiva no está vinculada al elemento.

Los parámetros de la función gancho son el, bindingyvnodeoldVnode。

el: El elemento vinculado a la instrucción se puede utilizar para manipular directamente el DOM.
binding: Un objeto que contiene las siguientes propiedades:
- name: Nombre del comando, excluyendo v- el prefijo.
- value: el valor vinculante de la directiva
- oldValue: El valor anterior al que estaba vinculada la directiva, solo disponible en update y componentUpdated ganchos. Disponible ya sea que el valor haya cambiado o no.
- expression: Expresión de instrucción en forma de cadena.
- arg: Parámetros pasados al comando, opcional.
- modifiers: Un objeto que contiene modificadores.
vnode: El nodo virtual generado por la compilación de Vue.
oldVnode: Nodo virtual anterior, solo disponible en update y hooks.componentUpdated

<body>
	<div id="app">
		<!-- 自定义指令 v-focus  -->
		用户名：<input type="text" v-focus="bgColor">
		<!-- 自定义指令 v-myshow  -->
		<input type="text" v-myshow="msg">
	</div>
	<script>
		// 全局注册自定义指令 Vue.directive('指令名称',{配置对象})
		Vue.directive('focus', {
			inserted(el, binding) {
				// console.log(el,binding);
				// 让输入框自动聚焦
				el.focus()
			},
			// 执行一次性的初始化设置
			bind(el, binding, vnode) {
				console.log(el,binding,vnode);
				el.style.backgroundColor = binding.value
			}
		})
		new Vue({
			// 局部注册自定义指令
			directives:{
				// 指令名称:{配置对象}
				'myshow': {
					bind(el,binding,vnode){
						el.value = binding.value
					}
				}
			},
			el: "#app",
			data: {
				bgColor: 'pink',
				msg: 'hello'
			}
		})
	</script>
</body>

El resultado es el siguiente:

El enlace de parámetros imprime el resultado:

Tres, función de renderizado de renderizado

Vue recomienda usar plantillas para crear su HTML en la mayoría de los casos. En algunos escenarios, sin embargo, realmente necesita todas las capacidades de programación de JavaScript. En este punto, puede usar funciones de representación , que están más cerca del compilador que las plantillas.

Cuando definimos un componente, generalmente usamos una plantilla para crear una plantilla, y el uso de una plantilla para crear una plantilla eventualmente se compilará en una función de procesamiento, y la función de procesamiento creará una plantilla.

ejemplo:

Usar plantilla para crear una plantilla:

<body>
	<div id="app">
		<my-a></my-a>
	</div>
	<script>
		let myA = {
			template:`
				<div>
					<ul>
						<li v-for='item in arrs'>
							{
   
   {item.name}}	
						</li>	
					</ul>
				</div>
			`,
			data(){
				return {
					msg:"我是一个div标签",
					arrs:[
						{id:1, name:'zhangsan', age:12},
						{id:2, name:'lisi', age:13},
						{id:3, name:'wangwu', age:14},
					]
				}
			}
		}
		new Vue({
			el:"#app",
			components:{
				'my-a': myA
			}
		})
	</script>
</body>

resultado:

Utilice la función de representación:

<body>
	<div id="app">
		<my-a></my-a>
	</div>
	<script>
		let myA = {
			render(h){
                //遍历创建li标签
				let lis = this.arrs.map(item => {
					return h('li', {}, item.name)
				})
				//三个参数：
				// 第一个参数：创建的标签名称,
				// 第二个参数：一个数据对象，可以设置标签样式、属性等
				// 第三个参数：标签内容，可以写成数组
				return h('ul', {
					style:{
						backgroundColor: 'pink'
					}
				}, lis)
			},
			data(){
				return {
					msg:"我是一个div标签",
					arrs:[
						{id:1, name:'zhangsan', age:12},
						{id:2, name:'lisi', age:13},
						{id:3, name:'wangwu', age:14},
					]
				}
			}
		}
		new Vue({
			el:"#app",
			components:{
				'my-a': myA
			}
		})
	</script>
</body>

El resultado es el siguiente:

4. Filtrar

Vue.js permite filtros personalizados que se pueden usar para algunos formatos de texto comunes. Los filtros se pueden usar en dos lugares: interpolación de llaves dobles y expresiones v-bind. Los filtros deben agregarse al final de las expresiones de JavaScript, indicados por el símbolo de barra vertical " | ".

Filtro de registro global:

Ver.filtro()

Registro parcial:

Agregue filtros de opciones a la instancia o componente de Vue

Ejemplo:
Use filtros para marcas de tiempo y texto:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
	<!-- 引入momentjs -->
	<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
</head>
<body>
	<div id="app">
		<!-- 在插值语法中使用 -->
		{
   
   {time | fmtDate}}
		<!-- 在v-bind中使用 -->
		<div :title="msg | upper">鼠标悬浮查看</div>
	</div>
	<script>
		// 全局注册过滤器 Vue.filter('过滤器名称',过滤器格式处理函数)
		Vue.filter('fmtDate', function(val){
			// 参数val就是需要过滤的值，即管道符前面的值
			// 使用momentjs库将时间戳转换为年月日时分秒 (需要引入monentjs库)
			return moment(val).format('YYYY-MM-DD HH:mm:ss')
		})
		new Vue({
			// 局部注册过滤器
			filters:{
				upper(val){
					// 转成大写
					return val.toUpperCase()
				}
			},
			el:"#app",
			data:{
				time: new Date().getTime(),
				msg: 'hello'
			}
		})
	</script>
</body>
</html>

El resultado es el siguiente:

Tragamonedas basadas en Vue, instrucciones personalizadas, funciones de renderizado, filtros

1. Ranura

1. Ranura predeterminada

2. Ranura con nombre

3. Ranuras de alcance

2. Comandos personalizados

Tres, función de renderizado de renderizado

4. Filtrar

Supongo que te gusta