[Introducción a Vue] Sintaxis: interpolación, instrucciones, filtros, propiedades calculadas, oyentes

Language 2023-09-29 22:53:44 views: null

Tabla de contenido

1. Sintaxis de plantilla

1.1 Interpolación

1.1.1 Texto

1.1.2 Análisis HTML

1.1.3 Propiedades

1.1.4 Expresiones

1.2 Instrucciones

1.2.1 Instrucciones principales

1.2.3 Parámetros dinámicos

2. Filtrar

2.1 Filtro local

2.2 Filtro global

3. Propiedades calculadas

4. Monitorear

5. Caso de disposición de asientos

Resumen: la diferencia entre las propiedades calculadas y las propiedades de escucha

1. Sintaxis de plantilla

1.1 Interpolación

        Vue.js utiliza una sintaxis de plantilla basada en HTML que permite a los desarrolladores vincular declarativamente el DOM a los datos de la instancia de Vue subyacente. Todas las plantillas de Vue.js son HTML legales, por lo que pueden ser analizadas por navegadores y analizadores de HTML que sigan la especificación. Vue compila la plantilla en un DOM virtual y, combinado con el sistema de respuesta, puede calcular de forma inteligente la cantidad mínima de componentes que deben volver a renderizarse y minimizar la cantidad de operaciones DOM.

Sintaxis de plantilla HTML:  se trata de una tecnología de plantilla basada en cadenas que toma cadenas y datos como entrada y construye una cadena HTML completa reemplazando los marcadores de posición con los datos requeridos mediante expresiones regulares.

1.1.1 Texto

        Usando directamente el formulario {{xxx}}, la etiqueta será reemplazada por el valor del atributo xxx en el objeto de datos (datos). Cuando el valor del atributo xxx en el objeto de datos vinculado cambia, el valor en el punto de interpolación también cambiará ( Encuadernación bidireccional )

<div id="xw">
       { {msg}}
</div>

1.1.2 Análisis HTML

Si desea generar datos en formato html, debe utilizar el comando v-html .

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>html解析</title>
		<!-- 1.导入工具 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	</head>
	<body>
		<!-- 2.定义边界 -->
		<div id="xw">
			<div v-html="htmlstr"></div>
		</div>
		<!-- 3.构建vue实例并绑定边界 -->
		<script>
			new Vue({
				el: "#xw",
				data() {
					return {
						htmlstr: '<h3 style="color:blue;">这是一个html片段</h3>'
					}
				}
			})
		</script>
	</body>
</html>

1.1.3 Propiedades

Los valores en los atributos HTML deben usar la directiva v-bind. El tipo es el mismo que $("#xxx").attr(Name, Val) en jQuery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>html解析</title>
		<!-- 1.导入工具 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
		<style>
			.blueClass{
				font-size: 30px;
				color: skyblue;
			}
		</style>
	</head>
	<body>
		<!-- 2.定义边界 -->
		<div id="xw">
			<p v-bind:class="hontColor">哈哈</p>
		</div>
		<!-- 3.构建vue实例并绑定边界 -->
		<script>
			new Vue({
				el: "#xw",
				data() {
					return {
						hontColor:"blueClass",
					}
				}
			})
		</script>
	</body>
</html>

También se puede escribir así:

//在html使用v-bind:style指令设置样式
<p v-bind:style="color">哈哈</p>
data() {
  return {
		//定义一个属性，其值为所需样式
		color:"color: yellowgreen;"
	}
}

1.1.4 Expresiones

 Vue proporciona soporte completo para expresiones de JavaScript:

  • { {str.substr(0,3)}}
  • { {número + 1 }}
  • { {¿vale? 'SÍ NO' }}
  • <li v-bind:id="'list-' + id">Mi ID es generado dinámicamente por js</li>

Ejemplo 1: interceptación de personajes

<!-- 在html中加入元素，定义表达式 -->
<p>{
   
   {str.substring(5,9)}}</p>
data() {
	return {
		str: '大家都叫我king'
    }
}

Ejemplo 2: Es muy simple, así que no lo demostraré uno por uno.

<p>数字:{
   
   {number+1}}</p>
<p>{
   
   {ok ? 'yes' : 'no'}}</p>
<span :id="'users_id_'+id">小威</span>
new Vue({
    el: "#xw",
        data() {
            return {
                number: 99,
                ok: false,
                id: 66
            }
        }
    })

1.2 Instrucciones

1.2.1 Instrucciones principales

 v-if|v-else|v-else-if: determina si se representa el elemento en función del valor bool de la expresión posterior

 v-show: similar a v-if, excepto que representará elementos cuya expresión detrás de ellos sea falsa y agregará código CSS a dichos elementos: style="display:none"

 v-for: recorrido tipo JS

 v-bind: Ya usado arriba, agrega atributos o elementos

 v-on: v-on: (también se puede reemplazar por @), como se mencionó en el artículo anterior, se usa para llamar a funciones.

 v-model: se utiliza para actualizar automáticamente el valor de los elementos vinculados  

Ejemplo 1:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>核心指令</title>
		<script src="js/vue&jquery.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="xw">
			分数：<input v-model="score" />
			<div v-if="score>80">优秀</div>
			<div v-else-if="score>60">良好</div>
			<div v-else="score<60">还需努力</div>
		</div>

	</body>
	<script type="text/javascript">
		new Vue({
			el: '#xw',
			data() {
				return {
					score: 60
				}
			}
		})
	</script>

</html>

Ejemplo dos:

<div v-show="score==90">v-show-上优秀学员名单</div>

Ejemplo 3:

Combinado con v-model para implementar cuadros desplegables y casillas de verificación

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>核心指令</title>
		<script src="js/vue&jquery.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="xw">
			<p>v-for</p>
			<select v-model="hobbySelected">
				<option v-for="h in hobby" :value="h.id">{
   
   {h.name}}</option>
			</select>
			<div v-for="h in hobby">
				<input :value="h.id" type="checkbox" />{
   
   {h.name}}
			</div>
		</div>

	</body>
	<script type="text/javascript">
		new Vue({
			el: '#xw',
			data() {
				return {
					hobby: [{
							id: "1",
							name: "beautifulgirl"
						},
						{
							id: "2",
							name: "按摩"
						},
						{
							id: "3",
							name: "洗jio"
						}
					],
					hobbySelected: 3
				};
			}
		})
	</script>

</html>

Ejemplo 4:

<!--参数：href-->
<div>
    <a v-bind:href="url">baidu</a>
</div>
 
<!--
参数：动态参数.
attname需要在data中定义,
注意：attname要全部小写!!
-->
<div>
    <a v-bind:[attrname]="url">baidu</a>
    <button v-on:[evname]="clickme">点我看看</button>
</div>

1.2.3 Parámetros dinámicos

Nota: En los parámetros dinámicos, el nombre de la variable utilizada como parámetro (como: attrname) debe estar todo en minúsculas; de lo contrario, no será válido. !

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态参数</title>
		<script src="js/vue&jquery.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="xw">
			<p>动态参数</p>
			<input v-model="evname" />
			<button v-on:[evname]="handle">动态参数</button>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#xw',
			data() {
				return {
					evname:'dblclick'
			    }
			    methods: {
				    handle() {
				    	alert("触发事件");
				    }
			    }
		    })
	</script>
</html>

Vue proporciona abreviaturas específicas para las dos instrucciones más utilizadas, v-bind y v-on.

instrucción abreviatura Ejemplo
enlace v:xxx :xxx v-bind:href abreviado como:href
v-on:xxx @xxx v-on:click se abrevia como @click

2. Filtrar

        Vue permite filtros personalizados, generalmente utilizados para el formato de texto común. Los filtros están disponibles en dos lugares: interpolación de doble llave y expresiones v-bind . Los filtros deben agregarse al final de las expresiones js, usando operaciones de canalización. Símbolo " | "

2.1 Filtro local

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤器</title>
		<script src="js/vue&jquery.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="xw">
            {
   
   {msg}}<br />
			{
   
   {msg|single}}<br />
			{
   
   {msg|param(2,3)}}
		</div>
		<script type="text/javascript">
			// 绑定边界	ES6具体体现
			new Vue({
				el: '#xw',
				data() {
					return {
						msg: "bug快离开~bug快离开~"
					};
				},
				filters: {
					'single': function(val) {
						return val.substring(2, 3);
					},
					'param': function(val, start, end) {
						return val.substring(start, end);
					}
				}
			})
		</script>
	</body>
</html>

Nota 1: La función de filtro acepta el valor de la expresión como primer parámetro 
Nota 2: Los filtros se pueden concatenar     
        { { mensaje | filtroA | filtroB }}
Nota 3: Los filtros son funciones de JavaScript, por lo que pueden aceptar parámetros: 
        { { mensaje | filtroA('arg1', arg2) }} 

2.2 Filtro global

Caso de conversión de tiempo: 

//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
	//debugger;
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};

function fmtDate(date, pattern) {
	var ts = date.getTime();
    var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(ts).format(pattern);
    }
    return d.toLocaleString();
};

Copie date.js (formato de fecha) en el directorio js del proyecto e introdúzcalo en la página.
Definir filtros globales 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤器</title>
		<script src="js/date.js"></script>
		<script src="js/vue&jquery.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="xw">
			<p>{
   
   {date | fmtDate}}</p>
			无过滤器:<br />
			{
   
   {date}}
		</div>
		<script type="text/javascript">
			// 全局过滤器
			Vue.filter('fmtDate', function(value) {
				return fmtDate(value, 'yyyy年MM月dd日')
			});
			// 绑定边界	ES6具体体现
			new Vue({
				el: '#xw',
				data() {
					return {
						date: new Date()
					};
				}
			})
		</script>
	</body>
</html>

3. Propiedades calculadas

   Las propiedades calculadas se pueden utilizar para calcular rápidamente las propiedades que se muestran en una vista. Estos cálculos se almacenarán en caché y se actualizarán solo cuando sea necesario.

Escenarios de uso: cuando un atributo requiere operaciones lógicas complejas para obtener su valor, puede usar atributos calculados. Se pueden completar varias lógicas complejas en un atributo calculado, incluidas operaciones, llamadas a métodos, etc., siempre que se devuelva un resultado en el fin.


Sintaxis: calculado:{}

Estuche para carrito de compras:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
		<script src="js/vue&jquery.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="xw">
			<p>计算属性</p>
			<table border="1" style="width: 600px;height: 300px;">
				<tr>
					<td>物品</td>
					<td>单价</td>
					<td>
						数量
					</td>
					<td>
						小计
					</td>
				</tr>
				<tr>
					<td>帽子</td>
					<td>{
   
   {maoziDanjia}}</td>
					<td>
						<input v-model="maozi" />
					</td>
					<td>
						{
   
   {maoziTotal}}
					</td>
				</tr>
				<tr>
					<td>衣服</td>
					<td>{
   
   {yifuDanjia}}</td>
					<td>
						<input v-model="yifu" />
					</td>
					<td>
						{
   
   {yifuTotal}}
					</td>
				</tr>
				<tr>
					<td>裤子</td>
					<td>{
   
   {kuziDanjia}}</td>
					<td>
						<input v-model="kuzi" />
					</td>
					<td>
						{
   
   {kuziTotal}}
					</td>
				</tr>
				<tr>
					<td>总价</td>
					<td colspan="3">{
   
   {total}}</td>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界	ES6具体体现
		new Vue({
			el: '#xw',
			data() {
                //定义所需属性值
				return {
					maoziDanjia: 10,
					yifuDanjia: 30,
					kuziDanjia: 20,
					maozi: 1,
					yifu: 1,
					kuzi: 1,
					km: 2,
					m: 2000
				};
			},
			computed: {
				maoziTotal() {
					return this.maoziDanjia * this.maozi;
				},
				yifuTotal() {
					return this.yifuDanjia * this.yifu;
				},
				kuziTotal() {
					return this.kuziDanjia * this.kuzi;
				},
				total() {
					return this.maoziTotal + this.yifuTotal + this.kuziTotal;
				}
			}
		})
	</script>
</html>

4. Monitorear

Al escuchar la vigilancia del atributo, podemos responder a los cambios de datos a través de la vigilancia.
   

Sintaxis: ver:{}

Ejemplo: conversión de unidades entre metros y centímetros

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
		<script src="js/vue&jquery.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="xw">
			<p>监听属性</p>
			米：<input v-model="m" />
			厘米：<input v-model="cm" />
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界	ES6具体体现
		new Vue({
			el: '#xw',
			data() {
				return {
					m: 2,
					cm: 200
				};
			},
			watch: {
				// v指的是m变量
				m: function(v) {
					this.cm = parseInt(v) * 100;
				},
				// v指的是km变量
				cm: function(v) {
					this.m = parseInt(v) / 100;
				}
			}
		})
	</script>
</html>

5. Caso de disposición de asientos

<!DOCTYPE html>
<html>
	<head>
		<title>排座</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2>排座</h2>
			<input type="text" v-model="seatInput1">
			<input type="text" v-model="seatInput2">
			<input type="text" v-model="seatInput3">
			<hr>
			<h3>用户:</h3>
			<ul>
				<!-- 遍历过滤器传来的值 -->
				<li v-for="user in filteredUsers" :key="user.id">{
   
   { user.name }}</li>
			</ul>
			<hr>
		</div>

		<script>
			new Vue({
				el: '#app',
				data: {
					seatInput1: '',
					seatInput2: '',
					seatInput3: '',
					users: [{
							id: 1,
							name: '老王'
						},
						{
							id: 2,
							name: '老六'
						},
						{
							id: 3,
							name: '老八'
						},
						{
							id: 4,
							name: '老聂'
						},
						{
							id: 5,
							name: '老五'
						}
					]
				},
				/* 定义一个filteredUsers计算属性 */
				computed: {
					/* 使用filter方法来过滤users数组中的元素。filter方法接受一个回调函数作为参数，该回调函数会对数组中的每个元素进行判断，并返回一个新的数组，其中包含满足条件的元素。 */
					filteredUsers() {
						return this.users.filter(
							/* 使用=>箭头函数的语法来定义一个匿名函数。这个匿名函数接受一个参数user，表示users数组中的每个元素。 */
							user => {
								/* 使用逻辑运算符&&来判断user.name是否不等于seatInput1、seatInput2和seatInput3的值。如果满足这个条件，说明user.name不等于任何一个输入框的值，那么这个元素就会被保留在过滤后的数组中。 */
								return user.name !== this.seatInput1 &&
									user.name !== this.seatInput2 &&
									user.name !== this.seatInput3
							});
					}
				}
			});
		</script>
	</body>
</html>

Resumen: la diferencia entre las propiedades calculadas y las propiedades de escucha

Propiedad calculada: propiedad que se calcula en función de otras propiedades. Su valor se calcula dinámicamente en función de las propiedades de las que depende, se almacena en caché y solo se vuelve a calcular cuando cambian las propiedades dependientes. Las propiedades calculadas son adecuadas para escenarios que requieren cálculos complejos o procesamiento basado en otras propiedades. Al utilizar propiedades calculadas, se puede encapsular una lógica compleja, lo que hace que el código sea más claro y fácil de mantener.

Atributo de escucha: es un atributo que se utiliza para escuchar cambios en atributos específicos y realizar las operaciones correspondientes. Cuando la propiedad monitoreada cambia , la función de devolución de llamada especificada se puede ejecutar para responder al cambio. Escuchar propiedades es adecuado para escenarios en los que es necesario realizar operaciones asincrónicas o costosas cuando las propiedades cambian. Al utilizar propiedades de escucha, puede monitorear los cambios de propiedades en tiempo real y realizar las operaciones correspondientes, como enviar solicitudes de red o realizar cálculos complejos.

        Las propiedades calculadas son adecuadas para escenarios donde los resultados se calculan en función de otras propiedades, mientras que las propiedades de escucha son adecuadas para escenarios donde los cambios de propiedades deben monitorearse en tiempo real y realizarse las operaciones correspondientes. La diferencia entre los dos es que las propiedades calculadas calculan el resultado en función de otras propiedades, mientras que las propiedades de escucha realizan las operaciones correspondientes cuando las propiedades cambian.

Supongo que te gusta

Origin blog.csdn.net/Justw320/article/details/132985947
Recomendado
Clasificación
Diario
Más
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(33)

Code World

© 2018 codetd.com