Tabla de contenido
Modelo de datos y renderizado básico de interpolación de Vue
Introducción
Vue es un marco progresivo para crear interfaces de usuario . A diferencia de otros frameworks grandes, Vue está diseñado para aplicarse capa por capa de abajo hacia arriba. La biblioteca principal de Vue solo se centra en la capa de vista, que no solo es fácil de comenzar, sino que también es 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 es totalmente capaz de proporcionar controladores para aplicaciones complejas de una sola página. Se utiliza para crear una aplicación de una sola página: index.html. El enrutamiento del complemento Vue se utiliza para realizar saltos de página.
Modelo de datos y renderizado básico de interpolación de Vue
//1-Vue基本渲染-插值
//代码
window.onload = function () {
// 创建vue实例,vue实例要与模板(DOM)绑定
let vm= new Vue({
el: "#app",
data: {// 数据模型
msg:'hello world'
},
// 函数
methods: {
changeData(){
if(this.msg==='hello world'){
// 更改数据模型中的数据
// 获取数据模型中的数据
// 在vue实例内访问vue实例身上的属性和方法
this.msg='你好我是修改后的值'
}else{
this.msg='hello world';
}
}
},
})
}
//html代码
<!-- 以前把msg作为元素文本的,获取dom节点，绑定事件，dom.innerText=msg-->
<div id="app">
<!-- 在模板内访问vue实例中数据模型中的数据 插值 -->
<!-- 基本渲染 插值 -->
{
{msg}}
<p>{
{msg}}</p>
<!-- 点击按钮 改变数据模型中的数据msg变量 -->
<button @click='changeData'>点我修改数据模型msg数据</button>
</div>
//数据模型更改，引发了vm驱动MVVM
El patrón MVVM, como su nombre indica, es el patrón Model-View-ViewModel.
Introducción a mvvm: m se refiere a la operación de lógica empresarial en el servidor modelo, v se refiere a la vista (página) y vm se refiere al centro central entre el modelo ViewModel y la vista, como vue.js.
Puede pensar en
DOM Listenersy en laData Bindingsfigura anterior como dos herramientas, que son la clave para lograr la vinculación bidireccional.Desde el lado de la Vista, las herramientas en ViewModel
DOM Listenersnos ayudarán a monitorear los cambios en los elementos DOM en la página y, si hay cambios, cambiar los datos en el Modelo;Desde el lado del Modelo, cuando actualicemos los datos en el Modelo,
Data Bindingsla herramienta nos ayudará a actualizar los elementos DOM en la página.
//2.数据模型
let vm=new Vue({
el:'#app',
data:{
msg:'高校优质男',
time:new Date()
},
methods:{
sayName(){
console.log(this.name)
},
}
})
// 每隔一秒重新查询一次时间
setInterval(()=>{
vm.time=new Date()
},1000)
// 查看vue实例对象
console.log(vm)ciclo vital
Todo el proceso, desde la creación de la instancia vue hasta la generación del dom virtual, el enlace, el monitoreo, la representación y la destrucción de datos.
El primer paso del ciclo de vida es crear una instancia de vue e inicializarla.
En la fase de inicialización de la instancia de vue,
beforeCreate
llama a beforeCreate durante la inicialización, completando la inicialización de las propiedades relacionadas con el ciclo de vida de la instancia de vue y la inicialización de eventos. En este momento, no se puede acceder a los datos y métodos del modelo de datos.
Después de que se inicializa la creación
, se completan las operaciones de inyección y monitoreo de datos de Vue. La ejecución de esta estructura significa que se crea la instancia de Vue y se puede acceder al modelo de datos y los métodos de los métodos. En la fase de montaje de la instancia de Vue, antes de montar, después de la creación.
,
vue
determinará si la instancia contiene el atributo el. Si no hay vm.$mount(el), determinará si contiene el atributo de plantilla. Si es así, se analizará en una función de renderizado. Si no analiza el html externo especificado por el. Aquí solo se completa el análisis de la plantilla pero los datos no están vinculados a la plantilla.
montado
crea vm.$el para reemplazar el. Lo que realmente se completa es la operación de enlace de datos, durante la cual se ejecuta la función de renderizado, se analiza la plantilla y los datos se enlazan dinámicamente. La fase de actualización de la instancia de vue beforeUpdate actualiza
el
dom
virtual Se completa
la actualización del nodo . Se llama
a la nueva representación de la página antes de que se destruya
la fase de destrucción de la instancia de Vue
, antes de que se destruya Destroy. En este momento, se puede acceder a la instancia de Vue destruida .
Se completó la eliminación de oyentes, subcomponentes, detectores de eventos, etc. y se destruyó el objeto de instancia de 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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
</head>
<body>
<!-- 模版 视图层 -->
<div id="app">
<!-- 采用ref代替id ref表示dom的引用 可以通过ref属性找到dom元素 -->
<div ref="box">{
{msg}}</div>
</div>
<script>
let vm = new Vue({
// 使用el属性和模版进行绑定
el: '#app',
// 数据模型 存放vue变量
data: {
msg: 'hello Vue2'
},
// vue实例中提供了template模板 就把template作为模板编译,使用render函数渲染
// template:`
// <h1>{
{msg}}</h1>
// `,
methods: {
// 异步请求 查询所有轮播图 axios
async findAll() {
let res = await axios.get('http://121.199.0.35:8888/index/carousel/findAll');
console.log(res);
}
},
/**
* 生命周期
* beforeCreate实例初始化之前 初始化默认事件和生命周期
* created 实例初始化完成 可以访问数据模型data和methods中的方法 是异步请求可以最早
*/
beforeCreate() {
console.log('实例初始化之前 初始化默认事件和生命周期', this.msg);
},
created() {
console.log('实例初始化完成 初始化完成响应式数据和methods方法', this.msg);
// this.findAll();
},
/**
* 实例挂载阶段 与模板绑定阶段
* beforeMount 实例挂载之前 查看有没有el选项,有的话查看有没有template选项
* 没有template选项，将el外部的html元素作为模板 此时访问不到dom元素
* mounted 实例挂载完成 vm创建$el代替el完成模板编译 此时可以访问dom元素 渲染图表 可以发送异步请求
*/
beforeMount() {
console.log('实例挂载之前 此时访问不到dom节点', this.$refs.box, '获取ref引用对应的dom元素')
},
// 也可以手动提供render函数编译模板
// render(createElement) {
// return createElement('h2', {}, this.msg1)
// },
mounted() {
console.log('实例挂载完成 此时可以访问dom节点', this.$refs['box'])
},
/**
* 实例更新阶段 只要响应式数据发生更改 生命周期就会被触发
* beforeUpdate 实例更新前 此时更改了数据，数据是最新，dom中数据还是原始数据，dom还未重新更新
* updated 实例更新后 此时dom中数据就是最新数据 dom重新被编译到模板中
*
* vue机制 nextTick 异步加载dom 更新dom 数据更改 dom用到该数据不会立马更新 dom更新存放在回调函数中
* 会在下一次回调函数中完成更新
*/
beforeUpdate() {
console.log('实例更新前', this.$refs.box.innerHTML, this.msg);
},
updated() {
console.log('实例更新完成', this.$refs.box.innerHTML, this.msg);
},
/**
* 实例销毁阶段生命周期
* beforeDestroy 实例销毁之前 依旧可以修改vue实例响应式数据
* destroyed 实例销毁完成 销毁了监听器 子组件 和事件监听 无法修改vue实例响应式数据 不会触发更新阶段生命周期
*/
beforeDestroy() {
console.log('实例销毁之前', this.msg);
},
destroyed() {
console.log('实例销毁完成', this.msg);
}
});
setTimeout(() => {
// 手动销毁实例
vm.$destroy()
}, 8000);
// 如果没有el属性 可以使用$mount和模板进行绑定
// vm.$mount('#app');
// setTimeout(()=>{
// vm.msg = 'hello world'
// },1000)
</script>
</body>
</html>sintaxis de plantilla
introducir:
Vue utiliza una sintaxis de plantilla basada en HTML, lo que permite a los desarrolladores vincular declarativamente el DOM a los datos de la instancia de Vue subyacente. Todas las plantillas de Vue son HTML legales, por lo que pueden ser analizadas por navegadores y analizadores HTML que sigan la especificación. Debajo del capó, Vue compila plantillas en funciones de representación DOM virtuales. Combinado con el sistema responsivo, Vue puede calcular de forma inteligente la cantidad mínima de componentes que deben volver a renderizarse y minimizar la cantidad de operaciones DOM. Si está familiarizado con el DOM virtual y prefiere la potencia bruta de JavaScript, también puede escribir funciones de renderizado y renderizar directamente sin plantillas, usando la sintaxis JSX opcional (react usa la sintaxis jsx).
<!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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<!-- 模版 -->
<div id="app">
<!-- 1.Mustache语法 双花括号 文本插值 -->
{
{msg}}
<!-- 2.使用v-once 进行一次性插值 后续该vue变量改变 执行一次性插值的dom元素不会改变 -->
<div v-once>{
{msg}}</div>
<!-- 3.使用v-html 识别代码片段 -->
<!-- {
{content}} 无法将字符串中标签解析 -->
<div v-html="content"></div>
<!-- 4.1给标签绑定变量 使用v-bind进行绑定 无法使用{
{}} -->
<!-- <div v-bind:title="title">我是一个块级元素</div> -->
<!-- 4.2绑定变量 简写为: -->
<div :title="title">我是一个块级元素</div>
<!-- 5.1给标签绑定事件 使用v-on:事件类型 -->
<!-- <button v-on:click="handler">点击我</button> -->
<!-- 5.2给标签绑定事件 简写为@ -->
<button @click="handler">点击我</button>
<!-- 6.{
{js表达式}} -->
{
{Boolean(str)}}
{
{str.split(",").reverse()}}
{
{str?'string':'null'}}
<!-- {
{if(str){console.log(str)}else{console.log('null')}}} -->
</div>
<script>
let vm = new Vue({
// el:'#app',
// 数据模型
data:{
msg:'hello vue2',
str:'hello',
content:'<p>文章标题</p><article>文章内容<a href="#">百度一下</a></article>',
title:'我div标签的提示说明'
},
methods:{
handler(){
console.log('我被点击了');
}
},
});
// vue实例与模版进行绑定
vm.$mount('#app');
setTimeout(()=>{
vm.msg = 'hello world'
},1000)
</script>
</body>
</html>
Representación condicional
v-si
v-if (se puede usar solo) , cuando la expresión es verdadera, se representa el elemento que usa el atributo v-if; de lo contrario, se representa usando v-else
<!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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 条件渲染 v-if v-else-if v-else 或者使用v-show -->
<div v-if="type==='tel'">
<form>
<label for="tel">电话:</label>
<input type="text" id="tel" placeholder="请输入电话号码">
</form>
</div>
<div v-else-if="type==='email'">
<form>
<label for="email">邮箱:</label>
<input type="text" id="email" placeholder="请输入邮箱">
</form>
</div>
<div v-else>错误</div>
<button @click="toggle">切换</button>
<div v-show>显示内容</div>
</div>
<script>
new Vue({
el:'#app',
data:{
type:'tel',
isShow:false,
},
methods:{
toggle(){
if(this.type==='tel'){
this.type='email'
}else{
this.type='tel'
}
}
},
});
</script>
</body>
</html>
Como se puede ver en los resultados:
v-if es una representación condicional "verdadera", ya que garantiza que los detectores de eventos y los subcomponentes dentro del bloque condicional se destruyan y se vuelvan a crear adecuadamente durante el cambio.
v-if también es diferido: si la condición es falsa en el renderizado inicial, no hace nada; el bloque condicional no comenzará a renderizarse hasta que la condición se vuelva verdadera.
v-if tiene una mayor sobrecarga de conmutación.
v-if corresponde a la adición o eliminación de elementos/etiquetas
Agregar elementos si se cumplen las condiciones Eliminar elementos si no se cumplen las condiciones
v-show
v-show (cambie el atributo de visualización en estilo css), cambie con frecuencia el estilo css, use v-show
<!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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 条件渲染 v-if v-else-if v-else 或者使用v-show -->
<div v-show="type==='tel'">
<form>
<label for="tel">电话:</label>
<input type="text" id="tel" placeholder="请输入电话号码">
</form>
</div>
<div v-show="type==='email'">
<form>
<label for="email">邮箱:</label>
<input type="text" id="email" placeholder="请输入邮箱">
</form>
</div>
<button @click="toggle">切换</button>
<div v-show>显示内容</div>
</div>
<script>
new Vue({
el:'#app',
data:{
type:'tel',
isShow:false,
},
methods:{
toggle(){
if(this.type==='tel'){
this.type='email'
}else{
this.type='tel'
}
}
},
});
</script>
</body>
</html>
Se puede ver en los resultados:
v-show El elemento siempre se representará independientemente de las condiciones iniciales y simplemente se alterna según CSS.
v-show tiene una mayor sobrecarga de renderizado inicial.
v-show corresponde al atributo de visualización en el estilo CSS del elemento.
Si se cumple la condición, el elemento se muestra. display:block.
Si no se cumple la condición, el elemento se oculta. display:none.
v-show se utiliza para cambiar frecuentemente los estilos CSS.
Representación de lista
Se utiliza para representar datos de lista. La directiva v-for requiere una sintaxis especial del elemento de formulario en elementos, donde elementos es la matriz de datos de origen y elemento es un alias para el elemento de la matriz que se está iterando.
llave
Vue renderizará elementos de la manera más eficiente posible, a menudo reutilizando elementos existentes en lugar de renderizarlos desde cero. Hacer esto hace que Vue sea muy rápido. Pero a veces no queremos que Vue se reutilice. En este momento, Vue le proporciona una forma de expresar "estos dos elementos son completamente independientes, no los reutilice". Simplemente agregue una clave con un valor único
<!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>
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> -->
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<!-- <li v-for="(item,index) in animal">
{
{item}}---{
{message}}---{
{index}}
</li> -->
<!-- <li v-for="(item,index) of animal">
{
{item}}---{
{message}}---{
{index}}
</li> -->
<!-- <li v-for="(value,key,index) in obj">
{
{key}}---{
{value}}---{
{index}}
</li> -->
<li v-for="(value,key,index) of obj":key="index">
{
{key}}---{
{value}}---{
{index}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'消息',
animal:['猴子','大象','老虎'],
obj:{
name:'terry',
age:18,
gender:'male'
}
},
methods:{},
})
</script>
</body>
</html>
encuadernación de estilo
Manipular la lista de clases de un elemento y los estilos en línea es una necesidad común para el enlace de datos y, dado que son atributos, 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 utilizar v-bind para clases y estilos. Además de las cadenas, el tipo de resultado de la expresión también puede ser un objeto o una matriz.
<!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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<!-- style绑定 动态绑定 -->
<div :style="{color:current}">{
{msg}}</div>
<div :style="styleObj1">{
{msg}}</div>
<div :style="[styleObj1,styleObj2]">{
{msg}}</div>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:"hello Vue2",
current:'red',
styleObj1:{
fontSize:'24px',
backgroundColor:"pink",
},
styleObj2:{
width:'100px',
height:'100px',
}
},
methods:{},
})
</script>
</body>
</html>
enlace de clase
Manipular la lista de clases de un elemento y los estilos en línea es una necesidad común para el enlace de datos y, dado que son atributos, 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 utilizar v-bind para clases y estilos. Además de las cadenas, el tipo de resultado de la expresión también puede ser un objeto o una matriz.
<!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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<style>
.four{
border: 1px solid cyan;
}
.active{
color: red;
font-size: 24px;
}
.error{
background: blue;
}
</style>
</head>
<body>
<div id="app">
<!-- 动态绑定类名 -->
<div class="four" :class="{active:isActive,error:hasError}">{
{msg}}</div>
<div class="four" :class="toggle">{
{msg}}</div>
<div class="four" :class="[isActive1,hasError1]">{
{msg}}</div>
</div>
<script>
new Vue({
el:'#app',
data:{
isActive:true,
hasError:false,
isActive1:'active',
hasError1:'error',
toggle:{
active:false,
error:true,
},
msg:"hello Vue2",
},
methods:{},
})
</script>
</body>
</html>
[Pregunta de la entrevista: ¿Por qué los datos son una función y no un objeto en proyectos grandes?]
Un componente es una instancia reutilizable. Cuando hace referencia a un componente, los datos del componente son un objeto normal. Todos los usuarios que utilizan este componente hacen referencia a los mismos datos, lo que provocará contaminación de datos.
Los datos que no estén empaquetados con return serán visibles globalmente en el proyecto y causarán contaminación variable;
después de empaquetarlos con return, las variables en los datos solo tendrán efecto en el componente actual y no afectarán a otros componentes.
Cuando se define un componente, los datos deben declararse como una función que devuelve un objeto de datos inicial, ya que el componente puede usarse para crear múltiples instancias. Si los datos siguieran siendo un objeto puro, ¡todas las instancias compartirían una referencia al mismo objeto de datos! Al proporcionar una función de datos, podemos llamar a la función de datos cada vez que se crea una nueva instancia, devolviendo así una copia completamente nueva del objeto de datos original.