一般少用全局components
事件处理器
v-on
例1: 点击事件
<button v-on:click="你的method">按钮</button>
<button @click="你的method">按钮</button> <!--这个@click是v-on:click的缩写-->
组件（component）
例1:
<div id="myVue">
<ol>
<my-component v-for='item in games' v-bind:game='item'></my-component>
<!--定义组件 , 名字自取 . 循环games , 绑定game属性 . 每一次循环得到数组内容传给game属性-->
</ol>
</div>
<script>
//定义组件my-component
Vue.component('my-component',{
props: ['game'],
template: '<li>{{ game.text}}</li>'
})
//vue对象实例化
var myVue = new Vue({
el: '#myVue',
data: {
games: [{text:'马里奥'},{text:'塞尔达'},{text:'怪物猎人'}]
}
})
</script>
过滤器(filters)
例1:
<div id='myVue'>
<p>{{message | toupper}}</p>
<!--通过管道符用toupper方法把message传入toupper中返回大写方法-->
</div>
<script>
var myVue = new Vue({
el: '#myVue',
data: {
message: 'hello vue'
},
filters: {
toupper: function(value){
return value.toUpperCase();
}
}
})
</script>
计算属性(computed)
例1:
<div id="myVue">
<p>今年3月3日发卖的任天堂新一代主机Switch的价格是:{{price}}円.
含税价格:{{priceInTax}}円.折合人民币{{priceChinaRMB}}元</p>
</div>
<script>
var myVue = new Vue({
el: '#myVue',
data: {
price: 29980 //原始价格
},
computed: {
priceInTax: function(){
return this.price * 1.08 //含税价格
},
priceChinaRMB: function () {
return Math.round(this.priceInTax / 16.75) //换算人民币
}
}
})
</script>
监视属性(watch)
例1:
<div id="myVue">
<p>今年3月3日发卖的任天堂新一代主机Switch的价格是:{{price}}円.
含税价格:{{priceInTax}}円.折合人民币{{priceChinaRMB}}元</p>
<button @click="btnClick(10000)">加价10000円</button>
</div>
<script>
var myVue = new Vue({
el: '#myVue',
data: {
price: 0,
priceInTax: 0,
priceChinaRMB: 0
},
watch: { //监视price,一旦它发生变化就会调用这个函数
price: function(newVal,oldVal){ //它的newVal就是下面赋值29980,oldVal就是0
this.priceInTax = Math.round(this.price * 1.08)
this.priceChinaRMB = Math.round(this.priceInTax / 16.75)
}
},
methods: {
btnClick: function(raiseAprice){
this.price += raiseAprice
}
}
})
myVue.price = 29980 //这样设置好vue实例后让price变化 , watch就会启用
</script>
Class绑定
例:
<style>
.active{
color:blue;
}
</style>
<div id="myVue">
<p v-bind:class="{active:isActive}">变色1</p>
<p :class="{active:isActive}">变色1</p>
<button @click="btnClick">改变class</button>
</div>
<script>
var myVue = new Vue({
el: "#myVue",
data: {
isActive: true
},
methods: {
btnClick:function(){
this.isActive = !this.isActive
}
}
})
</script>
Class对象绑定
<style>
.active {
color: red;
}
.big {
font-weight: bolder;
font-size: 60px;
}
</style>
<div id="myVue">
<p :class="myClass">文本</p>
<button @click="btnClick">改变class</button>
</div>
<script>
var myVue = new Vue({
el: '#myVue',
data: {
myClass: {
active: true,
big: true
},
},
methods: {
btnClick: function () {
this.myClass.big = !this.myClass.big
this.myClass.active = !this.myClass.active
}
}
})
</script>
条件渲染
<div id="myApp">
<h1 v-if="result == 0">成绩未公布</h1>
<h1 v-else-if="result < 60">{{result}}分 - 考试不及格</h1>
<h1 v-else-if="result < 80">{{result}}分 - 还需努力</h1>
<h1 v-else>{{result}}分 - 考得不错，玩游戏吧！</h1>
<button @click="btnClick">考试成绩</button>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
result: 0
},
methods: {
btnClick: function(){
this.result = Math.round(Math.random() * 100);
},
},
});
</script>
元素显示
<div id="myApp">
<h1 v-show="result">任天堂新一代主机Switch</h1>
<button @click="btnClick">点击消失</button>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
result: true
},
methods: {
btnClick: function(){
this.result = !this.result;
},
},
});
</script>
列表渲染
<div id="myApp">
<ul>
<li v-for="(game, index) in games">({{index}}) {{game.title}} / 售价：{{game.price}}元</li>
</ul>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
games: [
{title:"勇者斗恶龙",price:500},
{title:"库跑卡丁车",price:400},
{title:"马里奥世界",price:550},
]
},
});
</script>
对象的迭代
<div id="myApp">
<h1>JS对象迭代</h1>
<div v-for="(value, key) in mygame">
{{ key }} : {{ value }}
</div>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
mygame: {
title: "乌贼娘2代",
price: 350,
pubdate: "2017年夏季",
category: "射击",
agerange: "全年龄",
},
},
});
</script>
事件处理器
<div id="myApp">
<h1>事件处理器</h1>
<input id="txtName" v-on:keyup="txtKeyup($event)">
<button id="btnOK" v-on:click="btnClick($event)">OK</button>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {},
methods: {
txtKeyup: function(event){
this.debugLog(event);
},
btnClick: function(event){
this.debugLog(event);
},
debugLog:function(event){
console.log(
event.srcElement.tagName,
event.srcElement.id,
event.srcElement.innerHTML,
event.key?event.key:""
);
},
},
});
</script>
网友评论