对于vue如果只是学习知识点,完全掌握它是不太现实的,所以说写一些小实例很有必要,和大家分享一下。。。
1.事件处理 v-on及修饰符
这是一个点击按钮事件和一个鼠标移动事件的案例
<div id="app">
<h1>Event</h1>
<input v-on:click="add" type="button" value="加一岁" />
<input v-on:click="subtract" type="button" value="减一岁" />
<p>我今年{{age}}</p>
<div id="canvas" v-on:mouseover="update">
{{x}},{{y}}
</div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
age:18,
x:0,
y:0
},
methods:{
add: function(){
this.age++;
},
subtract: function(){
this.age--;
},
update: function(event){
this.x = event.offsetX;
this.y = event.offsetY;
}
}
</script>
对于事件而言,它还有事件修饰符
<!--阻止事件冒泡-->
<a v-on:click.stop = "doSome"></a>
<!--提交事件不再重载页面-->
<form v-on:submit.prevent="onSubmit"></form>
<!--添加事件倾听时使用捕捉模式-->
<div v-on:click.capture="dothis"></div>
<!--只有事件在该元素本身时发生触发回调-->
<div v-on:click.self="dothis"></div>
<!--表示该事件只触发一次-->
<div v-on:click.once="dothis"></div>
<!--修饰符可以串联-->
<div v-on:click.self.stop="dothis"></div>
举个修饰符的栗子
这个例子中修饰符prevent阻止重载页面,只会弹出Hello,不会跳转到百度
<div id="app">
<a v-on:click.prvent="alert()"href="http://www.baidu.com">
NEW PAGE
</a>
<div>
new Vue({
el:'#app',
data:{},
methods:{
alert:function(){
alert('Hello!');
}
}
});
</script>
使用修饰符,顺序很重要
2.键盘事件及键值修饰符
<div id="app">
<h1>键盘Event</h1>
<label>姓名:</label>
<!--enter键值修饰符,在键盘上按下enter键时才会调用函数logName-->
<input type="text" v-on:keyup.enter="logName"/>
<label>职业:</label>
<!--alt.enter键值修饰符,在键盘上同时按下alt键和enter键时才会调用
函数logName-->
<input type="text" v-on:keyup.alt.enter="logJob"/>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{},
methods:{
logName:function(){
console.log('输入名字');
},
logJob:function(){
console.log('输入职业');
}
}
})
</script>
键值修饰符都有:
enter,alt,tab,esc,delete(捕获’删除’和’退格’键),space,up,down,left,right
3. 数据双向绑定v-model
在vue中给我们提供了v-model指令专门来实现数据的双向绑定,这就很大程度上减少了我们的代码量,它一般用在input,select,textarea
<div id="app">
<p>{{message}}</p>
<input v-model="message" />
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
message:'我们都很优秀'
}
})
</script>
4.计算属性computed
计算属性关键字是computed,我们可以使用 methods 来替computed,效果上两个都是一样的, 但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
下面是一个比较计算属性computed和methods方法的栗子
<div id="app">
<p>原始字符串: {{message}}</p>
<p>计算后反转字符串: {{reverseMessage}}</p>
<p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
</div>
<script src="vue.js"></script>
<script>
/*声明了一个计算属性 reversedMessage,提供的函数将用作属性vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。*/
var vm = new Vue({
el:'#app',
data:{
message:'IMPORTANT'
},
computed:{
reverseMessage: function(){
return this.message.split('').reverse().join('')
}
},
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
5.v-bind:class动态改变CSS
在vue中我们可以通过v-bind:class来动态改变一些样式
我们可以传给 v-bind:class 一个对象,以动态地切换 class
下面给大家一个改变样式的简单小栗子:
<div id="app">
<button v-on:click="changeColor = !changeColor">改变颜色</button>
<button v-on:click="changeLength = !changeLength">改变长度</button>
<div v-bind:class="changeClass">
<span>我们很优秀</span>
</div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
changeColor:false,
changeLength:false
},
methods:{},
computed:{
changeClass:function(){
return {
changeColor:this.changeColor,
changeLength:this.changeLength
}
}
}
})
</script>