<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style> .active{ 100px; height: 100px; background: green; } .text{ background: red; } </style> </head> <body> <div id="app"> <p>{{message}}</p> <button @click="reverseMessage"> reverse </button> <button @click="say('what')">sayWhat</button> <p>{{ reverse | capitalize }}</p> <ul> <template v-for='site in sites'> <li> {{ site.name }} </li> <li>-------------------</li> </template> </ul> <ul> <li v-for='(value, key, index) in object'> {{ index }}. {{ key }} : {{ value }} </li> </ul> <ul> <li v-for='n in 6'> {{ n }} </li> </ul> <p>{{ ReverseMessage }}</p> <p :class="classObject"></p> <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件侦听器时使用事件捕获模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 --> <div v-on:click.self="doThat">...</div> <!-- click 事件至少触发一次,2.1.4版本新增 --> <a v-on:click.once="doThis"></a> <!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit"> <p><!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div> </div> <script> new Vue({ el: '#app', data: { message: 'Root', reverse: 'lase', sites:[ {name:'A'}, {name:'B'}, {name:'C'}, {name:'A'}, {name:'B'}, {name:'D'} ], object:{ title: '标题', about: '内容内容内容内容内容', auth: '作者' }, isActive: true, error: false }, methods: { reverseMessage: function(){ this.message = this.message.split('').reverse().join('') }, say: function(massage){ return alert(massage) } }, computed:{ ReverseMessage: function(){ return this.message.split('').reverse().join('') }, classObject: function(){ return{ active: this.isActive && !this.error, text: this.error && this.error.type === 'fatal' } } }, filters: { capitalize: function(value) { if(!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) vm.site = 'cherry www.baicu.com'; </script> </body> </html>