<!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>