模板语法
条件渲染
列表渲染
//使用v-for指令
<template>
<div>
<ul>
<li v-for="item in newsList" :key="item.id">
{{item.title}}
</li>
</ul>
</div>
</template>
<script>
export default{
name: 'hello_world',
data(){
return {
newsList:[
{
id:1001,
title:"今日新闻1"
},
{
id:1001,
title:"今日新闻1"
},
{
id:1001,
title:"今日新闻1"
},
{
id:1001,
title:"今日新闻1"
},
{
id:1001,
title:"今日新闻1"
}
]
}
}
}
</script>
维护状态
也就是vue只渲染发生了变动的元素,没有变的元素就不渲染,这样比js更加的高效
但是要给vue一个提示,好跟踪每个结点的身份,用的是下面的:key这个语法
<div v-for=" xxx" :key="item.id">
事件处理
监听事件
//v-on(可以缩写成@)
<button @click="counter +=1">点击增加一个计数</button>
//点击这个按钮counter这个东西就加一
但是这个东西呢,只能触发一次,不太灵活,所以我们想着能不能,点击的时候直接触发一个函数,这样就能干很多事情了
这里的话只要在export default 里面增加一个methods:{}里面写入函数就可以了
<template>
<div>
<button @click="counter +=1">点击增加一个计数</button>
{{counter}}
<br>
<button @click="click">施鲫鱼</button>
</div>
</template>
<script>
export default{
data(){
return {
counter:0,
}
},
methods: {
click(){
console.log("杂毛是");
}
}
}
</script>