안녕. 미친 자바스크립트!PHP 다이내믹의 전단서를 사용하세요!livewire


요즘 자바스크립트는 미친 짓이야.다만 시뮬레이터와 프로펠러를 띄우기 위해서는 코드와 복잡성을 지닌 산이 필요하다.그런 거 아니죠?
네, 제가 물어볼게요...
Livewire 인사!
안녕하세요, Livewire!
Livewire는 동적 전단과 (글에서 보듯이) vanilla PHP처럼 간단하게 쓴 Laavel용 전체 겹쳐쓰기 프레임입니다.
흥미가 붙다.
비록 네가 이전에 본 적이 없다 하더라도 코드만 보면 알 수 있다.스노클링을 하고 뛰어라.
...떠도는 낭만!
무슨 말을 하고 싶은지 알아요.시뮬레이터처럼 조금만 움직일 수 있도록 수십 MB, 수천 개의 파일을 위한 nodemodules를 다운로드하는 것은 패키지를 구축하고 만들어야 하는 시대입니다.괴롭다그런 거 아니야.
그런 사람을 위한 틀에서 일한다고 한다.
코드를 보면 알기 쉽다.
Vue.js로 카운터를 만들어 주세요.
counter.vue
<script>
    export default {
        data: {
            count: 0
        },
        methods: {
            increment() {
                this.count++
            },
            decrement() {
                this.count--
            },
        },
    }
</script>

<template>
    <div>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>

        <span>{{ count }}</span>
    </div>
</template>
응, 간단하지만 이 코드를 잘 그리려면 많은 번거로움이 필요해.
Livewire를 사용하면, 이렇게.
/app/Http/Livewire/Counter.php

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function decrement()
    {
        $this->count--;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}
/resources/views/livewire/counter.blade.php
<div>
    <button wire:click="increment">+</button>
    <button wire:click="decrement">-</button>

    <span>{{ $count }}</span>
</div>
보시오, PHP만 계수기를 실현할 수 있습니다.어때요?
뒤에는 어떻게 움직였을까?
Vue.js 및 Reactjs와 그렇게 하는 것은 변하지 않는다.
  • Vue 접수@click="increment"중점타
  • Vue 호출increment 방법으로 계수를 업데이트
  • Vue 템플릿 다시 그리기 및 DOM 업데이트
  • Livewire는 대체로 같은 일을 하지만 뒷면에서 2의 추가 절차를 밟고 있다.
  • Livewire는 wire:click="increment"에서 포인트를 받은
  • Livewire가 PHP에 aax 요청
  • PHP 호출increment 메서드, 업데이트$count
  • PHP, Blade template 다시 그리기, HTML 반환
  • Livewire 응답 수신, DOM 업데이트
  • 멋있죠?
    이것은 공식 페이지의 소개다.
    Vue.js를 모두 바꿀 수는 없지만 (aax 요청을 통해 느리고 애니메이션 등이 어려워요) 대부분의 용례에서 유효합니다.
    Laavel Blade Template 엔진을 타고 있기 때문에 Laavel 사용자에게 친절한 일이 좋습니다.
  • 문서 여기 있습니다.
  • 소스 코드 여기 있습니다.
  • 아직 사전 발표 단계라 버그나 기능 부족이 있을 수 있지만, 최근 자바스크립트에 속수무책인 라라벨러에게는 추천할 수 있을 것 같아요!

    좋은 웹페이지 즐겨찾기