Prefácio
Vue.js é uma biblioteca de interface da web orientada a dados. O vue.js se concentra apenas nas camadas de exibição e pode ser facilmente integrado a outras bibliotecas. O código é de apenas 24 KB após a compactação.
O código a seguir é o exemplo mais simples de vue.js. Quando o conteúdo nas mudanças de entrada, o conteúdo do nó P muda de acordo.
<!-html-> <div id = "Demo"> <p> {{message}} </p> <input v-model = "message"> </div> new vue ({el: '#demo', dados: {message: 'hello vue.js!'}})Sintaxe básica de vue.js
Insira o texto
<pan> mensagem: {{text}} </span>Insira o texto no formato HTML e exiba -o no formato HTML na página
<pan> mensagem: {{{html}}} </span>O conteúdo não segue as alterações nos dados
<pan> mensagem: {{ * text}} </span>Vincular dados sobre propriedades
<div id = "item-{{id}}"> </div>Usando expressões JS em {{}}
{{número + 1}} {{ok? 'Sim': 'Não'}} {{message.split (''). Reverse (). Junção ('')}}Usando as instruções JS em {{}}
{{var a = 1}} {{if (ok) {return message}}}se comando
<p v-if = "saudação"> Olá!
Diretiva Href
<a v-bind: href = "url"> </a> ou <a href = "{{url}}"> </a>Clique em comando
<a v-on: click = "doSomething">
Insira comando
<input v-model = "newtodo" v-on: keyup.enter = "addTodo">
Abreviação
V-Bind
<!-Sintaxe completa-> <a v-bind: href = "url"> </a> <!-abreviação-> <a: href = "url"> </a> <!-completa sintaxe-> <! : desabiled = "SOMEDYNAMICCONDITION"> Button </botão>
V-on
<!-Sintaxe completa-> <a v-on: click = "Dosomething"> </a> <!-abreviatura-> <a @click = "Dosomething"> </a>
Resumir
As expressões nos modelos são muito convenientes, mas na verdade são usadas apenas para operações simples. O modelo é descrever a estrutura da visão. Colocar muita lógica em um modelo pode tornar o modelo muito pesado e difícil de manter. É por isso que o vue.js restringe expressões de ligação a uma expressão. Se mais de uma expressão for necessária, as propriedades calculadas devem ser usadas. O editor atualizará como usar os atributos calculados posteriormente. Amigos interessados, continue prestando atenção ao wulin.com.