<body>
<tweets>
<tweet text="This is my 1st tweet!"><tweet>
<tweet text="This is my 2nd tweet!"><tweet>
<tweet text="This is my 3rd tweet!"><tweet>
</tweets>
</body>
<!-- tweet component -->
<div class="tweet-container">
<div class="username">@johndoe</div>
<div class="tweet-text">This is my 1st tweet!</div>
</div>
<div id="app">
<span>Hello {{ name }}!</span>
</div>
new Vue({
el: '#app',
data() {
return {
name: 'John Doe'
}
}
})
<div id="app">
<span>Hello {{ name }}!</span>
</div>
<button :disabled="buttonDisabled">Click me</button>
// ...
data() {
return {
buttonDisabled: true
}
}
<a :href="url">Google</a>
// ...
data() {
return {
url: 'https://www.google.com'
}
}
<div :class="{ 'is-active': isActive }"></div>
// ...
data() {
return {
isActive: true
}
}
<div v-if="quantity === 0">Nothing</div>
<div v-else-if="quantity > 5">Some</div>
<div v-else-if="quantity > 10">Some more</div>
<div v-else>Many</div>
<ul>
<li v-for="name in names">{{ name }}</li>
</ul>
// ...
data() {
return {
names: ['John', 'Jane', 'Alice']
}
}
<ul>
<li v-for="(name, index) in names">
{{ index }} - {{ name }}
</li>
</ul>
// ...
data() {
return {
names: ['John', 'Jane', 'Alice']
}
}
<template>
<span>{{ message }}</span>
</template>
<script>
export default {
props: {
message: String
}
})
</script>
<!-- If registered as HelloWorld component -->
<HelloWorld message="Hello, World!" />
Hello, World!
<HelloWorld :message="helloMessage" />
// ...
props: {
propA: Number,
propB: [String, Number],
propC: {
type: String,
required: true
},
propD: {
type: Number,
default: 100
}
}
<div>
{{ message.split('').reverse().join('') }}
</div>
<div>
<span>{{ message }}</span>
<span>{{ reversedMessage }}</span>
</div>
// ...
data() {
return { message: 'Hello, World!' }
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
Hello, World! !dlroW ,olleH
<div>
<span>{{ message }}</span>
<span>{{ reversedMessage }}</span>
</div>
Hello, World! !dlroW ,olleH
this.reversedMessage // Ok -> !dlroW ,olleH
this.reversedMessage() // Error
<span>{{ counter }}</span>
<button @click="add">Add 1</button>
// ...
data() {
return { counter: 0 }
},
methods: {
add() {
this.counter++
}
}
<button @click="hello('John')">Hello</button>
// ...
methods: {
hello(name) {
console.log(`Hello ${name}`)
}
}
<!-- Child component template -->
<button @click="add">Add 1</button>
// Child component instance
// ...
methods: {
add() {
this.$emit('addNumber', 1)
}
}
<!-- Parent component template -->
<Child @addNumber="add"></Child>
// Parent component instance
// ...
methods: {
add(value) { // Here value is 1
this.counter += value
}
}