Tabla de contenido
1.4 Caracteres de control comunes
1.4.1 Casos completos de caracteres de uso común
2.1 Introducción y definición de componentes
2.2 Comunicación de componentes
2.2.1 Parámetros de paso de componentes (padre->hijo)
2.2.1 Parámetros de paso de componentes (secundario -> padre)
1. Controlador de eventos
1.1 Encuadernación de estilo
- enlace de clase
Uso: v-bind:class="expresión": tipo de expresión: cadena, matriz, objeto
- encuadernación de estilo
Uso: v-bind:style="expresión": Tipo de expresión: cadena, matriz, objeto
Ejemplo:
<--定义示例样式-->
<style>
.fontClass {
font-size: 40px;
}
.colorClass {
color: blue;
}
</style>
<!--使用-->
<p>
<span v-bind:class="fc">class</span>
</p>
<p>
<!--简写-->
<span :class="ac">class</span>
</p>
<p>
<!--直接使用style样式单-->
<span style="font-size: 40px; color:blue;">stype</span>
<br/>
<!-- 使用花括号，多个属性逗号分隔-->
<span :style="{fontSize:fontSize+'px',color: color}">style样式</span>
<br/>
<span :style="myStyle">test</span>
</p>var vm = new Vue({
el: "#xw",
data: {
fc: 'fontClass',
ac: ['fontClass', 'colorClass'],
fontSize: 40,
color: 'green',
//样式对象，注意：样式名使用驼峰命名，如：fontSize
myStyle: {
fontSize: '50px',
color:'red',
fontWeight: 'bold'
}
}
});1.2 Modificadores de eventos
A continuación se muestran varios modificadores de eventos de uso común:
<!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- click 事件只能点击一次 --> <a v-on:click.once="doThis"></a> <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 添加事件侦听器时使用事件捕获模式 --> <div v-on:click.capture="doThis">...</div>
Ejemplo:
<div>接收消息：{
{receverMsg}}</div>
<p>
<!--响应多次或一次点击事件-->
<input type="text" v-model="sendMsg">
<button @click="sender">发送(多次)</button>
<button @click.once="sender">发送(一次)</button>
</p>
<p>
<!-- 阻止表单提交 -->
<form action="testAction.action" method="post" @submit.prevent="doSubmit()">
<label>名称</label>
<input type="text" name="name"/>
<input type="submit" value="提交"/>
</form>
</p>new Vue({
el: "#xw",
data: {
receverMsg: null,
sendMsg: null
},
methods: {
sender: function() {
this.receverMsg = this.sendMsg;
},
doSubmit: function() {
alert('ok');
}
}
});Nota: ¿Qué es la difusión de eventos?
Cuando hacemos clic en el div superior, se activa el evento de clic. Sin embargo, a medida que se propaga el evento de burbuja, también se activará el evento de clic del div debajo del div. Esta es la propagación del evento de burbuja.
1.3 Modificadores clave
Vue permite agregar modificadores de teclas para v-on cuando escucha eventos de teclado.
| Alias de clave | significado |
|---|---|
| .ingresar | Ingrese la clave de confirmación |
| .pestaña | Tecla de tabulación |
| .borrar | Capturar las teclas "eliminar" y "retroceso" |
| .Esc | La tecla Esc en la esquina superior izquierda del teclado, la tecla Cancelar |
| .espacio | barra espaciadora |
| .arriba | superior |
| .abajo | Abajo |
| .izquierda | izquierda |
| .bien | bien |
| .control | tecla Ctrl |
| .cambio | tecla Shift |
Ejemplo: responder para ingresar eventos clave
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue&jquery.js"></script>
</head>
<body>
<div id="xw">
<input type="text" @keyup.13="doSubmit" v-model="name">
</div>
<script>
var vm = new Vue({
el: "#xw",
data: function() {
return {
name: 'hello 靓仔'
}
},
methods: {
doSubmit: function() {
alert("响应enter，" + this.name);
}
}
});
</script>
</body>
</html>1.4 Caracteres de control comunes
1.4.1 Casos completos de caracteres de uso común
Al implementar una página de registro de tipos, puede familiarizarse con los controles utilizados comúnmente. Cuadro de texto/cuadro de contraseña/campo de texto/selección de radio/selección múltiple/lista desplegable
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue&jquery.js"></script>
</head>
<body>
<div id="xw">
<div>
<label>账号：</label>
<input type="text" v-model="uname">
</div>
<div>
<label>密码：</label>
<input type="password" v-model="upwd">
</div>
<div>
<label>年龄：</label>
<input type="text" v-model.number="age">
</div>
<div>
<label>性别：</label>
<input type="radio" v-model="sex" value="1">男
<input type="radio" v-model="sex" value="2">女
</div>
<div>
<label>爱好：</label>
<div style="display: inline;" v-for="h in hobbies">
<input type="checkbox" :value="h.id" v-model="hobby" />{
{h.name}}
</div>
</div>
<div>
<label>地区</label>
<select v-model="selectedCity">
<option value="">-- 请选择 --</option>
<option v-for="c in city" :value="c.id">{
{c.name}}</option>
</select>
</div>
<div>
<label>备注：</label>
<textarea v-model.lazy="remark"></textarea>
</div>
<div>
<input type="checkbox" v-model="agreed">是否已阅读并同意协议
</div>
<div>
<button @click="submit" :disabled="disabled">提交</button>
</div>
</div>
<script>
var vm = new Vue({
el: "#xw",
data: {
uname: '',
upwd: '',
age: '',
sex: 1,
//用于通过v-for指令输出多选框列表
hobbies: [{
id: '1',
name: 'music'
},
{
id: '2',
name: 'basketball'
},
{
id: '3',
name: 'travel'
}
],
/*
* 用于通过v-model双向绑定,保存用户的选择。
* 此处为多选，需要通过数组接收，否则无法
* 正常接收复选框的值，且复选框的行为也不正常，
* 可能出现要么全部被选择，要么全部被取消的情况
*/
hobby: [],
remark: null,
//用于生成地区选择列表
city: [{
id: "1",
name: "长沙"
},
{
id: "1",
name: "株洲"
},
{
id: "1",
name: "湘潭"
},
{
id: "1",
name: "衡阳"
}
],
//用于保存用户选择的地区
selectedCity: '',
//是否同意协议,默认值为false
agreed: false,
//提交按钮是否禁用,默认为true
disabled: true
},
//监控agreed属性,如果同意协议则将提交按钮
//设置为可用,否则提交按钮为禁用状态
watch: {
agreed: function(val) {
if (val) {
this.disabled = false;
} else {
this.disabled = true;
}
}
},
/* 获取内容 */
methods: {
submit: function() {
let data = {
uname: this.uname,
upwd: this.upwd,
age: this.age,
sex: this.sex,
hobby: this.hobby,
city: this.selectedCity,
remark: this.remark
}
console.log(data);
}
}
});
</script>
</body>
</html>
Impresión de datos:
1.4.2 Modificadores
| modificador | efecto |
|---|---|
| .perezoso | De forma predeterminada, v-model sincroniza el valor y los datos del cuadro de entrada en el evento de entrada, pero puede agregar un modificador diferido para cambiar a sincronización en el evento de cambio. |
| .número | Convertir el valor de entrada del usuario al tipo de número |
| .recortar | Filtrar automáticamente los espacios iniciales y finales ingresados por el usuario |
Tome .number como ejemplo para ilustrar el uso de modificadores para convertir el atributo de edad de entrada en un tipo numérico.
<div>
<label>年龄：</label>
<input type="text" v-model.number="age" >
</div>2. Componentes personalizados
2.1 Introducción y definición de componentes
Los componentes de Vue son uno de los conceptos centrales del marco Vue.js, que permite a los desarrolladores dividir páginas en módulos independientes y reutilizables. Los componentes pueden contener sus propias plantillas, estilos y lógica, lo que hace que el código sea más modular, mantenible y reutilizable.
Además de las propias instrucciones de Vue (v-on | v-model) , Vue también permite el registro de instrucciones personalizadas, que se dividen en instrucciones globales/instrucciones locales según su alcance.
Definición de componentes: los componentes se pueden definir mediante el método Vue.component() o la opción de componentes de la instancia de Vue. La definición de un componente incluye su nombre, plantilla, datos, métodos, etc.
- definición local
<script> new Vue({ el: '#xw', components: { "my-button": { template: "<button>自定义组件</button>" } } }) </script>
- definición global
Vue.component('my-button', { //用来传值的自定义属性 props:['title'], //模板,模板中写的html代码,在其中可以使用{ {}},及指令等vue元素 template: '<button @click="doClick">{ {title}}: 全局组件</button>', //注意：在自定义的组件中需要使用函数来定义data data: function() { return { xxx: 0 } })
2.2 Comunicación de componentes
Los eventos personalizados de Vue están diseñados para la comunicación entre componentes. En Vue, el componente principal pasa datos al componente secundario a través de la propiedad. Si desea pasar los datos del componente secundario al componente principal, puede vincular el evento personalizado.
- Instancia de Vue principal-> instancia de Vue secundaria, pasar datos a través de la propiedad
- Instancia de Child Vue->instancia de Vue principal, pasando datos a través de eventos
2.2.1 Parámetros de paso de componentes (padre->hijo)
Nota: los accesorios usan nombres en mayúsculas y minúsculas al definir atributos, pero cuando se usan en html, es necesario cambiarlos a nombres con guiones. !
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件通信——>父传子</title>
<script src="js/vue&jquery.js"></script>
</head>
<body>
<div id="xw">
<ul>
<li>
<!-- <h3>{
{ts}}</h3> -->
<p>vue组件</p>
<!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) -->
<my-button m="小威"></my-button>
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: "#xw",
components: {
'my-button': {
props: ['m'],
template: '<button @click="doClickMyButton">我是一个自定义组件，被{
{m}}点了{
{n}}次</button>',
data() {
return {
n: 0
};
},
methods: {
doClickMyButton() {
this.n++;
}
}
}
}
});
</script>
</html>2.2.1 Parámetros de paso de componentes (secundario -> padre)
Evento desencadenante: $emit(eventName, parámetros...)
Nota: El nombre del evento debe nombrarse con un guión.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件通信——>子传父</title>
<script src="js/vue&jquery.js"></script>
</head>
<body>
<div id="xw">
<ul>
<li>
<!-- <h3>{
{ts}}</h3> -->
<p>vue组件</p>
<!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) -->
<my-button m="小威" @three-click="getParam"></my-button>
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: "#xw",
components: {
'my-button': {
props: ['m'],
template: '<button @click="doClickMyButton">我是一个自定义组件，被{
{m}}点了{
{n}}次</button>',
data() {
return {
n: 0
};
},
methods: {
doClickMyButton() {
this.n++;
if (this.n % 3 == 0) {
// 触发自定义组件定义的事件，这里可以传递任意个参数
// 但是触发的事件绑定的函数要与参数个数一致
this.$emit('three-click', this.n, 'https://blog.csdn.net/Justw320', '云村小威');
}
}
}
}
},
methods: {
getParam(a, b, c) {
console.log(a, b, c);
}
}
});
</script>
</html>Este código implementa un componente principal para pasar propiedades a un componente secundario e implementa la función del componente secundario para pasar parámetros al componente principal a través de eventos personalizados. Y use if para juzgar que cada vez que se hace clic en el botón 3 veces, se pasarán los parámetros.
