- Separação de front-end e back-end e introdução ao vue
- Primeiros passos com vue
- ciclo de vida vue
1. Separação de front-end e back-end e introdução do vue
O que é separação de front-end e back-end?
A separação dos front-ends e back-ends é a separação dos front-ends e back-ends no modo de desenvolvimento.Claro, há também a separação entre front-end e back-end em termos de arquitetura do projeto, ou seja, considerando fatores como simultaneidade de solicitações, desempenho do servidor e eficiência no processamento de solicitações, etc., de forma a separar o front -end e back-end. Isso não é tão fácil de entender para iniciantes, então discutiremos apenas desenvolvimento. Separação de padrões.
Vamos definir primeiro: A separação entre front-end e back-end significa que o front-end e o back-end desempenham suas respectivas funções e se concentram em seu próprio trabalho.
Por que as extremidades frontal e traseira devem ser separadas?
O objetivo da separação entre front-end e back-end no modelo de desenvolvimento é melhorar a eficiência do desenvolvimento
Separação no modo de desenvolvimento.Quando o front-end e o back-end não estão separados, o modo de desenvolvimento é:
A equipe de front-end escreve a página estática e empacota a página para o back-end. A equipe de back-end coloca a página no diretório de arquivo estático, implementa saltos de página no back-end e usa tecnologias como jsp ou thymeleaf para renderizar dados e outras lógicas.
O pessoal de back-end desenvolve diretamente a pilha completa, e o front-end e o back-end são concluídos pelo back-end.
Descobriremos que os seguintes problemas ocorrerãoA carga de trabalho do pessoal de back-end é muito grande. O foco do pessoal de back-end deve estar no processamento da lógica de negócios, não na escrita ou renderização de páginas. Por outro lado, o pessoal de front-end só precisa escrever páginas estáticas. Portanto, nesse período, a importância do pessoal de front-end não era tão grande.
Devido ao acoplamento excessivo entre o front-end e o back-end, o custo de comunicação é muito alto. O código JS escrito pelo pessoal do front-end pode não ser compreendido pelo pessoal do back-end. Quando ocorre um bug no projeto, ele se torna muito difícil encontrar a causa raiz do problema.
Vantagens da separação front-end e back-end
A separação das extremidades dianteira e traseira reduz o acoplamento entre as extremidades dianteira e traseira.
Deixe a equipe de front-end se concentrar no desenvolvimento de páginas de front-end, no processamento da lógica de salto de página e na renderização de dados.
Deixe que o pessoal de back-end se concentre no processamento da lógica de negócios, na persistência de dados e em outras operações.
Quando ocorre um problema, o problema de front-end é resolvido pelo front-end e o problema de back-end é resolvido pelo back-end, reduzindo assim o custo de correção de erros.
Introdução ao vue
Vue é uma estrutura progressiva para construção de interfaces de usuário (alguns usam, não toda a família). Progressivo no Vue significa que você pode usar algumas de suas funcionalidades sem ter que usar todas elas. Você pode usar o Vue para substituir apenas uma parte do seu aplicativo ou aplicá-lo ao projeto inteiro. Dessa forma, você pode avançar gradualmente para uma implementação completa da construção de sua aplicação usando Vue.
A diferença entre bibliotecas e frameworks
Biblioteca é essencialmente uma coleção de funções. Cada vez que uma função é chamada, uma função específica é implementada e o controle é entregue ao usuário.
Representante: jQuery
O núcleo da biblioteca jQuery: operações DOM, ou seja: encapsular operações DOM e simplificar operações DOM
Framework é um conjunto completo de soluções. Ao usar um framework, você precisa colocar seu código no local apropriado do framework, e o framework chamará seu código no momento certo.
Representante: vue
O framework estipula seu próprio método de programação e é uma solução completa
Ao usar um framework, o framework controla tudo, só precisamos escrever o código de acordo com as regras.
A estrutura é altamente intrusiva (do início ao fim)
introdução do modelo mvvn
modelo mvvn: modelo, visualização, modelo de visualização
Dom virtual, renderização de árvore dom == ligação bidirecional de dados
modelo mvc: modelo, visualização, controlador
2. Primeiros passos com vue
etapas de conteúdo de exibição de entrada vue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 1.搭建依赖 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>入门</title>
</head>
<body>
<!-- 2.定义vue所管理的边界，有且只有一个边界点 -->
<div id="app">
{
{msg}}
</div>
<script>
// 3.构建vue示例并绑定边界
new Vue({
el:"#app",
data(){
return{msg:'hello vue 雷猴'}
}
})
</script>
</body>
</html>
Faça uma função de envio de barragem para verificar o poder do vue.No passado, jquery:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 1.搭建依赖 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>入门</title>
</head>
<body>
<!-- 2.定义vue所管理的边界，有且只有一个边界点 -->
<div id="app">
{
{msg}}
<span id="show"></span>
<input id="content"/>
<button type="button" onclick="tan()">发送弹屏</button>
</div>
<script>
// 3.构建vue示例并绑定边界
new Vue({
el:"#app",
data(){
return{msg:'hello vue 雷猴'}
}
})
function tan(){
var content=$("#content").val();
$("#show").text(content);
}
</script>
</body>
</html>
Valor atual
modelo v ou: ligação bidirecional de dados, variáveis em limites, definições de variáveis em instâncias vue
:value ou (v-bind:value): retirado da variável definida na instância vue e usado no limite
@click或(v-on:click)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 1.搭建依赖 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>入门</title>
</head>
<body>
<!-- 2.定义vue所管理的边界，有且只有一个边界点 -->
<div id="app">
<!-- {
{msg}} -->
<!-- <input :value="msg"/> --> <!-- 111 -->
<!-- <input value="msg"/> --> <!-- msg -->
<!-- <input v-bind:value="msg"/> --> <!-- 111 -->
<input v-model="msg"/> <!-- msg -->
<button type="button" @click="tan()">发送弹屏</button>
</div>
<script>
// 3.构建vue示例并绑定边界
new Vue({
el:"#app",
data(){
return{msg:111}
},
methods:{
tan(){
alert(this.msg)
}
}
})
</script>
</body>
</html>
3. Ciclo de vida do vue
O ciclo de vida do Vue é dividido em 8 etapas: antes e depois da criação, antes e depois do carregamento, antes e depois da atualização, antes e depois da destruição.
1. beforeCreate (antes da criação)
Indica que antes da instância ser completamente criada, o elemento de montagem $el e os dados do objeto de dados da instância vue são indefinidos e não foram inicializados.
2. criado (após a criação)
Os dados do objeto de dados já existem e você pode chamar os métodos nos métodos para operar os dados nos dados, mas o dom não é gerado e $el não existe.
3. beforeMount (antes da montagem)
O $el e os dados da instância vue foram inicializados. Antes da montagem, era um nó dom virtual. O modelo foi editado na memória, mas ainda não foi renderizado na página. data.message não é substituído.
4. montado (após a montagem)
A instância vue é montada e data.message é renderizado com sucesso. O modelo na memória foi realmente montado na página e o usuário já pode ver a página renderizada. A última função do ciclo de vida durante a criação da instância.Quando a montagem é executada, significa que a instância foi completamente criada e a renderização do DOM foi concluída na montagem.
5. beforeUpdate (antes da atualização)
Quando os dados são alterados, o método beforeUpdate é acionado. data Os dados ainda não estão sincronizados com os dados mais recentes.
6. atualizado (após atualização)
Quando os dados forem alterados, o método atualizado será acionado. A página e os dados foram mantidos sincronizados.
7. beforeDestroy (antes da destruição)
Chamado antes do componente ser destruído, nesta etapa a instância ainda está totalmente disponível.
8. destruído (após destruição)
Chamado após a destruição do componente, as alterações nos dados não acionarão mais a função periódica.A instância Vue liberou o monitoramento de eventos e a ligação dom, mas a estrutura dom ainda existe.
Funções de gancho acionadas por padrão durante a inicialização do vue: beforeCreate, criado, beforeMount, montado