vuejs 템플릿의 용도는 무엇입니까?

vuejs 템플릿은 시스템이 사용자에게 직면해야 하는 상호 작용 형식과 UI 스타일을 기본적으로 규정하고 이 템플릿 세트를 따라 기능을 설계하고 개선합니다. 1. XSS 방지를 담당합니다. 2. 조각 재사용을 지원합니다. 3. 데이터 출력 처리를 지원합니다. 4. 동적 데이터를 지원합니다. 5. 비동기 프로세스와 긴밀하게 통합합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

Vue.js는 뷰 레이어 위에 구축된 기술이기 때문에 Vue.js의 템플릿 시스템은 매우 중요한 기능 중 하나입니다. 사용자에게 표시되는 뷰 페이지는 최고의 사용자 경험과 성능을 제공해야 하는데, Vue.js는 매우 편리하고 적용 가능한 템플릿 시스템을 제공하여 개발자들 사이에서 인기를 끌고 있습니다.

1. 템플릿 시스템이란

웹 작성에 사용되는 응용 프로그램이나 사용자 지향 응용 프로그램에는 템플릿이 있어야 합니다. 템플릿은 시스템이 사용자와 마주해야 할 상호 작용 형태와 UI 스타일을 근본적으로 규정하며, 이러한 템플릿 집합을 따라 기능을 설계하고 개선하는 것 역시 소프트웨어 개발의 기본 패턴입니다.

그러나 템플릿을 기준으로 모든 페이지에 대해 단일 페이지를 작성하는 것은 거의 불가능합니다. 시스템에는 몇 개의 정적 페이지가 있어야 할 뿐만 아니라 콘텐츠와 사용자가 증가함에 따라 페이지가 무한해져야 하기 때문입니다. 이 문제를 해결하기 위해 템플릿 엔진이라는 새로운 기술이 등장했습니다. 다양한 데이터 및 콘텐츠와 통합된 템플릿(형식)을 통해 사용자 또는 콘텐츠에 속하는 맞춤형 페이지를 얻을 수 있으며, 이는 많은 코딩을 줄일 뿐만 아니라 향후 스타일 업데이트도 크게 용이하게 합니다.

엄격한 템플릿 엔진의 정의는 템플릿 문자 + 데이터를 입력하고 렌더링된 문자열(페이지)을 얻는 것입니다. 구현 시 일반 교체부터 페이지 콘텐츠에 대한 직접 철자 문자열 입력까지 다양한 출력이 있지만 정의에 따라 다릅니다. 그들은 모두 동일합니다.

독자가 JavaScript 또는 기타 웹 개발 언어를 배운 경우 사용자 페이지를 업데이트하려면 백엔드에서 HTML 페이지 콘텐츠를 시도하거나 렌더링하고 프런트엔드 페이지로 반환해야 합니다. 그러나 innerHtml을 렌더링된 문자열로 바꾸는 것은 매우 비효율적인 업데이트 방법입니다. 이러한 템플릿 엔진은 오늘날의 순수 프런트엔드 시나리오에서는 더 이상 좋은 선택이 아닙니다.

이유는 무엇입니까? 백엔드 서버의 리소스가 제한되어 있고 사용자 수가 증가함에 따라 데이터 처리가 중첩되기 때문입니다. 사용자 작업과 페이지 렌더링은 소량의 사용자 작업을 소비합니다. 서버가 정지되지는 않지만 수천 명 이상의 사용자가 있는 경우 네트워크 요청만으로 서버가 응답하지 않거나 충돌이 발생할 수 있습니다(봄 축제 전송 참조). 그리고 페이지의 렌더링이 사용자 측(프런트 엔드)에 배치되고 사용자가 한 명뿐인 경우 수십 밀리초의 렌더링 시간은 요청 지연에 비해 전혀 병목 현상이 아니므로 사용자 경험을 향상시킬 뿐만 아니라 서버에 대한 부담도 줄여줍니다.

Vue.js는 MVVM 형식의 프레임워크입니다. Vue.js는 프런트엔드와 백엔드의 바인딩 상태를 통해 백엔드의 데이터가 업데이트되고 관련이 있음을 알 수 있습니다. 프런트 엔드의 디스플레이도 동시에 변경됩니다.

Vue.js는 사용자에게 강력한 템플릿 시스템을 제공하며, 이는 Vue.js와 같은 프런트엔드 프레임워크가 인기를 끄는 이유 중 하나입니다.

템플릿을 사용해야 하는 이유는 다음과 같습니다

1. 프론트엔드 템플릿 엔진은 XSS 방지를 담당해야 합니다.

2.

3. 엔진은 데이터 출력 처리를 지원해야 합니다.

4. 프런트엔드 템플릿 엔진은 비동기식과 긴밀하게 통합되어야 합니다.

2. Vue.js 템플릿 구문

Vue .js는 HTML 기반 템플릿 구문을 사용하므로 개발자는 DOM을 기본 Vue.js 인스턴스 데이터에 선언적으로 바인딩할 수 있습니다.

Vue.js는 개발자가 간결한 템플릿 구문을 사용하여 선언적으로 데이터를 DOM에 렌더링할 수 있도록 하는 시스템입니다.

응답 시스템과 결합하여 애플리케이션 상태가 변경되면 Vue.js는 구성 요소를 다시 렌더링하는 데 드는 최소 비용을 지능적으로 계산하고 이를 DOM 작업에 적용할 수 있습니다.

2.1. 텍스트 출력 가장 일반적인 데이터 바인딩 형식은 다음과 같이 Mustache 구문(이중 중괄호)을 사용하는 텍스트 보간입니다.

<span>Message:{{ msg }}</span>
<span v-once>这个将不会改变:{{ msg }}</span>

언제든지 바인딩된 데이터 개체의 msg 속성이 변경되면 보간점의 내용이 업데이트됩니다. 그러나

명령을 통해 개발자는 일회성 보간을 수행할 수도 있습니다.

v-once

2.2. 순수 HTML 출력이중 중괄호는 데이터를 HTML 코드 대신 일반 텍스트로 해석합니다. 실제 HTML 코드를 출력하려면 개발자는 v-html 지시어를 사용해야 합니다:

5de0f04cfff460c993d059c2702ae5a916b28748ea4df4d9c2150843fecfba68

这个div的内容将会被替换成为属性值rawHtml，直接作为HTML会忽略解析属性值中的数据绑定。开发者不能使用v-html来复合局部模板，因为Vue.js不是基于字符串的模板引擎。反之，对于用户界面（UI），组件更适合作为可重用和可组合的基本单位。

d477f9ce7bf77f53fbcf36bec1b69b7a
  dc6dce4a544fdca2df29d5ac0ea9906b
    2e1cf0710519d5598b1f0f14c36ba674直接输出的模式：8c1ecd4bb896b2264e0711597d40766c
    dc6dce4a544fdca2df29d5ac0ea9906b{{msg}}16b28748ea4df4d9c2150843fecfba68
    2e1cf0710519d5598b1f0f14c36ba674解析后输出的模式：8c1ecd4bb896b2264e0711597d40766c
    cfe05ddd0349085145840ec346b4bae816b28748ea4df4d9c2150843fecfba68
  16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
  data () {
    return {
      msg: '6d587d38616572144abecc5790e4dc77helloWorld16b28748ea4df4d9c2150843fecfba68'
    }
  }
}
2cacc6d41bbb37262a98f745aa00fbf0

2.3、JavaScript表达式

Vue.js都提供了JavaScript表达式支持。

{{number + 1}}
{{ok?'YES':'NO'}}
{{message.split('').reverse().join('')}}
<div v-bind:id="&#39;list-&#39;+ id"></div>

完整代码：

<template>
  <div>
    <label>数字1：</label>
    <input v-model="int1"/>
    <br/>
    <br/>
    <label>数字2：</label>
    <input v-model="int2"/>
    <br/>
    <label> 展示JavaScript表达式，您输入的数字加和为</label>
    {{parseInt(int1)+parseInt(int2)}}
  </div>
</template>
<script>
export default {
  data () {
    return {
      int1: 0,
      int2: 0
    }
  }
}
</script>

注意：每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1}}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if(ok) {return message }}}

2.4、指令参数

指令(Directives)是带有v-前缀的特殊属性。指令属性的值预期是单个JavaScript表达式（v-for是个例外情况）。指令的职责是当表达式的值改变是，将其产生的连带影响，响应式地作用于DOM。比如

<p v-if="seen">现在出现啦！</p>

有一些指令能够接收一个参数，在指令名称之后以冒号表示。比如v-bind:用于响应式地更新html属性：

<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 在这里href是参数，告知v-bind指令将该元素的href属性与表达式URL的值进行绑定 -->

v-on:它用于监听DOM事件：

<a v-on:click="doSomething">
<!-- 缩写 -->
<a @click="doSomething">

修饰符（Modifiers）是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault();

<form v-on:submit.prevent="onSubmit"></form>

三、计算属性和观察者属性

为了让模版的内容变得更加干净和整洁，同时不会影响代码和内容的可用性，Vue.js提出了计算属性和观察者。

3.1、计算属性

模板内的表达式非常便利，但这类表达式实际上多用于简单运算。因为在模板中放入太多的逻辑会让模板过重且难以维护。

跟它的区别还有就是有“缓存”效果，多次访问计算属性会立即返回之前的计算结果，而不是再次执行函数。
计算属性默认只有getter方法，但在需要时开发者也可以提供setter方法。

'属性':{
      get:function(){},
      set:function(newValue){
         dosomething
      }
  }

3.2、观察属性

watch:{
   '属性':function(par){
      dosomething
  }
}

相关推荐：《vue.js教程》

위 내용은 vuejs 템플릿의 용도는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!