Vue.Introduzione del modello JS
Vue.JS, che viene utilizzato per costruire interfacce utente (UI) e applicazioni a pagina singola (SPA), combina molte delle migliori caratteristiche dei quadri JavaScript angolari e react e molti sviluppatori amano usare Vue.js perché fornisce un ambiente neutro.
Come html, vue.JS ha una sintassi modello e possiamo utilizzare la sintassi del modello per legare il DOM con i dati dei componenti. In questo articolo, ti mostreremo come inserire i dati nella sintassi del modello e i modi per interpolare diversi tipi di dati.
Interpolazione del testo
Se vogliamo legare una variabile dall'istanza del componente relativo, possiamo usare le parentesi graffe doppie, che viene anche definita sintassi "baffi".
LinuxHintText
Vue.JS offre un legame a due vie, il che significa che, ogni volta che il valore di una variabile viene modificato, l'elemento verrà nuovamente reso. Tuttavia, se non vogliamo che sia aggiornato, possiamo usare il v-once direttiva.
LinuxHintText
Interpolazione HTML grezza
Vue.JS non consente l'associazione dei dati del testo semplice, ma possiamo legare il testo HTML grezzo usando il v-html direttiva. Nell'esempio seguente, abbiamo una variabile in un componente chiamato rawhtml che contiene un po 'di testo HTML grezzo.
dati()ritorno
MSG: "Hello Vue",
rawhtml: "
Linuxhint è Grande
"Possiamo legare il rawhtml variabile usando v-html direttiva come segue.
msg
IL div Tag avrà un P tagga al suo interno.
Attributi interpolazione
Nell'interpolazione HTML grezza, non abbiamo usato le parentesi graffe doppie per legare la variabile. Pertanto, se vogliamo legare una variabile all'interno dell'attributo HTML, possiamo usare il V-Bind direttiva.
Espressioni
Vue.JS non fornisce solo caratteristiche per l'associazione di una variabile. Vue.JS può essere usato per scrivere vari tipi di espressioni all'interno di doppie parentesi graffe.
Count + 1controllo ? "vero falso"
arr.ordinare().inversione()
Avvolgendo
In questo articolo, abbiamo introdotto Vue.La sintassi del modello semplice ma utile di JS. Tuttavia, c'è molto di più da imparare su Vue.js. Puoi visitare il sito ufficiale di Vue.js qui, e puoi continuare a conoscere JavaScript con Linuxhint.com.