cheatsheets

Объект приложения Vue

← Назад

---

<script setup>
  const vueApp = Vue.createApp({})
  vueApp.mount('#app')
</script>

<template>
  <div id="app"></div>
</template>

Данные приложения

<script setup>
  Vue.createApp({
    data() {
      return {
        name: 'Tom',
        age: 36
      }
    }
  }).mount('#app')
</script>

<template>
  <div id="app">
    <p>Name: </p>
    <p>Age: </p>
  </div>
</template>

<script setup>
  const tom = {name: 'Tom', age: 36}
  const vueApp = Vue.createApp({
    data() {
      return tom
    },
    mounted() {
      // получение данных
      console.log(this.age)    // 36

      // изменение данных
      this.age = 25;
      console.log(this.age)    // 25
    }
  })

  vueApp.mount('#app')
</script>

<template>
  <div id="app">
    <p>Name: </p>
    <p>Age: </p>
  </div>
</template>

Методы

<script setup>
  Vue.createApp({
    data() {
      return {name: 'Tom', age: 36}
    },
    methods: {
      welcome() {
        return 'Welcome ' + this.name
      },
      displayUser() {
        return 'UserInfo: name ' + this.name + '  age ' + this.age
      }
    }
  }).mount('#app')
</script>

<template>
  <div id="app">
    <p></p>
    <p></p>
  </div>
</template>

<script setup>
  const app = Vue.createApp({
    data() {
      return {name: 'Tom', age: 36}
    },
    methods: {
      incrementAge() {
        this.age++
      },
      incrementAgeThreeTimes() {
        this.incrementAge()
        this.incrementAge()
        this.incrementAge()
      }
    }
  }).mount('#app')

  app.incrementAgeTreeTimes()
</script>

<template>
  <div id="app">
    <p>Name: </p>
    <p>Age: </p>
  </div>
</template>

---

← Назад