1. Abreviatura de vínculo V
<!-Complete Syntax-> <a v-bind: href = "url"> </a> <!-abreviation-> <a: href = "url"> </a> <!-Complete sintaxis-> <botón v-bind: desactivado = "somedynamiccondition"> botón </boton> <!-abreviation-> <botte: desactived = "somedynamiccondition" button "
2. Abreviatura V-on
<
3. Filtrar
{{mensaje | capitalizar}}4. Representación condicional
v-if <h1 v-if = "ok"> sí </h1> <h1 v-else> no </h1> <div-if = "math.random ()> 0.5"> lo siento </div> <div-else> no lo siento </div> Template-v-if <Template v-if = "ok"> <h1> title </h1> <p> pargraph 1 <ppilape <p1 <p> 2 </p> </template> v-show <h1 v-show = "ok"> ¡Hola! </H1>
5. Renderización de la lista para
v-For <ul id = "Ejemplo-1"> <li v-For = "items en elementos"> {{item.message}} </li> </ul> var ejemplo1 = new vue ({el: '#Ejemplo-1', data: {elementos: [{mensaje: 'foo'}, {mensaje: 'bar'}]}); <ul id = "Ejemplo-2"> <li v-For = "item en elementos"> {{parentMessage}}-{{$ index}}-{{item.message}} </li> </ul> var ejemplo2 = new vue ({el: '###', data: {parentmessage: 'parent: items: [{{{{{{{{{{{{{{{»#ejemplo-2', ejemplo-2 ', datos: {barra:'» »» »» »» »» »» »» »» »» »» »» »» »» »» »» »» »» »» »» »» »» »» »{» {»{meteS }]}});Detección de cambios de matriz
Vue.js envuelve los métodos mutados de las matrices observadas, para que puedan activar las actualizaciones de la vista. Los métodos envueltos son: push (), pop (), shift (), unshift (), splice (), sort (), reverse ()
ejemplo1.items.push ({mensaje: 'Baz'}); ejemplo1.items = ejemplo1.items.filter (function (item) {return item.message.match (/foo/);}); Template-V-For <ul> <Template v-For = "items in items"> <li> {{item.msg}} </li> <li> </li> </template> </ul>Objeto V-For
<ul id = "repetir-object"> <li v-For = "valor en objeto"> {{$ key}}: {{valor}} </li> </ul> nuevo vue ({el: '#repetir-object', data: {object: {firstName: 'John', LastName: 'Doe', edad: 30}});Rango de valor V-For
<Viv> <span v-For = "n en 10"> {{n}} </span> </div>6. Métodos y manejadores de eventos
Procesador de métodos
<div id = "Ejemplo"> <botón v-on: click = "greet"> greet </boton> </iv> var vm = new Vue ({el: '#Example', data: {name: 'vue.js'}, // define los métodos en el objeto `métodos` {greet: function (event) {// en el método `this 'puntos a vm alerta (' Hola ' + esto. `Event` es una alerta nativa de evento DOM (event.target.tagname)}}}) // También puede llamar al método vm.greet () en el código JavaScript; // -> 'Hola vue.js!'Procesador de declaración en línea
<div id = "Ejemplo-2"> <botón v-on: click = "say ('Hi')"> diga hi </boton> <botón v-on: click = "say ('what')"> decir qué </botón> </div> new Vue ({el: '#Ejemplo-2', Métodos: {Say: function (msg) {alerta (msg)}});A veces también es necesario acceder a eventos DOM nativos en el procesador de declaración en línea. Puede usar el evento de variable especial $ para pasarlo al método
<botón v-on: click = "say ('Hola!', $ Event)"> Enviar </botón> Métodos: {say: function (msg, event) {// Ahora podemos acceder al objeto nativo de evento event.preventDefault ()}};## Modificador de eventos
< V-on: enviar.prevent> </orm>
## Modificador de teclas
<
Todos los alias clave: ingresar, pestaña, eliminar, esc, espacio, arriba, abajo, izquierda, derecha
## Otros ejemplos
new Vue ({el: '#Demo', Data: {newLabel: '', Stats: Stats}, Methods: {add: function (e) {e.preventDefault () if (! this.newlabel) {return;} this.stats.push ({etiqueta: this.newlabel, valor: 100}); this.newlabel =},},},},},},},},},},},}; (stat) {if (this.stats.length> 3) {this.stats. $ remove (stat);7. Transición
Transición CSS
<div-if = "show" transition = "expand"> hola </div> luego agregue reglas CSS para .Ex. Altura: 30px; relleno: 10px; Color de fondo: #EEE; desbordamiento: Hidden;}/* .Excand-enter Definir el estado de entrada de inicio* //* .Excand-leve Definir el estado final de la salida*/. Expand-Enter, .EXPAND-leve {altura: 0; relleno: 0 10px; Opacidad: 0;}Puede lograr diferentes transiciones en el mismo elemento a través de la unión dinámica:
<div-if = "show": transition = "transitionName"> hola </div> new vue ({el: '...', data: {show: false, transitionName: 'fade'}}Además, se pueden proporcionar ganchos de JavaScript:
Vue.transition('expand', { beforeEnter: function (el) { el.textContent = 'beforeEnter' }, enter: function (el) { el.textContent = 'enter' }, afterEnter: function (el) { el.textContent = 'afterEnter' }, enterCancelled: function (el) { // handle cancellation }, beforeLeave: function (El) {el.TextContent = 'BorForeleave'}, Leave: Function (El) {El.TextContent = 'Leave'}, AfterleAve: function (El) {El.TextContent = 'AfterleAve'}, LeavecancEled: function (el) {// manejar la cancelación}});8. Componentes
1. Registrarse
// Define var myComponent = vue.extend ({Template: '<div> un componente personalizado! </div>'}); // registre vue.component ('my-component', myComponent); // crea una instancia raíz nueva ({el: '#Example'}); <Div Id = "Ejemplo"> <MyComponent> </Mycomponent/Mycomponent AS: vue.component ('my-component', {plantplate: '<iv> un componente personalizado! </div>'}); // Crear instancia raíz Nueva2. Use el PROP para pasar datos
Ejemplo 1:
Vue.component ('Child', {// Declare Props Props: ['Msg'], // El prop se puede usar en plantillas // puede usar `this.msg` para establecer la plantilla: '<span> {{msg}} </span>'}); <Child Msg =" Hola! "> </fil>Ejemplo 2:
Vue.component ('Child', {// Camelcase en JavaScript Props: ['MyMessage'], Template: '<span> {{MyMessage}} </span>'}); <3. Props dinámicos
<Div> <input v-Model = "Parentmsg"> <br> <Child V-Bind: my-Message = "Parentmsg"> </kild> </div>
Usar la sintaxis de abreviatura de vínculo V suele ser más simple:
<Child: my-Message = "Parentmsg"> </ Child>
4.Prop Tipo de enlace
El PROP es unidireccional de forma predeterminada: cuando las propiedades del componente principal cambian, se pasará al componente infantil, pero al revés no lo hará. Esto es para evitar que el componente infantil modifique accidentalmente el estado del componente principal; esto hará que el flujo de datos de la aplicación sea difícil de entender. Sin embargo, también es posible forzar explícitamente vinculación bidireccional o de tiempo único utilizando el modificador de enlace .sync o .on:
Sintaxis comparativa:
< slot = "Header"> encabezado personalizado </h3> </modal> </div>
5. Verificación de PROP
Los componentes pueden especificar los requisitos de verificación para los accesorios. Esto es útil cuando los componentes se dan a otros, porque estos requisitos de verificación forman la API del componente, asegurando que otros usen el componente correctamente. En este momento, el valor de los accesorios es un objeto que contiene requisitos de verificación:
Vue.component ('Ejemplo', {props: {// Basic Type Detection (`null` significa cualquier tipo está bien) propa: number, // requerido y string propb: {type: string, requerido: true}, // número, con valor predeterminado propc: {type: number, predeterminado: 100}, // El valor predeterminado de un objeto/array debe devolverse por una función a propd: propd: {objeto, predeterminado: predeterminado:) el valor predeterminado de un objeto/array debe devolverse por una función a propd: propd: {objeto, predeterminado: predeterminado:) return {msg: 'Hola'}}}, // Especifique este accesorio como un enlace de dos vías // Si el tipo de enlace no es correcto, se lanzará una advertencia PROPE: {twoway: true}, // función de validación personalizada propf: {validator: function (valor) {valor de retorno> 10}}, // Convertir el valor (nuevo en 1.0.12) {coerce: function (val) {return val + '' // convierte el valor en una cadena}}, proph: {coerce: function (val) {return json.parse (val) // convierte la cadena json en un objeto}}}}});Otros ejemplos:
Vue.component ('modal', {plantlate: '#modal-semplate', props: {show: {type: boolean, requerido: true, twoway: true}}});6. Registrarse
// Define var myComponent = vue.extend ({Template: '<div> un componente personalizado! </div>'}); // registre vue.component ('my-component', myComponent); // crea una instancia raíz nueva ({el: '#Example'}); <Div Id = "Ejemplo"> <MyComponent> </MycomponentO escríbelo directamente:
Vue.component ('my-component', {plantplate: '<iv> un componente personalizado! </div>'}); // Crear instancia raíz Nueva7. Use el apoyo para pasar datos
Ejemplo 1:
Vue.component ('Child', {// Declare Props Props: ['Msg'], // El prop se puede usar en plantillas // puede usar `this.msg` para establecer la plantilla: '<span> {{msg}} </span>'}); <Child Msg =" Hola! "> </fil>Ejemplo 2:
Vue.component ('Child', {// Camelcase en JavaScript Props: ['MyMessage'], Template: '<span> {{MyMessage}} </span>'}); <8. Props dinámicos
<Div> <input v-Model = "Parentmsg"> <br> <Child V-Bind: my-Message = "Parentmsg"> </kild> </div>
Usar la sintaxis de abreviatura de vínculo V suele ser más simple:
<Child: my-Message = "Parentmsg"> </ Child>
9.PROP Tipo de enlace
El PROP es unidireccional de forma predeterminada: cuando las propiedades del componente principal cambian, se pasará al componente infantil, pero al revés no lo hará. Esto es para evitar que el componente infantil modifique accidentalmente el estado del componente principal; esto hará que el flujo de datos de la aplicación sea difícil de entender. Sin embargo, también es posible forzar explícitamente vinculación bidireccional o de tiempo único utilizando el modificador de enlace .sync o .on:
Sintaxis comparativa:
<
Otros ejemplos:
<modal: show.sync = "showmodal"> <h3 slot = "header"> encabezado personalizado </h3> </modal> </div>
10. Verificación de PROP
Los componentes pueden especificar los requisitos de verificación para los accesorios. Esto es útil cuando los componentes se dan a otros, porque estos requisitos de verificación forman la API del componente, asegurando que otros usen el componente correctamente. En este momento, el valor de los accesorios es un objeto que contiene requisitos de verificación:
Vue.component ('Ejemplo', {props: {// Basic Type Detection (`null` significa cualquier tipo está bien) propa: number, // requerido y string propb: {type: string, requerido: true}, // número, con valor predeterminado propc: {type: number, predeterminado: 100}, // El valor predeterminado de un objeto/array debe devolverse por una función a propd: propd: {objeto, predeterminado: predeterminado:) el valor predeterminado de un objeto/array debe devolverse por una función a propd: propd: {objeto, predeterminado: predeterminado:) return {msg: 'Hola'}}}, // Especifique este accesorio como un enlace de dos vías // Si el tipo de enlace no es correcto, se lanzará una advertencia PROPE: {twoway: true}, // función de validación personalizada propf: {validator: function (valor) {valor de retorno> 10}}, // Convertir el valor (nuevo en 1.0.12) {coerce: function (val) {return val + '' // convierte el valor en una cadena}}, proph: {coerce: function (val) {return json.parse (val) // convierte la cadena json en un objeto}}}}});Otros ejemplos:
Vue.component ('modal', {plantlate: '#modal-semplate', props: {show: {type: boolean, requerido: true, twoway: true}}});11. Use la ranura para distribuir contenido
El elemento <slot> se usa como ranura de distribución de contenido en la plantilla de componente. Este elemento en sí será reemplazado.
Una ranura con el atributo de nombre se llama ranura con nombre. El contenido con el atributo de tragamonedas se distribuirá a las ranuras con nombre con nombres coincidentes.
Por ejemplo, supongamos que tenemos un componente de inserción múltiple con una plantilla como:
<Div> <slot name = "One"> </slot> <slot> </slot> <slot name = "two"> </slot> </div>
Plantilla de componentes principales:
<Multi-Insertion> <p slot = "one"> one </p> <p slot = "two"> two </p> <p> predeterminado a </p> </sli-inserción>
El resultado de renderizado es:
<div> <p slot = "one"> one </p> <p> predeterminado a </p> <p slot = "two"> two </p> </div>