在学习了教程(yi),之后大家对data,method,v-for,v-on相信都有所了解了
现在进一步介绍Vue
v-on:因为经常被使用,所以它有个简写即@
<div id="box">
<input type="button" value="按钮1" v-on:click="AlertMsg1()">
<input type="button" value="按钮2" @click="AlertMsg2()">
</div>
<script src="../lib/vue.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
el:"#box",
data:{},
methods:{
AlertMsg1:function(){
alert(1)
},
AlertMsg2:function(){
alert(2)
}
}
})
}
</script>
image.png
按钮1和按钮2都会弹出数字,说明指令v-on:等价于@
接上文的例子,讲一下事件冒泡
<div id="box">
<div @click="AlertMsg2()">
<input type="button" value="按钮1" v-on:click="AlertMsg1()">
</div>
</div>
image.png
image.png
点击之后,先弹出1,再弹出2,说明里面元素的事件先触发,它的父元素后触发
为了阻止冒泡,我们得做点什么
<input type="button" value="按钮1" v-on:click="AlertMsg1($event)">
AlertMsg1: function (e) {
alert(1)
e.cancelBubble=true
}
修改了这两段代码之后,就不会冒泡了
但是,仍然很麻烦,能不能再简单一点呢?
<input type="button" value="按钮1" v-on:click.stop="AlertMsg1()">
AlertMsg1: function (e) {
alert(1)
}
那现在只要在事件后面加上“.stop”就可以阻止冒泡了!
除了阻止冒泡,对于事件我们还经常在表单上,阻止默认行为,改怎么做呢?
//传统的做法
e.preventDefault
//Vue的做法
<form action="/" id="formCs" @submit.prevent="AlertMsg1()">
<input type="submit" >
</form>
这样就阻止了默认行为,只要加“.prevent”就可以了
还有常用的键盘事件
<div id="box">
<input type="text" @keydown="alert1($event)">
</div>
<script>
new Vue({
el: "#box",
data: {},
methods: {
alert1: function (e) {
alert(e.keyCode)
}
}
})
</script>
image.png
在输入框,每次按下键盘的按键后,会弹出相应的码号
常用的键盘事件除了keydown还有keyup
有的时候我们希望只在相应的按键触发处理函数,则必须在函数里做一个判断
if(e.keyCode===xx){}
现有有更简单的方式
<input type="text" @keydown.65="alert1($event)">
在键盘事件后面加上“.键的码号”,“a”的码号是65,所以只有输入a时才调用处理函数
对于码号,比较常用的也做了处理,
比如上、下、左、右四个方向键分别用.up、.down、.left、right,还有回车键.enter、.Alt等
<div id="box">
![]({{url}})
</div>
<script>
new Vue({
el: "#box",
data: {
url:'https://www.baidu.com/img/bd_logo1.png'
},
methods: {
}
})
</script>
会报错,没有效果
![](url)
使用v-bind:指令绑定属性
![](url)
“v-bind:”指令的简化语法“:”
如果绑定class属性Vue给出了更多语法
<style>
.blue{
color:blue;
}
</style>
<div id="box">
<h4 :class="blue">Vue属性绑定</h4>
</div>
<script>
new Vue({
el: "#box",
data: {
blue:'blue'
},
methods: {
}
})
</script>
image.png
如果添加多个class
<style>
.blue{
color:blue;
}
.yellow{
background:yellow;
}
</style>
<div id="box">
<h4 :class="[blue,yellow]">Vue属性绑定</h4>
</div>
<script>
new Vue({
el: "#box",
data: {
blue:'blue',
yellow:'yellow'
},
methods: {
}
})
</script>
image.png
如果class的值想让它在需要的时候出现,不需要时隐藏,该怎么办
<style>
.blue{
color:blue;
}
</style>
<div id="box">
<h4 :class="{blue:true}">Vue属性绑定</h4>
</div>
<script>
new Vue({
el: "#box",
data: {
blue:'blue'
},
methods: {
}
})
</script>
image.png
<h4 :class="{blue:false}">Vue属性绑定</h4>
当对象内blue的值为false时,则class隐藏
image.png用chrome检查元素,就会发现class的值没有了
一般我们这样用这个特性
<style>
.blue{
color:blue;
}
.yellow{
background:yellow
}
</style>
<div id="box">
<h4 :class="json">Vue属性绑定</h4>
</div>
<script>
new Vue({
el: "#box",
data: {
json:{
blue:true,
yellow:false
}
},
methods: {
}
})
</script>
image.png
浏览器检查元素Elements会显示
image.png
因此style也是如此
<div id="box">
<h4 :style="[blue,yellow]">Vue属性绑定</h4>
</div>
<script>
new Vue({
el: "#box",
data: {
blue:{color:'blue'},
yellow:{backgroundColor:'yellow'}
},
methods: {
}
})
</script>
image.png
但是复合样式,必须采用驼峰命名法
接下来,会介绍Vue的模板
<div id="box">
<input type="text" v-model="msg">
<br>
{{msg}}
</div>
<script>
new Vue({
el: "#box",
data: {
msg:'welcome you'
},
methods: {
}
})
</script>
image.png
image.png
v-model指令,在输入框的数据会更新模板变化,msg被更新了
如果只绑定一次,怎么办
<div id="box">
<input type="text" v-model="msg">
<br>
<span>{{msg}}</span>
<br>
<span v-once>{{msg}}</span>
</div>
image.png
image.png
data对象msg属性的值更新时,插值处的{{msg}}的值会更新
但使用v-once指令后,则只会在刚开始更新,后来数据更新时,则不会跟着更新
如果data对象的msg的值是html
<div id="box">
<input type="text" v-model="msg">
<br>
<span>{{msg}}</span>
<br>
<span v-html="msg"></span>
</div>
image.png
<span>{{'msg'}}</span>
image.png
使用引号包裹之后,模板就无效了
网友评论