Vue ist ein MVVM-Framework, und Datensteuerung und Komponentisierung sind die Kernideen von Vue.
Einfach ausgedrückt lautet das MVVM-Framework: Wir müssen nur Datenoperationen in der Datenschicht ausführen. Die Anzeigeschicht erkennt jedes Mal, wenn sich unsere Daten ändern, und nimmt dann entsprechende Änderungen vor. Die Überwachungsdaten sind das mittlere ViewModel. In
diesem Modus können wir den DOM-Knoten nicht mehr direkt bearbeiten, um die Daten zu ändern.
Interpolation
Die Datendaten können in der Vorlage angezeigt werden. Wenn sich die Datendaten ändern, ändern sich auch die angezeigten Daten entsprechend. Responsive Änderungen bedeuten, dass wir Datenänderungen erzielen können, ohne eine Aktualisierung der Seite zu erzwingen. Diese Art von Grammatik ist bitte geben Sie den Code Moustache Grammatik
<template>
<div class="main">
<h3>这里是title的值：{{title}}</h3>
</div>
</template>
export default {
name:'phonerisk',
data(){
return{
title:'testTitle'
}
}
}
v-html
v-html kann anstelle von normalem Text ein Stück HTML-Code in HTML-Fragmente ausgeben
<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>'
}
}
}
Methodenereignis
v-bind-Bindungsmethode im Ereignis
Die Schnurrbartsyntax kann nicht für HTML verwendet werden, daher müssen einige der Kategorien gebunden werden, die für die Verwendung von v-bind erforderlich sind. v-bind dient zum Binden der Daten in Daten an HTML, um die Attribute zu ändern.
"v-bind:" 缩写--> ":"
<template>
<div class="main">
<img :src="imgUrl" />
</div>
</template>
export default {
name:'phonerisk',
data(){
return{
imgUrl:"../../static/img/KFC.e66b2f8e.png"
}
}
}
V-Modell
v-model ist eine bidirektionale Bindung für Formulareingabedaten. Die sogenannte bidirektionale Bindung besteht darin, dass Datenänderungen in der Ansichtsebene Änderungen in den Daten der Datenschicht verursachen. Umgekehrt verursachen Änderungen in der Datenschicht auch Änderungen in den Daten, die in der Ansichtsebene angezeigt werden.
<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 wird zum Überwachen von DOM-Ereignissen verwendet, z. B. Schaltflächenklickereignisse und Doppelklickereignisse. Die Abkürzung für v-on lautet @. Der folgende @click entspricht beispielsweise v-on: click.
<template>
<div class="main">
<button @click='yes'>你敢点我吗？</button>
</div>
</template>
export default {
name:'phonerisk',
data(){
return{
name:''
}
},
methods:{
yes(){
alert("我有啥不敢的！！！"); // alert 是弹出的小窗口
}
}
}
Ereignismodifikator
<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>
Beispiele für andere Ereignismodifikatoren
<!-- 阻止单击事件继续传播 -->
<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>
Schlüsselcode
<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>
Andere Schlüsselcodes:
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
v-wenn bedingtes Rendern
v-if wird für das bedingte Rendern verwendet. Wenn sich die Beurteilungsbedingung der Komponente ändert, wird die Komponente zerstört und neu erstellt.
<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-wenn v-sonst
<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-wenn v-sonst-wenn v-sonst
<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>
