O modelo do vue.js é implementado com base no DOM. Isso significa que todos os modelos de vue.js são parsáveis e html válidos e são aprimorados por alguns recursos especiais. Os modelos de Vue são, portanto, fundamentalmente diferentes dos modelos baseados em cordas, lembre-se disso.
Interpolação
texto
A forma mais básica de ligação de dados é a interpolação de texto, usando a sintaxe "bigode" (aparelho duplo):
<pan> mensagem: {{msg}} </span>
A tag de bigode é substituída pelo valor do atributo msg do objeto de dados correspondente. Também será atualizado sempre que essa propriedade mudar.
Você também pode processar apenas uma única interpolação, e as alterações futuras de dados não causarão mais atualizações de interpolação:
<pan> Isso nunca mudará: {{* msg}} </span>
HTML original
A tag dupla de bigode analisa os dados em texto simples em vez de html. Para produzir strings reais HTML, você precisa usar três tags de bigode:
<div> {{{raw_html}}} </div>
O conteúdo é inserido como strings HTML - a ligação de dados será ignorada. Se você precisar reutilizar fragmentos de modelo, os parciais devem ser usados.
É muito perigoso renderizar dinamicamente o HTML arbitrário em um site, porque é propenso a [XSS Attack] (https://en.wikipedia.org/wiki/cross-site_scripting). Lembre-se de usar a interpolação HTML apenas para conteúdo confiável e nunca para conteúdo substituído pelo usuário.
Recursos HTML
Tags de bigode também podem ser usadas nos atributos HTML:
<div id = "item-{{id}}"> </div>
Observe que a interpolação não pode ser usada nas diretrizes do vue.js e recursos especiais. Não se preocupe, se a etiqueta do bigode for usada no lugar errado, o vue.js dará um aviso.
Expressão de ligação
O texto colocado na etiqueta do bigode é chamado de expressão de ligação. No vue.js, uma expressão ligada consiste em uma expressão simples de JavaScript e, opcionalmente, um ou mais filtros.
Expressões JavaScript
Até agora, nossos modelos estão vinculados apenas a teclas de atributo simples. No entanto, de fato, o Vue.js suporta expressões JavaScript completas na ligação de dados:
{{número + 1}}
{{ OK ? 'Sim': 'Não'}}
{{message.split (''). reverse (). junção ('')}}
Essas expressões são avaliadas dentro do escopo da instância de vue a que pertencem. Uma limitação é que cada ligação pode conter apenas uma única expressão; portanto, a seguinte declaração é inválida:
<!-Esta é uma declaração, não uma expressão:->
{{var a = 1}}
<!-Controle de processo também não é possível, você pode usar expressões ternárias em vez->
{{if (ok) {return message}}}
Filtro
O vue.js permite a adição de "filtro" opcional após uma expressão, indicando com "caractere de tubulação":
{{message | capitalizar}}
Aqui, usaremos o valor da mensagem de expressão "Pipe" no filtro de capitalização embutido. Na verdade, esse filtro é apenas uma função JavaScript que retorna o valor capitalizado. O Vue.js fornece vários filtros internos, e falaremos sobre como desenvolver nossos próprios filtros mais tarde.
Observe que a sintaxe do tubo não é uma sintaxe de JavaScript, para que os filtros não possam ser usados dentro de expressões e só podem ser adicionados à reflexão tardia da expressão.
Os filtros podem ser conectados em série:
{{message | filtrala | filtrob}}
O filtro também pode aceitar parâmetros:
{{message | filtra 'arg1' arg2}}
A função do filtro sempre leva o valor da expressão como o primeiro parâmetro. Os argumentos citados são tratados como cordas, enquanto argumentos não citados são calculados como expressões. Aqui, a string 'arg1' é passada para o filtro como o segundo parâmetro e o valor da expressão arg2 é calculado como o terceiro parâmetro.
instrução
As diretivas são recursos especiais com o prefixo v-. O valor da diretiva é limitado a uma expressão de ligação, portanto, a expressão de JavaScript e as regras de filtro mencionadas acima também são aplicáveis aqui. A responsabilidade de uma instrução é aplicar certos comportamentos especiais ao DOM quando o valor de sua expressão mudar. Vamos olhar para frente e para trás no exemplo em "Visão geral":
<p v-if = "saudação"> Olá! </p>
Aqui, a diretiva V-IF excluirá/inserirá o elemento <p> de acordo com a autenticidade do valor da saudação da expressão.
parâmetro
Algumas instruções podem ser separadas por um "argumento" após o nome e um cólon no meio. Por exemplo, a Diretiva V-Bind é usada para atualizar responsáveis de maneira responsável os recursos HTML:
<a v-bind: href = "url"> </a>
Aqui, o HREF é um parâmetro, que informa à diretiva V-Bind para ligar o atributo href do elemento ao valor do URL de expressão. Talvez você tenha notado que pode usar o recurso de interpolação { % RAW %} href = "{{url}}" { % endraw %} para obter o mesmo resultado: isso está correto e, de fato, a interpolação do recurso interno será convertida para a ligação em V.
Outro exemplo é a diretiva V-ON, usada para ouvir eventos DOM:
<a v-on: click = "doSomething">
Este parâmetro é o nome do evento que está sendo ouvido. Também explicaremos a ligação de eventos em detalhes.
Modificador
Modificadores são sufixos especiais que começam com períodos de meia largura. Eles são usados para indicar que as instruções devem estar vinculadas de maneira especial. Por exemplo, o modificador .literal diz à diretiva para analisar seu valor em uma sequência literal em vez de uma expressão:
<a v-bind: href.literal = "/a/b/c"> </a>
Obviamente, isso não parece fazer sentido, porque precisamos usar href = "/a/b/c" sem precisar usar uma única instrução. Este exemplo é apenas para demonstrar a sintaxe. Mais tarde, veremos usos mais práticos de modificadores.
abreviação
O prefixo V é uma dica visual que identifica um recurso de vue específico em um modelo. Esses prefixos podem ser uma boa distinção quando você precisa adicionar comportamento dinâmico a algum código HTML existente. Mas quando você usa algumas instruções comuns, sentirá que é sempre tão realista e detalhado. E ao criar um aplicativo de página única (SPA), o Vue.js gerenciará todos os modelos, e o prefixo V não é tão importante no momento. Portanto, o vue.js fornece abreviações especiais para as duas diretivas mais usadas em V-Bind e V-One:
Abreviação em V-Bind
<!-Sintaxe completa-> <a v-bind: href = "url"> </a> <!-abreviação-> <a: href = "url"> </a> <!-completa sintaxe-> <! : desabiled = "SOMEDYNAMICCONDITION"> Button </botão>
abreviação v-on
<!-Sintaxe completa-> <a v-on: click = "Dosomething"> </a> <!-abreviatura-> <a @click = "Dosomething"> </a>
Eles parecem um pouco diferentes do HTML "legal", mas são analisados corretamente em todos os navegadores habilitados para JS e não aparecem na tag final renderizada. A gramática da abreviação é completamente opcional, mas à medida que você aprende passo a passo, ficará feliz em tê -los.
Este artigo foi compilado no "Tutorial de aprendizado de componentes de front-end Vue.js", e todos são convidados a aprender e ler.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.