在学习了教程（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">
</div>
<script>
new Vue({
el: "#box",
data: {
url:'https://www.baidu.com/img/bd_logo1.png'
},
methods: {
}
})
</script>
会报错，没有效果
使用v-bind:指令绑定属性
“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
使用引号包裹之后，模板就无效了
网友评论