VueはMVVMフレームワークであり、データの駆動とコンポーネント化はVueの中核的なアイデアです。
簡単に言えば、MVVMフレームワークは、データレイヤーでデータ操作を行うだけで、表示レイヤーがデータが変更されるたびに検出し、対応する変更を加えます。監視データは中間のViewModelです。
このようなモデルは、我々はもはやデータを直接変更するには、DOMノードを操作することはできません。
補間
テンプレートにデータデータを表示することができ、データデータが変化すると、それに応じて表示データも変化します。応答性の高い変更とは、ページを強制的に更新せずにデータを変更できることを意味します。この種類の文法はコードを入力してくださいMustache grammar
<template>
<div class="main">
<h3>这里是title的值：{{title}}</h3>
</div>
</template>
export default {
name:'phonerisk',
data(){
return{
title:'testTitle'
}
}
}
v-html
v-htmlは、通常のテキストではなくHTMLコード文字列をHTMLフラグメントに出力できます
<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>'
}
}
}
メソッドイベント
イベントのvバインドバインディングメソッド
Mustache構文はHTMLでは使用できないため、v-bindを使用する必要があるカテゴリの一部をバインドする必要があります。v-bindは、データ内のデータをHTMLにバインドして、属性を変更します。
"v-bind:" 缩写--> ":"
<template>
<div class="main">
<img :src="imgUrl" />
</div>
</template>
export default {
name:'phonerisk',
data(){
return{
imgUrl:"../../static/img/KFC.e66b2f8e.png"
}
}
}
vモデル
v-modelは、フォーム入力データの双方向バインディングです。いわゆる双方向バインディングでは、ビューレイヤーのデータが変更されると、データレイヤーのデータが変更されます。逆に、データレイヤーが変更されると、ビューレイヤーに表示されるデータも変更されます。
<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は、ボタンクリックイベントやダブルクリックイベントなどのDOMイベントを監視するために使用されます。v-onの省略形は@です。たとえば、次の@clickはv-onと同等です：click。
<template>
<div class="main">
<button @click='yes'>你敢点我吗？</button>
</div>
</template>
export default {
name:'phonerisk',
data(){
return{
name:''
}
},
methods:{
yes(){
alert("我有啥不敢的！！！"); // alert 是弹出的小窗口
}
}
}
イベント修飾子
<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>
その他のイベント修飾子の例
<!-- 阻止单击事件继续传播 -->
<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>
キーコード
<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>
その他のキーコード：
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
v-if条件付きレンダリング
v-ifは条件付きレンダリングに使用され、コンポーネントの判定条件が変わると、コンポーネントが破壊されて再構築されます。
<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ショー
<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>
