Tabla de contenido
1. Introducción general de Vue
1. Sintaxis de interpolación { {}}
6. Representación de listas v-for
7. Enlace de estilo y enlace de clase
1. Introducción general de Vue
Vue es un marco progresivo para construir interfaces de usuario . A diferencia de otros marcos grandes, Vue está diseñado para aplicarse capa por capa de abajo hacia arriba. La biblioteca central de Vue solo se enfoca en la capa de visualización, que no solo es fácil de usar, sino también fácil de integrar con bibliotecas de terceros o proyectos existentes. Por otro lado, cuando se combina con una cadena de herramientas moderna y varias bibliotecas de soporte, Vue también es totalmente capaz de potenciar aplicaciones complejas de una sola página. Se usa para aplicaciones de una sola página y el enrutamiento del complemento vue se usa para saltos de página para lograr saltos.
Sitio web oficial de Vue: https://cn.vuejs.org/
El sitio web oficial de vue se actualizó a vue3, pero todavía comenzamos con vue2.
Antes de usar vue, primero debemos presentar el marco vue e ir directamente al sitio web oficial para copiar la etiqueta del script:
Aprender -> Tutorial -> Instalar:
Vue uso básico:
<!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 : Modelo Modelo, correspondiente a los datos en datos
- V : Vista Vista, correspondiente a la plantilla en vue
- VM : modelo de vista ViewModel, correspondiente al objeto de instancia de Vue
Puede pensar enDOM Listeners(dom监听器) y en la figura anterior como dos herramientas, que son la clave para realizar el enlace de datos bidireccional:Data Bindings(数据绑定)
- Desde el lado de la Vista, las herramientas en ViewModel
DOM Listenersnos ayudarán a monitorear los cambios de los elementos DOM en la página, y si hay cambios, cambiar los datos en el Modelo; - Desde el lado del Modelo, cuando actualizamos los datos en el Modelo,
Data Bindingsla herramienta nos ayudará a actualizar los elementos DOM en la página.
En pocas palabras: ViewModel es el vínculo entre la vista y el modelo de datos. Cuando cambia el modelo de datos, vm notifica a la vista para que lo modifique; cuando cambia la vista, vm notifica al modelo de datos para que realice las modificaciones correspondientes.
Vue se basa en el modelo MVVM:
3. Sintaxis de la plantilla
Vue utiliza una sintaxis de plantilla basada en HTML que permite a los desarrolladores vincular declarativamente DOM a los datos de la instancia subyacente de Vue. Todas las plantillas de Vue son HTML válido, por lo que pueden ser analizadas por navegadores compatibles con especificaciones y analizadores de HTML. En la implementación subyacente, Vue compila plantillas en funciones de representación DOM virtual. Combinado con el sistema receptivo, Vue puede calcular de manera inteligente cuántos componentes deben volver a renderizarse al menos y minimizar la cantidad de operaciones DOM.
1. Sintaxis de interpolación { {}}
Cuando se crea una instancia de Vue, agrega todas las propiedades del objeto de datos al sistema de reactividad de Vue. Cuando los valores de estas propiedades cambien, la vista "responderá", es decir, la coincidencia se actualizará con los nuevos valores.
- La forma más común de representación es la interpolación de texto usando la sintaxis "Bigote" (llaves dobles)
- Cualquier expresión js se puede escribir dentro de las llaves dobles
- Use el comando v-once para realizar una interpolación única. Cuando los datos cambien, el contenido de la interpolación no se actualizará.
<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
Si los datos que solicitamos del fondo son una pieza de código HTML, si los generamos directamente a través de { {}}, el código HTML también se generará juntos. Las llaves dobles analizarán los datos como texto sin formato, no como código HTML. Pero lo que podemos querer es analizar según el formato HTML y mostrar el contenido correspondiente. Si queremos analizar la visualización HTML, podemos usar el comando v-html: este comando a menudo va seguido de un tipo de cadena, que analizará el HTML de la cadena y lo representará.
<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>El resultado es el siguiente:
3. Comando v-bind
La sintaxis de llaves dobles no se puede aplicar a los atributos de los elementos, en este caso se debe usar el comando v-bind.
La directiva v-bind se puede abreviar como dos puntos:
<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. v-en comando
Puede usar v-on para vincular eventos al elemento actual, o puede usar la 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. Representación condicional
v-if (se puede usar solo), cuando la expresión es verdadera, represente el elemento usando el atributo v-if, de lo contrario, use v-else para representar;
v-show (cambie el atributo de visualización en estilo css), cambie con frecuencia el estilo css, use v-show.
No se recomienda usar v-if y v-for juntos. Cuando v-if se usa con v-for, v-for tiene mayor prioridad que v-if.
La diferencia entre v-if y v-show:
v-si es una sobrecarga de dom perezosa. El nodo dom se cargará solo cuando se cumpla la condición, y el elemento dom no se representará directamente si no se cumple la condición. Escenario de uso: se usa cuando hay menos sobrecarga de dom.
v-show muestra el elemento cuando se cumple la condición y llama a display:none para ocultar el elemento cuando no se cumple la condición, pero carga el elemento dom independientemente de si se cumple la condición. Escenario de uso: se usa cuando se requiere un cambio frecuente 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. Representación de listas v-for
v-for se usa para representar datos de lista. La directiva v-for requiere una sintaxis especial del elemento de formulario en los elementos, donde elementos es la matriz de datos de origen y el elemento es un alias para el elemento de la matriz que se itera.
atributo clave
Cuando usamos v-for, necesitamos agregar un atributo :key al elemento o componente correspondiente.
¿Por qué es necesario este atributo clave?
En realidad, esto está relacionado con el algoritmo Diff del DOM virtual de Vue.
Cuando hay muchos nodos iguales en una capa, es decir, lista de nodos, queremos insertar un nuevo nodo
-
Esperamos que se pueda agregar una F entre B y C, y el algoritmo Diff se ejecute así por defecto.
-
Es decir, actualizar C a F, D a C, E a D, y finalmente insertar E, ¿no es muy ineficiente?
Entonces necesitamos usar la clave para identificar de manera única cada nodo
-
El algoritmo Diff puede identificar correctamente este nodo
-
Encuentre el área de ubicación correcta para insertar el nuevo nodo.
Entonces, en una palabra, la función de la clave es principalmente actualizar el DOM virtual de manera 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. Enlace de estilo y enlace de clase
Manipular la lista de clases y el estilo en línea de un elemento es un requisito común para el enlace de datos, porque todos son atributos, por lo que podemos usar v-bind para manejarlos: simplemente calcule el resultado de la cadena a través de la expresión. Sin embargo, la concatenación de cadenas es engorrosa y propensa a errores. Por lo tanto, Vue ha realizado mejoras especiales al usar v-bind para clase y estilo. El tipo del resultado de la expresión puede ser un objeto o una matriz además de una cadena.
<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>