1. vue事件修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
#div1{
width: 400px;
height: 400px;
background-color: red;
}
#div2{
width: 200px;
height: 200px;
background-color: green;
}
#div3{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<!--1.stop修饰符
v-on:事件名.stop - 捕获指定标签上的指定事件(阻止事件传递给父标签)
-->
<!--<div id="div1" v-on:click.stop="action1">
<div id="div2" v-on:click.stop="action2">
<div id="div3" v-on:click.stop="action3">
</div>
</div>
</div>
<script type="text/javascript">
var app1 = new Vue({
el:'#div1',
methods:{
action1:function(){
alert('div1被点击')
},
action2:function(){
alert('div2被点击')
},
action3:function(){
alert('div3被点击')
}
}
})
</script>-->
<!--2.表单提交阻止页面重载
在form标签中设置: v-on:submit.prevent='方法属性名'
-->
<!--<form action="" method="get" id="app-2" v-on:submit.prevent="submitAction">
<input type="" name="username" id="" value="" />
<input type="password" name="password" id="" value="" />
<input type="radio" name="sex" id="" value="" />男
<input type="radio" name="sex" id="" value="" />女
<input type="submit" value="提交"/>
</form>
<script type="text/javascript">
var app2 = new Vue({
el:'#app-2',
methods:{
submitAction:function(){
alert('已经提交')
}
}
})
</script>-->
<div id="app-3">
<p v-for="goods in goodslist">{{goods}}</p>
</div>
<script type="text/javascript">
var datalist = {'goodslist':[
'元素1','元素2', '元素3', '元素4'
]}
var app3 = new Vue({
el:'#app-3',
data:datalist
})
</script>
</body>
</html>
2. vue加载异步数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-1">
<h1>{{name}}</h1>
<p v-for="data in datalist" v-if="datalist">{{data.title}}</p>
</div>
<!--1.将请求到的数据通过Vue加载到网页中
1)
-->
<script type="text/javascript">
//0)创建Vue对象
var app1 = new Vue({
el:'#app-1',
data: {
datalist: [],
name: 'abc'
}
})
//1)通过接口请求
$.ajax({
type:"get",
url:"http://rap2api.taobao.org/app/mock/177073/houseList",
async:true,
success:function(result){
//2）数据请求成功将请求到的数据关联到Vue对象
console.log(result)
app1.datalist = result.datalist
}
});
</script>
</body>
</html>
3. 购物车
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="css/购物车.css"/>
</head>
<body>
<div id="app-1">
<table border="0" cellspacing="1" bgcolor="#000000">
<!--表头-->
<tr class="header">
<td class="td1"><input type="checkbox" name="" id="check-all" value="" /><label for="check-all">全选</label></td>
<td class="td2">商品</td>
<td class="td3">单价</td>
<td class="td4">数量</td>
<td class="td5">小计</td>
<td class="td6">操作</td>
</tr>
<!--商品内容-->
<tr v-for="goods in goodsData" class="content" v-if="goods.count>0">
<!--商品第一列-->
<td class="ctd1"><input type="checkbox" name="" id="" value="" /></td>
<!--商品图片和名字-->
<td class="box1">
<div class="box2">
<img v-bind:class="imageClass" v-bind:src="goods.image"/>
<p class="title">{{goods.title}}</p>
</div>
</td>
<!--单价-->
<td class="center">
{{goods.price}}
</td>
<!--数量-->
<td class="center">
<button v-on:click="goods.count -= 1; if(goods.count<1){goods.count=1}">-</button>
<input type="" name="" class="count" v-model="goods.count" />
<button v-on:click="goods.count += 1">+</button>
</td>
<!--总计-->
<td class="center">
{{goods.price*goods.count}}
</td>
<td class="center">
<button v-on:click="goods.count=0">删除</button>
</td>
</tr>
</table>
</div>
<!--请求数据-->
<script type="text/javascript">
var app = new Vue({
el:'#app-1',
data:{
goodsData:[],
imageClass:'image'
}
})
$.ajax({
type:"get",
url:"http://rap2api.taobao.org/app/mock/177073/getGoodsList",
async:true,
success:function(result){
app.goodsData = result.goodsData
console.log(result.goodsData)
}
});
</script>
</body>
</html>
4. 购物车的数据双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-1">
<!--全选按钮-->
<input type="checkbox" name="" id="" value="" v-on:change="checkedAll"/>全选<br />
<div id="" v-for="goods in dataList" v-if="goods.count > 0">
<!--单选-->
<input v-bind:checked="checked" type="checkbox" name="" id="" value="" v-on:change="if(goods.isChecked==0){goods.isChecked=1}else{goods.isChecked=0}" />
<!--商品名和价格-->
<font>{{goods.name}}</font>
<font>{{goods.price}}</font><br />
<!--减商品数量-->
<button v-on:click="goods.count--;if(goods.count < 1){goods.count=1}">-</button>
<input type="" name="" id="" v-model="goods.count" />
<!--加商品数量-->
<button v-on:click="goods.count++; if(goods.count > 10){goods.count=10}">+</button><br />
<!--总计-->
<font>{{goods.price*goods.count}}</font><br />
<!--删除-->
<button v-on:click="goods.count=0">删除</button>
<br /> <br />
<p>总价:{{total}} </p>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app-1',
data:{
dataList:[
{name:'苹果',price:120, count:2, isChecked:0},
{name:'大米',price:60, count:3, isChecked:0},
{name:'衣服',price:220, count:1, isChecked:0},
{name:'鞋子',price:300, count:1, isChecked:0}
],
checked: ''
},
computed:{
//计算总价
total: function(){
return this.dataList.reduce(function(to, item){
return to+item.price*item.count*item.isChecked
},0)
}
},
methods:{
//全选事件
checkedAll:function(){
if(this.checked == ''){
this.checked = 'checked'
this.dataList.forEach(function(item,x,arr){
item.isChecked = 1
})
}else{
this.checked = ''
this.dataList.forEach(function(item,x,arr){
item.isChecked = 0
})
}
}
}
})
</script>
</body>
</html>
5. vue计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<p>{{reverse}}</p>
</div>
<script type="text/javascript">
/*
1)求数组中元素的和: 针对纯数字数字
数组.reduce(function(参数1，参数2){
return 参数1+参数2
}) -- 参数1的默认是数组的第一个元素，参数2是数组中的元素
2)求数组中对象的某个属性的和
数组.reduce(function(参数1，参数2){
return 参数1+参数2.属性
},默认值) -- 参数1的值是默认值，参数2是数组中的元素
*/
//求每个元素的和
var numbers = [1, 2, 3, 4, 5]
reslut = numbers.reduce(function(total, item){
return total + item
})
console.log(reslut)
//求元素中对象属性的和
var numbers2 = [
{price: 1, count:23},
{price: 10, count:10},
{price: 20, count:4},
]
reslut2 = numbers2.reduce(function(total, item){
return total + (item.price*item.count)
},0)
console.log('总价:',reslut2)
var app = new Vue({
el:'#app',
data:{
message: 'Hello Vue'
},
//计算属性
computed:{
reverse: function(){
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
