<!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{width: 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>
vue.js
原文地址：http://www.cnblogs.com/cherryblog/p/7691949.html