Índice
1. Sintaxe de interpolação { {}}
6. Renderização de lista v-for
7. Associação de estilo e associação de classe
1. Introdução geral do Vue
Vue é uma estrutura progressiva para a construção de interfaces de usuário . Ao contrário de outros grandes frameworks, o Vue foi projetado para ser aplicado camada por camada de baixo para cima. A biblioteca principal do Vue se concentra apenas na camada de exibição, que não é apenas fácil de usar, mas também fácil de integrar com bibliotecas de terceiros ou projetos existentes. Por outro lado, quando combinado com uma cadeia de ferramentas moderna e várias bibliotecas de suporte, o Vue também é totalmente capaz de alimentar aplicativos complexos de página única. Ele é usado para aplicativos de página única e o roteamento do plug-in vue usado para saltos de página para obter saltos.
Site oficial do Vue: https://cn.vuejs.org/
O site oficial do vue foi atualizado para vue3, mas ainda começamos com vue2.
Antes de usar o vue, precisamos primeiro apresentar o framework vue e ir diretamente ao site oficial para copiar a tag do script:
Aprenda -> Tutorial -> Instalar:
Uso básico do Vue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<!-- 模板 根组件只有一个模板-->
<div id="app">
<!-- 文本插值 -->
{
{msg}}
<br>----------------------------
<my-info></my-info>
<my-info></my-info>
<my-info></my-info>
{
{qq}}
<!-- 事件绑定 使用v-on:事件类型='函数名' -->
<!-- @事件类型 绑定事件 -->
<!-- <button v-on:click="handler">获取qq</button> -->
<button @click="qq='111222333'">获取qq</button>
{
{time}}
</div>
<script>
// 自己定义组件实例
let Info={
template:`
<div>{
{msg}}</div>
`,
// data:{
// msg:"hello world"
// }
data(){
return {
msg:"hello world"
}
}
};
// 创建vue实例 Vue构造函数方式
let vm=new Vue({
// 局部注册组件实例
components:{
'my-info':Info
},
// 将模板与实例进行绑定
el:"#app",
// 数据模型 存放vue变量
data:{
msg:'hello Vue2',
qq:'获取qq',
time:new Date()
},
// 声明函数
methods:{
handler(){
this.qq='111222333'
}
}
});
setInterval(()=>{
vm.time=new Date()
},1000);
</script>
</body>
</html>2. Modelo MVVM
Modelo MVVM :
- M : Model Model, correspondente aos dados em data
- V : View View, correspondente ao modelo em vue
- VM : modelo de visualização ViewModel, correspondente ao objeto de instância Vue
Você pode pensarDOM Listeners(dom监听器) na figura acima como duas ferramentas, que são a chave para realizar a vinculação de dados bidirecional:Data Bindings(数据绑定)
- Do lado do View, as ferramentas do ViewModel
DOM Listenersnos ajudarão a monitorar as alterações dos elementos DOM na página e, se houver alterações, alterar os dados no Model; - Do lado do Model, quando atualizamos os dados no Model,
Data Bindingsa ferramenta nos ajudará a atualizar os elementos DOM na página.
Simplificando: ViewModel é o link entre a visão e o modelo de dados. Quando o modelo de dados muda, vm notifica a visão para modificá-lo; quando a visão muda, vm notifica o modelo de dados para fazer as modificações correspondentes.
O Vue se baseia no modelo MVVM:
3. Sintaxe do modelo
O Vue usa uma sintaxe de modelo baseada em HTML que permite aos desenvolvedores vincular declarativamente o DOM aos dados da instância subjacente do Vue. Todos os modelos Vue são HTML válidos, portanto, podem ser analisados por navegadores compatíveis com especificações e analisadores de HTML. Na implementação subjacente, o Vue compila modelos em funções de renderização DOM virtual. Combinado com o sistema responsivo, o Vue pode calcular de forma inteligente quantos componentes precisam ser pelo menos re-renderizados e minimizar o número de operações DOM.
1. Sintaxe de interpolação { {}}
Quando uma instância Vue é criada, ela adiciona todas as propriedades no objeto de dados ao sistema de reatividade do Vue. Quando os valores dessas propriedades forem alterados, a view irá “responder”, ou seja, a correspondência será atualizada com os novos valores.
- A forma mais comum de renderização é a interpolação de texto usando a sintaxe "Mustache" (colchetes duplos)
- Qualquer expressão js pode ser escrita dentro das chaves duplas
- Use o comando v-once para executar uma interpolação única. Quando os dados forem alterados, o conteúdo da interpolação não será atualizado
<body>
<div id="app">
<!-- 1.文本插值 mustache语法 {
{}} -->
{
{msg}}
<!-- 2.{
{使用js表达式}} -->
{
{count * 100}}
{
{Number(msg)}}
{
{Boolean(msg)}}
<!-- 3. v-once 使用v-once指令,执行一次性的插值，当数据发生改变，插值处的内容不会更新 -->
<div v-once>{
{msg}}</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'hello Vue',
count: 10
}
});
//设置两秒后修改msg的值，使用v-once后插值处内容不会改变
setTimeout(()=>{
vm.msg='我被修改了'
},2000)
</script>
</body>2. comando v-html
Se os dados que solicitamos do plano de fundo forem um trecho de código HTML, se o enviarmos diretamente por meio de { {}}, o código HTML também será gerado junto. Chaves duplas irão analisar os dados como texto simples, não código HTML. Mas o que podemos querer é analisar de acordo com o formato HTML e exibir o conteúdo correspondente. Se quisermos analisar a exibição HTML, podemos usar o comando v-html: esse comando geralmente é seguido por um tipo de string, que analisará o HTML da string e o renderizará.
<body>
<div id="app">
<!-- 使用插值语法无法解析html代码片段 -->
{
{p}}
<!-- 使用v-html指令可以解析代码片段 -->
<div v-html="p"></div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
p:'<a href="https://www.baidu.com">百度一下</a>'
}
});
</script>
</body>O resultado é o seguinte:
3. comando v-bind
A sintaxe de chaves duplas não pode ser aplicada aos atributos do elemento, neste caso, o comando v-bind deve ser usado.
A diretiva v-bind pode ser abreviada como dois pontos:
<body>
<div id="app">
<!-- 绑定变量 v-bind 或者 简写成: -->
<div v-bind:title="title">hello vue</div>
<div :title="title">hello world</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
title: "我是一个标题"
}
});
</script>
</body>4. comando v-on
Você pode usar v-on para vincular eventos ao elemento atual ou pode usar a forma abreviada @
<body>
<div id="app">
{
{msg}}
<!-- 绑定事件 v-on:事件名称="函数名(或者直接写js代码)"-->
<button v-on:click="update">点击我</button>
<!-- 简写 @ -->
<button @click="msg='我又被修改了'">点击我</button>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: "hello vue"
},
methods:{
update(){
this.msg = '我被修改了'
}
}
});
</script>
</body>
5. Renderização condicional
v-if (pode ser usado sozinho), quando a expressão for verdadeira, renderiza o elemento usando o atributo v-if, caso contrário, use v-else para renderizar;
v-show (mude o atributo de exibição no estilo css), alterne frequentemente o estilo css, use v-show.
Não é recomendado usar v-if e v-for juntos. Quando v-if é usado com v-for, v-for tem prioridade mais alta que v-if.
A diferença entre v-if e v-show:
v-if é um overhead dom preguiçoso. O nó dom será carregado apenas quando a condição for atendida, e o elemento dom não será renderizado diretamente se a condição não for atendida. Cenário de uso: usado quando há menos sobrecarga do dom.
v-show exibe o elemento quando a condição é atendida e chama display:none para ocultar o elemento quando a condição não é atendida, mas carrega o elemento dom independentemente de a condição ser atendida. Cenário de uso: usado quando é necessária a troca frequente de estilos CSS.
<body>
<div id="app">
<!-- 条件渲染 v-if v-else-if v-else v-show-->
<div v-if="type==='email'">
<form>
<input type="text" placeholder="请输入邮箱">
</form>
</div>
<div v-else-if="type==='telephone'">
<form>
<input type="text" placeholder="请输入电话">
</form>
</div>
<div v-else>错误</div>
<div v-show="isShow">我是一个div</div>
</div>
<script>
new Vue({
el: "#app",
data: {
type: "telephone",
isShow: false
}
})
</script>
</body>
6. Renderização de lista v-for
v-for é usado para renderizar dados de lista. A diretiva v-for requer uma sintaxe especial do item de formulário em items, onde items é o array de dados de origem e item é um alias para o elemento do array que está sendo iterado.
atributo chave
Ao usar v-for, precisamos adicionar um atributo :key ao elemento ou componente correspondente.
Por que esse atributo de chave é necessário?
Na verdade, isso está relacionado ao algoritmo Diff do DOM virtual do Vue.
Quando existem muitos nós iguais em uma camada, ou seja, nós de lista, queremos inserir um novo nó
-
Esperamos que um F possa ser adicionado entre B e C, e o algoritmo Diff seja executado assim por padrão.
-
Ou seja, atualize C para F, D para C, E para D e, finalmente, insira E, não é muito ineficiente?
Portanto, precisamos usar a chave para identificar exclusivamente cada nó
-
O algoritmo Diff pode identificar corretamente este nó
-
Encontre a área de localização correta para inserir o novo nó.
Então, em uma palavra, a função da chave é principalmente atualizar o DOM virtual de forma eficiente.
<body>
<div id="app">
<!-- 列表渲染数组 -->
<ul>
<li v-for="(item,index) in animal" :key="item">{
{item}}--{
{index}}</li>
</ul>
<!--列表渲染对象 -->
<ul>
<li v-for="(key,value,index) in obj" :key="index">{
{key}}--{
{value}}--{
{index}}</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
animal: ['老虎', '猴子', '狮子'],
obj: {
name: 'zhangsan',
age: 18
}
}
})
</script>
</body> 
7. Associação de estilo e associação de classe
Manipular a lista de classes e o estilo inline de um elemento é um requisito comum para vinculação de dados, pois são todos atributos, então podemos usar o v-bind para tratá-los: basta calcular o resultado da string através da expressão. No entanto, a concatenação de strings é incômoda e propensa a erros. Portanto, Vue fez melhorias especiais ao usar v-bind para classe e estilo. O tipo do resultado da expressão pode ser um objeto ou uma matriz além de uma string.
<style>
.red{
color:red;
}
.color{
font-size: 18px;
background-color: pink;
}
</style>
<body>
<div id="app">
<!-- 动态绑定style -->
<div :style="{color:currentColor}">我是一个div</div>
<div :style="styleObj1">我是第二个div</div>
<div :style="[styleObj1,styleObj2]"> 我是第三个div</div>
<!-- 动态绑定类名 -->
<div :class="{red:true}">我是第四个div</div>
<div :class="{red:false,color:true}">我是第五个div</div>
<div :class="[{red:true},{color:false}]">我是第六个div</div>
</div>
<script>
new Vue({
el:"#app",
data:{
currentColor:'red',
styleObj1:{
fontSize:'18px',
backgroundColor:'blue'
},
styleObj2:{
backgroundColor:'red'
}
}
})
</script>
</body>