Vue.js가 브라우저에서 템플릿 렌더링을 구현하는 방법

이 기사에서는 Vue.js가 브라우저에서 템플릿 렌더링을 구현하는 방법을 소개합니다. 이제 이를 공유합니다. 필요한 친구들이 참조할 수 있습니다.

렌더링: 백엔드 데이터 가져오기, 특정 따르기 규칙은 작성된 템플릿에 로드되고 브라우저에 표시되는 HTML.vue.js 출력은 프런트 엔드(즉, 브라우저 내)에서 템플릿 렌더링입니다.

프런트엔드와 백엔드 렌더링 비교

백엔드: 렌더링은 서버 측에서 수행됩니다. 서버 프로세스는 데이터베이스에서 데이터를 얻은 후 프런트엔드 템플릿 엔진을 사용하여 로드합니다. 데이터를 HTML로 생성한 후 네트워크를 통해 사용자의 브라우저로 전송한 후 브라우저에서 보이는 페이지로 구문 분석합니다.

프런트 엔드: JS를 사용하여 브라우저에서 데이터와 HTML 템플릿을 결합합니다.

프런트엔드 렌더링의 장점은 다음과 같습니다.

1. 비즈니스 분리, 백엔드는 데이터 인터페이스만 제공하면 되며 프런트엔드는 작업 중에 해당 백엔드 환경을 배포할 필요가 없습니다. 개발을 위한 백엔드 데이터를 제거하면 일부 프록시 서버 도구를 통해 원격 백엔드 렌더링을 수행할 수 있어 개발 효율성이 향상됩니다.
2. 계산량이 원래 백엔드 렌더링이 필요했던 작업을 프런트엔드로 이전하여 서버에 대한 부담을 줄입니다.

백엔드 렌더링의 장점

1. 검색 엔진에 친화적입니다.
2. 홈페이지 로딩 시간이 짧습니다. HTML은 백엔드 렌더링이 로드된 후 바로 표시되지만 프런트엔드 렌더링은 로딩이 완료된 후에도 여전히 약간의 js 렌더링 시간이 필요합니다.

조건부 렌더링

1.v-if/v-else

데이터 값을 기준으로 DOM 노드와 포함된 하위 요소를 출력할지 여부를 결정합니다.

    <p v-if="yes">yes</p> //若当前vm实例中包含data.yes = true，则模板引擎将会编译这个DOM节点，输出<p>yes</p>
    <p v-if="yes">yes</p>
    <p v-else>no</p>    //注：v-else必须紧跟v-if使用。v-if绑定的元素包含子元素则不影响和v-else的使用。

    <p v-if="yes">
        <p v-if="inner">inner</p>
        <p v-else>not inner </p>
    </p>
    <p v-else>no</p>    new Vue({
        data: {
            yes: true,
            inner :false
        }
    })

출력 결과는 다음과 같습니다.

    <p>
        <p>not inner</p>
    </p>

2.v-show

    <p v-show="show">show</p>
    <p v-show="show">show</p>
    <p v-else>hidden</p>

참고: 바인딩 값이 true인지 false인지에 관계없이 v-show 요소는 DOM에서 렌더링되고 유지됩니다. 바인딩 값을 변경하면 요소의 CSS 속성 표시만 전환됩니다. v-if 요소인 경우 페이지에 이 태그가 표시되지 않습니다.

3.v-if vs v-show

1. v-if가 전환되면 DOM 작동 수준이 변경됩니다. v-show는 스타일만 변경했습니다. 따라서 스위칭 관점에서 볼 때 v-show는 v-if보다 성능을 덜 소모합니다.

2. v-if가 전환되면 vue.js는 부분적인 컴파일/제거 프로세스를 거치게 됩니다. v-if의 템플릿에는 데이터 바인딩이나 하위 구성 요소도 포함될 수 있기 때문입니다. v-show는 여전히 일반 작업을 수행한 다음 CSS 스타일을 표시: 없음으로 설정합니다.

일반적으로 v-if의 전환 비용이 더 높고, v-show의 초기 렌더링 비용이 더 높습니다. 따라서 실제 사용 시나리오에 따라 적절한 지침을 선택해야 합니다.

목록 렌더링

v-for 명령어는 주로 목록 렌더링에 사용됩니다. v-for에 바인딩된 DOM 요소와 내부 하위 요소를 수신된 배열에 따라 반복적으로 렌더링하고 배열을 얻을 수 있습니다. 별칭을 설정하여 내부 데이터가 노드로 렌더링됩니다.

    v-for遍历数组：    <ul>
        <li v-for="item in items">
            <h3>{{ item.title}}</h3>
            <p>{{item.description}}</p>
        </li>
    </ul>
    var vm = new Vue({
        el: &#39;#app&#39;,        data: {
            items: [
                {_id:1,title:"title-1",description:"description-1"},
                {_id:2,title:"title-2",description:"description-2"},
                {_id:3,title:"title-3",description:"description-3"},
                {_id:4,title:"title-4",description:"description-4"},            ]
        }
    });

//items는 데이터의 속성 이름이고 item은 별칭입니다. item을 사용하면 현재 배열이 통과하는 각 요소를 가져올 수 있습니다.

v-for에는 현재 배열 요소의 인덱스를 출력하기 위해 v-for 명령어 내에서 호출할 수 있는 내장 $index 변수가 있습니다.
또한 인덱스에 대한 자체 별칭을 만들 수도 있습니다.

    <li v-for="(index,item) in items">{{ index }} - {{ $index }} - {{ item.title }}</li>

참고: vue.js는 배열의 기본 메서드를 데이터에 캡슐화하므로 배열이 변경되면 뷰 업데이트가 트리거될 수 있지만 뷰는 업데이트할 수 없습니다. 다음 두 가지 상황에서 트리거됩니다. 업데이트됨:
1. 인덱스를 통해 배열 요소를 직접 수정합니다. 예: vm.items[0] = {title:'title-changed'}
2. 예: vm.items .length = 0

첫 번째 경우 Vue.js는 데이터를 수정하는 동안 뷰를 업데이트하는 $set 메서드를 제공합니다. 다음과 같이 작성할 수 있습니다. 목록에서 배열의 고유 식별자 ID를 결정합니다. 추적을 통해 배열의 고유 식별자를 설정합니다. Vue.js는 렌더링 프로세스 중에 원래 객체 범위와 DOM 요소를 재사용하려고 시도합니다.

    vm.items.$set(0,{title:'title-changed'})  
 或者  vm.$set('items[0]',{title:'title-also-changed'});

v-for는 객체를 순회하며, 내장 변수인 $key를 범위 내에서 접근하거나, (key, value) 형태로 key 변수를 커스터마이징할 수 있습니다.

    <li v-for="item in items" track-by="_id"></p>

v-for는 루프 수로 사용되는 단일 정수를 허용할 수 있습니다.

    <li v-for="(key,value) in objectDemo">
        {{ key }} - {{ $key }} : {{ value }}    </li>
    var vm = new Vue({
        el:&#39;#app&#39;,        data: {
            objectDemo : {
                a:&#39;a-value&#39;,
                b:&#39;b-value&#39;,
                c:&#39;c-value&#39;
            }
        }
    })

템플릿 태그 사용

명령어를 템플릿 태그에 적용하지만 최종 렌더링 결과에는 포함되지 않습니다.

    <li v-for="n in 5">{{ n }}</li>

관련 추천:

프런트 엔드 템플릿 및 렌더링

jquery jtemplates.js 템플릿 렌더링 엔진의 자세한 사용법

템플릿 +디자인 및 구현 데이터 분리 렌더링 방법

렌더링 템플릿을 이용하여 플라스크 구현

WeChat 애플릿 - 복잡한 데이터 구조 템플릿 렌더링

위 내용은 Vue.js가 브라우저에서 템플릿 렌더링을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!