1、计算属性computed和methods 的区别在于computed 优先使用缓存，methods实时更新，如果message变更，其他两个值也会变更。
<body>
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage1() }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('');
}
},
methods:{
reversedMessage1: function () {
return this.message.split('').reverse().join('');
}
}
})
</script>
2、上面的例子是反转字段/方法依赖message,所以message一变更，其他两个也会变更。那如果反过来呢，那就要用到setter了。
<body>
<div id="app">
<div>{{ hello }}</div>
<div>{{ vu }}</div>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
hello: '',
vu:''
},
computed: {
fullUrl:{
get: function () {
return this.hello+' '+this.vu;
},
set:function(newvalue){
var str = newvalue.split(' ');
this.hello = str[0];
this.vu = str[str.length - 1]
}
}
}
});
app.fullUrl='hello vue';
</script>
3、v-on事件绑定
<body>
<div id="app">
<button v-on:click="showname('vue')">{{name}} {{time}}</button>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
name: '',
time:0
},
methods: {
showname:function(message){
this.name=message;
this.time=this.time+1;
}
}
});
</script>
按键修饰符 v-on:keyup.13 捕捉keycode为13的按键，vue提供了一些常用的按键别名
<!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit"> .enter .tab .delete .esc .space .up .down .left .right .ctrl .alt .shift .meta