1. Abreviação de V-Bind
<!-Sintaxe completa-> <a v-bind: href = "url"> </a> <!-abreviação-> <a: href = "url"> </a> <!-completa sintaxe-> <! : desabiled = "SOMEDYNAMICCONDITION"> Button </botão>
2. V-on Abreviação
<!-Sintaxe completa-> <a v-on: click = "Dosomething"> </a> <!-abreviatura-> <a @click = "Dosomething"> </a>
3. Filtro
{{message | capitalizar}}4. Renderização condicional
v-if <h1 v-if = "ok"> sim </h1> <h1 v-else> no </h1> <div v-if = "math.random ()> 0.5"> desculpe </div> <div v-else> não, não, desculpe </div> model-v-if <modplate v-if = "ok"> <h1> title 2 </p> </modemplate> V-Show <H1 V-SHOW = "OK"> Olá! </h1>
5. Lista de renderização para
v-for <ul id = "Exemplo-1"> <li v-for = "Item em itens"> {{item.message}} </li> </ul> var exemplo1 = new Vue ({el: '#Exemplo-1', dados: {itens: [{message: 'foo'}, {{'bar'}]}}); <ul id="example-2"> <li v-for="item in items"> {{ parentMessage }} - {{ $index }} - {{ item.message }} </li></ul>var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' }]}});Detecção de mudança de matriz
O vue.js envolve os métodos mutados das matrizes observadas, para que eles possam desencadear atualizações de exibição. Os métodos embrulhados são: push (), pop (), shift (), desnutrift (), splice (), class (), reverse ()
exemplo1.items.push ({message: 'Baz'}); exemplo1.items = exemplo1.items.filter (function (item) {return item.message.match (/foo/);}); modelo-v-for <ul> <modelo v-for = "item em itens"> <li> {{item.msg}} </li> <li> </li> </modemplate> </ul>Objeto V-For
<ul id="repeat-object"> <li v-for="value in object"> {{ $key }} : {{ value }} </li></ul>new Vue({ el: '#repeat-object', data: { object: { FirstName: 'John', LastName: 'Doe', Age: 30 } }});Faixa de valor V-for
<div> <span v-for = "n em 10"> {{n}} </span> </div>6. Métodos e manipuladores de eventos
Processador de método
<div id = "Exemplo"> <Button V-on: click = "Greet"> Greet </botão> </div> var VM = new Vue ({el: '#example', dados: {name: 'vue.js'}, // define métodos nos métodos `methods` objeto: {{Greet: function (Event) {////////1//////finir métodos nos métodos` `objeto: {{Greet: function () {/ // '!') // `Event` é um alerta de evento nativo de DOM (event.target.tagname)}}}) // Você também pode chamar o método vm.greet () no código JavaScript; // -> 'Olá vue.js!'Processador de declaração embutida
<div id = "Exemplo-2"> <Button V-on: Click = "Say ('Hi')"> Say Hi </botão> <Button V-on: Click = "Say ('What')"> Diga o que </butão> </div> novo Vue ({el: '#Exemplo-2', Métodos: {Say: function (msg) {alert (ms)}}}}}}}}}}}}}}};Às vezes, também é necessário acessar eventos nativos de DOM no processador de declaração embutida. Você pode usar o evento de $ variável especial para passá -lo para o método
<Button V-on: Click = "Say ('Hello!', $ Event)"> Envie Métodos </botão>: {digamos: function (msg, evento) {// Agora podemos acessar o evento de evento nativo event.preventDefault ()}};Modificador de eventos ##
<!-impedir que o evento de clique em Bubled-> <a v-on: click.stop = "Dothis"> </a> <!-Enviar evento não sobrecarrega mais a página-> <formulário V-on: submit.prevent = "OnSubMit"> </form> <!-Modifiers pode ser concatenado-> <a-v-o: clique ". v-on: envie.prevent> </morm>
## Modificador de chave
<!-vm.subMit () é chamado apenas quando o código de chave é 13-> <input v-on: keyup.13 = "submeter"> <!-o mesmo que acima-> <input v-on: keyup.enter = "submit"> <!-abreviation Syntax-> <input @keyup.enter = "submit">
All Key Alias: Digite, Tab, Exclua, Esc, Espaço, Up, Down, esquerda, direita
## Outros exemplos
new vue ({el: '#demo', dados: {newlabel: '', estatísticas: estatísticas}, métodos: {add: function (e) {e.preventDefault () if (! this.newlabel) {return;} this.stats.push ({etcael: this.newlabel) {} talt.stats.push ({{etc. (stat) {if (this.stats.length> 3) {this.stats. $ Remover (stat);7. Transição
Transição CSS
<div v-if = "show" transition = "expand"> hello </div> Em seguida, adicione regras CSS para .expand-transição, .expand-entra e .expand-leave:/* requerido*/. expand-transição {transição: todas as .3s; Altura: 30px; preenchimento: 10px; Background-Color: #eee; Overflow: Hidden;}/* .Expand-Entre Defina o estado de início da entrada* //* .expand-loave Definir o estado final da partida*/. preenchimento: 0 10px; Opacidade: 0;}Você pode obter transições diferentes no mesmo elemento através da ligação dinâmica:
<div v-if = "show": transition = "transitionName"> hello </div> novo vue ({el: '...', dados: {show: false, transitionName: 'Fade'}}Além disso, os ganchos JavaScript podem ser fornecidos:
Vue.Transition ('Expand', {Antes dotester: function (el) {el.textContent = 'Antes'}, enter: function (el) {el.textContent = 'enter'}, hanled »l (function): eL.Teax (eL.TextContent = 'Afterenter'}, EntererCelled: function: function (function) (eL.TextContent = 'Afterenter'}, EnterCeld: (el) {el.textContent = 'beforeleave'}, deixe: function (el) {el.textContent = 'leave'}, pós -abeto: function (el) {el.textContent = 'AfterLeave'}, levecanceled: function () {// manipulam cancelação}});8. Componentes
1. Registre -se
// definir var myComponent = vue.extend ({modelo: '<div> um componente personalizado! Vue.component ('my-component', {modelo: '<div> um componente personalizado! </div>'}); // Crie a instância root new Vue ({el: '#example'}); <div id = "exemplo"> <meu componente> </my-component> </div>2. Use o suporte para passar dados
Exemplo 1:
Vue.component ('Child', {// Declare props props: ['msg'], // prop pode ser usado em modelos // você pode usar `this.msg` para definir o modelo: '<pan> {{msg}}} </span>}); <Child Msg =" hello ""> </Child>Exemplo 2:
Vue.component ('Child', {// CamelCase in JavaScript Props: ['myMessage'], modelo: '<pan> {{myMessage}} </span>'}); <!-Caso de kebab em html-> <Child my-message = "Hello!"> </fid>3. Adereços dinâmicos
<div> <input v-model = "parardmsg"> <br> <criança v-bind: my-message = "parardmsg"> </fid> </div>
O uso da sintaxe da abreviação da V-Bind geralmente é mais simples:
<Child: my-message = "paradermsg"> </fid>
4.Prop Tipo de ligação
O Prop é a ligação unidirecional por padrão: quando as propriedades da mudança do componente pai, ela será passada para o componente filho, mas o contrário não o fará. Isso é para impedir que o componente filho modifique acidentalmente o estado do componente pai - isso dificulta o fluxo de dados do aplicativo. No entanto, também é possível forçar explicitamente a ligação bidirecional ou de um único tempo usando o modificador de ligação .sync ou .once:
Sintaxe comparativa:
<!-O padrão é uma ligação unidirecional-> <filho: msg = "paradermsg"> </child> <!-encadernação bidirecional-> <filho: msg.sync = "parabelmsg"> </child> <!-Última encadernação-> <child: msg.once = "parademg"> </child> outros exemplos: <modal- slot = "cabeçalho"> cabeçalho personalizado </h3> </modal> </div>
5.Prop verificação
Os componentes podem especificar requisitos de verificação para adereços. Isso é útil quando os componentes são dados a outros, porque esses requisitos de verificação formam a API do componente, garantindo que outros usem o componente corretamente. No momento, o valor dos adereços é um objeto que contém requisitos de verificação:
Vue.component ('exemplo', {props: {// detecção de tipo básico (`null` significa que qualquer tipo está ok) propa: número, // requerido e string propb: {type: string, requerido: true}, // númer, com o objeto padrão/{type: número: 100}}, // de defensor: o valor de um objeto/objeto/{type: número: 100}}, // de defensor: () {return {msg: 'hello'}}}, // Especifique este suporte como uma ligação bidirecional // Se o tipo de ligação não estiver correto, um aviso será lançado: {{twoway: true}, // função de validação personalizada: {valuator: value) {retorn> 10}}}, Propg: {coerce: function (val) {return val + '' // converte o valor em uma string}}, proph: {coerce: function (val) {return json.parse (val) // converte a sequência json em um objeto}}}}});Outros exemplos:
Vue.component ('modal', {modelo: '#modal-template', props: {show: {type: boolean, requerido: true, twoway: true}}});6. Registre -se
//Define var myComponent = vue.extend ({modelo: '<div> um componente personalizado!Ou escreva diretamente:
Vue.component ('my-component', {modelo: '<div> um componente personalizado! </div>'}); // Crie a instância root new Vue ({el: '#example'}); <div id = "exemplo"> <meu componente> </my-component> </div>7. Use o suporte para passar dados
Exemplo 1:
Vue.component ('Child', {// Declare props props: ['msg'], // prop pode ser usado em modelos // você pode usar `this.msg` para definir o modelo: '<pan> {{msg}}} </span>}); <Child Msg =" hello ""> </Child>Exemplo 2:
Vue.component ('Child', {// CamelCase in JavaScript Props: ['myMessage'], modelo: '<pan> {{myMessage}} </span>'}); <!-Caso de kebab em html-> <Child my-message = "Hello!"> </fid>8. Adeços dinâmicos
<div> <input v-model = "parardmsg"> <br> <criança v-bind: my-message = "parardmsg"> </fid> </div>
O uso da sintaxe da abreviação da V-Bind geralmente é mais simples:
<Child: my-message = "paradermsg"> </fid>
9.Prop Tipo de ligação
O Prop é a ligação unidirecional por padrão: quando as propriedades da mudança do componente pai, ela será passada para o componente filho, mas o contrário não o fará. Isso é para impedir que o componente filho modifique acidentalmente o estado do componente pai - isso dificulta o fluxo de dados do aplicativo. No entanto, também é possível forçar explicitamente a ligação bidirecional ou de um único tempo usando o modificador de ligação .sync ou .once:
Sintaxe comparativa:
<!-O padrão é uma ligação unidirecional-> <filho: msg = "parardmsg"> </fid> <!-ligação bidirecional-> <filho: msg.sync = "parardmsg"> </fid> <!-encadernação-> <filho: msg.once = "parabelsg"> </child> <!
Outros exemplos:
<modal: show.sync = "showmodal"> <h3 slot = "cabeçalho"> cabeçalho personalizado </h3> </modal> </div>
10.Prop verificação
Os componentes podem especificar requisitos de verificação para adereços. Isso é útil quando os componentes são dados a outros, porque esses requisitos de verificação formam a API do componente, garantindo que outros usem o componente corretamente. No momento, o valor dos adereços é um objeto que contém requisitos de verificação:
Vue.component ('exemplo', {props: {// detecção de tipo básico (`null` significa que qualquer tipo está ok) propa: número, // requerido e string propb: {type: string, requerido: true}, // númer, com o objeto padrão/{type: número: 100}}, // de defensor: o valor de um objeto/objeto/{type: número: 100}}, // de defensor: () {return {msg: 'hello'}}}, // Especifique este suporte como uma ligação bidirecional // Se o tipo de ligação não estiver correto, um aviso será lançado: {{twoway: true}, // função de validação personalizada: {valuator: value) {retorn> 10}}}, Propg: {coerce: function (val) {return val + '' // converte o valor em uma string}}, proph: {coerce: function (val) {return json.parse (val) // converte a sequência json em um objeto}}}}});Outros exemplos:
Vue.component ('modal', {modelo: '#modal-template', props: {show: {type: boolean, requerido: true, twoway: true}}});11. Use slot para distribuir conteúdo
O elemento <Slot> é usado como um slot de distribuição de conteúdo no modelo de componente. Esse elemento em si será substituído.
Um slot com o atributo de nome é chamado de slot nomeado. O conteúdo do atributo slot será distribuído para slots nomeados com nomes correspondentes.
Por exemplo, suponha que tenhamos um componente multi-inserção com um modelo como:
<div> <slot name = "One"> </lot> <slot> </lot> <slot name = "dois"> </slot> </div>
Modelo de componente pai:
<Multi-insertion> <P slot = "One"> um </p> <p slot = "dois"> dois </p> <p> Padrão a </p> </multi-inserção>
O resultado da renderização é:
<div> <p slot = "One"> um </p> <p> padrão a </p> <p slot = "dois"> dois </p> </div>