事件绑定

<template><div><div><input type="button" value="功德+1" v-on:click="m1"></div><div><input type="button" value="功德-1" @click="m2"></div><div>{{ count }}</div></div>
</template>
<script>
const options = {data () {return{count : 0}},methods :{m1(){this.count ++;},m2(){this.count --;} }
}
export default options
</script>

你可以看到事件绑定我给了两种方式，其中第二种时缩写方式

简写方式：可以把 v-on: 替换为 @
在 methods 方法中的 this 代表的是 data 函数返回的数据对象

双向绑定

<template><div><div><label for="">请输入姓名</label><input type="text" v-model="name"></div><div><label for="">请输入年龄</label><input type="text" v-model="age"></div><div><label for="">请选择性别</label>男 <input type="radio" value="男" v-model="sex">女 <input type="radio" value="女" v-model="sex"></div><div><label for="">请选择爱好</label>游泳 <input type="checkbox" value="游泳" v-model="fav">打球 <input type="checkbox" value="打球" v-model="fav">健身 <input type="checkbox" value="健身" v-model="fav"></div><div><select v-model="hob"><option value="西瓜">西瓜</option><option value="芒果">芒果</option><option value="香蕉">香蕉</option></select></div></div>
</template>
<script>
const options = {data() {return { name: '', age: null, sex:'男' , fav:['打球'],hob:'西瓜'};},methods: {}
};
export default options;
</script>

用 v-model 实现双向绑定，即
- javascript 数据可以同步到表单标签
- 反过来用户在表单标签输入的新值也会同步到 javascript 这边
双向绑定只适用于表单这种带【输入】功能的标签，其它标签的数据绑定，单向就足够了
复选框这种标签，双向绑定的 javascript 数据类型一般用数组

计算属性

<template><div><div><input type="text" v-model="lastName"></div><div><input type="text" v-model="firstName"></div><div><h2>{{ fullName }}</h2></div><div><h2>{{ fullName }}</h2></div><div><h2>{{ fullName }}</h2></div></div></template>
<script>const options = {data(){return {firstName:'',lastName:''}},/* methods: {fullName() {console.log('进入了 fullName')return this.lastName + this.firstName;}},*/// 自带缓存computed : {fullName(){console.log('进入了')return this.lastName+this.firstName;}}};
export default options;
</script>