Características comuns do Vue
Operação de formulário
Operação de formulário baseada em Vue
- insira uma única linha de texto
- Ligação bidirecional por meio do modelo v
- textarea texto de várias linhas
- selecionar seleção múltipla suspensa
- rádio rádio
- caixa de seleção caixa de seleção
Modificador de campo de formulário
- número: convertido em um valor numérico (o padrão é uma string)
- trim: remova os espaços no início e no final
- preguiçoso: mude o evento de entrada para mudar o evento
<div id="app">
<!-- <input type="text" name="" id="" v-model="age"> -->
<input type="text" v-model.number='age'>
<input type="text" v-model.trim='trimc'>
<input type="text" v-model.lazy='changet'>
<div>{
{
changet}}</div>
<input type="submit" value="点击" @click="handle">
</div>
<script>
let vm = new Vue({
el:"#app",
data: {
age: '',
trimc: '',
changet: ''
},
methods: {
handle(){
console.log(this.age);
console.log(this.trimc);
console.log(this.changet);
}
}
});
</script>
Instrução personalizada
-
Por que você precisa de instruções personalizadas
As instruções integradas não atendem à demanda
-
Regras de sintaxe para instruções personalizadas (obter o foco do elemento)
Vue.directive('focus' ,{ inserted: function(el){ //获取元素的焦点 el.focus(); } }) -
Uso de instrução personalizada
<div id="app">
<input type="text" v-focus>
</div>
<script>
Vue.directive('focus' ,{
inserted: function(el){
//获取元素的焦点
el.focus();
}
})
let vm = new Vue({
el:"#app",
data: {
},
methods: {
}
});
</script>
Parâmetros de função do gancho
- el: o elemento vinculado pela instrução, que pode ser usado para manipular diretamente o DOM
- vinculação: um objeto que contém:
- nome: nome do comando, excluindo v-, prefixo
- valor: o valor de ligação da instrução,
- oldValue: o valor anterior vinculado à instrução
Instrução local
Adicione uma instrução adicional.
directives: {
focus: {
//指令的定义
inserted: function(el){
el.focus()
}
}
}
Atributos calculados
A lógica de cálculo da expressão pode ser mais complicada e o uso de atributos calculados pode tornar o conteúdo do modelo mais conciso
computed:{
reversedMessage: function(){
return this.msg.split('').reverse().join('')
}
}
A diferença entre propriedades e métodos calculados
- Os atributos computados são armazenados em cache com base em suas dependências
- Método não existe em cache
<div id="app">
<input type="text" v-model="msg" name="" id="">
<div>{
{
reversed}}</div>
</div>
<script>
let vm = new Vue({
el:"#app",
data: {
msg:""
},
methods: {
},
computed:{
reversed: function(){
return this.msg.split('').reverse().join('');
}
}
});
</script>
filtro
O papel dos filtros
Formate os dados, como formatar uma string para colocar a primeira letra em maiúscula e converter o formato de data em um formato especificado.
Definição de filtro
Vue.filter('过滤器名称', function(value){
//过滤器业务逻辑
}
Uso de filtros
//upper:过滤器得名称
<div>{
{msg | upper}}</div>
<div>{
{msg | upper | lower}}</div>
<div v-bind:id | formatId></div>
Filtro local
filters:{
capitalize: function(){}
}
<div id="app">
<input type="text" v-model="msg">
<div>{
{
msg | upper}}</div>
<div>{
{
msg | upper | lower}}</div>
<div :upp="msg | upper" >{
{
msg}}</div>
</div>
<script>
Vue.filter('upper', function(val){
return val.toUpperCase();
});
Vue.filter('lower', function(val){
return val.toLowerCase();
})
let vm = new Vue({
el:"#app",
data: {
msg: ''
},
methods: {
},
});
</script>
Ouvinte
O ouvinte é usado para monitorar os dados e, quando os dados forem alterados, ele notificará o método vinculado ao ouvinte
Cenários de aplicação
Realiza operações assíncronas ou caras quando os dados são alterados
(Existem semelhanças com atributos calculados)
watch: {
//方法，val表示当前数据的最新值
firstName: function(val){
this.fullName = val + this.lastName;
},
lastName: function(val){
this.fullName = this.firstName + val;
}
}
Estudo de caso
Verifique se o nome de usuário está disponível
Requisito: Insira o nome na caixa de entrada e verifique se ele existe quando o foco for perdido. Se já existir, solicite a digitação novamente, se não existir, o prompt pode ser usado.
operativo:
1. Realize a vinculação de dados por meio do modelo v
2. Lembretes precisam ser fornecidos
3. Um ouvinte é necessário para monitorar as mudanças nas informações de entrada
4. Necessidade de modificar o evento acionado
<div id="app">
用户名：<input type="text" v-model.lazy="msg">
<div>{
{
tip}}</div>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: '',
tip: ''
},
methods: {
checkname: function (uname) {
//调用接口，可用定时任务模拟接口调用
let that = this;
setTimeout(function () {
//模拟接口调用
if (uname == 'admin') {
that.tip = '用户名已经存在'
}else{
that.tip = '可以注册'
}
},2000)
}
},
watch: {
msg: function (val) {
//调用后台接口验证用户名的合法性
this.checkname(val);
this.tip = "正在验证。。。"
}
}
});
</script>
Ouvinte
1. Use um ouvinte para monitorar as alterações de nome de usuário
2. Chame a interface de segundo plano para verificação
3. Ajuste as informações de prompt de acordo com o resultado da verificação
Ciclo de vida (função de gancho do ciclo de vida)
Palco principal
- Montar (inicializar propriedades relacionadas)
- beforeCreate
- criado
- beforeMount
- montado
- Atualizar (mudar a operação do elemento ou componente)
- beforeUpdate
- Atualizada
- Destruir (destruir atributos relacionados)
- antes de destruir
- destruído
<div id="app">
<input type="text" name="" id="" v-model="msg">
<button @click="destroy">销毁</button>
</div>
<script>
let vm = new Vue({
el:"#app",
data: {
msg: ""
},
methods: {
destroy: function(){
this.$destroy();
}
},
beforeCreate() {
console.log("beforeCreate...");
},
created() {
console.log("create...");
},
beforeMount(){
console.log("beforeMount...");
},
mounted(){
console.log("mounted...");
},
beforeUpdate(){
console.log("beforeUpdate...");
},
updated(){
console.log("updated...");
},
beforeDestroy(){
console.log("beforeDestroy...");
},
destroyed(){
console.log("destroyed...");
},
});
</script>
Diagrama de ciclo de vida
[Foto do site oficial]
Destruir é liberar alguns recursos
montado: indica que a inicialização foi concluída e o modelo já existe.
O processo de geração de instâncias Vue
- beforeCreate é chamado após a instância ser inicializada e antes da observação de dados e configuração do evento
- criado é chamado imediatamente após a instância ser criada
- beforeMount é chamado antes do início da montagem
- O el montado é substituído pelo vm. $ El recém-criado, e o exemplo é chamado após ser montado na instância
- beforeUpdate é chamado quando os dados são atualizados, o que ocorre antes que o DOM virtual seja corrigido
- atualizou a re-renderização e correção do DOM virtual devido a alterações de dados, chame depois
- beforeDestroy é chamado antes que a instância seja destruída
- Chamado depois que a instância destruída é destruída