Vue es un marco MVVM, y la conducción de datos y la componente son las ideas centrales de Vue.
En términos simples, el marco MVVM es: solo necesitamos realizar operaciones de datos en la capa de datos, la capa de visualización detectará cada vez que nuestros datos cambien y luego realizará los cambios correspondientes. Los datos de monitoreo son el ViewModel medio. A través de
este modo, ya no podemos manipular directamente el nodo DOM para cambiar los datos.
Interpolación
Los datos de datos se pueden mostrar en la plantilla. Si los datos de datos cambian, los datos mostrados también cambiarán de manera receptiva. Los cambios receptivos significan que podemos lograr cambios en los datos sin forzar una actualización de la página. Este tipo de gramática es por favor ingrese el código Gramática del bigote
<template>
<div class="main">
<h3>这里是title的值：{{title}}</h3>
</div>
</template>
export default {
name:'phonerisk',
data(){
return{
title:'testTitle'
}
}
}
v-html
v-html puede generar un fragmento de cadena de código HTML en fragmentos HTML en lugar de texto normal
<template>
<div class="main">
<p >这里是<span v-html='html'></span></p>
</div>
</template>
export default {
name:'phonerisk',
data(){
return{
html:'<span style="color:blue;font-size:23px;">v-if</span>'
}
}
}
Evento de método
método de enlace v-bind en el evento
La sintaxis de bigote no se puede usar en HTML, por lo que debemos vincular algunas de las categorías que necesitan usar v-bind. v-bind es unir los datos en datos a HTML, para cambiar los atributos.
"v-bind:" 缩写--> ":"
<template>
<div class="main">
<img :src="imgUrl" />
</div>
</template>
export default {
name:'phonerisk',
data(){
return{
imgUrl:"../../static/img/KFC.e66b2f8e.png"
}
}
}
modelo v
v-model es un enlace bidireccional para datos de entrada de formulario. El llamado enlace bidireccional es que los cambios de datos en la capa de vista causarán cambios en los datos de la capa de datos. Por el contrario, los cambios en la capa de datos también causarán cambios en los datos que se muestran en la capa de vista.
<template>
<div class="main">
<input type="text" v-model="name">
{{name}}
<button @click='changeName'>改变名字</button>
</div>
</template>
export default {
name:'phonerisk',
data(){
return{
name:'小明'
}
},
methods:{
changeName(){
this.name = "小花";
}
}
}
v-on
v-on se usa para monitorear eventos DOM, como eventos de clic de botón y eventos de doble clic. La abreviatura de v-on es @, por ejemplo, el siguiente @click es equivalente a v-on: click.
<template>
<div class="main">
<button @click='yes'>你敢点我吗？</button>
</div>
</template>
export default {
name:'phonerisk',
data(){
return{
name:''
}
},
methods:{
yes(){
alert("我有啥不敢的！！！"); // alert 是弹出的小窗口
}
}
}
Modificador de eventos
<template>
<div id="app">
<form action="" @submit.prevent='yzbd'>
<input type="text" name='name' v-model='user'>
<input type="password" name='pwd' v-model='pwd'>
<button>登录</button>
</form>
</div>
</template>
<script>
var vm =new Vue({
el:"#app",
data:{
user:'',
pwd:''
},
methods: {
yzbd:function(){
if(this.user==''){
alert('你不要拿空的表单来骗人，不输用户不叫你进来');
}else{
if(this.user=='zhangsan' && this.pwd=='12345'){
alert('欢迎你回来，zhangsan')
}else{
alert('请输入正确的用户名或密码');
}
}
}
},
})
</script>
Ejemplos de otros modificadores de eventos.
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
Código clave
<body>
<div id="app">
<form action="" @submit.prevent='yzbd'>
<input type="text" v-on:keyup.enter='yzbd'>
</form>
</div>
</body>
<script>
var vm =new Vue({
el:"#app",
data:{
user:'',
pwd:''
},
methods: {
yzbd:function(){
alert('你按回车了');
}
},
})
</script>
Otros códigos clave:
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
v-if representación condicional
v-if se usa para la representación condicional Cuando la condición de juicio del componente cambia, el componente será destruido y reconstruido.
<template>
<div class="main">
<span v-if="display">我叫001</span>
<span v-if="!display">我叫002</span>
<button @click="changeShow">切换</button>
</div>
</template>
javascript
data(){
return{
display:true
}
},
methods:{
changeShow(){
this.display = !this.display;
},
}
v-if v-else
<template>
<body>
<div id="app">
<div v-if='Math.random()>0.5'>
you can see me!
</div>
<div v-else>
now,you can't see me!
</div>
</div>
</body>
</template>
<script>
var vm = new Vue({
el: '#app',
data: {
ok:true
},
});
</script>
v-if v-else-if v-else
<template>
<body>
<div id="app">
<div v-if='name=="陈皮"'>
陈皮
</div>
<div v-else-if='name=="陈卓"'>
陈卓
</div>
<div v-else-if='name=="张汇森"'>
张汇森
</div>
<div v-else>
木有！！！
</div>
</div>
</body>
</template>
<script>
var vm = new Vue({
el: '#app',
data: {
name:'张汇森'
},
});
</script>
v-show
<template>
<head>
<style>
.tabcss {
width: 100%;
}
.tabstyle {
display: inline-block;
width: 100px;
}
.cur {
background: cornsilk;
}
</style>
</head>
<body>
<div id="app">
<div class='tabcss'>
<div id="tab1" @click='tabid=0' class='tabstyle' v-bind:class="{'cur':tabid==0}">标签1</div>
<div id="tab2"@click='tabid=1' class='tabstyle' v-bind:class="{'cur':tabid==1}">标签2</div>
</div>
<div class='box'>
<div v-show='tabid==0'>
标签1里的内容
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt eius quo ab, quasi, dolorem asperiores ratione odit placeat iusto nostrum deleniti non. Quis, tenetur! Quam nisi voluptatum ipsa. Dolor, qui!
</div>
<div v-show="tabid==1">
标签2里的内容
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor eligendi dolorum cum sapiente sed quae accusamus odit! Deleniti ducimus perferendis temporibus sint, consequatur ipsa commodi! Possimus, nobis. Cumque, unde placeat?
</div>
</div>
</div>
</body>
</template>
<script>
var vm = new Vue({
el: '#app',
data: {
tabid:0,
ok:true,
name:'张汇森'
},
});
</script>
