Declaración y vinculación de datos
Declaración de datos
VIEW2
Archivo HTML
Consulte el
HTML del documento vue en chino para demostrar la
dirección del documento: haga clic para ingresar
El documento oficial es así
<div id="app"></div>
<script>
const data = {
a: 1 }
const vm = Vue.createApp({
data(){
return data
}
}).mount('#app')
console.log(vm.a)
</script>
Declare los datos a = 1 para
crear una instancia de componente y el montaje del
montaje es un montaje, función de ciclo de vida
Resultado de impresión del navegador
Otra forma de escribir
const vm = Vue.createApp({
data(){
return{
a:1,
b:2,
c:"hahahaha",
d:true
}
}
}).mount('#app')
console.log(vm.a+vm.b+vm.c+vm.d)
Mismo efecto
Proyecto VUE
<template>
<div></div>
</template>
<script>
export default {
name: "Test1125",
data() {
return {
a: 1,
b: 2,
c: true,
d: "I,dog"
};
}
};
</script>
<style scoped></style>
Uso de enlace de datos
El documento da lo siguiente
texto-v
Actualizar el valor del texto del elemento
La documentación da
<h1 v-text="d"></h1>
<h1>{
{d}}</h1>
v-html
Renderizar elementos HTML
La documentación da
Uso
en datos
testHtml: "<span style='color: red'>我是狗</span>"
div
<div v-html="testHtml"></div>
v-show
Cambie la vitrina
del elemento ,
c es verdadero
<div>
<h1>我是狗</h1>
<div v-show="c">我不是狗</div>
<h1>我是狗</h1>
</div>
<div>
<h1>我是狗</h1>
<div v-show="!c">我不是狗</div>
<h1>我是狗</h1>
</div>
v-si
La función de v-if es la misma que v-show,
pero destruirá el elemento reconstruido y los datos ligados según el valor sea verdadero.
<div>
<h1>我是狗</h1>
<div v-if="!c">我不是狗</div>
<h1>我是狗</h1>
</div>
Comparación de v-if y v-show
v-show
v-if
v-else
V-if o v-else-if deben aparecer en el elemento hermano antes de usar v-else
Donde a = 1
<div>
<h1>我是狗</h1>
<div v-if="a === 0">我不是狗</div>
<div v-else>我就是狗</div>
<h1>我是狗</h1>
</div>
v-else-if
V-if o v-else-if deben aparecer en el elemento hermano antes de usar v-else
<div>
<h1>我是狗</h1>
<div v-if="a === 0">我不是狗</div>
<div v-else-if="a === 1">我是狗?</div>
<div v-else>我就是狗</div>
<h1>我是狗</h1>
</div>
v-para
Renderice la lista según la cantidad de datos,
como carritos de la compra, listas de datos, etc
.: la clave es un recordatorio de clasificación
La documentación da
myItems: [
{ name: "dog", id: 1 },
{ name: "cat", id: 2 }
]
<div v-for="item in myItems" :key="item.id">我的名字是{
{item.name}},我的id是{
{item.id}}</div>
v-en
Se puede abreviar como @
Usage: bind event listener
<button @click="hello">点我点我</button>
export default {
name: "Test1125",
data() {
return {
a: 1,
b: 2,
c: true,
d: "I,dog",
testHtml: "<span style='color: red'>我是狗</span>",
myItems: [
{ name: "dog", id: 1, idw: 2 },
{ name: "cat", id: 2, idw: 1 }
]
};
},
methods:{
hello(){
alert("hello");
}
}
};
v-bind
Vincular datos
<img v-bind:src="imgSrc" />
imgSrc:"/1.jpg"
modelo v
Enlace de datos bidireccional
<div>
<input v-model="d" />
<h2>{
{d}}</h2>
</div>
d: "I,dog"
ranura en v
Espacio de usuario No lo
explicaré en detalle aquí.
v-pre
Omitir el proceso de compilación de elementos y elementos secundarios
<div>
<div v-pre>
{
{ a }}
<span v-pre>{
{ b }}</span>
</div>
</div>
a: 1,
b: 2,
capa en v
La documentación da
<style scoped>
[v-cloak]{
display: none;
}
</style>
v-una vez
Los elementos y los datos solo se procesarán una vez.
Aquí hay una comparación
<div>
<button @click="a = 2">点击</button>
<div v-once>{
{ a }}</div>
<button @click="b = 2">点击</button>
<div>{
{ b }}</div>
</div>
Se puede ver que después de que la representación de a sea inicialmente 11, es inútil hacer clic para modificar el valor de a,
pero b ha cambiado
Hola a todos, soy un code husky, un estudiante de ingeniería de redes en la Facultad de Software, porque soy un "perro" y puedo comer carne a miles de kilómetros. Quiero compartir lo que aprendí en la universidad y progresar con todos. Sin embargo, debido al nivel limitado, inevitablemente habrá algunos errores en el blog. Si hay alguna omisión, ¡házmelo saber! Por el momento, solo actualice en la plataforma csdn, la página de inicio del blog: https://blog.csdn.net/qq_42027681 .
未经本人允许，禁止转载
Se lanzará más tarde
Front-end: vue entrada vue subprograma de desarrollo, etc.
Back-end: entrada java entrada springboot, etc.
Servidor: servidor de entrada MySQL instrucciones simples servidor en la nube para ejecutar el proyecto
python: recomendado no calentar, asegúrese de ver
el uso de algunos complementos, etc.
El camino de la universidad también está en uno mismo, estudiar mucho, juventud
con pasión. Si te interesa la programación, puedes unirte a nuestro grupo qq para comunicarnos juntos: 974178910
Si tiene alguna pregunta, puede dejar un mensaje a continuación, le responderé si lo ve