vue学习日记Day6：
补充一个复杂遍历，和event事件
复杂遍历：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<style type="text/css">
.left{
width: 200px;
height: 370px;
border: solid 1px gray;
background-color: antiquewhite;
}
h2{
background-color: aqua;
}
h3{
background-color: aqua;
}
li{
list-style: none;
padding: 0;
}
</style>
</head>
<body>
<div id="app">
<div class="left">
<h2>全部课程</h2>
<div v-for="li in productlist">
<h3>{{li.title}}</h3>
<ul>
<li v-for="pp in li.list">{{pp.name}}</li>
</ul>
<hr v-if="!li.last">
</div>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
productlist:{
pc:{
title:'前端技术',
list: [
{
name:'html+css',
url:'http://html.com',
},
{
name:'JavaScript',
url:'http://JavaScript.com',
},
{
name:'Vue/React',
url:'http://Vue.com',
},
{
name:'node.js',
url:'http://node.com',
},
]
},
app:{
title:'后端技术',
last:true,
list: [
{
name:'java',
url:'http://java.com',
},
{
name:'php',
url:'http://php.com',
},
{
name:'express',
url:'http://express.com',
},
{
name:'python',
url:'http://python.com',
},
]
},
}
},
})
</script>
</body>
</html>
event事件：
event参数的作用是允许函数访问mouseevent对象的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div id="app">
{{count}}
<button type="button" @click="jishu">计数</button>
<button type="button" @click="say('pjx')">说</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
count:0,
},
methods:{
jishu(event){
this.count++;
console.log(event);//event参数的作用是允许函数访问mouseevent对象的属性
console.log(event.clientX);
alert(event.target.tagName);
},
say(name){
alert(name+'说：你好啊！')
this.count++;
}
}
})
</script>
</body>
</html>
显示出了属性名button，在console中还有坐标，还有mouseevent属性
总结：
最近在忙一些家里的事情，没有学习，中间空了两天。