讲小项目和方法
- 购物车
- 数据的双向绑定
- 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('已经提交')
}
}
})
</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加载异步数据
<div id="app-1">
<h1>{{name}}</h1>
<p v-for="data in datalist" v-if="datalist">{{data.title}}</p>
</div>
- 将请求到的数据通过Vue加载到网页中
步骤：
1）创建Vue对象
2）通过接口请求
<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>
3. Vue计算属性
数组.reduce(function(参数1，参数2){
return 参数1+参数2
}) -- 参数1的默认是数组的第一个元素，参数2是数组中的元素
数组.reduce(function(参数1，参数2){
return 参数1+参数2.属性
},默认值) -- 参数1的值是默认值，参数2是数组中的元素
