<template>
<div id="app">
<h1>{{msg}}</h1>
<img :src="src" alt=""/>
<button v-on:click="fun1()">点击尝试方法一！</button>
<button @click="fun2()">点击尝试方法二！</button>
<button @click="getMsg()">点击尝试获取数据！</button>
<button @click="setMsg()">点击尝试改变数据！</button>
<button @click="Request()">点击请求数据</button>
<ol>
<li v-for="item in list">{{item}}</li>
</ol>
<button @click="parameIn(111)">点击进行方法传参</button>
<button @click="eventIn2($event)">点击传入事件对象</button>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
data (){
return{
msg:'你好',
src:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2476775726,1200843185&fm=27&gp=0.jpg',
list:['111','222'],
}
},
methods:{//用于放置自定义方法
fun1(){
alert('我是方法绑定的第一种方式！');
},fun2(){
alert('我是方法绑定的第二种方式！');
},getMsg(){
alert(this.msg);
},setMsg(){
this.msg='我是改编后的数据';
},Request(){
for(let i=0;i<5;i++){
this.list.push('这是第'+i+"条数据");
}
},parameIn(val){
this.msg=val;
},eventIn2(e){
console.log(e);
// (e.srcElement表示获取当前事件的DOM节点)
e.srcElement.style.color='red';
}
}
}
</script>
<style>
app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.red{
color:red;
}
.blue{
color:blue;
}
.box{
background: aqua;
width: 100px;
height: 100px;
}
</style>
