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