Vue.js é uma popular estrutura progressiva de JavaScript desenvolvida por Evan You que nos ajuda a construir aplicativos de página única (SPA) modernos, eficientes, interativos e escaláveis. Este artigo apresentará a sintaxe básica do Vue.js, incluindo modelos, diretivas, propriedades computadas e eventos vinculados.
sintaxe do modelo
A sintaxe de template do Vue.js é uma sintaxe estendida baseada em HTML, que nos permite combinar templates e dados e implementar atualizações dinâmicas.
interpolação
A sintaxe de interpolação do Vue.js, que vincula os dados ao modelo com chaves duplas ({ { ... }}), é a seguinte:
<div>{
{ message }}</div>Vale a pena notar que a expressão de interpolação é apenas uma ligação unidirecional, completando uma ligação de data para view.
propriedade de ligação
Podemos vincular dados a atributos de elementos HTML usando a diretiva v-bind da seguinte maneira:
<img v-bind:src="imageUrl">instrução
Diretivas são comandos em Vue.js que são usados para vincular dados a elementos DOM e implementar comportamento dinâmico. Os comandos internos comuns são os seguintes:
v-if e v-else
A diretiva v-if pode mostrar ou ocultar elementos com base em uma condição (valor verdadeiro/falso de uma expressão). Se a condição for falsa, o elemento será removido.
<p v-if="showMessage">显示的消息</p>Usando a diretiva v-else, você pode especificar o que exibir quando um elemento estiver oculto.
<p v-if="showMessage">显示的消息</p>
<p v-else>隐藏的消息</p>v-para
A instrução v-for é uma instrução de loop do Vue.js, que é usada para percorrer arrays ou objetos, gerar vários elementos DOM e renderizá-los na exibição.
<ul>
<li v-for="item in items">{
{ item }}</li>
</ul>v-bind
A diretiva v-bind pode vincular dinamicamente dados Vue.js a atributos de elementos DOM.
<a v-bind:href="url">{
{ linkText }}</a>propriedade computada
Uma propriedade computada é uma propriedade especial do Vue.js, é uma forma de fornecer alguns dados para cálculo dinâmico e armazenar em cache o valor calculado. As propriedades calculadas podem ser vinculadas a modelos exatamente como as propriedades de dados.
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}Ao usá-lo, basta obter a propriedade calculada diretamente no modelo:
<p>{
{ reversedMessage }}</p>ligação de evento
No Vue.js, podemos vincular eventos específicos a elementos DOM por meio da diretiva v-on, por exemplo:
<button v-on:click="counter += 1">增加计数器</button>Você pode até mesmo usar modificadores de eventos diretamente para passar parâmetros para atender a necessidades de negócios específicas.
<button v-on:click="showMessage('Hello World')">显示消息</button>epílogo
O texto acima é a introdução à sintaxe básica do Vue.js, abrangendo a sintaxe comum, como modelos, instruções, propriedades computadas e associação de eventos. Em aplicações práticas, diferentes requisitos de negócios e padrões de design terão diferentes métodos de implementação. Os recursos exclusivos do Vue.js e seu sistema de componentes altamente flexível ajudam os desenvolvedores a criar rapidamente aplicativos da Web de alta qualidade.