Vue gramática básica 2

Tabla de contenido

1. Encuadernación de estilo

2. Modificador de eventos

Varios modificadores de eventos de uso común:

3. Modificadores clave

4. Controles comunes

4.1 Ejemplo

4.2 Modificadores

5. Instrucciones personalizadas

local

global

6. Componentes Vue

Introducción de componentes

Reglas de nomenclatura de componentes

componentes locales

componente global

7. Eventos personalizados

7.1 Hijo -> Padre

7.2 Padre -> Hijo

---

1. Encuadernación de estilo

• Enlace de clase
  Uso: v-bind:, tipo de expresión: cadena, matriz, objeto
• enlace de estilo
  v-bind:style="expression", el tipo de expresión: cadena, matriz, objeto

Ejemplo:

<!--定义示例样式-->
		<style>
			.fontClass {
				font-size: 40px;
			}
			.colorClass {
				color: red;
			}
		</style>

<div id="app">
			<p><span v-bind:class="fc">aaaaa</span></p>
			<p><span v-bind:class="ac">aaaaa2</span></p>
			<p><span :style="myStyle">aaaaa3</span></p>
		</div>

var vm = new Vue({
			el: '#app',
			data: {
				fc: 'fontClass',
				ac: ['fontClass', 'colorClass'],
				fontSize: 40,
				color: 'green',
				//样式对象，注意：样式名使用驼峰命名，如：fontSize
				myStyle: {
					fontSize: '50px',
					color: 'red',
					fontWeight: 'bold'
				}
			}
		});

Mostrar resultados

2. Modificador de eventos

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 id="app">
			<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>
			<!-- 案件修饰符 -->
			<p>
				<input v-model:value="val" v-on:keyup.13="keyup" />
			</p>
		</div>

var vm = new Vue({
			el: '#app',
			data: {
				receverMsg: null,
				sendMsg: null,
				val: null
			},
			methods: {
				sender: function() {
					this.receverMsg = this.sendMsg;
				},
				doSubmit: function() {
					alert('ok');
				},
				keyup: function() {
					alert(this.val);
				}
			}
		});

Mostrar resultados 

 

 

Presione la tecla Intro para mostrar directamente el mensaje

3. Modificadores clave

Vue permite agregar modificadores de teclas para v-on al escuchar eventos de teclado.
Ejemplo:

<!-- Solo llame a vm.submit() si el código clave es 13 -->

<entrada v-on:keyup.13="enviar">

<!-- Use lo siguiente para tener el mismo efecto-->

<entrada v-on:keyup.enter="enviar">

alias clave	sentido
.ingresar	Entrar para confirmar
.pestaña	Tecla de tabulación
.Eliminar	Capture 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
.Correcto	Correcto
.control	tecla ctrl
.cambio	tecla Shift

Ejemplo: Respondiendo al evento de entrada

<input type="text" @keyup.13="doSubmit" v-model="name">

var vm = new Vue({

    el: "#app",

    data: function() {
        return {
            name: 'hello vue'
        }
    },

    methods: {
        doSubmit: function() {
            alert("响应enter，" + this.name);
        }
    }
});

4. Controles comunes

4.1 Ejemplo

Familiarícese con los controles de uso común mediante la implementación de una página de registro de tipos. Cuadro de texto/cuadro de contraseña/campo de texto/selección única/selección múltiple/lista desplegable

<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="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 v-for="h in hobbies">
					<input v-model="hobby" type="checkbox" :value="h.id" />{
   
   {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="remark"></textarea>
			</div>
			<div>
				<input type="checkbox" v-model="agreed">是否已阅读并同意协议
			</div>
			

Manera simple sin usar el monitor: elimine el monitor, luego modifique el botón enviar de la siguiente manera

<div>
	<button @click="submit" :disabled="disabled">提交</button>
</div>

var vm = new Vue({
			el: '#app',
			data: {
				uname: '',
				upwd: '',
				age: '',
				sex: 1,
				//用于通过v-for指令输出多选框列表
				hobbies: [{
						id: '1',
						name: '打游戏'
					},
					{
						id: '2',
						name: '编程'
					},
					{
						id: '3',
						name: '旅游'
					}
				],
				hobby: [],
				//用于生成地区选择列表
				city: [{
						id: "1",
						name: "长沙"
					},
					{
						id: "2",
						name: "株洲"
					},


					{
						id: "3",
						name: "湘潭"
					}
				],
				//用于保存用户选择的地区
				selectedCity: '',
				// 用于保存备注
				remark: '',
				//是否同意协议,默认值为false
				agreed: false,
				//提交按钮是否禁用,默认为true
				disabled: true
			},
			methods: {
				sender: function() {
					this.receverMsg = this.sendMsg;
				},
				doSubmit: function() {
					alert('ok');
				},
				keyup: function() {
					alert(this.val);
				},
				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);
				}
			},
			watch: {
				agreed: function(val) {
					if (val) {
						this.disabled = false;
					} else {
						this.disabled = true;
					}
				}
			}
		});

 Mostrar resultados:

4.2 Modificadores

modificador	efecto
.perezoso	De forma predeterminada, v-model sincroniza el valor del cuadro de entrada con los datos en el evento de entrada, pero puede agregar un modificador perezoso para cambiar a sincronización en el evento de cambio
.número	Convierta el valor de entrada del usuario al tipo de número
.recortar	Filtre 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 ingresado en un tipo numérico

<div>
    <label>年龄：</label>
    <input type="text" v-model.number="age" >
</div>

5. Instrucciones personalizadas

Además de admitir instrucciones integradas como v-model/v-show, Vue también permite instrucciones personalizadas. En vue2, la forma principal de reutilización y abstracción de código son los componentes, pero en algunos casos, aún es necesario realizar operaciones de bajo nivel en elementos DOM comunes. En este caso, se requieren instrucciones personalizadas . Según el alcance de la instrucción personalizada, se puede dividir en dos tipos: global y local

local

Establecer color de texto por etiqueta personalizada

<div id="app">
    <!--red绑定到data里面的变量-->
    <p v-color="red">我是自定义指令</p> 
</div>

var vm = new Vue({
    el: '#app',
    data: {
        red:'red'
    },
    //自定义指令，局部
    directives:{
        color: {
            inserted: function(el,binding) {
                 console.log(el,binding);
                 el.style.color = binding.value;
            }
        }
    }
});

global

<div id="app">
    <!--red绑定到data里面的变量-->
    <p v-color="red">我是自定义指令</p> 
</div>

//自定义标签,全局
Vue.directive('color', {
    inserted: function(el,binding) {
         console.log(el,binding);
         el.style.color = binding.value;
    }
})

var vm = new Vue({
    el: '#app',
    data: {
        red:'red'
    }
});

Mostrar resultados:

6. Componentes Vue

Introducción de componentes

• El componente es una de las características más poderosas de Vue.
• Los componentes pueden extender elementos HTML y encapsular código reutilizable
• El sistema de componentes nos permite crear aplicaciones a gran escala con pequeños componentes independientes y reutilizables, y la interfaz de casi cualquier tipo de aplicación se puede abstraer en un árbol de componentes.
• Los componentes se pueden dividir en componentes globales y componentes locales.

Reglas de nomenclatura de componentes

• Nombrado con un guión, como: my-component, vue recomienda usar esta regla de nomenclatura
• Reglas de nomenclatura de mayúsculas y minúsculas, como: MyComponent

accesorios

• props es una propiedad personalizada utilizada por el componente principal para pasar datos.
• Los datos del componente principal deben pasarse al componente secundario a través de accesorios, y el componente secundario debe declarar explícitamente "prop" con la opción props

componentes locales

Sintaxis de definición: new Vue({el:'#d1',components:{nombre del componente:{opciones de configuración}}})

<div id="app">
     <div>
         <!--title是用来传值的自定义属性，在自定义组件的props中定义 -->
         <button-counter title="测试"/>
     </div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    },

    //局部自定义组件
    components: {
    
        //组件名: {配置项}
        'button-counter':  {
            
            //用来传值的自定义属性
            props:['title'],

            //模板,模板中写的html代码,在其中可以使用{
   
   {}},及指令等vue元素
            template: '<button @click="doClick">{
   
   {title}}：局部组件，点击计数器:{
   
   {count}}</button>',

            //注意：在自定义的组件中需要使用函数来定义data
            data: function() {
                return {
                    count: 0
                }
            },
            
            //定义响应事件函数
            methods: {
                doClick: function() {
                    //注意此处this的作用返回是自定义组件,而不是上面声明
                    //的vue实例.
                    this.count++;
                }
            }
        }
    }
});

Nota: ¿Por qué tiene que usar el método de función para obtener qué datos en el componente personalizado?
Cada componente personalizado declara los datos funcionalmente, de modo que cada instancia mantiene una copia independiente del objeto devuelto.Tenga cuidado al definir componentes personalizados.

componente global

Modifique el componente local anterior a un componente global.
Sintaxis de definición de componente global: Vue.component (nombre del componente, opciones de configuración)

<div id="app">
    <div>
        <button-counter title="测试"/>
    </div>
</div>

//全局组件
Vue.component('button-counter', {

    //用来传值的自定义属性
    props:['title'],
    
    //模板,模板中写的html代码,在其中可以使用{
   
   {}},及指令等vue元素
    template: '<button @click="doClick">{
   
   {title}}: 全局组件，点击计数器:{
   
   {count}}</button>',

    //注意：在自定义的组件中需要使用函数来定义data
    data: function() {
        return {
            count: 0
        }
    },
    
    //定义响应事件函数
    methods: {
        doClick: function() {
            //注意此处this的作用返回是自定义组件,而不是上面声明
            //的vue实例.
            this.count++;
        }
    }
});

var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    }
});

7. Eventos personalizados

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 accesorios, y si desea pasar los datos del componente secundario al componente principal, puede vincular el evento personalizado

• Instancia principal de Vue -> instancia secundaria de Vue, pasando datos a través de prop
• Instancia secundaria de Vue -> instancia principal de Vue, pasando datos a través de eventos

7.1 Hijo -> Padre

Activación de un evento: $emit(eventName, parámetros...)
Nota: El nombre del evento debe tener un guión.

<div id="app">
     <!--子组件到父组件-->
     <div>
         <button-counter v-on:click-test="clickTest"/>
     </div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    },

    //对于自定义的button-counter组件, Vue实例为父组件
    //在父组件中定义一个test方法,子组件调用该方法
    methods: {
        clickTest: function(msg) {
            console.log("test: "+ msg);
        }
    },

    //局部自定义组件
    components: {

        //组件名: {配置项}
        'button-counter':  {

            //用来传值的自定义属性
            props:['title'],

            //模板,模板中写的html代码,在其中可以使用{
   
   {}},及指令等vue元素
            template: '<button @click="doClick">{
   
   {title}}：局部组件，计数:{
   
   {count}}</button>',

            //注意：在自定义的组件中需要使用函数来定义data
            data: function() {
                return {
                    count: 0
                }
            },

            //定义响应事件函数
            methods: {
                doClick: function() {
                    //注意此处this的作用返回是自定义组件,而不是上面声明的vue实例.
                    //注意事件名使用短横线命名方式
                    this.$emit("click-test","hello vue");
                }
            }
        }
    }
});

7.2 Padre -> Hijo

Nota: Cuando los accesorios definen propiedades, usan la nomenclatura de mayúsculas y minúsculas, y cuando se usan en html, ¡deben corresponder a la nomenclatura de guiones! !

<div id="app">
     <!--子组件到父组件-->
     <div>
             <!-- 注意此处将定义props时的驼峰命名法，变为了短横线命名法 !!! -->
             <button-counter title-desc="测试" />
     </div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    },

    //对于自定义的button-counter组件, Vue实例为父组件
    //在父组件中定义一个test方法,子组件调用该方法
    methods: {
        clickTest: function(msg) {
            console.log("test: "+ msg);
        }
    },

    //局部自定义组件
    components: {

        //组件名: {配置项}
        'button-counter':  {

            //用来传值的自定义属性
            //注意此处使用驼峰命名法 !!!
            props:['titleDesc'],

            //模板,模板中写的html代码,在其中可以使用{
   
   {}},及指令等vue元素
            template: '<button @click="doClick">{
   
   {titleDesc}}：局部组件，计数:{
   
   {count}}</button>',

            //注意：在自定义的组件中需要使用函数来定义data
            data: function() {
                return {
                    count: 0
                }
            },

            //定义响应事件函数
            methods: {
                doClick: function() {
                    //注意此处this的作用返回是自定义组件,而不是上面声明的vue实例.
                    //注意事件名使用短横线命名方式
                    this.count ++;
                    console.log(this.titleDesc);
                }
            }
        }
    }
});