1. Compreensão do MVVM
O nome completo do MVVM é Model-View-ViewModel
O modelo representa um modelo de dados. Os dados e a lógica de negócios são definidos na camada de modelo; geralmente se referem ao processamento de várias lógicas de negócios e à manipulação de dados realizada no back-end e, para o front-end, é a interface API fornecida pelo Processo interno. View representa a visualização da IU e é responsável pela exibição de dados; a camada de visualização é a interface do usuário. O front end é construído principalmente por HTML e CSS. ViewModel é responsável por monitorar mudanças de dados no Model e controlar a atualização da view, processando operações de interação com o usuário;
O Vue é conduzido por dados , o próprio Vue DOM e vinculação de dados, uma vez que as vinculações criadas, DOM e os dados serão sincronizados, cada um quando os dados forem alterados, ocorrerão alterações no DOM . ViewModel é o núcleo do Vue, é uma instância do Vue. O elemento HTML em um determinado elemento HTML no escopo da instância Vue pode ser o corpo ou o elemento referido por um determinado id.
Dois, vue instruções comuns
1. v-text v-text é usado principalmente para atualizar textContent, que pode ser equivalente ao atributo text de JS.
<span v-text = "name"> </span>
ou
<span> expressão de interpolação {{name}} </span>
2. v-html é equivalente ao atributo innerHtml de JS
<div v-html = "content"> </div>
3. v-cloak é usado para manter o elemento até o final da instância associada para compilar e resolver o problema de oscilação
<div id = "app" v-cloak>
<div>
{{msg}}
</div>
</div>
<script type = "text / javascript">
novo Vue ({
el: '# app',
dados: {
msg: 'hello world'
}
})
</script>
Normalmente, ele piscará quando a página for carregada e será exibido primeiro:
<div>
{{msg}}
</div>
Exibido apenas após a compilação:
<div> olá, mundo! </div>
Você pode usar o comando v-cloak para resolver o problema de oscilação da expressão de interpolação e usar o seletor de atributos no css para definir o v-cloak para exibir: nenhum;
4. A instância associada a v-uma vez v-uma vez será renderizada apenas uma vez. Após a re-renderização, a instância e todos os seus nós filhos serão considerados como conteúdo estático ignorado, que pode ser usado para otimizar o desempenho de atualização
<span v-once> Isso nunca vai mudar: {{msg}} </span> // 单个 元素
<div v-once> // 有 子 元素
<h1> comentário </h1>
<p> {{msg} } </p>
</div>
<meu componente v-uma vez: comment = "msg"> </my-component> // 组件
<ul>
<li v-for = "i in list"> {{i }} </li>
</ul>
No exemplo acima, mesmo se msg, list forem alterados, eles não serão renderizados novamente.
5. v-if v-if pode alcançar renderização condicional, Vue renderizará elementos de acordo com as condições verdadeiras e falsas do valor da expressão
<a v-if="true"> show </a>
6. v-else v-else é usado com v-if, deve seguir v-if ou v-else-if imediatamente, caso contrário, não funcionará
<a v-if="true"> mostrar </a> <a v-else> ocultar </a>
7. v-else-if v-else-if atua como o bloco else-if de v-if, que pode ser usado várias vezes em uma cadeia. A instrução switch pode ser implementada de maneira mais conveniente.
<div v-if = "type === 'A'"> A </div> <div v-else-if = "type === 'B'"> B </div> <div v-else- if = "type === 'C'"> C </div> <div v-else> Não A, B, C </div>
8. v-show também é usado para exibir elementos com base nas condições. Ao contrário de v-if, se o valor de v-if for falso, o elemento é destruído e não em dom. Mas os elementos de v-show sempre serão renderizados e salvos no dom. Ele simplesmente muda o atributo de exibição de css.
<span v-show = "true"> olá, mundo </ span>
Nota: v-if tem um custo de troca mais alto e v-show tem um custo de renderização inicial mais alto. Portanto, se você deseja alternar com muita frequência, v-show é melhor; se as condições são improváveis de mudar durante o tempo de execução, v-if é melhor
9. v-for usa a instrução v-for para renderizar de acordo com a matriz transversal
<div v-for = "(item, index) in items"> </div> // Use in, index é um parâmetro opcional, indicando o índice do item atual
10. v-bind v-bind é usado para ligar dinamicamente um ou mais recursos. Quando não há parâmetros, ele pode ser vinculado a um objeto que contém pares de valores-chave. Frequentemente usado para vincular classe e estilo dinamicamente. E href etc. Abreviado como dois pontos [:]
<div id = "app">
<div: class = "{'is-active': isActive, 'text-danger': hasError}"> </div>
</div>
<script>
var app = new Vue ( {
el: '#app',
data: {
isActive: true,
hasError: false
}
})
</script>
Após a compilação
<div class = "is-active"> </div>
11. v-model é usado para criar ligação de dados bidirecional no formulário
<div id = "app">
<input v-model = "name">
<p> olá {{name}} </p>
</div>
<script>
var app = new Vue ({
el: '#app ',
data: {
name:' 小 明 '
}
})
</script>
Os modificadores do modelo são
.lazy (ressincronizar no evento de mudança)> v-model.lazy .number (converter automaticamente o valor de entrada do usuário em um tipo numérico)> v-model.number .trim (filtrar automaticamente os espaços iniciais e finais da entrada do usuário) > v-model .trim
12. v-on v-on é usado principalmente para monitorar eventos dom para executar alguns blocos de código. A expressão pode ser um nome de método. Abreviado como: [@]
<div id = "app">
<button @ click = "consoleLog"> </button>
</div>
<script>
var app = new Vue ({
el: '#app',
métodos: {
consoleLog: function (event ) {
console.log (1)
}
}
})
</script>
Modificador de evento
.stop impede que o evento continue a se propagar. O evento de prevenção não recarrega mais a página. capture usa o modo de captura de evento, ou seja, o evento acionado pelo próprio elemento é processado aqui e, em seguida, é processado pelo elemento interno. self only when event.target is A função de processamento é acionada quando o próprio elemento atual. O evento once só será acionado uma vez. Passivo diz ao navegador que você não deseja impedir o comportamento padrão do evento
3. Qual é a diferença entre v-if e v-show?
Ponto comum: tanto v-if quanto v-show podem exibir e ocultar elementos
A diferença:
1. v-show é apenas uma propriedade de exibição do elemento de controle simples e v-if é a renderização condicional (a condição é verdadeira, o elemento será renderizado, se a condição for falsa, o elemento será destruído) 2. v-show tem a maior O primeiro custo de renderização, enquanto o primeiro custo de renderização de v-if é muito menor. 3. v-if tem maior custo de troca e v-mostra custo de troca é menor. 4. v-if tem correspondência v-else- if e v- else e v-show não tem 5. v-if pode ser usado com o modelo, mas v-show não pode
Quarto, como fazer o CSS funcionar apenas no componente atual?
Adicione o estilo de componente ao escopo
<estilo com escopo> ... </style>
5. Qual é o papel de manter vivo?
Quando o keep-alive envolve os componentes dinâmicos, as instâncias do componente inativo são armazenadas em cache, o que é usado principalmente para preservar o estado do componente ou evitar uma nova renderização.
6. Passos para usar plug-ins no Vue
1. Use a importação ... de ... sintaxe do ES6 ou o método require () do CommonJSd para introduzir plug-ins. 2. Use o método global Vue.use (plug-in) para usar plug-ins e você pode passar um objeto de opção Vue.use (MyPlugin, { someOption: true})
Sete, ciclo de vida Vue
8. Quais são as maneiras de se comunicar entre os componentes do Vue
A comunicação entre os componentes do Vue refere-se apenas aos três tipos de comunicação a seguir: comunicação do componente pai-filho, comunicação do componente entre gerações, comunicação do componente irmão
Nove, a diferença entre os cenários calculados e observados e os do aplicativo
computed: é um atributo calculado, que depende de outros valores de atributo, e o valor de computed é armazenado em cache. Somente quando o valor do atributo depende de alterações, o valor computado será recalculado na próxima vez que o valor computado for obtido. observe: mais um efeito de "observação", semelhante a alguns dos callbacks do listener de dados, o callback será executado sempre que os dados mudarem quando as operações subsequentes monitoradas usarem o cenário: quando precisamos do cálculo numérico, e dependendo de outros dados devem ser usados computados quando os dados de que precisamos Ao realizar operações assíncronas ou caras durante as mudanças, o relógio deve ser usado
Dez, existem vários modos de roteamento vue-roteador
Hash : use o valor de hash do URL como uma rota. Suporta todos os navegadores.
Histórico : desde a API de histórico do HTML5 e configuração do servidor. Consulte o modo HTML5 History no site oficial
Resumo : suporte a todos os modos de operação javascript. Se for descoberto que não há API do navegador, a rota será automaticamente forçada para este modo.
11. Compreensão da página única do SPA, quais são suas vantagens e desvantagens
SPA (aplicativo de página única) carrega apenas o HTML, JavaScript e CSS correspondente quando a página da Web é inicializada. Depois que a página é carregada, o SPA não recarrega ou pula a página devido às operações do usuário. Em vez disso, usa o mecanismo de roteamento para implementar transformação de conteúdo HTML, interface do usuário e interação do usuário, evitando o recarregamento da página Vantagens:
1. A experiência do usuário é boa e rápida. A mudança de conteúdo não precisa recarregar a página inteira, evitando saltos desnecessários e renderização repetida. 2. Com base no ponto acima, o SPA é relativamente menos estressante no servidor 3. Separação de frente -end e back-end responsabilidades, estrutura clara, o front-end realiza a lógica de interação, o back-end é responsável pelo processamento de dados
Desvantagens:
1. O carregamento inicial é demorado: para realizar a função do aplicativo da Web de página única e o efeito de exibição, JavaScript e CSS precisam ser carregados uniformemente quando a página é carregada e algumas páginas são carregadas sob demanda. e gerenciamento de roteamento para trás: como uma única página é aplicada em uma. Todo o conteúdo é exibido na página, de modo que as funções de avanço e retrocesso do navegador não podem ser usadas. Todas as alternâncias de página precisam construir você mesmo o gerenciamento de pilha. 3. O SEO é mais difícil : Uma vez que todo o conteúdo é substituído dinamicamente e exibido em uma página, ele está no SEO. Ele tem fraquezas naturais