Vue.JS Modelo Introdução

Vue.O JS, usado para criar interfaces de usuário (UIS) e aplicativos de página única (SPAs), combina muitos dos melhores recursos das estruturas JavaScript Angular e React, e muitos desenvolvedores gostam de usar o VUE.JS porque fornece um ambiente neutro.

Como html, vue.JS tem uma sintaxe de modelo e podemos usar a sintaxe do modelo para ligar o DOM com os dados dos componentes. Neste artigo, mostraremos como inserir dados na sintaxe do modelo e as maneiras de interpolar diferentes tipos de dados.

Interpolação de texto

Se queremos vincular uma variável da instância do componente relativo, podemos usar aparelhos duplos encaracolados, que também é chamado de sintaxe de "bigode".

linuxhintText

Vue.JS oferece ligação de mão dupla, o que significa que, sempre que o valor de uma variável é alterado, o elemento será renderizado novamente. No entanto, se não quisermos que seja atualizado, podemos usar o v-once diretivo.

linuxhintText

Interpolação em HTML crua

Vue.O JS não permite a ligação de dados do texto simples, mas podemos vincular um texto html bruto usando o v-html diretivo. No exemplo abaixo, temos uma variável em um componente chamado RAWHTML que contém algum texto HTML bruto.

Linuxhint é Ótimo

Podemos vincular o RAWHTML variável usando v-html diretiva como segue.

O div tag terá um p Marque dentro dele.

Atributos interpolação

Na interpolação HTML bruta, não usamos aparelhos duplos encaracolados para ligar a variável. Portanto, se queremos vincular uma variável dentro do atributo html, podemos usar o V-Bind diretivo.

Expressões

Vue.O JS não fornece apenas recursos para vincular uma variável. Vue.JS pode ser usado para escrever vários tipos de expressões dentro de aparelhos duplos encaracolados.

Empacotando

Neste artigo, apresentamos o VUE.Sintaxe do modelo simples e útil do JS. No entanto, há muito mais a aprender sobre Vue.JS. Você pode visitar o site oficial de Vue.JS aqui, e você pode continuar aprendendo sobre JavaScript com Linuxhint.com.