事件处理
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
<div id=app>
<button v-on:click='greet'></button>
</div>
var app = new Vue({
el:'#app',
data:{
name:'holle Vue'
},
//在 methods 中定义方法
methods:{
greet:function(event){
//this在方法中指向Vue实例
alert(this.name + '!')
if (event) {
alert(event.target.tagName)
}
}
})
列表渲染
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<div id='app'>
<ul>
<li v-for="blog in blogs">{{blog}}</li>
</ul>
<ul>
<li v-for="stu in stus">姓名：{{stu.name}} 年龄：{{stu.age}}</li>
</ul>
</div>
var app = new Vue({
el:"#app",
data:{
blogs:['三国演习','西游记','老夫子'],
stus:[
{name:'小明',age:18},
{name:'小张',age:11},
{name:'小王',age:12}
]
}
})
从服务器中获取数据
<body>
<div id="app">
<ul>
<li v-for="item in books">{{item.title}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
books: [],
},
created: function () {
fetch('data.json')
.then((res) => {
return res.json()
})
.then((res) => {
this.books = res
})
},
})
</script>