一、v-on：事件监听
- v-on基本介绍：
作用：绑定事件监听器
语法：v-on：click=“function”
语法糖：@click=“function”
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/vue.js"></script>
<script>
window.onload=function () {
let app = new Vue({
el: "#app",
data:{
count:0
},
methods:{
add(){
console.log("add被调用")
this.count++
},
sub(){
console.log("sub被调用")
this.count--
}
}
})
}
</script>
</head>
<body>
<div id="app">
<span>{{count}}</span>
<button @click="add">+</button>
<button @click="sub">-</button>
</div>
</body>
2. v-on参数传值问题
情况一：如果方法不需要额外的参数，则方法后的（）可以省略，例如写成@click=“add”
情况二：如果方法需要额外的参数时，并省略了方法后的（），则默认将原生事件event传入进方法中
情况三：如果方法同时需要额外参数和原生事件时，要写成@click=“fun（index，$event）”
- v-on修饰符介绍
stop:阻止冒泡事件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/vue.js"></script>
<script>
window.onload=function () {
let app = new Vue({
el: "#app",
data:{
count:0
},
methods:{
btnFun(){
console.log("按下了button")
},
divFun(){
console.log("按下了div")
}
}
})
}
</script>
</head>
<body>
<div id="app">
<div @click="divFun">
<button @click="btnFun"></button>
</div>
</div>
</body>
</html>
不使用stop时候，会出现这样的结果：
使用stop，修改成这样：
<div id="app">
<div @click="divFun">
<button @click.stop="btnFun"></button>
</div>
</div>
会阻止div点击事件冒泡:
prevent:阻止默认行为，比如说submit按钮，如果绑定上这个修饰符，那么点击的时候就会阻止它发生页面跳转。
二、v-if 和 v-else条件判断
如果v-if=“true”，则进行对元素及其子元素进行渲染，如果是v-if=“false”，则元素及其子元素不会进行渲染，也就是根本不会有对应的标签出现在DOM里面。
v-else和v-if的结果相反。
例子：
<span v-if="false">华为</span>
<span v-else>小米</span>
<span v-if="true">苹果</span>
<span v-else>三星</span>
三、v-show条件判断
v-show和v-if的作用很相似，区别在于当v-show=“false”时候，元素是被隐藏起来的，加了一个display：none，会存在于DOM中
四、v-for遍历
v-for遍历数组和对象：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/vue.js"></script>
<script>
window.onload=function () {
let app = new Vue({
el: "#app",
data:{
movies:['变形金刚','终结者','侏罗纪公园','星球大战'],
customer:{name:"张三",age:22,income:"20w"}
}
})
}
</script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
<ul>
<li v-for="(item,index) in movies">{{index}} {{item}}</li>
</ul>
<ul>
<li v-for="value in customer">{{value}}</li>
</ul>
<ul>
<li v-for="(value,key) in customer">{{key}} {{value}}</li>
</ul>
</div>
</body>
</html>
需要注意的是
- 在对对象进行遍历的时候，默认遍历的是对象的value值而不是键值
- 通过数组索引值修改后的数据不能被响应式的渲染在DOM上
五、购物车案例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/vue.js"></script>
<style>
table{
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
}
th,td{
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
th{
background: deepskyblue;
color: cyan;
font-size: 14px;
}
</style>
<script>
window.onload=function () {
let app = new Vue({
el: "#app",
data:{
isRemove:true,
books:[{id:1,name:"数据结构与算法",date:"2006-9",price:65,count:0},
{id:2,name:"Java程序与设计",date:"2008-11",price:75,count:0},
{id:3,name:"HeadFirst Html和CSS",date:"2007-9",price:67,count:0},
{id:4,name:"JavaScript高级程序设计",date:"2004-9",price:92,count:0},
{id:5,name:"CSS解密",date:"2002-8",price:80,count:0}]
},
methods:{
add(index){
this.books[index].count++
},
sub(index){
if (this.books[index].count>0){this.books[index].count--}
},
removeFun(index){
this.books.splice(index,1);
if (this.books.length==0){
this.isRemove = false;
}
}
},
computed:{
totalPrice(){
let x=0;
for (let i =0; i<this.books.length;i++){
x += this.books[i].count*this.books[i].price
}
return x;
}
}
})
}
</script>
</head>
<body>
<div id="app">
<div v-if="isRemove">
<table>
<thead>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price}}</td>
<td><button @click="sub(index)">-</button>{{item.count}}<button @click="add(index)">+</button></td>
<td><button @click="removeFun(index)" >移除</button></td>
</tr>
<span>总价格{{totalPrice}}</span>
</tbody>
</table>
</div>
</div>
</body>
</html>
**
**