ホームページ > 記事 > ウェブフロントエンド > vuejs テンプレートの用途は何ですか?

vuejs テンプレートの用途は何ですか?

青灯夜游オリジナル: 2021-09-18 18:49:461674ブラウズ

vuejs テンプレートは、システムがユーザーに対峙すべきインタラクションフォームと UI スタイルを基本的に規定し、この一連のテンプレートに従って機能を設計および改善します。その機能は次のとおりです: 1. XSS の防止を担当します。 . フラグメントの再利用をサポートする; 3. データ出力の処理をサポートする; 4. 動的データをサポートする; 5. 非同期プロセスと緊密に統合する。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

Vue.js はビュー層上に構築される技術であるため、Vue.js のテンプレートシステムは非常に重要な機能の 1 つです。ユーザーに表示されるビューページには、最高のユーザーエクスペリエンスとパフォーマンスを提供する必要があり、Vue.js は非常に便利で適用可能なテンプレートシステムを提供するため、開発者の間で人気があり、人気があります。

1. テンプレートシステムとは

Web ライティングやユーザー指向に使用されるアプリケーションにはテンプレートが必要です。テンプレートとは、システムがユーザーに対峙すべき対話形式やUIのスタイルを基本的に規定しており、これに沿って設計や機能改善を行うことがソフトウェア開発の基本パターンでもあります。

しかし、テンプレートに基づいてすべてのページを 1 つのページで記述することはほぼ不可能です。システムには少数の静的ページがあるだけでなく、コンテンツとユーザーが増加するにつれて、そのページは無限になる必要があるためです。この問題を解決するために、テンプレートエンジンという新しいテクノロジーが登場しました。さまざまなデータとコンテンツに加えて、統一されたテンプレート (形式) を通じて、ユーザーまたはコンテンツに属するカスタマイズされたページを取得でき、これにより、多くのコーディングが削減されるだけでなく、将来のスタイルの更新が大幅に容易になります。

厳密なテンプレートエンジンの定義は、テンプレート文字データを入力し、レンダリングされた文字列(ページ)を取得することですが、実装においては定期的な置換からスペル文字列の直接入力、AST解析まで様々な方法があります。出力ページのコンテンツですが、定義はすべて似ています。

読者が JavaScript またはその他の Web 開発言語を学習している場合は、ユーザーページを更新するために、バックエンドで HTML ページのコンテンツを試行またはレンダリングし、それをフロントエンドページに返す必要があります。ただし、innerHtml をレンダリングされた文字列に置き換えるのは、非常に非効率的な更新方法です。このようなテンプレートエンジンは、今日の純粋なフロントエンドシナリオではもはや良い選択ではありません。

これはなぜですか? バックエンドサーバーのリソースは限られており、ユーザーの数が増えるとデータの処理が重なり、ユーザーとページのレンダリングのすべての操作でサーバーが消費されるためです。少数のユーザー操作ではサーバーがフリーズすることはありませんが、ユーザーが数千人以上になると、ネットワーク要求だけでサーバーが応答しなくなったり、クラッシュしたりする可能性があります (春節の旅行を参照)。また、ページのレンダリングがユーザー側 (フロントエンド) に配置され、ユーザーが 1 人だけの場合、リクエストの遅延に比べれば、数十ミリ秒のレンダリング時間はまったくボトルネックではないため、ユーザーエクスペリエンスを向上させるだけでなく、サーバーへの負荷も軽減します。

Vue.js は MVVM 型フレームワークです。Vue.js はデータ駆動型のビューバインディングエンジンを使用します。フロントエンドとバックエンドのバインド状態を通じて、バックエンドデータが更新されることがわかります。同時にフロントエンド関連の表示も変わります。

Vue.js はユーザーに非常に強力なテンプレートシステムを提供します。これが、Vue.js などのフロントエンドフレームワークが非常に人気がある理由の 1 つです。

テンプレートを使用する必要がある理由は次のとおりです。

1. フロントエンドテンプレートエンジンは、 XSS;

2. フロントエンドテンプレートエンジンはフラグメントの再利用をサポートする必要があります;

3. フロントエンドテンプレートエンジンはデータ出力の処理をサポートする必要があります;

4. フロントエンドテンプレートエンジンは動的データをサポートする必要があります;

5. フロントエンドテンプレートエンジンは非同期プロセスと緊密に統合される必要があります;

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 コマンドを使用して 1 回限りの補間を実行することもできます。

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?&#39;YES&#39;:&#39;NO&#39;}}
{{message.split(&#39;&#39;).reverse().join(&#39;&#39;)}}
<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方法。

&#39;属性&#39;:{
      get:function(){},
      set:function(newValue){
         dosomething
      }
  }

3.2、观察属性

watch:{
   &#39;属性&#39;:function(par){
      dosomething
  }
}

vuejs テンプレートの用途は何ですか?

1. テンプレート システムとは

2 . Vue.js テンプレート構文

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

関連記事

1. テンプレートシステムとは