Cacher is the code snippet organizer for pro developers

Ana Bileşenden Alt Bileşenlere Veri Aktarma

Parent

<child-component :parentMessage="message"></child-component>

Child

<template>
  <span>Message from parent:</span><br>
  <span class="parentMessage">{{parentMessage}}</span>
</template>
 
<script>
export default {
  props: ['parentMessage'],
}
</script>

Alt Bileşenden Ana Bileşene Veri Aktarma

A) Custom Event

Parent

<span class="child-message">{{messageFromChild}}</span>
<child-component @messageFromChild="messageFromChild = $event"></child-component>

Child

<template>
  <span>Message</span>
  <input type="text" v-on:keyup="keyupEvent" v-model="message"/>
</template>
 
<script>
export default {
  methods: {
      keyupEvent() {
          this.$emit('messageFromChild',this.message);
      }
  }
}
</script>

B) Callback

Parent

<span class="child-message">{{messageFromChild}}</span>
<child-component :myCallbackFn="myCallbackFn"></child-component>

Child

<template>
  <span>Message</span>
  <input type="text" v-on:keyup="keyupEvent" v-model="message"/>
</template>

<script>
export default {
  props: {
      myCallbackFn: Function
  },
  methods: {
      keyupEvent() {
          this.myCallbackFn(this.message);
      }
  }
}
</script>

v-once, v-html, v-bind:, :, v-on:, @, v-show, v-if, v-for, v-model

<span>Message: {{ msg }}</span>
<span v-once>This will never change: {{ msg }}</span>
<span v-html="rawHtml"></span>

<button v-bind:disabled="isButtonDisabled">Button</button>
<button :disabled="isButtonDisabled">Button</button>

<a v-on:click="doSomething"> ... </a>
<a @click="doSomething"> ... </a>
<button v-on:click="counter += 1">Add 1</button>

<div v-bind:class="{ active: isActive }"></div>
<div v-bind:class="[activeClass, errorClass]"></div>
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

<div v-bind:style="styleObject"></div>
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="[baseStyles, overridingStyles]"></div>

<h1 v-show="ok">Hello!</h1>

<h1 v-if="ok">Yes</h1>
<div v-if="type === 'A'"> A </div>
<div v-else-if="type === 'B'"> B </div>
<div v-else-if="type === 'C'"> C </div>
<div v-else> Not A/B/C </div>

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>

// in ile of aynı şeyler
<li v-for="(item, index) in items" :key="item.id" v-if="!item.isComplete">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
<span v-for="n in 10">{{ n }} </span>

// Event Modifiers: .stop, .prevent, .capture, .self, .once
<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>
<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- just the modifier -->
<form v-on:submit.prevent></form>

// Key Modifiers: .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right
<input v-on:keyup.enter="submit">
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
<input @keyup.page-down="onPageDown">

// MODEL
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

<!-- `picked` is a string "a" when checked -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` is either true or false -->
<input type="checkbox" v-model="toggle">
<!-- `selected` is a string "abc" when selected -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

<input v-model.number="age" type="number">
<input v-model.trim="msg">

// COMPONENTS
<div id="example">
  <my-component></my-component>
</div>

// register
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// create a root instance
new Vue({
  el: '#example'
})

beforeCreate()
created()
beforeMount()
mounted()
beforeDestroy()
destroyed()

el, data, computed, methods, watch

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    },
    fullName: {
      // getter
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  },
  methods: {
    reverseMessage: function () {
      return this.message.split('').reverse().join('')
    }
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})