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 - 捕獲指定標(biāo)簽上的指定事件(阻止事件傳遞給父標(biāo)簽)
-->
<!--<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被點(diǎn)擊')
},
action2:function(){
alert('div2被點(diǎn)擊')
},
action3:function(){
alert('div3被點(diǎn)擊')
}
}
})
</script>-->
<!--2.表單提交阻止頁面重載
在form標(biāo)簽中設(shè)置: 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('已經(jīng)提交')
}
}
})
</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加載異步數(shù)據(jù)
<!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.將請(qǐng)求到的數(shù)據(jù)通過Vue加載到網(wǎng)頁中
1)
-->
<script type="text/javascript">
//0)創(chuàng)建Vue對(duì)象
var app1 = new Vue({
el:'#app-1',
data: {
datalist: [],
name: 'abc'
}
})
//1)通過接口請(qǐng)求
$.ajax({
type:"get",
url:"http://rap2api.taobao.org/app/mock/177073/houseList",
async:true,
success:function(result){
//2）數(shù)據(jù)請(qǐng)求成功將請(qǐng)求到的數(shù)據(jù)關(guān)聯(lián)到Vue對(duì)象
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">單價(jià)</td>
<td class="td4">數(shù)量</td>
<td class="td5">小計(jì)</td>
<td class="td6">操作</td>
</tr>
<!--商品內(nèi)容-->
<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>
<!--單價(jià)-->
<td class="center">
{{goods.price}}
</td>
<!--數(shù)量-->
<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>
<!--總計(jì)-->
<td class="center">
{{goods.price*goods.count}}
</td>
<td class="center">
<button v-on:click="goods.count=0">刪除</button>
</td>
</tr>
</table>
</div>
<!--請(qǐng)求數(shù)據(jù)-->
<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. 購物車的數(shù)據(jù)雙向綁定
<!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}" />
<!--商品名和價(jià)格-->
<font>{{goods.name}}</font>
<font>{{goods.price}}</font><br />
<!--減商品數(shù)量-->
<button v-on:click="goods.count--;if(goods.count < 1){goods.count=1}">-</button>
<input type="" name="" id="" v-model="goods.count" />
<!--加商品數(shù)量-->
<button v-on:click="goods.count++; if(goods.count > 10){goods.count=10}">+</button><br />
<!--總計(jì)-->
<font>{{goods.price*goods.count}}</font><br />
<!--刪除-->
<button v-on:click="goods.count=0">刪除</button>
<br /> <br />
<p>總價(jià):{{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:{
//計(jì)算總價(jià)
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計(jì)算屬性
<!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)求數(shù)組中元素的和: 針對(duì)純數(shù)字?jǐn)?shù)字
數(shù)組.reduce(function(參數(shù)1，參數(shù)2){
return 參數(shù)1+參數(shù)2
}) -- 參數(shù)1的默認(rèn)是數(shù)組的第一個(gè)元素忙芒，參數(shù)2是數(shù)組中的元素
2)求數(shù)組中對(duì)象的某個(gè)屬性的和
數(shù)組.reduce(function(參數(shù)1，參數(shù)2){
return 參數(shù)1+參數(shù)2.屬性
},默認(rèn)值) -- 參數(shù)1的值是默認(rèn)值宽堆，參數(shù)2是數(shù)組中的元素
*/
//求每個(gè)元素的和
var numbers = [1, 2, 3, 4, 5]
reslut = numbers.reduce(function(total, item){
return total + item
})
console.log(reslut)
//求元素中對(duì)象屬性的和
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('總價(jià):',reslut2)
var app = new Vue({
el:'#app',
data:{
message: 'Hello Vue'
},
//計(jì)算屬性
computed:{
reverse: function(){
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
