1. Introdução ao Vue
- É um framework js
- Simplifique a manipulação de DOM
- Orientado por dados responsivos
2. Introdução ao vue
1. O primeiro programa vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个实例</title>
</head>
<body>
<div id="app">
{
{ message }}
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"asdhello！"
}
})
</script>
</body>
</html>
O método do seletor de id, mensagem e instância vue são vinculados.
2.el ponto de montagem
A função de el: É usado para configurar os elementos de gerenciamento de montagem de instância vue.
Geralmente, o seletor de id é usado para vinculação, e os acertos quadrados do seletor de classe e do seletor de rótulo causarão semântica pouco clara.
A instância de vinculação de rótulo só pode ser um rótulo fechado, não uma nota adesiva não fechada, que geralmente é montada em uma tag div.
Qual é o escopo da instância vue?
O Vue gerenciará o elemento no nome da opção el e seus elementos descendentes.
É possível usar outros seletores?
Outros seletores podem ser usados, mas o seletor de id é recomendado.
Outros elementos dom podem ser definidos?
Outras tags duplas podem ser usadas, html e body não podem ser usados, div é recomendado.
3. objeto de dados de dados
- Os dados usados em vue são definidos em dados
- Tipos complexos de dados podem ser escritos em dados
- Ao renderizar dados complexos, basta seguir a sintaxe js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个实例</title>
</head>
<body>
<div id="app">
{
{ message }}
<h2>{
{school.name}}{
{school.mobile}}</h2>
<ul>
<li>{
{campus[0]}}</li>
<li>{
{campus[1]}}</li>
<li>{
{campus[2]}}</li>
<li>{
{campus[3]}}</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"你好，小黑！！",
school:{
name:"黑马程序员",
mobile:400-618-9990
},
campus:["北京校区","上海校区","广州校区","深圳校区"]
}
})
</script>
</body>
</html>
3. Aplicação local
- Perceba efeitos comuns de páginas da web através do vue.
- Aprenda as instruções vue e consolide os pontos de conhecimento com os casos.
- A instrução vue se refere a um conjunto de sintaxe especial começando com v-.
1. instrução v-text
Defina o valor do texto do rótulo (textContent)
- O texto padrão substituirá todo o conteúdo, e o conteúdo especificado pode ser substituído pela expressão de diferença { {}}
- Suporta a escrita de expressões internamente
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个实例</title>
</head>
<body>
<div id="app">
<h2 v-text="message">深圳<h2>
<h2>深圳{
{message}}</h2>
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"asdhello！"
}
})
</script>
</body>
</html>
Comando 2.v-html
- Defina o innerHTML da tag.
- A estrutura html do conteúdo será analisada em tags.
- O comando v-text só será analisado como texto, independentemente de seu conteúdo.
- Use v-text para analisar o texto e use v-html para analisar a estrutura html.
Ao contrário do comando v-text, v-html pode reconhecer a linguagem html, enquanto v-text trata a linguagem html como texto normal.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个实例</title>
</head>
<body>
<div id="app">
<p v-text='content'></p>
<p v-html='content'></p>
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
content:"<a href='http:/www.itheima.com'>黑马程序员！</a>"
}
})
</script>
</body>
</html>
[Falha na transferência da imagem do link externo. O site de origem pode ter um mecanismo anti-hotlinking. Recomenda-se salvar a imagem e carregá-la diretamente (img-SGiANoNP-1608016665000) (C: \ Users \ jiangdada \ AppData \ Roaming \ Typora \ typora-user-images \ 1594029017433.png)]
3.v-on instrução
- Vincule eventos ao elemento.
- O nome do evento não precisa ser escrito
- A instrução pode ser abreviada como @
- O método de ligação é definido no atributo de métodos
- Dentro do método, os dados definidos em data podem ser acessados por meio da palavra-chave this.
<div id="app">
<!--点击事件-->
<input type="button" value="事件绑定" v-on:click="dolt">
<!--鼠标滑过-->
<input type="button" value="事件绑定" v-on:monseenter="dolt">
<!--双击击事件-->
<input type="button" value="事件绑定" v-on:dblclick="dolt">
<!--vue中支持将v-on转换成@来表示-->
<input type="button" value="事件绑定" @click="dolt">
</div>
<script>
var app=new Vue({
el:"#app",
data:{
},
methods:{
doft:function(){
//逻辑
}
}
})
</script>
O código de amostra é o seguinte:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个实例</title>
</head>
<body>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIT">
<input type="button" value="v-on简写" @click="doIT">
<input type="button" value="v-on双击" @dblclick="doIT">
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
methods:{
doIT:function(){
alert("做IT");
}
}
})
</script>
</body>
</html>
4. Contador
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计数器</title>
</head>
<body>
<div id="app">
<button @click="sub">-</button>
<span>{
{num}}</span>
<button @click="add">+</button>
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
num:1,
},
methods:{
add:function(){
if(this.num<10){
this.num++;
}
else{
alert("别加了！")
}
},
sub:function(){
if(this.num>0){
this.num--;
}
else{
alert("别减了！")
}
}
}
})
</script>
</body>
</html>
5.v-show command
- De acordo com o verdadeiro ou falso da expressão, mude a exibição e oculte o elemento.
- O princípio é modificar a exibição do elemento para conseguir exibir e ocultar.
- O conteúdo após a instrução será eventualmente analisado como um valor booleano.
- Os elementos com um valor true são exibidos e os elementos com um valor false são ocultados.
- Depois que os dados forem alterados, o status de exibição do elemento correspondente será atualizado de forma síncrona.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-show指令</title>
</head>
<body>
<div id="app">
<input type="button" value="切换显示状态" @click="changeIsShow">
<div v-show="isShow">saodjasoid</div>
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
isShow:false,
},
methods:{
changeIsShow:function(){
this.isShow=!this.isShow;
}
}
})
</script>
</body>
</html>
6.v-if instrução
- De acordo com o verdadeiro ou falso do valor indicado, alterne a exibição e oculte do elemento (manipule o elemento dom)
- A essência é manipular o elemento dom para mudar o estado de exibição.
- O valor da expressão é true, o elemento existe na árvore dom e false é removido da árvore dom.
- Troca frequente de v-show e vice-versa, usando v-if, o primeiro consome menos troca.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if指令</title>
</head>
<body>
<div id="app">
<input type="button" value="切换显示状态" @click=" toggleIsShow">
<p v-if="isShow">黑马程序员</p>
<p v-show="isShow">黑马程序员 v-show!</p>
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
isShow:false,
},
methods:{
toggleIsShow:function(){
this.isShow=!this.isShow;
}
}
})
</script>
</body>
</html>
Nota: Ao contrário de v-show, v-if é o modo de operação, enquanto v-show é o estilo de operação.
7. instrução v-bind
- Defina os atributos do elemento, como src, titile, class
- Precisa adicionar e excluir classes dinamicamente para sugerir o uso de objetos.
Método de escrita:
v-bind:src="imgsrc"
可以简写为:
:src=""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-show指令</title>
<style>
.active{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="">
<br>
<img :src="imgSrc" alt="" :class="isActive?'active':''" @click="toggleActive">
<br>
<img :src="imgSrc" alt="" :class="{active:isActive}" @click="toggleActive">
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
imgSrc:"http://www.itheima.com/images/logo.png",
isActive:true,
},
methods:{
toggleActive:function(){
this.isActive=!this.isActive;
console.log("点击事件被触发")
}
},
})
</script>
</body>
</html>
</html>
Você pode usar expressões ternárias e também pode usar objetos, como
<!--对三元表达式写法的时候要记得给css样式加上单引号-->
<img :src="imgSrc" alt="" :class="isActive?'active':''" @click="toggleActive">
<br>
<!--对象的写法，css样式的显示取决于冒号后面对象的真假-->
<img :src="imgSrc" alt="" :class="{active:isActive}" @click="toggleActive">
8.v-para instrução
- Gerar estrutura de lista com base em dados.
- As matrizes costumam ser usadas em combinação com v-for.
- A sintaxe é (item, índice) no item da matriz e o índice pode ser alterado, desde que estejam em conformidade com as regras de nomenclatura
- item e índice podem ser usados em conjunto com outras instruções.
- A atualização do comprimento do array será sincronizada com a página, que é responsiva.
item corresponde a cada valor de elemento da matriz e o índice corresponde ao valor subscrito da matriz. As variáveis podem ser alteradas para outras representações, basta seguir as regras de nomenclatura.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-for指令</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in arr">{
{index+1}}黑马程序员校区:{
{item}}</li>
</ul>
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<ul>
<li v-for="(item,index) in vegetables" :title="item.name">
{
{index}}{
{item.name}}
</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
arr:["北京","上海","广州"],
vegetables:[
{name:"西兰花炒蛋"},
{name:"蛋炒西兰花"}
],
},
methods:{
add:function(){
//push方法将元素追加到数组是尾部
this.vegetables.push({name:"花菜炒蛋"})
},
remove:function(){
//shift方法删除数组第一个元素
this.vegetables.shift();
}
}
})
</script>
</body>
</html>
9. suplemento v-on
Passe parâmetros personalizados, modificadores de evento.
- O evento é seguido pelo .modificador para limitar o evento.
- .enter pode limitar o botão acionado para entrar
- Existem muitos modificadores de eventos.
- Evento de teclado para baixo: keydown () é disparado quando o teclado é pressionado Evento de
teclado para cima: keyup () é disparado quando o teclado é solto.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-on补充</title>
</head>
<body>
<div id="app">
<input type="button" value="点击" @click="doIt(6666,'老铁')">
<input type="text" @keyup.enter="sayhi">
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
},
methods:{
doIt:function(p1,p2){
console.log("do it!!!!")
console.log(p1,p2)
},
sayhi:function(){
alert("吃了没！")
}
}
})
</script>
</body>
</html>
10. instrução do modelo v
- Obtenha e defina o valor do elemento do formulário (ligação de dados bidirecional).
- Os dados vinculados serão associados ao valor do elemento do formulário.
- Os dados vinculados são equivalentes ao valor do elemento do formulário, vinculação bidirecional.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个实例</title>
</head>
<body>
<div id="app">
<input type="button" value="修改" @click="setM">
<input type="text" v-model="message" @keyup.enter="getM">
<h2>{
{message}}</h2>
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"黑马程序员"
},
methods:{
getM:function(){
alert(this.message);
},
setM:function(){
this.message="酷丁鱼";
}
}
})
</script>
</body>
</html>
11 Application-Notepad
Funções: adicionar, excluir, contar, limpar, ocultar
1. Novo
- Gerar estrutura de lista v para matriz
- Obtenha a entrada do usuário modelo v
- Pressione Enter para adicionar data @ keyup.enter push
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>记事本</title>
</head>
<body>
<div id="todoapp">
<input type="text" v-model="inputValue" @keyup.enter="add">
<ul>
<li v-for="(item,index) in list"> {
{index+1}}{
{item}}</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#todoapp",
data:{
list:["写代码","吃饭饭","睡觉觉"],
inputValue:"好好学习，天天向上！",
},
methods:{
add:function(){
this.list.push(this.inputValue);
},
}
})
</script>
</body>
</html>
2. Excluir função
- Exclua a emenda v-on do conteúdo especificado
- Os dados mudam e o elemento de ligação de dados muda de forma síncrona
- Parâmetros personalizados para eventos
- A função do método de emenda, o primeiro parâmetro é o valor do índice a ser excluído e o segundo parâmetro é o número de exclusões.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>记事本</title>
</head>
<body>
<div id="todoapp">
<input type="text" v-model="inputValue"
placeholder="请输入任务...." @keyup.enter="add">
<ul>
<li v-for="(item,index) in list"> {
{index+1}}{
{item}}
<button @click="remove(index)">x</button>
</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#todoapp",
data:{
list:["写代码","吃饭饭","睡觉觉"],
inputValue:"好好学习，天天向上！",
},
methods:{
add:function(){
this.list.push(this.inputValue);
},
remove:function(index){
console.log("remove",index)
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
3. Função estatística
- Número de informações estatísticas, texto v, comprimento
<div>统计功能:{
{list.length}}</div>
- Método de desenvolvimento baseado em dados
- A função do comando v-text
4. Função clara
- Clique para limpar todas as informações v-on
clear:function(){
this.list=[];
}
Essencialmente, o esvaziamento do array!
5. Recursos ocultos
- Quando não houver dados, oculte o elemento. v-show, v-if, a matriz não está vazia
<div V-if="list.length!=0">
<div>统计功能:{
{list.length}}</div>
<input type="button" value="清空" @click="clear">
<div>
Quatro, aplicativo de rede
A biblioteca de solicitação de rede axios combina vue.
1.axios + vue
https://autumnfish.cn/api/joke Interface de piada aleatória
- O this na função callback axios foi alterado e os dados nos dados não podem ser acessados.
- Salve isso e use o salvo diretamente na função de retorno de chamada
- A maior diferença com os aplicativos locais é que a fonte de dados é alterada.
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p>{
{joke}}</p>
</div>
<script src="./node_modules/axios/dist/axios.js"></script>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
joke:"很好笑的笑话"
},
methods:{
getJoke:function(){
var that=this;
axios.get("https://autumnfish.cn/api/joke").then
(function(response){
console.log(response)
console.log(response.data)
that.joke=response.data;
},function(err){
console.log(err)
})
}
}
})
</script>
2. Deus sabe-aplicação
- Pressione Enter v-on Enter
- Query data axios interface v-model
- Renderizando dados
<body>
<div id="app">
<input type="text" v-model="city" @keyup.enter="searchWeather">
<ul>
<li v-for="item in weatherList">{
{item.date}}{
{item.type}}</li>
</ul>
</div>
<script src="./node_modules/axios/dist/axios.js"></script>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
city:'',
weatherList:[],
},
methods:{
searchWeather:function(){
var that=this;
axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
.then(function(response){
console.log(response.data);
that.weatherList=response.data.data.forecast;
console.log(that.weatherList);
}).catch(function(err){})
}
}
})
</script>
</body>