JavaScript에서 템플릿 플러그인을 사용하는 방법은 무엇입니까?

이 장에서는 JavaScript에서 템플릿 플러그인을 사용하는 방법을 소개하고 템플릿 플러그인을 사용하는 방법을 이해합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

플러그인 소개: 템플릿은 고성능 JavaScript 템플릿 엔진입니다.

플러그인 기능:

1. 뛰어난 성능과 빠른 실행 속도(콧수염 및 tmpl의 20배 이상)

2 . 런타임 지원 디버깅은 예외 템플릿이 있는 명령문을 정확하게 찾을 수 있습니다.

3. NodeJS Express를 잘 지원합니다.

#🎜 🎜#

5. 브라우저 측에서 경로로 템플릿을 로드할 수 있습니다.

6. 사전 컴파일이 지원되며 템플릿을 매우 간소화된 js 파일로 변환할 수 있습니다. ;

#🎜 🎜# 7. 템플릿 문 소개, 참조 데이터에 접두사가 필요하지 않으며 선택할 수 있는 간결한 기본 버전이 있습니다.

8. 모든 인기 있는 버전을 지원합니다. 브라우저;

#🎜 🎜#

시작하기(두 가지 구문이 있습니다. 이 문서에서는 소개 구문을 소개합니다.)

1 ) artTemplate 템플릿은 템플릿을 저장하는 데 type="text/ html" 스크립트 태그를 사용해야 합니다(태그는 HTML입니다). 자신만의 템플릿 작성을 시작하세요

<script type="text/html"></script>

#🎜 🎜#3) 데이터를 사용하여 템플릿 렌더링# 🎜🎜#

<script id="model" type="text/html">
     <h1>{{title}}</h1>
     <ul>
         {{each list as value index}}
             <li>{{index+1}}、{{value}}</li>
         {{/each}}
     </ul>
 </script>

artTemplate 간결한 구문 소개:

1) 사용하기 전에 간결한 구문 버전을 인용해야 합니다. 예:

var data ={
     title: '热爱的游戏',
     list: ['LOL','王者农药','梦三国','魔兽争霸','其它']
 }; var html = template('model',data); document.getElementById('box').innerHTML = html

2) 표현식: {{ 및 }} 기호로 묶인 문은 템플릿 표현식입니다.

3) 출력 표현식:

내용 인코딩 및 출력: {{ title }}

인코딩되지 않은 출력 : {{ #title }}

<script src="template.js"></script>

4) 조건식

// 假如有这样一段数据，title 内出现了标签  var data ={
      title: &#39;<i>热爱的</i>游戏&#39;,
      list: [&#39;LOL&#39;,&#39;王者农药&#39;,&#39;梦三国&#39;,&#39;魔兽争霸&#39;,&#39;其它&#39;]
 }; {{ title }}  // 显示内容为：<i>热爱的</i>游戏 {{ #title }} // 显示内容为：热爱的游戏

5) 순회식

<script id="model" type="text/html">
    <h1>{{ title }}</h1>
    <ul>　　　　　// 判断条件自定
        {{if list.length>0}}
            {{each list as value index}}
                <li>{{index+1}}、{{value}}</li>
            {{/each}}
        {{else}}
            <p>没有内容</p>
        {{/if}}
    </ul>
</script>

#🎜🎜 #

artTemplate 메소드:

template 함수에는 두 개의 매개변수 값이 있습니다.

첫 번째 매개변수는 컴파일해야 하는 템플릿을 나타냅니다(템플릿 ID 입력)

두 번째 매개변수는 템플릿에 채워야 하는 데이터이며 반환 값은 컴파일된 HTML 문자열입니다. 🎜## 🎜🎜#코드 예:

{{each list as value index}}
    <li>{{index+1}}、{{value}}</li>
{{/each}}// 也可以被简写为
{{each list}}
    <li>{{$index+1}}、{{$value}}</li>
{{/each}}

위 내용은 JavaScript에서 템플릿 플러그인을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!