VUE學習筆記(一)基礎
阿新 • • 發佈:2019-02-04
常用指令
v-model:雙向資料繫結
<div id="app">
輸入您的姓名: <input type="text" v-model="name">
<p>{{ $data | json }}</p>
<p>{{ name }}</p>
</div>
<script>
var V = new Vue({
el : '#app',
data : {
name : '_Appian'
}
});
</script>
input中輸入的name,會被時時獲取到;
v-on:事件繫結
<div id="app">
輸入您的姓名: <input type="text" v-model="name">
<button v-on:click="say">歡迎點選</button>
<button @click="say">歡迎點選</button> //縮寫
</div>
<script>
var V = new Vue({
el : '#app',
data : {
name : '_Appian'
},
methods : {
say : function(){
alert('歡迎' + this.name);
}
}
});
</script>
還可以繫結其他的,如
事件名 |
---|
v-on:mouseove |
v-on:keydown |
v-on:submit |
v-on:keypress |
v-on:keyup |
… |
v-if&v-show&v-else:條件判斷
<div id="app">
<section v-if="loginStatus">
輸入您的姓名: <input type="text" v-model="name">
<button v-on:click="say">歡迎點選</button>
</section>
<section v-if="!loginStatus">
登入使用者: <input type="text">
登入密碼: <input type="password">
<button @click="say">歡迎點選</button>
</section>
</div>
<script>
var V = new Vue({
el : '#app',
data : {
name : '_Appian',
loginStatus : false
},
methods : {
say : function(){
alert('歡迎' + this.name);
},
change:function(){
this.loginStatus=!this.loginStatus;
},
}
});
</script>
this的執行就是例項V
一般來說,v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此,如果需要頻繁切換 v-show 較好,如果在執行時條件不大可能改變 v-if 較好。
v-for:輸出列表
<div id="app">
<ul>
<li v-for="el in products">
{{ el.name }} - ¥ {{ el. price }} - {{ el. category }}
</li>
</ul>
</div>
<script>
var V = new Vue({
el : '#app',
data : {
products : [
{name: 'microphone', price: 25, category: 'electronics'},
{name: 'laptop case', price: 15, category: 'accessories'},
{name: 'screen cleaner', price: 17, category: 'accessories'},
{name: 'laptop charger', price: 70, category: 'electronics'},
{name: 'mouse', price: 40, category: 'electronics'},
{name: 'earphones', price: 20, category: 'electronics'},
{name: 'monitor', price: 120, category: 'electronics'}
]
}
});
</script>
物件裡的對應下標
//#1
<li v-for="el in products">
{{ $index }} - {{ el.name }} - ¥ {{ el. price }} - {{ el. category }}
</li>
//#2
<li v-for="(index,el) in products">
{{ index }} - {{ el.name }} - ¥ {{ el. price }} - {{ el. category }}
</li>