講小項目和方法
- 購物車
- 數(shù)據(jù)的雙向綁定
- Vue計算屬性
Vue文件
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
1. Vue事件修飾符
- stop修飾符
v-on:事件名.stop - 捕獲指定標簽上的指定事件(阻止事件傳遞給父標簽)
<html>
<body>
<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>
</body>
</html>
- 表單提交阻止頁面重載
在form標簽中設置: v-on:submit.prevent='方法屬性名'
<html>
<body>
<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ù)
<div id="app-1">
<h1>{{name}}</h1>
<p v-for="data in datalist" v-if="datalist">{{data.title}}</p>
</div>
- 將請求到的數(shù)據(jù)通過Vue加載到網(wǎng)頁中
步驟：
1）創(chuàng)建Vue對象
2）通過接口請求
<script type="text/javascript">
//0)創(chuàng)建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）數(shù)據(jù)請求成功將請求到的數(shù)據(jù)關聯(lián)到Vue對象
console.log(result)
app1.datalist = result.datalist
}
});
</script>
3. Vue計算屬性
- 求數(shù)組中元素的和: 針對純數(shù)字數(shù)字
數(shù)組.reduce(function(參數(shù)1，參數(shù)2){
return 參數(shù)1+參數(shù)2
}) -- 參數(shù)1的默認是數(shù)組的第一個元素础废，參數(shù)2是數(shù)組中的元素
數(shù)組.reduce(function(參數(shù)1柔逼，參數(shù)2){
return 參數(shù)1+參數(shù)2.屬性
},默認值) -- 參數(shù)1的值是默認值讯检，參數(shù)2是數(shù)組中的元素
